/* Fuentes incrustadas: Special Elite en todo el sitio y Caveat como acento (subconjunto latino) */
@font-face { font-family: 'Special Elite'; src: url('/fuentes/special-elite-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/fuentes/caveat-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ==========================================================================
   Estilos de la página de captación de historias.
   Concepto: el estudio de grabación. Fondo gris pared deslavado, dorado ocre
   como único color de marca, aplicado en líneas, bordes y acentos.
   Celular primero (360 px); tableta desde 768 px; escritorio desde 1024 px.
   ========================================================================== */

/* --- Variables: colores, tipografías, espacios y medidas ------------------ */
:root {
  /* Grises del estudio */
  --color-pared: #4E5856;          /* fondo general */
  --color-sombra: #262C2B;         /* orillas, viñeta y superficies hundidas */
  --color-gris-medio: #8A918F;     /* bordes de controles */
  --color-gris-linea: #6F7876;     /* líneas suaves, fondo de barras */
  --color-texto: #EDEAE4;          /* blanco hueso */
  --color-texto-suave: #C9CCCA;    /* notas y textos secundarios */

  /* Dorados */
  --color-dorado: #C99A3B;         /* base */
  --color-dorado-brillo: #E2B866;  /* acentos y textos dorados */
  --color-dorado-sombra: #8C5E22;  /* líneas de error, presionado */

  /* Tipografías */
  --fuente-titulos: 'Special Elite', 'Courier New', monospace;
  --fuente-cuerpo: 'Special Elite', 'Courier New', monospace;
  --fuente-acento: 'Caveat', cursive;

  /* Tamaños de texto */
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: 1.125rem;
  --texto-lg: 1.375rem;
  --texto-titulo: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  --texto-portada: clamp(1.75rem, 1rem + 3.4vw, 3.5rem);
  --texto-cifra: clamp(1.6rem, 1rem + 2.6vw, 3.25rem);
  --texto-frase: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);

  /* Espacios */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 18px;
  --esp-6: 24px;
  --esp-7: 32px;
  --esp-8: 40px;
  --esp-9: 64px;
  --esp-10: 96px;

  /* Medidas */
  --ancho-max: 1200px;
  --ancho-formulario: 720px;
  --ancho-faq: 800px;
  --radio: 10px;
  --radio-tarjeta: 12px;
  --radio-formulario: 16px;
  --alto-boton: 56px;
  --linea: 1.5px;

  /* Brillo dorado suave para hover */
  --brillo: 0 0 0 1px var(--color-dorado-brillo), 0 0 22px rgba(226, 184, 102, 0.35);
  --transicion: 0.25s ease;
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-pared);
  color: var(--color-texto);
  font: 400 var(--texto-base)/1.5 var(--fuente-cuerpo);
  /* clip en lugar de hidden: evita el desborde lateral sin romper los elementos fijos al hacer scroll */
  overflow-x: clip;
  /* La tipografía solo tiene un peso: se evita la negrita simulada */
  font-synthesis: none;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-dorado-brillo); }
a:hover { color: var(--color-texto); }
:focus-visible { outline: 2px solid var(--color-dorado-brillo); outline-offset: 2px; }
::selection { background: var(--color-dorado); color: var(--color-sombra); }

/* Oculta visualmente pero mantiene disponible para lectores de pantalla */
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Piezas comunes -------------------------------------------------------- */
.contenedor { width: 100%; max-width: calc(var(--ancho-max) + 2 * var(--esp-5)); margin: 0 auto; padding: 0 var(--esp-5); }
.seccion { padding: var(--esp-8) 0; }
/* Franjas alternadas: las secciones se dividen por cambio de fondo, sin líneas */
#cifras, #proceso, #formulario { background: var(--color-sombra); }

/* Etiqueta pequeña en mayúsculas sobre los títulos */
.kicker {
  font-size: var(--texto-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-dorado-brillo); margin-bottom: var(--esp-3);
}
.acento { font: 500 1.4em var(--fuente-acento); text-transform: none; letter-spacing: 0; }

/* Títulos: un solo peso tipográfico, así que la jerarquía la dan tamaño, color y la frase clave en dorado */
.titulo-seccion { font: 400 var(--texto-titulo)/1.15 var(--fuente-titulos); color: var(--color-texto); margin-bottom: var(--esp-6); text-wrap: pretty; }
.titulo-seccion em { font-style: normal; color: var(--color-dorado-brillo); }
/* Subtítulo dentro de una sección: un escalón debajo del título, en blanco hueso */
.subtitulo-seccion { font: 400 clamp(1.4rem, 1rem + 1.2vw, 1.875rem)/1.25 var(--fuente-titulos); color: var(--color-texto); margin: var(--esp-6) 0 var(--esp-5); }
/* Texto que acompaña a un título: gris claro con más interlineado (contraste 4.5:1 sobre el gris pared) */
.titulo-seccion ~ p, .podcast__texto > p:not(.kicker) { color: var(--color-texto-suave); line-height: 1.75; max-width: 62ch; }
/* Título que solo aparece en escritorio (en celular basta la etiqueta) */
.titulo-seccion--escritorio { display: none; }

/* Línea dorada fina entre secciones */

/* Botones: principal relleno dorado, secundario contorno dorado */
.botones { display: flex; flex-direction: column; gap: var(--esp-3); }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alto-boton); padding: 0 var(--esp-7); border-radius: var(--radio);
  font: 700 var(--texto-md) var(--fuente-titulos); text-decoration: none; cursor: pointer;
  transition: box-shadow var(--transicion), background-color var(--transicion);
}
.boton--principal { background: var(--color-dorado); color: var(--color-sombra); border: 0; }
.boton--principal:active { background: var(--color-dorado-sombra); }
.boton--secundario { background: transparent; color: var(--color-dorado-brillo); border: 2px solid var(--color-dorado); }
.boton:hover { box-shadow: var(--brillo); color: inherit; }
.boton--principal:hover { color: var(--color-sombra); }
.boton--secundario:hover { color: var(--color-dorado-brillo); }

/* Tarjetas con borde fino; brillo dorado al pasar el mouse */
.tarjeta {
  border: var(--linea) solid var(--color-gris-medio); border-radius: var(--radio-tarjeta);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { box-shadow: var(--brillo); border-color: var(--color-dorado); }

/* Emblema circular dorado (marcador del logo) */
.emblema {
  width: 56px; height: 56px; border-radius: 50%;
  background: url('/img/logo.webp') center / cover no-repeat;
}
.emblema--grande { width: 72px; height: 72px; }

/* Aparición gradual al hacer scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
    .tarjetas-compromiso .tarjeta, .tarjetas-compromiso .tarjeta:hover, .tarjetas-compromiso .tarjeta:hover .icono { transform: none; }
}

/* --- Encabezado ------------------------------------------------------------ */
/* Celular y tableta: el logo es un elemento propio, centrado sobre la tarjeta de la foto */
.encabezado { position: relative; z-index: 3; display: flex; justify-content: center; padding: var(--esp-6) var(--esp-5) var(--esp-5); }
.encabezado__logo img { width: 112px; height: 112px; border-radius: 50%; filter: drop-shadow(0 0 18px rgba(201, 154, 59, 0.35)); }

/* --- Portada --------------------------------------------------------------- */
/* Celular y tableta: la foto va en una tarjeta y el texto debajo, sobre el gris de la página */
.portada { position: relative; padding: 0 var(--esp-5); }
.portada__imagen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radio-formulario); border: 1px solid rgba(201, 154, 59, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.portada__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% center; }
.portada__imagen::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 65% 45%, rgba(38, 44, 43, 0) 50%, rgba(38, 44, 43, 0.45) 100%);
}
.portada__contenido { position: relative; z-index: 1; padding: var(--esp-6) 0 var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); width: 100%; }
.portada__kicker { display: none; }
.portada__titulo { font: 700 var(--texto-portada)/1.1 var(--fuente-titulos); text-wrap: balance; }
/* Redes en la portada: íconos circulares con borde dorado, debajo de los botones */
.redes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-3); }
.redes__titulo { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.redes__iconos { display: flex; gap: var(--esp-2); }
.redes__iconos a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: var(--linea) solid var(--color-dorado); color: var(--color-dorado-brillo);
  transition: background var(--transicion), color var(--transicion), box-shadow var(--transicion);
}
.redes__iconos a:hover { background: var(--color-dorado); color: var(--color-sombra); box-shadow: var(--brillo); }
/* En el pie, los mismos íconos; mantienen el dorado sobre el estilo de enlaces del pie */
.pie__redes.redes__iconos a { color: var(--color-dorado-brillo); }
.pie__redes.redes__iconos a:hover { color: var(--color-sombra); }
.portada__subtitulo { font-size: var(--texto-base); line-height: 1.5; margin-bottom: var(--esp-2); }

/* --- Qué es el podcast ----------------------------------------------------- */
.podcast { display: flex; flex-direction: column; gap: var(--esp-6); }
.podcast__texto p:last-child { font-size: var(--texto-md); line-height: 1.55; }
/* Remate: la pregunta que cierra cada historia, como frase destacada */
.podcast__texto p.remate { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-6); color: var(--color-texto-suave); font-size: var(--texto-base); }
.remate__pregunta { font: 400 clamp(2.25rem, 1.5rem + 3vw, 3.75rem)/1.05 var(--fuente-titulos); color: var(--color-dorado-brillo); letter-spacing: -0.01em; }
/* Temas: tarjetas en carrusel deslizable en celular; la siguiente asoma para invitar a deslizar */
.temas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--esp-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.temas::-webkit-scrollbar { display: none; }
.tema { scroll-snap-align: start; background: var(--color-sombra); padding: var(--esp-6) var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-3); }
.tema__nombre { font: 400 var(--texto-lg)/1.2 var(--fuente-titulos); color: var(--color-dorado-brillo); }
.tema__texto { font-size: var(--texto-base); line-height: 1.6; color: var(--color-texto-suave); }

/* --- Cifras ---------------------------------------------------------------- */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-4); text-align: center; }
/* Cada cifra en una sola línea para que las cuatro queden alineadas */
.cifras li { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }
.cifras__etiqueta { display: inline-flex; align-items: center; gap: var(--esp-2); text-align: left; font-size: var(--texto-sm); line-height: 1.3; }
.cifras__icono { flex: none; width: 20px; height: 20px; color: var(--color-dorado); }
.cifra { font: 400 var(--texto-cifra)/1.1 var(--fuente-titulos); color: var(--color-dorado-brillo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifras li span { color: var(--color-texto-suave); }
/* Etiqueta con el horario de estreno, centrada debajo de la nota */
.cifras__horario {
  display: flex; width: fit-content; align-items: center; gap: var(--esp-2); margin: var(--esp-5) auto 0;
  padding: 8px 16px; border: var(--linea) solid var(--color-dorado); border-radius: 999px;
  font-size: var(--texto-sm); color: var(--color-texto); text-align: center;
}
.cifras__horario svg { flex: none; color: var(--color-dorado-brillo); }
.cifras__nota {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-4);
  margin-top: var(--esp-7); text-align: center; font-size: var(--texto-md); text-wrap: balance;
}

/* --- Presentación del host (oculta) --------------------------------------- */
.henry { display: grid; gap: var(--esp-6); }
.henry__video { aspect-ratio: 16 / 9; border: var(--linea) solid var(--color-gris-medio); background: var(--color-sombra); }

/* --- Compromiso ------------------------------------------------------------ */
.tarjetas-compromiso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.tarjetas-compromiso .tarjeta { background: var(--color-sombra); border-color: transparent; padding: var(--esp-4) var(--esp-3); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--esp-2); }
.tarjetas-compromiso .tarjeta:last-child { grid-column: span 2; }
.tarjetas-compromiso h3 { font: 700 var(--texto-md)/1.2 var(--fuente-titulos); }
.tarjetas-compromiso p { font-size: var(--texto-sm); line-height: 1.45; color: var(--color-texto-suave); }
.icono {
  width: 44px; height: 44px; border-radius: 50%; border: var(--linea) solid var(--color-dorado);
  color: var(--color-dorado-brillo); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transicion), color var(--transicion), transform 0.35s ease;
}
/* Aire entre el ícono y el título de cada tarjeta */
.tarjetas-compromiso .icono { margin-bottom: var(--esp-3); }

/* Animación al pasar el mouse: la tarjeta sube, el ícono se rellena de dorado y el título se ilumina */
.tarjetas-compromiso .tarjeta { transition: box-shadow var(--transicion), border-color var(--transicion), transform 0.3s ease; }
.tarjetas-compromiso h3 { transition: color var(--transicion); }
@media (hover: hover) {
  .tarjetas-compromiso .tarjeta:hover { transform: translateY(-6px); }
  .tarjetas-compromiso .tarjeta:hover .icono { background: var(--color-dorado); color: var(--color-sombra); transform: scale(1.1) rotate(-6deg); }
  .tarjetas-compromiso .tarjeta:hover h3 { color: var(--color-dorado-brillo); }
}

/* --- Proceso --------------------------------------------------------------- */
/* Sin animación (sin JS, con «reducir movimiento» o si no cabe en pantalla): los cinco pasos en lista */
.proceso__pasos { display: flex; flex-direction: column; gap: var(--esp-7); }
.paso { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.paso__frase { font: 400 var(--texto-lg)/1.3 var(--fuente-titulos); color: var(--color-texto); }
.paso__visual { display: flex; align-items: center; color: var(--color-dorado-brillo); }
.paso__cifra { font: 400 3rem/1 var(--fuente-titulos); color: var(--color-dorado-brillo); white-space: nowrap; }
.paso__icono { width: 56px; height: 56px; }
.paso__leyenda { text-transform: uppercase; letter-spacing: 0.25em; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.proceso__barras { display: none; }

/* Proceso fijo: la sección se queda en pantalla y muestra un paso a la vez; el recorrido extra da el tiempo de scroll */
.proceso.fijo { --recorrido: 300svh; height: calc(100svh + var(--recorrido)); padding: 0; }
.proceso.fijo > .contenedor {
  position: sticky; top: 0; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: var(--esp-6); padding-top: var(--esp-6); padding-bottom: var(--esp-6);
}
.proceso.fijo .titulo-seccion { margin-bottom: 0; }
.proceso.fijo .proceso__pasos { display: grid; }
/* Cada paso: frase a la izquierda y dato a la derecha (en celular, uno sobre otro).
   Al avanzar, el paso que sale sube y se desvanece y el que entra sube desde abajo; el dato entra un poco después */
.proceso.fijo .paso { grid-area: 1 / 1; display: grid; gap: var(--esp-6); align-items: center; pointer-events: none; }
.proceso.fijo .paso.activo { pointer-events: auto; }
.proceso.fijo .paso__texto, .proceso.fijo .paso__dato {
  opacity: 0; transform: translateY(28px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.proceso.fijo .paso__dato { transition-delay: 0.08s; }
.proceso.fijo .paso.pasado .paso__texto, .proceso.fijo .paso.pasado .paso__dato { transform: translateY(-28px); }
.proceso.fijo .paso.activo .paso__texto, .proceso.fijo .paso.activo .paso__dato { opacity: 1; transform: none; }
.paso__texto { display: flex; flex-direction: column; gap: var(--esp-3); }
.paso__num { font: 400 var(--texto-sm)/1 var(--fuente-titulos); color: var(--color-dorado-brillo); letter-spacing: 0.2em; }
.paso__dato { display: flex; flex-direction: column; gap: var(--esp-3); }
.proceso.fijo .paso__frase { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.15; text-wrap: balance; }
.proceso.fijo .paso__visual { height: clamp(100px, 5rem + 6vw, 190px); }
.proceso.fijo .paso__cifra { font-size: clamp(4.5rem, 3rem + 6vw, 9rem); }
.proceso.fijo .paso__icono { width: clamp(88px, 5rem + 5vw, 150px); height: clamp(88px, 5rem + 5vw, 150px); }
.proceso.fijo .paso__leyenda { font-size: clamp(0.85rem, 0.8rem + 0.4vw, 1.2rem); letter-spacing: 0.3em; }
@media (min-width: 1024px) {
  .proceso.fijo .paso { grid-template-columns: 1fr 1fr; gap: var(--esp-9); }
  .proceso.fijo .paso__dato { align-items: center; text-align: center; }
  .proceso.fijo .paso__visual { justify-content: center; }
}

/* Barras de avance: la del paso activo se llena; las anteriores quedan llenas */
.proceso.fijo .proceso__barras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-8); }
.barra-paso { display: flex; flex-direction: column; gap: var(--esp-3); }
.barra-paso__linea { position: relative; height: 2px; background: var(--color-gris-linea); overflow: hidden; }
.barra-paso__relleno { position: absolute; inset: 0 auto 0 0; width: var(--llenado, 0%); background: var(--color-dorado); }
.barra-paso__nombre { text-transform: uppercase; letter-spacing: 0.15em; font-size: var(--texto-xs); color: var(--color-texto-suave); transition: color var(--transicion); }
.barra-paso.activa .barra-paso__nombre { color: var(--color-texto); }
.barra-paso__texto { display: none; }

/* --- Historias ------------------------------------------------------------- */
/* Celular: carrusel deslizable con imán por tarjeta */
.historias {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--esp-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.historias::-webkit-scrollbar { display: none; }
.historia { scroll-snap-align: start; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--color-sombra); border-color: transparent; }
.historia__cuerpo { flex: 1; padding: var(--esp-5) var(--esp-6) var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-3); }
.historia__frase { margin: 0; font: 400 clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem)/1.2 var(--fuente-titulos); color: var(--color-dorado-brillo); }

/* Video ligero: miniatura con botón de reproducir; el reproductor de YouTube se carga solo al dar clic */
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.5s ease; filter: brightness(0.85); }
.video__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
  background: var(--color-dorado); color: var(--color-sombra); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.video:hover img, .video:focus-visible img { transform: scale(1.04); filter: brightness(1); }
.video:hover .video__play, .video:focus-visible .video__play { transform: scale(1.1); box-shadow: var(--brillo); }
.video iframe, iframe.video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.historia__contexto { font-size: var(--texto-base); line-height: 1.5; color: var(--color-texto-suave); }
.historia__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3);
  margin-top: auto; padding-top: var(--esp-3); border-top: 1px solid rgba(111, 120, 118, 0.45);
  font-size: var(--texto-sm);
}
.historia__meta span { color: var(--color-texto-suave); }
.puntos { display: flex; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-4); }
.puntos button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: var(--linea) solid var(--color-dorado); background: transparent; cursor: pointer; }
.puntos button[aria-current="true"] { background: var(--color-dorado); }

/* --- Formulario ------------------------------------------------------------ */
.formulario { display: flex; flex-direction: column; gap: 22px; min-height: 460px; }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Barra de avance por tramos */
.barra { display: flex; gap: 6px; }
.barra__tramo { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.barra__fondo { display: block; height: 6px; border-radius: 3px; background: var(--color-gris-linea); overflow: hidden; }
.barra__relleno { display: block; height: 100%; width: 0; background: var(--color-dorado); transition: width 0.4s ease; }
.barra__nombre { font-size: 11px; line-height: 1.2; color: #A9AFAD; }
.barra__tramo.activo .barra__nombre { color: var(--color-dorado-brillo); }

/* Pantallas: con script se muestra una a la vez; sin script se ven todas */
.pantallas { display: flex; flex-direction: column; gap: var(--esp-7); flex: 1; }
.pantalla { display: none; }
.pantalla.activa { display: flex; }
.grupo { display: contents; }
.pantalla { flex-direction: column; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; animation: aparecer 0.35s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pantalla:focus { outline: none; }
.pantalla--mensaje[data-tipo="transicion"], .pantalla--mensaje[data-tipo="exito"] { align-items: center; text-align: center; padding-top: 28px; }
.pantalla__texto { font-size: var(--texto-md); line-height: 1.45; }
.pantalla__titulo { font: 700 1.5rem/1.2 var(--fuente-titulos); text-wrap: pretty; }
.pantalla__nota { font-size: var(--texto-sm); line-height: 1.45; color: var(--color-texto-suave); }

/* Pantalla de inicio: invitación compacta. La tarjeta se ajusta al contenido y la barra de avance se oculta */
.formulario.en-inicio { min-height: 0; }
.formulario.en-inicio .barra { display: none; }
.inicio { align-items: center; text-align: center; gap: var(--esp-5); }
.inicio__logo { width: 84px; height: 84px; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(201, 154, 59, 0.35)); }
.inicio__titulo { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--fuente-titulos); text-wrap: balance; }
.inicio__titulo em { font-style: normal; color: var(--color-dorado-brillo); }
.inicio__texto { color: var(--color-texto-suave); line-height: 1.6; max-width: 46ch; }
/* Lista «Antes de comenzar»: lo que la persona debe saber antes de escribir */
.antes { width: 100%; max-width: 520px; text-align: left; background: var(--color-pared); border-radius: var(--radio-tarjeta); padding: var(--esp-5); }
.antes__titulo { font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-dorado-brillo); margin-bottom: var(--esp-3); }
.antes__lista { display: flex; flex-direction: column; gap: var(--esp-3); }
.antes__lista li { display: flex; align-items: flex-start; gap: var(--esp-3); font-size: var(--texto-sm); line-height: 1.5; }
.antes__lista svg { flex: none; margin-top: 1px; color: var(--color-dorado-brillo); }
.inicio__sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); }
/* En celular el formulario va sobre la franja oscura: los sellos usan el gris pared; en la tarjeta de tableta y escritorio, el sombra */
.sello { display: inline-flex; align-items: center; gap: var(--esp-2); padding: 8px 14px; border-radius: 999px; background: var(--color-pared); font-size: var(--texto-sm); }
.sello svg { color: var(--color-dorado-brillo); }
.formulario__alterno { display: none; text-align: center; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.formulario__alterno a { color: var(--color-dorado-brillo); }
.formulario.en-inicio .formulario__alterno { display: block; }
[data-tipo="inicio"] { display: none; }
[data-tipo="inicio"].activa { display: flex; }

.pregunta__tema { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-dorado-brillo); }
.pregunta__opcional { text-transform: none; letter-spacing: 0; color: var(--color-texto-suave); font-size: 12px; margin-left: var(--esp-1); }
.pregunta__texto { display: block; float: none; width: 100%; padding: 0; font: 700 1.375rem/1.25 var(--fuente-titulos); text-wrap: pretty; }
.pregunta__error:empty { display: none; }
.pregunta__error { font-size: 15px; color: var(--color-dorado-brillo); border-top: 1px solid var(--color-dorado-sombra); padding-top: var(--esp-2); }

/* Campos de texto */
.campo {
  width: 100%; min-height: 54px; padding: 12px 14px; background: transparent;
  border: var(--linea) solid var(--color-gris-medio); border-radius: var(--radio);
  color: var(--color-texto); font: 400 var(--texto-md) var(--fuente-cuerpo); outline: none;
  transition: border-color var(--transicion);
}
.campo::placeholder { color: #9AA19F; }
.campo:focus { border-color: var(--color-dorado-brillo); }
.campo--largo { font-size: 1.0625rem; line-height: 1.45; resize: vertical; }
.campo-otro { margin-top: var(--esp-1); }

/* Opciones Sí / No: botones grandes */
.opciones-sn { display: flex; gap: 10px; }
.opcion { flex: 1; position: relative; }
.opcion input, .chip input, .casilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span {
  display: flex; align-items: center; justify-content: center; min-height: var(--alto-boton);
  border: 2px solid var(--color-gris-medio); border-radius: var(--radio);
  font: 700 var(--texto-md) var(--fuente-titulos); cursor: pointer;
  transition: box-shadow var(--transicion), border-color var(--transicion), background-color var(--transicion);
}
.opcion span:hover, .chip span:hover, .casilla:hover { box-shadow: var(--brillo); }
.opcion input:checked + span { border-color: var(--color-dorado); background: rgba(201, 154, 59, 0.18); color: var(--color-dorado-brillo); }
.opcion input:focus-visible + span, .chip input:focus-visible + span, .casilla input:focus-visible ~ .casilla__marca { outline: 2px solid var(--color-dorado-brillo); outline-offset: 2px; }

/* Casillas múltiples en forma de etiqueta */
.opciones-multiples { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chip { position: relative; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  border: var(--linea) solid var(--color-gris-medio); border-radius: 22px; font-size: 15px; cursor: pointer;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.chip span::before { content: '☐'; }
.chip input:checked + span { border-color: var(--color-dorado); color: var(--color-dorado-brillo); }
.chip input:checked + span::before { content: '☑'; }

/* Casilla de autorización */
.casilla {
  position: relative; display: flex; gap: var(--esp-3); align-items: flex-start; min-height: var(--alto-boton);
  padding: 14px; border: var(--linea) solid var(--color-gris-medio); border-radius: var(--radio);
  font-size: var(--texto-base); line-height: 1.4; cursor: pointer;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.casilla__marca {
  flex: none; width: 24px; height: 24px; border: 2px solid var(--color-dorado); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; color: var(--color-dorado-brillo); font-weight: 700;
}
.casilla input:checked ~ .casilla__marca::after { content: '✓'; }
.casilla:has(input:checked) { border-color: var(--color-dorado); }

/* Navegación del formulario */
.formulario__navegacion { display: flex; gap: 10px; }
.formulario__navegacion .boton { padding: 0 var(--esp-4); }
.formulario__navegacion [data-accion="anterior"] { flex: 1; color: var(--color-texto); border: var(--linea) solid var(--color-gris-medio); }
.formulario__navegacion [data-accion="siguiente"], .formulario__navegacion [data-accion="enviar"] { flex: 2; }
.formulario__navegacion [hidden] { display: none; }
.formulario.enviado .formulario__navegacion { display: none; }

/* --- Preguntas frecuentes -------------------------------------------------- */
.contenedor--faq { max-width: calc(var(--ancho-faq) + 2 * var(--esp-5)); }
.acordeon { border-top: var(--linea) solid var(--color-gris-linea); }
.acordeon details { border-bottom: var(--linea) solid var(--color-gris-linea); }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4);
  min-height: 56px; padding: var(--esp-4) var(--esp-1); font: 700 var(--texto-md)/1.3 var(--fuente-titulos);
  transition: color var(--transicion);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--color-dorado-brillo); }
.acordeon__signo { color: var(--color-dorado-brillo); font-size: 1.4rem; transition: transform var(--transicion); }
.acordeon details[open] .acordeon__signo { transform: rotate(45deg); }
.acordeon details p { padding: 0 var(--esp-1) var(--esp-5); font-size: var(--texto-base); line-height: 1.5; }

/* --- Pie ------------------------------------------------------------------- */
.pie { background: var(--color-sombra); border-top: var(--linea) solid var(--color-dorado); padding: var(--esp-7) 0 96px; }
.pie__rejilla { display: flex; flex-direction: column; gap: var(--esp-5); }
.pie__logo { width: 48px; height: 48px; border-radius: 50%; }
.pie__redes { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-5); }
.pie__redes a { color: var(--color-texto); text-decoration: none; }
.pie__redes a:hover { color: var(--color-dorado-brillo); }
.pie__contacto { display: flex; flex-direction: column; gap: 6px; font-size: var(--texto-sm); }
.pie__contacto a { color: var(--color-texto); }
.pie__contacto .pie__aviso { color: var(--color-dorado-brillo); }
.pie__apoyo { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.pie__apoyo a { color: var(--color-texto-suave); }

/* --- Botón flotante -------------------------------------------------------- */
/* Píldora sólida en dorado con texto oscuro: contraste 5.5:1 (el blanco sobre este dorado no llega a 3:1) */
.flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 10; height: 56px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--color-dorado); color: var(--color-sombra); border: 0;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font: 700 var(--texto-base)/1 var(--fuente-titulos);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: box-shadow var(--transicion), background var(--transicion);
}
.flotante:hover { box-shadow: var(--brillo); color: var(--color-sombra); }
.flotante:active { background: var(--color-dorado-sombra); }
.flotante { transition: box-shadow var(--transicion), background var(--transicion), opacity 0.3s ease, transform 0.3s ease; }
.flotante.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* Celular: solo el ícono, para no tapar el contenido al hacer scroll */
.flotante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .flotante { width: 56px; padding: 0; justify-content: center; } }

/* ==========================================================================
   Tableta: desde 768 px
   ========================================================================== */
@media (min-width: 768px) {
  .contenedor { padding: 0 var(--esp-8); max-width: calc(var(--ancho-max) + 2 * var(--esp-8)); }
  .contenedor--faq { max-width: calc(var(--ancho-faq) + 2 * var(--esp-8)); }
  .seccion { padding: var(--esp-9) 0; }
  .botones { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifras__etiqueta { font-size: var(--texto-base); }
  .tarjetas-compromiso { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); }
  .tarjetas-compromiso .tarjeta:last-child { grid-column: auto; }
  .historias { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 20px; }
  .puntos { display: none; }
  .barra-paso__texto { display: inline; }
  .temas { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 20px; }
  .titulo-seccion--escritorio { display: block; }
  #historias .kicker { display: none; }
  .formulario {
    max-width: var(--ancho-formulario); margin: 0 auto; padding: var(--esp-8) 48px;
    background: var(--color-pared); border: var(--linea) solid var(--color-gris-medio); border-radius: var(--radio-formulario);
  }
  .formulario__titulo { text-align: center; }
  .sello { background: var(--color-sombra); }
  .antes { background: var(--color-sombra); }
  .contenedor--faq .titulo-seccion { text-align: center; }
  .pie__rejilla { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-8); padding-right: 110px; }
  .pie { padding: 48px 0; }
  .pie__contacto { text-align: right; }
  .pie__logo { width: 64px; height: 64px; }
  .flotante { height: 60px; right: 24px; bottom: 24px; font-size: var(--texto-md); }
  .flotante span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .encabezado__logo img { width: 150px; height: 150px; }
  .portada { padding: 0 var(--esp-8); }
  .portada__imagen { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Escritorio: desde 1024 px
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --logo-portada: clamp(120px, 20vh, 210px); --texto-portada: min(3.5rem, 6vh); }
  .seccion { padding: var(--esp-10) 0; }

  /* Encabezado alineado con el contenido */
  .encabezado { position: absolute; top: 0; left: 0; right: 50%; display: block; padding: 48px max(var(--esp-8), calc((100% - var(--ancho-max)) / 2)); }
  /* Logo, espacio superior y título se ajustan al alto de la pantalla para que la portada quepa completa */
  .encabezado__logo img { width: var(--logo-portada); height: var(--logo-portada); }

  /* Portada: texto a la izquierda; foto a la mitad derecha con viñeta oscura hacia los bordes */
  .portada {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    min-height: 100vh; min-height: 100svh; padding: 0; overflow: hidden;
    /* Un solo fondo para toda la portada: la foto se funde en él sin cortes */
    background: radial-gradient(ellipse at 25% 55%, var(--color-pared) 0%, var(--color-sombra) 85%);
  }
  .portada__contenido {
    grid-column: 1; justify-content: center; gap: 22px;
    padding: calc(var(--alto-barra) + 24px + var(--logo-portada) + 4vh) var(--esp-9) 6vh max(var(--esp-8), calc((100vw - var(--ancho-max)) / 2));
  }
  .portada__contenido > * { max-width: 620px; }
  .portada .boton { padding: 0 20px; }
  .portada__kicker { display: block; margin-bottom: 0; }
  .portada__subtitulo { font-size: 1.1875rem; }
  /* La foto invade un poco la columna del texto y se desvanece hacia la izquierda */
  .portada__imagen {
    position: relative; grid-column: 2; grid-row: 1; inset: auto; margin-left: -12vw;
    aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
    /* La máscara va en el contenedor para que foto y viñeta se desvanezcan juntas */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 16%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 16%, #000 38%);
  }
  .portada__imagen img { position: absolute; inset: 0; object-position: 100% center; }
  /* Desvanecido inferior corto: la portada se funde con la sección siguiente sin cubrir las patas del sillón */
  .portada::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none;
    background: linear-gradient(180deg, rgba(78, 88, 86, 0) 0%, var(--color-pared) 100%);
  }
  .portada__imagen::after {
    background: radial-gradient(ellipse at 70% 45%, rgba(38, 44, 43, 0) 55%, rgba(38, 44, 43, 0.55) 100%);
  }

  /* Podcast: dos columnas */
  /* Podcast: texto arriba y temas en cuadrícula de 3 × 2 */
  .temas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  /* Cifras */
  .cifras__nota { font-size: 1.25rem; margin-top: var(--esp-8); }

  /* Host (oculto): 60 / 40 */
  .henry { grid-template-columns: 3fr 2fr; gap: 56px; align-items: center; }

  /* Compromiso: cinco en fila */
  .tarjetas-compromiso { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tarjetas-compromiso .tarjeta { padding: var(--esp-6) 20px; align-items: flex-start; text-align: left; gap: 10px; }
  .tarjetas-compromiso h3 { font-size: 1.1875rem; }
  .tarjetas-compromiso p { font-size: 0.9375rem; color: var(--color-texto); }

  /* Proceso: título a la izquierda, escena del paso a la derecha */
  /* Proceso: título arriba; los pasos debajo, en dos columnas */
  .proceso.fijo > .proceso__rejilla { gap: var(--esp-8); }
  .proceso.fijo .proceso__barras { gap: var(--esp-5); }

  /* Historias: mosaico 3 × 2 */
  .historias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pantallas grandes: hasta 1440 px el contenido se queda en 1200 px centrado */
@media (min-width: 1440px) {
  .portada { min-height: 100vh; min-height: 100svh; }
}

/* --- Aviso de privacidad: columna de lectura y marcas de pendiente ---------- */
.legal__encabezado { background: var(--color-sombra); border-bottom: var(--linea) solid var(--color-dorado); padding: var(--esp-3) 0; }
.legal__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.legal__barra img { width: 54px; height: 54px; border-radius: 50%; }
.legal__barra a { color: var(--color-texto); text-decoration: none; font-size: var(--texto-sm); }
.legal__barra a:hover { color: var(--color-dorado-brillo); }
.legal { max-width: calc(var(--ancho-faq) + 2 * var(--esp-5)); }
.legal h2 { font: 700 var(--texto-lg)/1.25 var(--fuente-titulos); color: var(--color-dorado-brillo); margin: var(--esp-8) 0 var(--esp-3); }
.legal p, .legal li { font-size: var(--texto-md); line-height: 1.6; }
.legal p + p { margin-top: var(--esp-3); }
.legal ul { margin: var(--esp-3) 0; padding-left: var(--esp-6); list-style: disc; }
.legal li + li { margin-top: var(--esp-2); }
.legal li::marker { color: var(--color-dorado); }
.legal__fecha { color: var(--color-texto-suave); font-size: var(--texto-sm); }
.legal__pendiente { background: var(--color-dorado-brillo); color: var(--color-sombra); padding: 0 4px; border-radius: 4px; }
.legal__regreso { margin-top: var(--esp-9); }
.legal__regreso .boton { display: inline-flex; padding: 0 var(--esp-6); }

/* Ajustes al motor: foco y «Saltar al contenido» con la paleta del sitio */
:root { --foco: var(--color-dorado-brillo); --saltar-fondo: var(--color-dorado); --saltar-texto: var(--color-sombra); }

/* Páginas sin portada (aviso de privacidad y 404): el encabezado ocupa su lugar en lugar de flotar sobre el contenido */
.pagina-legal .encabezado { position: relative; right: auto; }

/* Campo trampa contra spam: fuera de la vista y del recorrido con teclado */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Movimiento. Todo dentro de «sin preferencia de reducir movimiento»: con ella activa, nada se anima.
   Reglas del manual de Flieger: 21 (entrada del inicio solo con CSS, nunca desde opacidad 0, menos de 0.8 s),
   35 (una animación por propiedad de cada elemento) y 39 (entradas de secciones con base.js y data-entrada)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Entrada del hero al abrir: en cascada, desde 35 % de opacidad para no retrasar el contenido principal */
  @keyframes hero-sube { from { opacity: 0.35; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes hero-foto { from { opacity: 0.35; transform: scale(1.04); } to { opacity: 1; transform: none; } }
  body:has(.portada) .encabezado__logo,
  .portada__kicker, .portada__titulo, .portada__subtitulo, .portada .botones, .portada .redes {
    animation: hero-sube 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  }
  body:has(.portada) .encabezado__logo { animation-delay: 0s; }
  .portada__kicker { animation-delay: 0.07s; }
  .portada__titulo { animation-delay: 0.14s; }
  .portada__subtitulo { animation-delay: 0.21s; }
  .portada .botones { animation-delay: 0.28s; }
  .portada .redes { animation-delay: 0.35s; }
  .portada__imagen img { animation: hero-foto 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; }

  /* 2. Indicador de scroll: la línea baja y se desvanece en bucle */
  @keyframes desliza-linea {
    0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
    55% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
  }
  .desliza__linea { animation: desliza-linea 2s ease-in-out 1s infinite; }
}

/* Indicador de scroll: al pie del hero, centrado; solo escritorio, donde el hero ocupa la pantalla completa */
.desliza { display: none; }
@media (min-width: 1024px) {
  .desliza {
    position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--color-texto-suave); text-decoration: none; font-size: var(--texto-sm); letter-spacing: 0.25em; text-transform: uppercase;
    transition: opacity 0.4s ease;
  }
  .desliza:hover { color: var(--color-dorado-brillo); }
  .desliza__linea { display: block; width: 1.5px; height: 48px; background: var(--color-dorado); }
  .desplazado .desliza { opacity: 0; pointer-events: none; }
}

/* 3. Efecto cortina (escritorio): el hero se queda fijo y la siguiente sección lo cubre al bajar.
   Cada sección lleva su fondo para tapar al hero; la primera, con esquinas redondeadas y sombra arriba */
@media (min-width: 1024px) {
  .portada { position: sticky; top: 0; z-index: 0; }
  main > section:not(.portada) { position: relative; z-index: 1; background-color: var(--color-pared); }
  #cifras, #proceso, #formulario { background-color: var(--color-sombra); }
  #podcast { border-radius: 28px 28px 0 0; box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.35); }
}

/* Con el scroll, la foto del hero se acerca y el texto sube y se desvanece: «entrar al estudio».
   Animación ligada al scroll del navegador, fuera del hilo principal; donde no existe, el hero solo queda quieto */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes hero-acerca { to { transform: scale(1.1); } }
    @keyframes hero-se-va { to { transform: translateY(-80px); opacity: 0.15; } }
    .portada__imagen { animation: hero-acerca linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .portada__contenido { animation: hero-se-va linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  }
}

/* --- Qué es el podcast, la pregunta y los temas: tres secciones ------------- */
#podcast .podcast__texto p { max-width: 58ch; }
@media (min-width: 1024px) {
  #podcast .podcast__texto { display: grid; grid-template-columns: 6fr 5fr; column-gap: 64px; align-items: end; }
  #podcast .podcast__texto .kicker { grid-column: 1 / -1; }
  #podcast .podcast__texto .titulo-seccion { margin-bottom: 0; }
}

/* La pregunta: casi una pantalla, centrada, con la llama del logo gigante y tenue detrás */
.interludio { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: clip; }
.interludio::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(70vh, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url('/img/logo.webp') center / contain no-repeat; opacity: 0.07; filter: grayscale(0.3); pointer-events: none;
}
.interludio .contenedor { position: relative; }
.interludio .remate { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); margin: 0 auto; text-align: center; color: var(--color-texto-suave); }
.interludio .remate__entrada { font-size: var(--texto-md); }
.interludio .remate__pregunta { font: 400 clamp(3.5rem, 2rem + 7vw, 8rem)/1.05 var(--fuente-titulos); color: var(--color-dorado-brillo); }
@media (max-width: 767px) { .interludio { min-height: 60svh; } }

/* Temas con su propio título */
.temas-seccion .titulo-seccion { margin-bottom: var(--esp-6); }

/* Horario de estrenos: en celular, versión corta para que la píldora quede en una sola línea */
.cifras__horario { white-space: nowrap; }
.horario__largo { display: none; }
@media (min-width: 768px) { .horario__largo { display: inline; } .horario__corto { display: none; } }

/* La pregunta fija: la sección se alarga para dar recorrido y su contenido se queda en pantalla.
   overflow: clip (no hidden) para no romper el elemento fijo. El emblema aparece junto con la pregunta (--e de 0 a 1) */
.interludio.animada { --recorrido: 110svh; display: block; height: calc(100svh + var(--recorrido)); min-height: 0; padding: 0; }
.interludio.animada::before { display: none; }
.interludio.animada > .contenedor { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; }
.interludio.animada > .contenedor::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(70vh, 90vw); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc((1 - var(--p, 1)) * -10deg)) scale(calc(1.15 - 0.15 * var(--p, 1)));
  background: url('/img/logo.webp') center / contain no-repeat; opacity: calc(0.07 * var(--e, 1)); filter: grayscale(0.3); pointer-events: none;
}
.interludio.animada .remate { position: relative; }
.interludio.animada .remate__entrada, .interludio.animada .remate__pregunta { will-change: transform, opacity; }
.interludio.animada .remate__entrada { transform-origin: center; }
/* En celular la frase de entrada va en renglones cortos: así puede empezar grande y encogerse sin salirse de la pantalla */
@media (max-width: 767px) { .interludio.animada .remate__entrada { max-width: 16ch; } }

/* ==========================================================================
   Gráficos del proceso: cada paso lleva uno a la derecha de su dato, dibujado con CSS.
   Todos dependen de --a, el avance dentro del paso (0 a 1) que pone el script con el scroll.
   Sin script o con «Reducir movimiento», --a vale 1 y el gráfico se ve completo y quieto.
   ========================================================================== */
.paso__fila { display: flex; align-items: center; gap: var(--esp-6); }
.grafico { --a2: var(--a, 1); position: relative; flex: none; width: 140px; height: 140px; color: var(--color-dorado); }
@media (min-width: 1024px) { .proceso.fijo .paso__fila { justify-content: center; } }
@media (max-width: 767px) {
  .grafico { width: 76px; height: 76px; }
  .proceso.fijo .paso__cifra { font-size: clamp(3.25rem, 2rem + 6vw, 4.5rem); }
  .proceso.fijo .paso__visual { height: auto; }
  .proceso.fijo .paso__icono { width: 76px; height: 76px; }
  .paso__fila { gap: var(--esp-4); }
}

/* Profundidad: frase y dato suben unos píxeles mientras avanza el paso */
.proceso.fijo .paso__frase { transform: translateY(calc((0.5 - var(--a, 0.5)) * 20px)); }
.proceso.fijo .paso__visual { transform: translateY(calc((0.5 - var(--a, 0.5)) * 28px)); }

/* 01 · 13 marcas en arco que se encienden una por una */
.grafico--marcas span {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 14%; margin: -7% 0 0 -1.5px; border-radius: 2px;
  background: currentColor; transform: rotate(calc(-120deg + var(--n) * 20deg)) translateY(-300%);
  opacity: clamp(0.15, calc(var(--a2) * 13 - var(--n)), 1);
}

/* 02 · Hoja con renglones que una línea dorada lee de arriba abajo */
.hoja { position: absolute; inset: 8% 16%; border: 1.5px solid var(--color-gris-medio); border-radius: 6px; padding: 14% 12%; display: flex; flex-direction: column; justify-content: space-between; overflow: clip; }
.hoja__renglon { position: relative; height: 3px; border-radius: 2px; background: var(--color-gris-linea); }
.hoja__renglon:nth-child(2) { width: 80%; } .hoja__renglon:nth-child(4) { width: 65%; } .hoja__renglon:nth-child(5) { width: 45%; }
.hoja__renglon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--a2) * 5.5 - var(--n)), 1));
}
.hoja__lector {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-dorado-brillo);
  box-shadow: 0 0 12px 2px rgba(226, 184, 102, 0.6); transform: translateY(calc(var(--a2) * 120px));
  opacity: calc(1 - var(--a2) * var(--a2) * var(--a2));
}

/* 03 · Conversación: burbujas escalonadas y palomitas de leído */
.grafico--chat { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.burbuja, .chat__leido {
  --p: clamp(0, calc(var(--a2) * 4 - var(--n)), 1);
  opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 14px));
}
.burbuja { display: block; height: 22%; border-radius: 12px; }
.burbuja--ellos { width: 70%; align-self: flex-start; border: 1.5px solid var(--color-gris-medio); border-bottom-left-radius: 3px; }
.burbuja--nosotros { width: 60%; align-self: flex-end; background: var(--color-dorado); border-bottom-right-radius: 3px; }
.chat__leido { align-self: flex-end; position: relative; width: 22px; height: 12px; }
.chat__leido::before, .chat__leido::after {
  content: ''; position: absolute; top: 0; width: 6px; height: 11px; border: solid var(--color-dorado-brillo); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.chat__leido::before { left: 3px; } .chat__leido::after { left: 10px; }

/* 04 · Ecualizador de voz con punto de grabación */
.grafico--voz { display: flex; flex-direction: column; justify-content: center; gap: 12%; }
.voz__rec { width: 12px; height: 12px; border-radius: 50%; background: var(--color-dorado-brillo); box-shadow: 0 0 10px rgba(226, 184, 102, 0.7); }
.voz__barras { display: flex; align-items: center; justify-content: space-between; height: 60%; }
.voz__barras span {
  width: 9%; height: 100%; border-radius: 4px; background: currentColor;
  transform: scaleY(calc(0.18 + 0.82 * sin(var(--a2) * 9 + var(--n) * 1.3) * sin(var(--a2) * 9 + var(--n) * 1.3)));
}

/* 05 · Alcance: ondas que se expanden desde un punto y barras que suben */
.onda, .alcance__punto { position: absolute; left: 22%; top: 40%; border-radius: 50%; }
.alcance__punto { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--color-dorado-brillo); }
.onda {
  width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border: 1.5px solid currentColor;
  --q: clamp(0, calc(var(--a2) * 1.6 - var(--n) * 0.3), 1);
  transform: scale(calc(0.1 + var(--q) * 0.9)); opacity: calc((1 - var(--q)) * 0.9);
}
.alcance__barras { position: absolute; right: 0; bottom: 6%; width: 52%; height: 60%; display: flex; align-items: flex-end; justify-content: space-between; }
.alcance__barras span {
  width: 14%; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: currentColor; transform-origin: bottom;
  transform: scaleY(clamp(0.05, calc(var(--a2) * 5 - var(--n)), 1));
}

/* Pulso del punto de grabación: único movimiento que no depende del scroll */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rec-late { 50% { opacity: 0.35; } }
  .voz__rec { animation: rec-late 1.2s ease-in-out infinite; }
}

/* ==========================================================================
   Navegación por secciones
   Fija arriba. Sobre el hero es transparente y sin logo; al bajar se vuelve sólida y aparece el logo chico,
   que regresa al inicio. La sección visible se marca en dorado. En celular, menú de pantalla completa
   ========================================================================== */
:root { --alto-barra: 56px; }
@media (min-width: 1024px) { :root { --alto-barra: 68px; } }

.navegacion {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950; height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5);
  padding: 0 max(var(--esp-5), calc((100% - var(--ancho-max)) / 2));
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.navegacion.solida, .pagina-legal .navegacion {
  background: rgba(38, 44, 43, 0.9); border-bottom-color: rgba(201, 154, 59, 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.navegacion__logo { display: inline-flex; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.navegacion.solida .navegacion__logo, .pagina-legal .navegacion__logo { opacity: 1; pointer-events: auto; }
.navegacion__logo img { width: 40px; height: 40px; border-radius: 50%; }
.navegacion__lista { display: flex; align-items: center; gap: var(--esp-6); margin-left: auto; }
.navegacion__lista a {
  position: relative; color: var(--color-texto-suave); text-decoration: none; font-size: var(--texto-sm);
  letter-spacing: 0.04em; padding: 10px 0; transition: color var(--transicion);
}
.navegacion__lista a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--color-dorado);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.navegacion__lista a:hover, .navegacion__lista a.activo { color: var(--color-dorado-brillo); }
.navegacion__lista a.activo::after { transform: scaleX(1); }
.navegacion__inicio { display: none; }
.navegacion__boton { display: none; }

@media (max-width: 1023px) {
  .navegacion__boton {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto;
    border: 1.5px solid var(--color-dorado); border-radius: 50%; background: rgba(38, 44, 43, 0.6); color: var(--color-dorado-brillo); cursor: pointer;
  }
  .navegacion__icono, .navegacion__icono::before, .navegacion__icono::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .navegacion__icono { position: relative; }
  .navegacion__icono::before, .navegacion__icono::after { content: ''; position: absolute; left: 0; }
  .navegacion__icono::before { top: -6px; } .navegacion__icono::after { top: 6px; }
  .navegacion.abierta .navegacion__icono { background: transparent; }
  .navegacion.abierta .navegacion__icono::before { transform: translateY(6px) rotate(45deg); }
  .navegacion.abierta .navegacion__icono::after { transform: translateY(-6px) rotate(-45deg); }
  .navegacion__lista {
    position: fixed; top: var(--alto-barra); left: 0; right: 0; bottom: 0; margin: 0;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--esp-5);
    padding: var(--esp-8) var(--esp-6); background: var(--color-sombra);
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .navegacion.abierta { background: var(--color-sombra); }
  .navegacion.abierta .navegacion__logo { opacity: 1; pointer-events: auto; }
  .navegacion.abierta .navegacion__lista { opacity: 1; visibility: visible; transform: none; }
  .navegacion__inicio { display: list-item; }
  .navegacion__lista a { font: 400 clamp(1.5rem, 1.2rem + 2vw, 2rem)/1.2 var(--fuente-titulos); color: var(--color-texto); }
}

/* Con la barra fija, el contenido fijo de proceso y pregunta deja su espacio arriba */
.proceso.fijo > .contenedor { padding-top: calc(var(--alto-barra) + var(--esp-5)); }
/* El logo grande del hero baja lo justo para no quedar debajo de la barra en escritorio */
@media (min-width: 1024px) { .encabezado { padding-top: calc(var(--alto-barra) + 8px); } }

/* Contraste sobre el hero (escritorio): mientras la barra es transparente, los enlaces van dentro de una píldora
   oscura translúcida con borde dorado, que se lee sobre cualquier zona de la foto. Al volverse sólida la barra, la píldora se disuelve */
@media (min-width: 1024px) {
  .navegacion__lista {
    padding: 4px 22px; border-radius: 999px; border: 1px solid rgba(201, 154, 59, 0.35);
    background: rgba(38, 44, 43, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .navegacion__lista a { color: var(--color-texto); }
  .navegacion.solida .navegacion__lista, .pagina-legal .navegacion__lista {
    background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .navegacion.solida .navegacion__lista a { color: var(--color-texto-suave); }
  .navegacion.solida .navegacion__lista a:hover, .navegacion.solida .navegacion__lista a.activo { color: var(--color-dorado-brillo); }
}

/* Celular: sin desenfoque en la barra. En Safari de iPhone, el desenfoque convierte a la barra en el marco de sus hijos
   fijos y el menú quedaba atrapado en sus 56 px, desbordado sobre la página y tapando el botón de cerrar */
@media (max-width: 1023px) {
  .navegacion.solida, .pagina-legal .navegacion { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(38, 44, 43, 0.97); }
  .navegacion__boton { position: relative; z-index: 2; }
  .navegacion__lista { height: calc(100dvh - var(--alto-barra)); overflow-y: auto; }

  /* Proceso centrado en celular: título, número, frase, dato, leyenda y barras */
  .proceso.fijo .proceso__intro { text-align: center; }
  .proceso.fijo .paso__texto, .proceso.fijo .paso__dato { align-items: center; text-align: center; }
  .proceso.fijo .paso__fila { justify-content: center; }
  .proceso.fijo .barra-paso { align-items: center; text-align: center; }
  .proceso.fijo .barra-paso__linea { align-self: stretch; }
}

/* «Antes de comenzar» como primer paso del formulario: centrado, con espacio y texto un poco más grande */
.pantalla--antes { align-items: center; justify-content: center; }
.pantalla--antes .antes { margin: 0 auto; }
.pantalla--antes .antes__lista li { font-size: var(--texto-base); }

/* Formulario: el paso activo queda centrado en lo alto, entre la barra de avance y los botones.
   Los grupos usan display: contents, así que cada pantalla es hija directa de .pantallas (columna flexible).
   Si el paso es más alto que el espacio, el margen automático vale 0 y no cambia nada */
.pantallas > .pantalla.activa, .grupo > .pantalla.activa { margin-block: auto; }
/* En las preguntas con opciones (fieldset), la pregunta va en un legend, que el navegador siempre dibuja primero.
   Flotarlo lo vuelve un elemento normal y respeta el orden: etiqueta del tema arriba y pregunta debajo */
.pantalla legend.pregunta__texto { float: left; width: 100%; padding: 0; }

/* Categorías: tres grupos con subtítulo y casillas alineadas del mismo ancho (dos columnas; una en celular) */
.categorias { display: flex; flex-direction: column; gap: var(--esp-4); }
.categorias__titulo { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-texto-suave); margin-bottom: var(--esp-2); }
.categorias__opciones { display: grid; grid-template-columns: 1fr; gap: var(--esp-2); }
@media (min-width: 640px) { .categorias__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat { position: relative; display: block; cursor: pointer; }
.cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat span {
  display: flex; align-items: center; gap: var(--esp-3); min-height: 44px; padding: 8px 14px;
  border: var(--linea) solid var(--color-gris-medio); border-radius: var(--radio); font-size: var(--texto-sm); line-height: 1.3;
  transition: border-color var(--transicion), background var(--transicion), box-shadow var(--transicion);
}
/* Casilla dibujada: cuadro con borde; al marcarla se rellena de dorado con su palomita */
.cat span::before {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 4px; border: var(--linea) solid var(--color-dorado);
  background: transparent center / 12px no-repeat;
}
.cat span:hover { box-shadow: var(--brillo); }
.cat input:checked + span { border-color: var(--color-dorado); background: rgba(201, 154, 59, 0.12); color: var(--color-texto); }
.cat input:checked + span::before {
  background-color: var(--color-dorado);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23262C2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cat input:focus-visible + span { outline: 2px solid var(--color-dorado-brillo); outline-offset: 2px; }