/* ============================================================================
   MUNDIAL 2026 — El Adriano landing
   Hereda tokens (--background/--foreground/--accent) y fuentes
   (--font-serif = futuraHeavy display, --font-sans = futuraBook) del bundle.
   Estilos propios, mobile-first.
============================================================================ */

:root { --m-max: 1080px; --m-pad: 1.5rem; --live: #e23744; }

.m-wrap { position: relative; z-index: 20; max-width: var(--m-max); margin: 0 auto; padding: 0 var(--m-pad); }
.m-section { position: relative; z-index: 20; padding: clamp(4rem, 10vw, 7rem) 0; }
.m-section + .m-section { border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }

.m-kicker { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; font-weight: 700; opacity: .55; margin: 0 0 1rem; }
.m-h2 { font-family: var(--font-serif); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .6rem; }
.m-sub { font-family: var(--font-sans); font-size: .95rem; opacity: .7; margin: 0 0 2.5rem; max-width: 46ch; }

/* ---------- HERO ---------- */
.m-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 7rem 1rem 4rem; z-index: 20; }
.m-hero__bgimg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.m-hero__bgimg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: saturate(1.05); }
.m-hero__bgimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, var(--background) 92%); }
.dark .m-hero__bgimg img { opacity: .24; }
.m-hero__kicker { font-family: var(--font-sans); font-size: .7rem; letter-spacing: 1em; text-transform: uppercase; font-weight: 700; opacity: .8; margin: 0 0 1.6rem; padding-left: 1em; }
.m-hero__title { font-family: var(--font-serif); font-weight: 900; letter-spacing: -.04em; line-height: .86; font-size: clamp(2.9rem, 15vw, 9.5rem); margin: 0; text-transform: uppercase; -webkit-text-stroke: 1.5px currentColor; }
@media (min-width: 768px) { .m-hero__title { -webkit-text-stroke: 3px currentColor; } }
/* Solo las líneas (hijos directos) van en bloque; el punto queda inline pegado */
.m-hero__title > span { display: block; white-space: nowrap; }
.m-hero__title .dot { color: var(--accent); -webkit-text-stroke: 0; }
.m-hero__rule { width: 64px; height: 2px; background: var(--accent); margin: 2rem auto; opacity: .8; }
/* H1 SEO real pero discreto bajo el título display */
.m-hero__h1 { font-family: var(--font-sans); font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; margin: 0 0 1rem; opacity: .92; }
.m-hero__lead { font-family: var(--font-sans); font-size: clamp(.95rem, 2vw, 1.1rem); line-height: 1.55; max-width: 40ch; margin: 0 auto 2rem; opacity: .82; }
.m-hero__lead strong { color: var(--accent); font-weight: 700; }
.m-hero__addr { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 0 0 2rem; }
.m-seed { font-family: var(--font-sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; opacity: .35; margin-top: 3rem; }

/* ---------- Botones ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; padding: 1rem 2rem; border-radius: 4px; text-decoration: none; transition: transform .3s, background-color .4s, color .4s; border: 1px solid transparent; cursor: pointer; }
.m-btn:hover { transform: translateY(-2px); }
.m-btn--wa { background: #25D366; color: #fff; }
.m-btn--wa:hover { background: #1ebe5a; }
.m-btn--ghost { background: transparent; color: var(--foreground); border-color: color-mix(in srgb, var(--foreground) 30%, transparent); }
.m-btn--ghost:hover { background: var(--foreground); color: var(--background); }
.m-btn--block { width: 100%; }

/* ---------- Badges ---------- */
.m-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-sans); font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; }
.m-badge--live { background: var(--live); color: #fff; }
.m-badge--live .dotpulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: m-pulse 1.1s ease-in-out infinite; }
.m-badge--today { background: var(--accent); color: #1a1206; }
.m-badge--tomorrow { background: color-mix(in srgb, var(--foreground) 12%, transparent); color: var(--foreground); }
.m-badge--soon { background: color-mix(in srgb, var(--foreground) 12%, transparent); color: var(--foreground); }
@keyframes m-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(1.6); } }

/* ---------- PARTIDOS DE HOY ---------- */
.m-today__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .m-today__grid { grid-template-columns: 1fr 1fr; } }
.m-match { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem; border-radius: 10px; background: color-mix(in srgb, var(--foreground) 4%, transparent); border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border-left: 4px solid color-mix(in srgb, var(--foreground) 20%, transparent); }
/* HOY: cálido, protagonista (tinte ámbar) */
.m-match--today, .m-match--live { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-left-color: var(--accent); }
/* EN VIVO: rojo */
.m-match--live { background: color-mix(in srgb, var(--live) 12%, transparent); border-color: color-mix(in srgb, var(--live) 45%, transparent); border-left-color: var(--live); }
/* MAÑANA: frío, secundario (tinte azulado neutro, más apagado) */
.m-match--tomorrow { background: color-mix(in srgb, var(--foreground) 3%, transparent); border-left-color: color-mix(in srgb, var(--foreground) 22%, transparent); opacity: .92; }
.m-match--soon { border-left-color: var(--accent); }
.m-match__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.m-match__stage { font-family: var(--font-sans); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.m-match__teams { display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--font-serif); font-size: clamp(1.1rem, 3.5vw, 1.5rem); }
.m-match__team { display: flex; align-items: center; gap: .5rem; flex: 1; }
.m-match__team--home { justify-content: flex-end; text-align: right; }
.m-match__team--away { justify-content: flex-start; text-align: left; }
.m-match__flag { font-size: 1.5em; line-height: 1; }
.m-match__vs { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.m-match__meta { display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--font-sans); font-size: .82rem; opacity: .75; flex-wrap: wrap; }
.m-match__time { font-weight: 700; color: var(--accent); }
.m-today__empty { font-family: var(--font-sans); opacity: .7; margin-bottom: 1.5rem; }

/* ---------- CALENDARIO ---------- */
.m-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.m-select { font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--foreground); background: color-mix(in srgb, var(--foreground) 6%, transparent); border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: 999px; padding: .65rem 2.4rem .65rem 1.1rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.m-daygroup { margin-bottom: 2.2rem; }
.m-daygroup__date { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: -.01em; padding-bottom: .6rem; margin-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); position: sticky; top: 0; background: var(--background); z-index: 2; }
.m-daygroup__date .m-daygroup__count { font-family: var(--font-sans); font-size: .7rem; opacity: .5; margin-left: .6rem; letter-spacing: .05em; }
.m-row { display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent); font-family: var(--font-sans); }
.m-row__time { font-weight: 700; font-size: .9rem; color: var(--accent); }
.m-row__match { font-size: .92rem; line-height: 1.35; }
.m-row__match b { font-weight: 700; }
.m-row__flag { margin: 0 .15em; }
.m-row__sub { display: block; font-size: .7rem; opacity: .55; margin-top: .15rem; }
.m-row__chip { justify-self: end; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .6; white-space: nowrap; }
.m-row.is-final .m-row__chip { color: var(--accent); opacity: 1; }
.m-cal__empty { font-family: var(--font-sans); opacity: .6; padding: 1.5rem 0; display: none; }
.m-note { font-family: var(--font-sans); font-size: .72rem; opacity: .45; margin-top: 1.5rem; }

/* ---------- PHOTOBAND ---------- */
.m-photoband { position: relative; z-index: 20; width: 100%; height: min(60vh, 480px); min-height: 280px; overflow: hidden; border-radius: 0; }
.m-photoband img { width: 100%; height: 100%; object-fit: cover; }
.m-photoband__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15) 55%, rgba(0,0,0,.4)); }
.m-photoband__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 1.5rem; }
.m-photoband__kicker { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; opacity: .85; margin: 0 0 .7rem; }
.m-photoband__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 7vw, 3.6rem); line-height: 1.05; margin: 0; }
.m-photoband__title span { display: block; }

/* ---------- Encabezado con foto insignia ---------- */
.m-section-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.m-badge-photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--background); box-shadow: 0 10px 25px rgba(0,0,0,.25); }
.m-badge-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Parallax (todas las fotos grandes) ---------- */
.m-parallax { position: relative; overflow: hidden; border-radius: 14px; }
.m-parallax img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }

/* ---------- POR QUÉ (composición: foto parallax IZQ + lista de razones DER) ---------- */
.m-why { display: grid; gap: 2.5rem; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 880px) { .m-why { grid-template-columns: 1fr 1.05fr; } }
.m-why__media { min-height: 320px; }
.m-why__media.m-parallax { height: 100%; }
.m-features { display: flex; flex-direction: column; gap: .75rem; }
.m-feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 10px; background: color-mix(in srgb, var(--foreground) 4%, transparent); border-left: 3px solid var(--accent); }
.m-feature__num { font-family: var(--font-serif); font-size: 1.3rem; color: var(--accent); line-height: 1; flex-shrink: 0; opacity: .8; }
.m-feature h3 { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 .25rem; }
.m-feature p { font-family: var(--font-sans); font-size: .88rem; opacity: .75; margin: 0; line-height: 1.45; }

/* ---------- PROMOS (tipo "ticket", a lo ancho) ---------- */
.m-promos { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .m-promos { grid-template-columns: repeat(3, 1fr); } }
.m-promo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.4rem 1.6rem; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); overflow: hidden; }
.m-promo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.m-promo__icon { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.m-promo__name { font-family: var(--font-sans); font-size: .92rem; font-weight: 600; opacity: .85; margin: 0 0 .9rem; line-height: 1.35; flex: 1; }
.m-promo__price { font-family: var(--font-serif); font-weight: 900; letter-spacing: -.02em; color: var(--accent); font-size: 2rem; line-height: 1; }
.m-promo__price:empty { display: none; }
.m-promo__price--text { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; line-height: 1.35; opacity: .85; color: var(--foreground); }

/* ---------- Galería de 3 fotos (promos) ---------- */
.m-gallery-title { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; opacity: .55; margin: 3rem 0 1rem; }
.m-gallery { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .m-gallery { grid-template-columns: repeat(3, 1fr); } }
.m-gallery__item { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4/5; }
.m-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.m-gallery__item:hover img { transform: scale(1.06); }

/* ---------- CTA fixture (en la página principal) ---------- */
.m-fixture-cta { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; padding: 2.4rem 1.5rem; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.m-fixture-cta__title { font-family: var(--font-serif); font-size: 1.4rem; margin: 0; }
.m-fixture-cta__text { font-family: var(--font-sans); font-size: .88rem; opacity: .75; margin: 0; max-width: 42ch; }

/* ---------- PÁGINA FIXTURE (look propio, más "Mundial") ---------- */
.m-fxhero { position: relative; z-index: 20; padding: 8rem var(--m-pad) 3rem; text-align: center; overflow: hidden; background:
  radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent); }
.m-fxhero__kicker { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 0 0 1rem; }
.m-fxhero__title { font-family: var(--font-serif); font-weight: 900; letter-spacing: -.03em; line-height: .95; font-size: clamp(2.4rem, 9vw, 5rem); margin: 0 0 .8rem; }
.m-fxhero__sub { font-family: var(--font-sans); font-size: .95rem; opacity: .7; max-width: 46ch; margin: 0 auto; }

.m-marquee { position: relative; z-index: 20; overflow: hidden; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); white-space: nowrap; }
.m-marquee__track { display: inline-flex; gap: 1.6rem; animation: m-marquee-scroll 38s linear infinite; font-size: 1.6rem; }
@keyframes m-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.m-back-pill { display: inline-flex; align-items: center; gap: .4rem; }

.m-fixture-foot { position: relative; z-index: 20; text-align: center; padding: 3.5rem var(--m-pad); margin: 1rem var(--m-pad) 0; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.m-fixture-foot__title { font-family: var(--font-serif); font-size: 1.6rem; margin: 0 0 .6rem; }
.m-fixture-foot__text { font-family: var(--font-sans); font-size: .9rem; opacity: .75; margin: 0 0 1.5rem; }

/* ---------- UBICACIÓN ---------- */
.m-find { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .m-find { grid-template-columns: 1fr 1fr; align-items: start; } }
.m-map { width: 100%; height: 320px; border: 0; border-radius: 12px; filter: grayscale(.7) contrast(1.1); opacity: .9; transition: filter .8s, opacity .8s; }
.m-map:hover { filter: grayscale(0); opacity: 1; }
.m-hours { font-family: var(--font-sans); margin: 0 0 1.8rem; }
.m-hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); font-size: .9rem; }
.m-hours__row span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.m-hours__row span:last-child { opacity: .7; }

/* ---------- FAQ (acordeón nativo) ---------- */
.m-wrap--narrow { max-width: 760px; }
.m-faq { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.m-faq__item { border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--foreground) 3%, transparent); overflow: hidden; }
.m-faq__q { font-family: var(--font-serif); font-size: 1.05rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color .2s; }
.m-faq__q::-webkit-details-marker { display: none; }
.m-faq__q::after { content: "+"; font-family: var(--font-sans); font-size: 1.4rem; color: var(--accent); flex-shrink: 0; transition: transform .25s; }
.m-faq__item[open] .m-faq__q::after { transform: rotate(45deg); }
.m-faq__q:hover { color: var(--accent); }
.m-faq__a { font-family: var(--font-sans); font-size: .92rem; line-height: 1.55; opacity: .78; padding: 0 1.3rem 1.2rem; }

/* ---------- FOOTER ---------- */
.m-foot { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 4rem var(--m-pad); border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); }
.m-foot__logo { width: 60px; opacity: .9; }
.m-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.m-foot__nav a { font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--foreground); opacity: .75; text-decoration: none; transition: opacity .2s, color .2s; }
.m-foot__nav a:hover { opacity: 1; color: var(--accent); }
.m-foot__social { display: flex; gap: 1.3rem; opacity: .8; }
.m-foot__social a { color: var(--foreground); transition: transform .2s, color .2s; }
.m-foot__social a:hover { transform: scale(1.12); color: var(--accent); }
.m-foot__addr { font-family: var(--font-sans); font-size: .8rem; opacity: .7; margin: 0; }
.m-foot__addr a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent); }
.m-foot__addr a:hover { color: var(--accent); }
.m-foot__hours { font-family: var(--font-sans); font-size: .75rem; opacity: .55; margin: 0; }
.m-foot p { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .45; margin: 0; }

/* Logo invert: claro = negro (invert), oscuro = blanco */
.m-logo-invert { filter: invert(1); }
.dark .m-logo-invert { filter: invert(0); }