/* ═══════════════════════════════════════════════════════
   NFL Madrid Game 2026 — global styles (EDS port of the prototype)
   Literal port of import-work/prototype/css/tokens.css (L1-177) and the
   global parts of css/styles.css (fonts, values, reset, base, layout,
   shared atoms). Component CSS lives in each block.
   The boilerplate globals that break the 1:1 (heading/p sizes, .button,
   section paddings, --nav-height, roboto fallbacks) are removed.
   ═══════════════════════════════════════════════════════ */

/* stylelint-disable color-hex-length, color-function-notation, alpha-value-notation, media-feature-range-notation, selector-class-pattern, property-no-vendor-prefix, font-family-name-quotes, no-descending-specificity, custom-property-empty-line-before, comment-empty-line-before, declaration-block-single-line-max-declarations, value-keyword-case, color-function-alias-notation, no-duplicate-selectors, property-no-deprecated, declaration-empty-line-before */

:root {

  /* ═══════════════════════════════════════════════════════
     Madridistas — Design Tokens
     Fuente de verdad: Cibeles Design System v4.0
     Nomenclatura: espejo de las variables de Figma
     (color/primary → --color-primary). Ver tokens-handoff.md
     ═══════════════════════════════════════════════════════ */

  /* ─── Color · Primary ────────────────────────────────── */
  --color-primary:            #3E31FA;
  --color-primary-dark:       #2115AB;
  --color-primary-medium:     #8FA0F5;
  --color-primary-light:      #DEE5FD;
  --color-primary-bg:         #EEF2FD;
  --color-secondary:          #8760F6;

  /* ─── Color · Semánticos ─────────────────────────────── */
  --color-success:            #3D923D;
  --color-success-light:      #F1F9EA;
  --color-success-dark:       #026C02;
  --color-warning:            #EAAC30;
  --color-danger:             #CA024F;
  --color-danger-dark:        #9E0038;

  /* ─── Color · Fondos / superficies ───────────────────── */
  --color-bg-dark:            #0A0A0A;
  --color-bg-light:           #FFFFFF;
  --color-surface-offwhite:   #FAFCFF;
  --color-surface-light:      #F3F5F8;
  --color-line:               #E1E5EA;
  --color-off-black:          #14142B;

  /* ─── Color · Texto (sobre claro) ────────────────────── */
  --color-text-primary:       #0F2145;
  --color-text-secondary:     #43526E;
  --color-text-muted:         #5E6A83;
  --color-text-disabled:      #8C95A6;

  /* Texto · roles */
  --color-text-title:         var(--color-text-primary);
  --color-text-subtitle:      #29395A;
  --color-text-body:          var(--color-text-secondary);

  /* Texto · sobre oscuro (inverse) */
  --color-text-inverse:         rgba(255, 255, 255, 1);
  --color-text-inverse-muted:   rgba(255, 255, 255, 0.65);
  --color-text-inverse-subtle:  rgba(255, 255, 255, 0.45);

  /* ─── Gradients ──────────────────────────────────────── */
  --gradient-btn-primary:     linear-gradient(1.586deg, #3E31FA 20.955%, #8760F6 91.225%);
  --gradient-premium:         linear-gradient(90deg, #E4D0AB, #F3F6F9);
  --gradient-platinum:        linear-gradient(135deg, #636682 0%, #BDBECC 50%, #A8AABD 100%);
  --gradient-platinum-surface: linear-gradient(170.54deg, #BDBECC 14.645%, #A8AABD 85.355%);
  --gradient-card-dark:       linear-gradient(155deg, #14142B 0%, #0A0A0A 100%); /* fondo dark de cards (flip card, etc.) — reemplaza el navy inventado por el agente */

  /* ─── Spacing · base ×8 ──────────────────────────────── */
  --spacing-2xs:              4px;
  --spacing-xs:               8px;
  --spacing-sm:               12px;
  --spacing-base:             16px;
  --spacing-md:               24px;
  --spacing-lg:               32px;
  --spacing-xl:               48px;
  --spacing-2xl:              64px;
  --spacing-section:          96px;
  --spacing-3xl:              128px;

  /* ─── Border Radius ──────────────────────────────────── */
  --radius-sm:                8px;
  --radius-md:                12px;
  --radius-lg:                16px;
  --radius-xl:                20px;
  --radius-2xl:               24px;
  --radius-3xl:               32px;
  --radius-pill:              9999px;

  /* ─── Typography (RM Neue, responsive con clamp) ─────── */
  /* RM Neue: /nfl/fonts/rm-neue-{regular,semibold,bold}.woff2, @font-face in styles/fonts.css */
  --font-family:              'RM Neue', sans-serif;

  /* Display — Bold */
  --text-display-xl:          clamp(52px, 7vw, 88px);   /* lh 1.0   · tracking -3px   */
  --text-display-lg:          clamp(40px, 5.5vw, 72px); /* lh 1.08  · tracking -2px   */
  --text-display-md:          clamp(32px, 4vw, 56px);   /* lh 1.08  · tracking -1px   */
  --text-display-sm:          clamp(28px, 3vw, 48px);   /* lh 1.15  · tracking -0.5px */

  /* Body / texto */
  --text-body-lg:             18px;  /* lh 1.65 · Regular/600 */
  --text-body:                16px;  /* lh 1.65 · Regular     */
  --text-small:               14px;  /* lh 1.60 · Regular     */
  --text-caption:             12px;  /* lh 1.50 · Regular     */

  /* ─── Breakpoints ────────────────────────────────────── */
  --breakpoint-tablet:        768px;   /* Tablet  768–1023 */
  --breakpoint-desktop:       1024px;  /* Desktop 1024–1439 */
  --breakpoint-wide:          1440px;  /* Wide    ≥1440 — donde entra el margen 96 */

  /* ─── Grid (columnas · gutter · margin por breakpoint) ─ */
  --grid-columns-mobile:      4;
  --grid-columns-tablet:      8;
  --grid-columns-desktop:     12;

  /* Grid confirmado de Cibeles (27/08/2026), en cuatro escalones para que el margen 64
     entre a 1024 (container ~897, como su "Tablet 1025") y el 96 a 1440 (container 1248).
     Header, banners, footer y fondos fotográficos van a ancho completo. */
  --grid-gutter-mobile:       24px;   /* < 768   */
  --grid-gutter-tablet:       24px;   /* 768–1023 */
  --grid-gutter-desktop:      24px;   /* 1024–1439 */
  --grid-gutter-wide:         32px;   /* ≥ 1440  */

  --grid-margin-mobile:       24px;   /* contenido = ancho − 48  */
  --grid-margin-tablet:       40px;   /* 768 → 688px de contenido */
  --grid-margin-desktop:      64px;   /* 1024 → 896px de contenido */
  --grid-margin-wide:         96px;   /* 1440 → 1248px de contenido */

  /* ═══════════════════════════════════════════════════════
     BOTONES
     ═══════════════════════════════════════════════════════ */

  /* Tamaños (altura fija · padding generoso) */
  --btn-height-sm:            40px;
  --btn-height-md:            48px;
  --btn-height-lg:            56px;

  --btn-padding-sm:           10px 20px;
  --btn-padding-md:           14px 28px;
  --btn-padding-lg:           16px 36px;

  --btn-radius:               var(--radius-md);   /* 12px */
  --btn-gap-icon:             8px;                /* separación texto ↔ icono */
  --btn-font-size:            16px;
  --btn-font-weight:          600;

  /* Primary — fondo gradiente, texto blanco */
  --btn-primary-bg:           var(--gradient-btn-primary);
  --btn-primary-bg-hover:     var(--color-primary);
  --btn-primary-bg-pressed:   var(--color-primary-dark);
  --btn-primary-text:         var(--color-text-inverse);
  --btn-primary-shadow:       0 10px 24px -8px rgba(54, 49, 116, 0.65);

  /* Secondary — outline */
  --btn-secondary-bg:         transparent;
  --btn-secondary-bg-hover:   var(--color-primary-bg);
  --btn-secondary-border:     1.5px solid var(--color-primary);
  --btn-secondary-text:       var(--color-primary);

  /* Estados compartidos */
  --btn-focus-ring:           0 0 0 3px var(--color-primary-light);  /* WCAG */
  --btn-disabled-bg:          var(--color-surface-light);
  --btn-disabled-text:        var(--color-text-disabled);
  --btn-disabled-opacity:     0.5;
  --btn-transition:           all 0.2s ease;

  /* ═══════════════════════════════════════════════════════
     ESPACIADO DE COMPONENTES (generoso)
     ═══════════════════════════════════════════════════════ */

  /* Padding interno de tarjetas */
  --padding-card:             32px;   /* tarjetas estándar */
  --padding-card-lg:          40px;   /* tarjeta destacada / pricing */
  --padding-card-compact:     24px;   /* tarjetas densas (FAQ, listas) */

  /* Padding vertical de secciones */
  --padding-section-mobile:   64px;
  --padding-section-tablet:   88px;
  --padding-section-desktop:  120px;  /* aire generoso entre secciones */

  /* Gaps de composición */
  --gap-cards:                24px;   /* entre tarjetas de una fila */
  --gap-stack:                20px;   /* entre bloques de texto apilados */
  --gap-inline:               12px;   /* entre elementos en línea */
  --gap-list:                 14px;   /* entre ítems de una lista/bullets */

  /* Ritmo tipográfico */
  --gap-title-body:           16px;   /* título → párrafo */
  --gap-body-cta:             32px;   /* párrafo → botón */
  --gap-header-content:       48px;   /* encabezado de sección → contenido */
}


/* ─── Tipografía de títulos · Bernabéu ───────────────── */
/* styles.css L13-20. Only font file re-hosted (user decision): /nfl/fonts/bernabeu-black.woff2 */
@font-face {
  font-family: 'Bernabeu';
  font-style: normal;
  font-weight: 700 900; /* un solo archivo Black: sirve también para bold, sin negrita sintética */
  font-display: swap;
  src: local('Bernabeu Black'), local('Bernabeu-Black'),
       url('../fonts/bernabeu-black.woff2') format('woff2');
}

:root {
  --font-family-display: 'Bernabeu', var(--font-family);
}

/* ─── Valores sin token en tokens.css (styles.css L30-58) ── */
:root {
  --lh-display:         1.08;   /* tokens.css · display-lg / md */
  --lh-heading:         1.2;
  --lh-body:            1.65;   /* tokens.css · body */
  --lh-small:           1.6;    /* tokens.css · small */
  --lh-caption:         1.5;    /* etiquetas (badge) */
  --tracking-display:   0.01em; /* ajustado a la display condensada (tokens.css daba -1px para RM Neue) */
  --tracking-caps:      0.08em; /* eyebrows y etiquetas en mayúsculas */
  --font-weight-bold:   700;
  --border-width:       1px;
  --border-width-strong: 1.5px; /* mismo grosor que --btn-secondary-border */
  --focus-width:        2px;
  --focus-offset:       2px;
  --icon-size:          1.125em;
  --measure:            60ch;   /* ancho máximo de lectura */
  --media-ratio:        3 / 2;
  --blur-arrow:         12px;   /* desenfoque de fondo del «Row Arrow» (Figma) */
  --text-title-sm:      28px;
  --text-title-xs:      24px;   /* títulos de las tarjetas de noticias (sin token de texto) */
  --reveal-duration:    0.6s;   /* aparición en cascada: Experiencias, Planes, Noticias (sin token de duración) */
  --news-card-max:      400px;  /* ancho de las tarjetas de noticias en desktop (Figma 1440) */
  --news-ratio:         16 / 9; /* foto de la noticia en el lightbox y en su página */
  --lightbox-width:     720px;  /* panel del lightbox de noticias en web y tablet */
  --lightbox-max-height: 90vh;  /* alto máximo del panel; si la noticia es más larga, scroll dentro */
  --lightbox-backdrop:  72%;    /* fondo oscurecido detrás del lightbox (--color-bg-dark) */
  --lightbox-in:        0.3s;   /* abrir el lightbox: fondo y panel (sin token de duración) */
  --lightbox-out:       0.2s;   /* cerrar el lightbox */
  /* PROPUESTO, pendiente de validar por diseño (README · Valores propuestos) */
  --shadow-dialog:      0 var(--spacing-md) var(--spacing-2xl) color-mix(in srgb, var(--color-bg-dark) 40%, transparent);
  --final-cta-btn-width: 12em;  /* los dos botones del CTA final, en bloques distintos, igual de anchos */
  --xp-hint-alpha:      50%;    /* «¿No eres Premium?»: gris más sutil que -muted; 5,3:1 sobre la tarjeta (AA) */
  --hover-duration:     0.4s;   /* zoom de foto y sombra de planes al pasar el ratón (sin token de duración) */
  --xp-zoom:            1.05;   /* zoom de la foto al pasar el ratón */
  --xp-media-ratio:     16 / 9;  /* imagen de las tarjetas de Experiencias */
  --xp-glass:           64%;    /* opacidad del panel de fecha sobre la foto: AA con blanco sobre cualquier foto */
  --match-crest-width:  40%;    /* escudos «Bengals vs Falcons» sobre la foto de la tarjeta de entradas */
  --hospitality-helmet-max: 152px; /* tamaño de los cascos en el Figma de escritorio */
  --hospitality-helmet: clamp(88px, 10vw, var(--hospitality-helmet-max)); /* cascos que sobresalen del banner Hospitality */
  --hospitality-min-height: 360px; /* alto mínimo del banner Hospitality en escritorio */

  /* 00 · Header · menú (nfl-header-menu/LEEME.md) */
  --menu-duration:      0.8s;   /* entrada y salida del panel del menú y del fondo (sin token de duración) */
  --menu-ease:          cubic-bezier(0.76, 0, 0.24, 1); /* curva del panel del menú */
  --menu-max-width:     640px;  /* ancho máximo del panel del menú en tablet */
  --menu-curve:         100px;  /* ancho del borde curvo del panel al entrar */
  --burger-line:        2px;    /* grosor de las rayas de la hamburguesa y del subrayado activo */
  --header-offset:      88px;   /* alto de la cabecera compacta: margen de las anclas */
  --header-scrim:       45%;    /* degradado de la cabecera sobre el hero */
  --header-scrim-strong: 88%;   /* degradado de la cabecera al bajar: arriba… */
  --header-scrim-mid:   72%;    /* …y a media altura (después se funde) */
  --menu-backdrop:      56%;    /* fondo oscurecido detrás del panel del menú */
}


/* ─── Reset mínimo (styles.css L62-100) ───────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
ul, ol, dl, dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* hidden gana siempre, aunque el componente declare su propio display */
[hidden] {
  display: none !important;
}


/* ─── Base (styles.css L104-122) ─────────────────────── */
body {
  position: relative; /* contenedor de la capa del balón decorativo (12) */
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
}

/* EDS: body is revealed once the first section is decorated (boilerplate) */
body {
  display: none;
}

body.appear {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

a {
  color: var(--color-primary);
}


/* ─── Foco visible (styles.css L129-132) ─────────────── */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color, var(--color-primary));
  outline-offset: var(--focus-offset);
}


/* ─── Movimiento reducido (styles.css L138-147) ──────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════
   LAYOUT (styles.css L158-198)
   ═══════════════════════════════════════════════════════ */

:root {
  --layout-columns:         var(--grid-columns-mobile);
  --layout-gutter:          var(--grid-gutter-mobile);
  --layout-margin:          var(--grid-margin-mobile);
  --section-padding:        var(--padding-section-mobile);  /* 64px */
}

@media (min-width: 768px) { /* --breakpoint-tablet */
  :root {
    --layout-columns:         var(--grid-columns-tablet);
    --layout-gutter:          var(--grid-gutter-tablet);
    --layout-margin:          var(--grid-margin-tablet);
    --section-padding:        var(--padding-section-tablet);  /* 88px */
  }
}

@media (min-width: 1024px) { /* --breakpoint-desktop */
  :root {
    --layout-columns:         var(--grid-columns-desktop);
    --layout-gutter:          var(--grid-gutter-desktop);
    --layout-margin:          var(--grid-margin-desktop);
    --section-padding:        var(--padding-section-desktop); /* 120px */
  }
}

@media (min-width: 1440px) { /* --breakpoint-wide */
  :root {
    --layout-gutter:          var(--grid-gutter-wide);
    --layout-margin:          var(--grid-margin-wide);
    /* columnas y padding de sección: se mantienen los de desktop (no hay token -wide) */
  }
}

/* Contenedor: márgenes laterales de la retícula.
   Tope en --breakpoint-wide → 1248px de contenido a partir de 1440. */
.container {
  width: 100%;
  max-width: var(--breakpoint-wide);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}


/* ═══════════════════════════════════════════════════════
   EDS SECTIONS (block-style-spec §2.3)
   The vertical rhythm lives on the section, never on the block:
   every section gets --section-padding (= prototype .section L200-206).
   Variants come from section-metadata `Style`:
   full-bleed (hero, countdown, CTA final), flush-top (Noticias, Entradas),
   dark (Experiencias), light + split (FAQ), light + faq-tabs (FAQ por categorías).
   ═══════════════════════════════════════════════════════ */

main > .section {
  margin: 0;
  padding-block: var(--section-padding);
}

/* Anclas del menú (section-metadata `Id`): la cabecera fija no tapa el inicio */
main > .section[id] {
  scroll-margin-top: var(--header-offset);
}

/* Empty sections (e.g. the one that held the page `metadata` table, which EDS
   moves to <head>) would otherwise render as a blank band of 2 × padding */
main > .section:not(:has(> *)) {
  display: none !important; /* aem.js sets inline display when loading the section */
}

/* Style: full-bleed — the block draws its own background and inner padding.
   The *-container classes are a fallback in case the author omits the Style. */
main > .section.full-bleed,
main > .section.hero-container,
main > .section.event-countdown-container,
main > .section.closing-cta-container {
  padding-block: 0;
}

/* Style: flush-top = .section--flush-top L208-210.
   Follows a section with the same white background: the previous
   section's bottom padding is the only gap (no double padding). */
main > .section.flush-top {
  padding-top: 0;
}

/* = .container */
main > .section > div {
  width: 100%;
  max-width: var(--breakpoint-wide);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}

/* full-bleed blocks: their JS creates their own inner .container */
main > .section.full-bleed > div,
main > .section.hero-container > div,
main > .section.event-countdown-container > div,
main > .section.closing-cta-container > div {
  max-width: none;
  padding-inline: 0;
}

/* Section head (default content before a block) = .section-head L412-431 */
main > .section > .default-content-wrapper {
  display: grid;
  gap: var(--gap-title-body);
  margin-bottom: var(--gap-header-content);
}

/* A head with nothing after it must not add to the section padding */
main > .section > .default-content-wrapper:last-child {
  margin-bottom: 0;
}

main > .section > .default-content-wrapper h2 {
  font-family: var(--font-family-display);
  color: var(--color-text-title);
  font-size: var(--text-display-lg); /* un escalón más: la display condensada ocupa menos */
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

main > .section > .default-content-wrapper p {
  max-width: var(--measure);
  font-size: var(--text-body-lg);
}

/* Style: dark = .experiences L924-932 */
main > .section.dark {
  --focus-color: var(--color-text-inverse);
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse-muted);
}

main > .section.dark > .default-content-wrapper h2 {
  color: var(--color-text-inverse);
}

/* Section-metadata `Background` (image or URL) → --section-bg-image (scripts.js).
   Uniform dark layer, like the CTA final scrim but even, because the header
   and filter sit at the top and the cards cover the rest.
   75 %: minimum that keeps --color-text-inverse-muted at AA (≈5:1) even over
   a pure white pixel. If the image or the text colours change, re-measure. */
main > .section.has-background {
  --section-bg-scrim: 75%;

  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--color-bg-dark) var(--section-bg-scrim), transparent),
      color-mix(in srgb, var(--color-bg-dark) var(--section-bg-scrim), transparent)
    ),
    var(--section-bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Style: light = .faq L1589-1591 */
main > .section.light {
  background-color: var(--color-surface-light);
}

/* Style: split = .faq__inner L1593-1596 + L1647-1652 (container widths kept) */
main > .section.split {
  display: grid;
  gap: var(--gap-header-content);
  padding-inline: max(var(--layout-margin), calc((100% - var(--breakpoint-wide)) / 2 + var(--layout-margin)));
}

main > .section.split > div {
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

main > .section.split > .default-content-wrapper {
  margin-bottom: 0;
}

@media (min-width: 1024px) { /* --breakpoint-desktop */
  main > .section.split {
    grid-template-columns: 1fr 2fr;
    gap: var(--layout-gutter);
  }
}

/* Style: faq-tabs = FAQ por categorías (scripts/faq-tabs.js).
   Móvil: título, pestañas en fila con scroll horizontal y preguntas.
   Desktop: título y pestañas en columna a la izquierda (1fr), preguntas a la derecha (2fr). */
main > .section.faq-tabs {
  display: grid;
  grid-template-areas:
    "head"
    "tabs"
    "panels";
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  padding-inline: max(var(--layout-margin), calc((100% - var(--breakpoint-wide)) / 2 + var(--layout-margin)));
}

main > .section.faq-tabs > div {
  width: auto; /* la fila de pestañas sangra con margen negativo */
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

main > .section.faq-tabs > .default-content-wrapper {
  grid-area: head;
  margin-bottom: 0;
}

main > .section.faq-tabs > .faq-tabs__list {
  grid-area: tabs;
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding: calc(var(--focus-width) + var(--focus-offset)); /* el scroll no recorta el foco */
  margin: calc((var(--focus-width) + var(--focus-offset)) * -1);
  scrollbar-width: none;
}

main > .section.faq-tabs > .faq-tabs__list::-webkit-scrollbar {
  display: none;
}

main > .section.faq-tabs > .faq-tabs__panels {
  grid-area: panels;
}

main > .section.faq-tabs .faq-tabs__tab {
  flex: none;
  min-height: var(--btn-height-sm);
  padding-inline: var(--spacing-base);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-title);
  font: inherit;
  font-weight: var(--btn-font-weight);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--btn-transition);
  transition-property: border-color, background-color, color; /* el foco aparece sin animar */
}

main > .section.faq-tabs .faq-tabs__tab:hover {
  border-color: var(--color-text-primary);
}

main > .section.faq-tabs .faq-tabs__tab[aria-selected="true"] {
  border-color: var(--color-text-primary);
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

@media (min-width: 1024px) { /* --breakpoint-desktop */
  main > .section.faq-tabs {
    grid-template:
      "head panels" auto
      "tabs panels" 1fr
      / minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    column-gap: var(--spacing-xl);
  }

  main > .section.faq-tabs > .faq-tabs__list {
    flex-direction: column;
    align-items: flex-start;
    overflow-x: visible;
  }

  main > .section.faq-tabs .faq-tabs__tab {
    white-space: normal;
    text-align: left;
  }
}


/* ═══════════════════════════════════════════════════════
   ÁTOMOS COMPARTIDOS (styles.css L219-431, L601-611)
   ═══════════════════════════════════════════════════════ */

/* ─── Utilidades ─────────────────────────────────────── */
.icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Oculto a la vista, disponible para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  z-index: 30; /* por encima de la cabecera fija (10) y del menú abierto (20) */
  padding: var(--spacing-xs) var(--spacing-base);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  font-weight: var(--btn-font-weight);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ─── Platinum ───────────────────────────────────────── */
/* Todo lo Platinum usa --gradient-platinum. Se muestra solo su tramo
   claro (del 50 % al final): el tramo oscuro #636682 no da AA con
   texto oscuro. Texto --color-off-black sobre el tramo claro ≈ 7:1. */
:root {
  --platinum-surface: var(--gradient-platinum) 100% 0 / 200% 100% no-repeat border-box;
}

/* ─── Botón ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap-icon);
  min-height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--lh-heading);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--btn-transition);
}

.btn--sm {
  min-height: var(--btn-height-sm);
  padding: var(--btn-padding-sm);
  font-size: var(--text-small);
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-shadow);
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
}

.btn--primary:active {
  background: var(--btn-primary-bg-pressed);
}

/* Desactivado (p. ej. «Agotado», o un CTA de experiencias sin enlace en DA):
   tokens --btn-disabled-* */
.btn:disabled,
.btn:disabled:hover,
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}

.btn--secondary {
  border: var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
}

/* Contorno blanco para fondos oscuros */
.btn--inverse {
  border-color: var(--color-text-inverse);
  background: transparent;
  color: var(--color-text-inverse);
}

.btn--platinum {
  background: var(--platinum-surface);
  color: var(--color-off-black);
}

.btn--platinum:hover {
  background: var(--color-off-black);
  color: var(--color-text-inverse);
}

.btn--inverse:hover {
  background: var(--color-text-inverse);
  color: var(--color-bg-dark);
}

/* ─── Flecha de carrusel («Row Arrow» en Figma) ─────── */
/* 48×48, fondo bg-dark al 56 % (80 % en hover), borde blanco al 16 %,
   desenfoque de fondo 12 px y chevron blanco de 24 px. */
.row-arrow {
  --focus-color: var(--color-primary);

  display: grid;
  place-items: center;
  width: var(--btn-height-md);
  height: var(--btn-height-md);
  padding: 0;
  border: var(--border-width) solid color-mix(in srgb, var(--color-text-inverse) 16%, transparent);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-bg-dark) 56%, transparent);
  color: var(--color-text-inverse);
  -webkit-backdrop-filter: blur(var(--blur-arrow));
  backdrop-filter: blur(var(--blur-arrow));
  cursor: pointer;
  transition: var(--btn-transition);
}

.row-arrow:hover {
  background-color: color-mix(in srgb, var(--color-bg-dark) 80%, transparent);
}

.row-arrow__icon {
  width: var(--spacing-md);
  height: var(--spacing-md);
}

/* ─── Carrusel horizontal (scripts/row-carousel.js) ─────
   Planes y Noticias. El track sale hasta los bordes del contenedor (márgenes
   de la retícula) para que asome la siguiente tarjeta; las tarjetas encajan al
   inicio del contenido. Sin barra: las flechas y la tarjeta que asoma ya indican
   que hay más. Región enfocable: se desplaza con las flechas del teclado.
   El ancho de las tarjetas lo pone cada bloque. */
.row-carousel {
  position: relative;
}

.row-carousel > .row-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.row-carousel > .row-arrow--prev {
  left: calc(var(--layout-margin) * -1 + var(--spacing-xs));
}

.row-carousel > .row-arrow--next {
  right: calc(var(--layout-margin) * -1 + var(--spacing-xs));
}

/* position: relative → lo absoluto de dentro (p. ej. el texto oculto .visually-hidden de
   «Leer más») se recorta con el track; si no, se posiciona respecto a .row-carousel y las
   tarjetas de fuera de la vista ensanchan la página. */
.row-carousel__track {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--layout-margin);
  scrollbar-width: none;
  margin-inline: calc(var(--layout-margin) * -1);
  padding-inline: var(--layout-margin);
}

.row-carousel__track::-webkit-scrollbar {
  display: none;
}

/* track > lista > tarjetas */
.row-carousel__track > * > * {
  scroll-snap-align: start;
}

/* Arrastrar con el ratón */
.row-carousel__track.is-draggable {
  cursor: grab;
}

.row-carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* ─── Etiqueta de nivel ──────────────────────────────── */
.badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Figma: verde «todos los madridistas», dorada Premium, plateada Platinum */
.badge--free {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
}

.badge--premium {
  background: var(--gradient-premium);
  color: var(--color-off-black);
}

.badge--tbc {
  background-color: var(--color-surface-light);
  color: var(--color-text-secondary);
}

.badge--platinum,
.badge--vip {
  background: var(--gradient-platinum-surface);
  color: var(--color-off-black);
}

/* ─── Aparición en cascada (scripts/reveal.js) ───────── */
/* Experiencias, Planes y Noticias. Las clases las pone y las quita el JS
   (sin JS, o con movimiento reducido, todo se ve desde el principio).
   main: especificidad (0,1,1), para ganar a la opacidad de estados como .xp-row--past */
main .reveal {
  opacity: 0;
  transform: translateY(var(--spacing-md));
  transition:
    opacity var(--reveal-duration) ease var(--reveal-delay, 0s),
    transform var(--reveal-duration) ease var(--reveal-delay, 0s);
}

/* --reveal-opacity: opacidad final de un elemento atenuado (p. ej. .xp-row--past),
   para que la aparición termine en ella y no salte de 1 a esa opacidad */
main .reveal.is-visible {
  opacity: var(--reveal-opacity, 1);
  transform: none;
}

/* ─── Encabezado de sección (hooks set by block JS) ──── */
.section-head {
  display: grid;
  gap: var(--gap-title-body);
  margin-bottom: var(--gap-header-content);
}

.section-head__title {
  font-family: var(--font-family-display);
  color: var(--color-text-title);
  font-size: var(--text-display-lg); /* un escalón más: la display condensada ocupa menos */
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

.section-head__lead {
  max-width: var(--measure);
  font-size: var(--text-body-lg);
}

/* Pareja de botones: los dos miden lo que el más largo (texto + padding del token).
   En móvil, uno debajo del otro; desde tablet, en línea */
.btn-pair {
  display: inline-grid;
  grid-auto-columns: 1fr;
  gap: var(--gap-inline);
}

@media (min-width: 768px) { /* --breakpoint-tablet */
  .btn-pair {
    grid-auto-flow: column;
  }
}


/* ═══════════════════════════════════════════════════════
   HEADER / FOOTER (EDS fragments) — reveal once decorated
   ═══════════════════════════════════════════════════════ */
header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}


/* ─── 12 · Balón decorativo (styles.css L1776-1805) ─── */
/* Posicionado respecto al documento. scripts/scroll-ball.js lo anima solo al salir del vídeo
   (con el scroll, en todos los tamaños). El aterrizaje final es .final-cta__ball. */
/* Capa a toda la altura del documento que recorta el balón cuando sale por
   los lados: así no aparece scroll horizontal. */
.ball-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.scroll-ball {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: var(--spacing-3xl);
  height: auto;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Sombra durante el salto: refuerza la sensación de profundidad */
.scroll-ball.is-jumping {
  filter: drop-shadow(0 var(--spacing-md) var(--spacing-lg) color-mix(in srgb, var(--color-bg-dark) 45%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .scroll-ball {
    display: none;
  }
}