/* ==========================================================================
   Myth of Yggdrasil — VRINKA
   Hoja de estilos única para index.html y grupos.html
   Organización:
     00. Tipografías de marca (autoalojadas)
     01. Variables y tokens
     02. Reset y base
     03. Utilidades y layout
     04. Tipografía
     05. Botones
     06. Chips y etiquetas
     07. Cabecera y navegación
     08. Menú móvil
     09. Portada (hero)
     10. Franja de datos
     11. Sección de vídeo
     12. La historia
     13. Personajes
     14. Tipos de grupo
     15. Opciones
     16. Preguntas frecuentes (acordeón)
     17. Cierre (CTA final)
     18. Pie de página
     19. Animaciones de entrada
     20. Preferencias de movimiento reducido
     24. Página de venta (B2B)
   ========================================================================== */

/* ==========================================================================
   00. Tipografías de marca (autoalojadas)
   Junge (titulares) y Cairo (interfaz): las dos tipografías del Brand Book de
   Viking Adventures. Son de Google Fonts (licencia SIL OFL) y van servidas
   desde assets/fonts/ para que la web no haga ni una petición externa.
   ========================================================================== */
@font-face {
  font-family: 'Junge';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/junge-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   01. Variables y tokens
   ========================================================================== */
:root {
  /* Paleta */
  /* Paleta del Brand Book de Viking Adventures (episodio Yggdrasil = Aurora Cyan) */
  --color-fondo: #070607;          /* Black */
  --color-superficie: #0b151d;     /* Night Sea Blue */
  --color-superficie-alta: #152b3b; /* Glacier Depth */
  --color-borde: #25292c;          /* Charcoal */
  --color-texto: #eef3f5;
  --color-texto-suave: #a7bbc4;    /* Iceveil Blue */
  --color-dorado: #3fd6d2;         /* Aurora Cyan — acento del episodio */
  --color-dorado-claro: #7fe9e6;
  --color-oliva: #487188;          /* Frozen Mist */
  --color-oro: #d9b451;            /* Gold (acento secundario) */

  /* Tipografías — las del Brand Book de Viking Adventures */
  --fuente-titulos: 'Junge', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  --ancho-contenedor: 1180px;
  --alto-cabecera: 72px;
  --radio: 14px;
  --radio-pequeno: 8px;

  /* Espaciado */
  --espacio-seccion: 4.5rem;
  --espacio-seccion-grande: 6.5rem;

  /* Sombras y transiciones */
  --sombra-suave: 0 18px 40px rgba(0, 0, 0, 0.45);
  --transicion: 0.25s ease;
}

/* ==========================================================================
   02. Reset y base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.sin-scroll {
  overflow: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-dorado);
  text-decoration: none;
}

a:hover {
  color: var(--color-dorado-claro);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-dorado);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace para saltar al contenido (visible al enfocar) */
.salto-contenido {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  border-radius: var(--radio-pequeno);
  background-color: var(--color-dorado);
  color: #070607;
  font-weight: 600;
  transition: top var(--transicion);
}

.salto-contenido:focus {
  top: 1rem;
  color: #070607;
}

/* Compensación de la cabecera fija al saltar a anclas */
[id] {
  scroll-margin-top: calc(var(--alto-cabecera) + 1rem);
}

/* ==========================================================================
   03. Utilidades y layout
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.seccion {
  padding-block: var(--espacio-seccion);
}

.seccion--alterna {
  background-color: #10100d;
}

.seccion__cabecera {
  max-width: 46rem;
  margin-bottom: 2.5rem;
}

.seccion__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

.antetitulo {
  display: inline-block;
  margin: 0 0 0.75rem;
  color: var(--color-dorado);
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.titular {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
}

.titular--grande {
  font-size: clamp(2.1rem, 7vw, 4rem);
}

.texto-intro {
  margin: 1.25rem 0 0;
  max-width: 42rem;
  color: var(--color-texto-suave);
  font-size: 1.05rem;
}

.separador {
  border: 0;
  border-top: 1px solid var(--color-borde);
  margin: 0;
}

/* Texto solo para lectores de pantalla (visualmente oculto) */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   04. Tipografía
   ========================================================================== */
p {
  margin: 0 0 1rem;
}

.salto {
  display: block;
}

/* Junge (la tipografía de marca para titulares) solo existe en un peso:
   se fija en 400 para que el navegador no invente una negrita falsa. */
.portada__titular,
.titular,
.datos__titulo,
.capitulo__titulo,
.personaje__nombre,
.personaje__cuerpo,
.tipo__titulo,
.opcion__titulo,
.pie__titulo,
.menu-movil a {
  font-weight: 400;
}

/* ==========================================================================
   05. Botones
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion), transform var(--transicion);
}

.boton:hover {
  transform: translateY(-2px);
}

.boton--principal {
  background-color: var(--color-dorado);
  color: #070607;
}

.boton--principal:hover {
  background-color: var(--color-dorado-claro);
  color: #070607;
}

.boton--secundario {
  background-color: transparent;
  border-color: var(--color-dorado);
  color: var(--color-texto);
}

.boton--secundario:hover {
  background-color: rgba(63, 214, 210, 0.14);
  color: var(--color-texto);
}

.boton--claro {
  background-color: transparent;
  border-color: var(--color-borde);
  color: var(--color-texto);
}

.boton--claro:hover {
  border-color: var(--color-dorado);
  color: var(--color-texto);
}

.boton--bloque {
  width: 100%;
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  /* Separación con el texto que va justo encima (antes quedaban pegados). */
  margin-top: 2rem;
}

/* ==========================================================================
   06. Chips y etiquetas
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background-color: rgba(23, 23, 19, 0.7);
  color: var(--color-texto-suave);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.chip-pendiente {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 1px dashed var(--color-oliva);
  border-radius: 999px;
  color: var(--color-texto-suave);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.lista-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   07. Cabecera y navegación
   ========================================================================== */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicion), border-color var(--transicion),
    backdrop-filter var(--transicion);
}

.cabecera.is-scrolled {
  background-color: rgba(13, 13, 11, 0.82);
  border-bottom-color: var(--color-borde);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--alto-cabecera);
}

.cabecera__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.cabecera__logo .cabecera__lockup {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.cabecera__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-texto);
  white-space: nowrap;
  padding-left: 0.9rem;
  border-left: 1px solid var(--color-borde);
}

/* En pantallas pequeñas se reduce para que quepa junto al menú. */
@media (max-width: 640px) {
  .cabecera__logo {
    gap: 0.5rem;
  }

  .cabecera__logo .cabecera__lockup {
    height: 34px;
  }

  .cabecera__nombre {
    font-size: 0.95rem;
    padding-left: 0.6rem;
  }
}

.cabecera__nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

.cabecera__nav a {
  color: var(--color-texto-suave);
  font-size: 0.92rem;
  transition: color var(--transicion);
}

.cabecera__nav a:hover,
.cabecera__nav a[aria-current='page'] {
  color: var(--color-texto);
}

.cabecera__acciones {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.cabecera__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  background-color: rgba(23, 23, 19, 0.7);
}

.cabecera__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-texto);
  transition: transform var(--transicion), opacity var(--transicion);
}

.cabecera__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.cabecera__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.cabecera__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   08. Menú móvil
   ========================================================================== */
.menu-movil {
  position: fixed;
  inset: var(--alto-cabecera) 0 0 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem 1.25rem 2.5rem;
  background-color: rgba(13, 13, 11, 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), transform var(--transicion),
    visibility var(--transicion);
}

.menu-movil.is-abierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-movil a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
}

.menu-movil .boton {
  margin-top: 1.25rem;
}

/* ==========================================================================
   09. Portada (hero)
   ========================================================================== */
.portada {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--alto-cabecera) + 3rem);
  padding-bottom: 4rem;
  overflow: hidden;
}

.portada__fondo,
.portada__fondo video,
.portada__fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portada__fondo {
  z-index: 0;
}

.portada__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(13, 13, 11, 0.78) 0%,
      rgba(13, 13, 11, 0.55) 45%,
      rgba(13, 13, 11, 0.96) 100%
    ),
    radial-gradient(circle at 70% 30%, rgba(201, 162, 39, 0.12), transparent 55%);
}

.portada__contenido {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.portada__antetitulo {
  color: var(--color-dorado);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portada__titular {
  margin: 1rem 0 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  font-weight: 700;
  line-height: 1.1;
}

.portada__subtitulo {
  margin: 1.5rem 0 0;
  max-width: 38rem;
  color: var(--color-texto-suave);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}

.portada__nota {
  margin: 1.5rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   10. Franja de datos
   ========================================================================== */
.datos {
  border-block: 1px solid var(--color-borde);
  background-color: var(--color-superficie);
}

.datos__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.datos__item {
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid var(--color-borde);
}

.datos__titulo {
  margin: 0 0 0.4rem;
  color: var(--color-dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
}

.datos__texto {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ==========================================================================
   11. Sección de vídeo
   ========================================================================== */
.video-marco {
  position: relative;
  margin-top: 2rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  background-color: #000;
  box-shadow: var(--sombra-suave);
}

.video-marco video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   12. La historia (carrusel horizontal de 4 capítulos)
   Sin JavaScript, los 4 capítulos se apilan en vertical (imagen arriba y
   texto debajo en móvil; en fila a partir de 900 px). La clase .js-carrusel,
   que añade js/app.js a <html>, activa el carrusel: una diapositiva por vista
   y navegación con flechas y puntos.
   ========================================================================== */
.historia__carrusel {
  position: relative;
}

.historia__pista {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.capitulo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

.capitulo__media {
  position: relative;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.capitulo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.capitulo__etiqueta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background-color: rgba(13, 13, 11, 0.78);
  color: var(--color-dorado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capitulo__titulo {
  margin: 0 0 1rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.capitulo__texto {
  margin: 0;
  color: var(--color-texto-suave);
}

/* Controles: solo tienen sentido con JavaScript, así que sin la clase
   .js-carrusel quedan ocultos y se ven los capítulos apilados. */
.historia__controles {
  display: none;
}

.historia__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color var(--transicion), color var(--transicion),
    background-color var(--transicion);
}

.historia__control:hover:not(:disabled) {
  border-color: var(--color-dorado);
  color: var(--color-dorado);
}

.historia__control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.historia__puntos {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.historia__punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
}

.historia__punto::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-oliva);
  border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--transicion), border-color var(--transicion),
    transform var(--transicion);
}

.historia__punto:hover::before {
  border-color: var(--color-dorado);
}

.historia__punto.is-activo::before {
  background-color: var(--color-dorado);
  border-color: var(--color-dorado);
  transform: scale(1.15);
}

/* --- Carrusel activo (con JavaScript) --- */
.js-carrusel .historia__carrusel {
  overflow: hidden;
}

.js-carrusel .historia__pista {
  flex-direction: row;
  gap: 0;
  transition: transform 0.5s ease;
}

.js-carrusel .capitulo {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

.js-carrusel .historia__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* ==========================================================================
   13. Personajes
   ========================================================================== */
.personajes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.personaje {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--color-superficie);
  transition: transform var(--transicion), border-color var(--transicion);
}

.personaje:hover {
  transform: translateY(-4px);
  border-color: var(--color-oliva);
}

.personaje__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.personaje__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personaje__cuerpo {
  padding: 1.4rem 1.4rem 1.6rem;
}

.personaje__nombre {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
}

.personaje__rol {
  margin: 0.35rem 0 0.9rem;
  color: var(--color-dorado);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.personaje__texto {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ==========================================================================
   14. Tipos de grupo
   ========================================================================== */
.tipos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.tipo {
  padding: 1.6rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
}

.tipo__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
}

.tipo__texto {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ==========================================================================
   15. Opciones
   ========================================================================== */
.opciones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.opcion {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  transition: transform var(--transicion), border-color var(--transicion);
}

.opcion:hover {
  transform: translateY(-4px);
  border-color: var(--color-oliva);
}

.opcion__titulo {
  margin: 0 0 0.6rem;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
}

.opcion__texto {
  margin: 0 0 1.25rem;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ==========================================================================
   16. Preguntas frecuentes (acordeón)
   ========================================================================== */
.faq__lista {
  max-width: 52rem;
  margin: 0 auto;
  border-top: 1px solid var(--color-borde);
}

.faq__item {
  border-bottom: 1px solid var(--color-borde);
}

.faq__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.3rem 0.25rem;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  line-height: 1.4;
  transition: color var(--transicion);
}

.faq__boton:hover {
  color: var(--color-dorado);
}

.faq__icono {
  position: relative;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}

.faq__icono::before,
.faq__icono::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-dorado);
  transition: transform var(--transicion), opacity var(--transicion);
}

.faq__icono::before {
  transform: translateY(-50%);
}

.faq__icono::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__boton[aria-expanded='true'] .faq__icono::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transicion);
}

.faq__panel p {
  margin: 0;
  padding: 0 2.5rem 1.4rem 0.25rem;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* ==========================================================================
   17. Cierre (CTA final)
   ========================================================================== */
.cierre {
  border-top: 1px solid var(--color-borde);
  background: radial-gradient(
      circle at 50% 0%,
      rgba(201, 162, 39, 0.12),
      transparent 60%
    ),
    var(--color-superficie);
}

.cierre__caja {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.cierre__texto {
  margin: 1.25rem 0 0;
  color: var(--color-texto-suave);
  font-size: 1.05rem;
}

.cierre__botones {
  justify-content: center;
}

/* ==========================================================================
   18. Pie de página
   ========================================================================== */
.pie {
  border-top: 1px solid var(--color-borde);
  background-color: var(--color-fondo);
  padding-block: 3rem 2rem;
}

.pie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.pie__titulo {
  margin: 0 0 0.75rem;
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  color: var(--color-texto);
}

.pie__texto {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.92rem;
}

.pie__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__lista li {
  margin-bottom: 0.5rem;
  color: var(--color-texto-suave);
  font-size: 0.92rem;
}

.pie__lista a {
  color: var(--color-texto-suave);
}

.pie__lista a:hover {
  color: var(--color-dorado);
}

.pie__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font-size: 0.78rem;
}

/* ==========================================================================
   19. Animaciones de entrada
   ========================================================================== */
/* La clase .js-reveal la añade js/app.js: sin JavaScript el contenido
   se ve siempre (mejora progresiva). */
.reveal {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   20. Preferencias de movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }

  .js-carrusel .historia__pista {
    transition: none;
  }

  .portada__fondo video {
    display: none;
  }
}

/* ==========================================================================
   24. Página de venta (B2B)
   venta.html reutiliza la cabecera, el pie, los botones, las tarjetas y las
   variables del resto del sitio. Aquí solo van los bloques propios.
   ========================================================================== */

/* Portada: un poco más ancha para el titular largo y la franja de datos. */
.portada--venta .portada__contenido {
  max-width: 52rem;
}

.portada__datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(244, 241, 232, 0.18);
  list-style: none;
}

.portada__dato-numero {
  display: block;
  color: var(--color-dorado);
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  line-height: 1;
}

.portada__dato-texto {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
}

/* Rejillas de tarjetas propias de la página de venta. */
.venta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.venta-pila {
  display: grid;
  gap: 1rem;
}

/* Dos columnas de texto e imagen. */
.venta-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.venta-duo .seccion__cabecera {
  margin-bottom: 0;
}

.venta-duo .texto-intro {
  margin-top: 1rem;
}

.venta-media {
  margin: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

.venta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Cifras de aforo y ritmo. */
.venta-cifras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 2rem 0 0;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--color-borde);
  list-style: none;
}

.venta-cifra {
  padding: 1.5rem;
  background-color: var(--color-superficie);
  text-align: center;
}

.venta-cifra__dato {
  margin: 0;
  color: var(--color-dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  line-height: 1.2;
}

.venta-cifra__texto {
  margin: 0.35rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

/* Tarjetas-enlace a la portada. */
.opcion--enlace {
  color: var(--color-texto);
}

.opcion--enlace:hover {
  color: var(--color-texto);
}

.opcion--enlace:hover .opcion__titulo {
  color: var(--color-dorado);
}

/* Línea de contacto del cierre. */
.venta-contacto {
  margin: 2rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

@media (min-width: 640px) {
  .portada__datos {
    grid-template-columns: repeat(4, 1fr);
  }

  .venta-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .venta-cifras {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .venta-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .venta-duo {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* ==========================================================================
   Puntos de ruptura — mobile-first
   ========================================================================== */

/* Tablet: 640px */
@media (min-width: 640px) {
  .seccion {
    padding-block: var(--espacio-seccion-grande);
  }

  .datos__lista {
    grid-template-columns: repeat(2, 1fr);
  }

  .datos__item {
    border-bottom: 1px solid var(--color-borde);
    border-right: 1px solid var(--color-borde);
  }

  .datos__item:nth-child(2n) {
    border-right: 0;
  }

  .personajes__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tipos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .opciones__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pie__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Escritorio: 900px */
@media (min-width: 900px) {
  .cabecera__nav,
  .cabecera__acciones {
    display: flex;
  }

  .cabecera__toggle {
    display: none;
  }

  .menu-movil {
    display: none;
  }

  .datos__lista {
    grid-template-columns: repeat(4, 1fr);
  }

  .datos__item {
    border-right: 1px solid var(--color-borde);
    border-bottom: 0;
  }

  .datos__item:nth-child(2n) {
    border-right: 1px solid var(--color-borde);
  }

  .datos__item:last-child {
    border-right: 0;
  }

  .capitulo {
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
  }

  .personajes__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .opciones__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pie__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

/* Escritorio grande: 1200px */
@media (min-width: 1200px) {
  .contenedor {
    padding-inline: 2rem;
  }
}

/* ==========================================================================
   25. Estructura de página de reservas (vikingosvr) y ajustes de marca
   ========================================================================== */

/* Barra del organizador, justo debajo de la portada */
.barra-organiza {
  border-block: 1px solid var(--color-borde);
  background-color: var(--color-superficie);
}

.barra-organiza__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-block: 0.9rem;
}

.barra-organiza__texto {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.barra-organiza__texto strong {
  color: var(--color-texto);
  font-weight: 700;
}

.barra-organiza__powered {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.barra-organiza__powered a {
  color: var(--color-dorado);
}

/* Subsecciones dentro de «La experiencia» */
.subseccion {
  margin-top: 5rem;
}

.datos__lista--experiencia {
  margin-top: 2.75rem;
}

/* El evento */
.evento__grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.evento__bloque {
  padding: 1.6rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
}

.evento__titulo {
  margin: 0 0 0.5rem;
  color: var(--color-dorado);
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.evento__dato {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
}

.evento__nota {
  margin: 0.5rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

/* Las entradas */
.entradas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.entradas__cifra {
  padding: 1.4rem 1rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  text-align: center;
}

.entradas__dato {
  display: block;
  color: var(--color-dorado);
  font-family: var(--fuente-titulos);
  font-size: 1.9rem;
  line-height: 1.1;
}

.entradas__texto {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.entradas__nota {
  margin: 1.5rem auto 0;
  max-width: 44rem;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  text-align: center;
}

/* Condiciones de acceso */
.acceso__grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.acceso__item {
  padding: 1.6rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
}

.acceso__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 400;
}

.acceso__texto {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

/* Grupo de botones centrado */
.grupo-botones--centrado {
  justify-content: center;
  margin-top: 2.5rem;
}

/* Cabecera de sección centrada: el texto de intro también */
.seccion__cabecera--centrada .texto-intro {
  margin-inline: auto;
}

/* El vídeo dentro de La experiencia no lleva cabecera propia */
.video-marco + * {
  margin-top: 0;
}

/* Diálogo de reservas (widget de TicketingHub) */
.dialogo {
  width: min(560px, calc(100vw - 1.5rem));
  max-height: min(90svh, 880px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: 18px;
  background-color: var(--color-superficie-alta);
  color: var(--color-texto);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.dialogo::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
}

.dialogo__caja {
  display: flex;
  flex-direction: column;
  max-height: min(90svh, 880px);
}

.dialogo__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-borde);
}

.dialogo__titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 400;
}

.dialogo__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.5rem -0.5rem 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-texto);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.dialogo__cerrar:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dialogo__cuerpo {
  overflow-y: auto;
  padding: 1rem 1.15rem 1.25rem;
}

.dialogo__estado {
  margin: 0 0 1rem;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

.dialogo__fallback {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* El atributo hidden tiene que ganarle al display:flex de arriba */
.dialogo__fallback[hidden],
.dialogo__estado[hidden] {
  display: none;
}

.dialogo__fallback p {
  margin: 0;
  color: var(--color-texto-suave);
}

/* ==========================================================================
   Página de reservas: móvil
   ========================================================================== */
@media (max-width: 899px) {
  /* Las secciones con varias tarjetas pasan a carrusel horizontal */
  .personajes__grid,
  .datos__lista,
  .tipos__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72%, 72%);
    grid-template-columns: none;
    gap: 0.9rem;
    margin-inline: calc(var(--margen-lateral, 1.25rem) * -1);
    padding-inline: var(--margen-lateral, 1.25rem);
    padding-bottom: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .personajes__grid > *,
  .datos__lista > *,
  .tipos__grid > * {
    scroll-snap-align: start;
  }

  /* En el carrusel de datos, las tarjetas se ven como tarjetas */
  .datos__lista > .datos__item {
    padding: 1.25rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background-color: var(--color-superficie);
  }

  /* Dentro de un carrusel horizontal, las tarjetas que quedan fuera de la
     pantalla no llegan a entrar en el IntersectionObserver: se muestran ya. */
  .js-reveal .personajes__grid > .reveal,
  .js-reveal .datos__lista > .reveal,
  .js-reveal .tipos__grid > .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 640px) {
  .evento__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .entradas__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .acceso__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}