/* =========================================================================
   Mi Pastor — web pública
   =========================================================================

   Marca base en constants/theme.ts. Aquí se amplía con una familia de lilas
   profundos que en la app no hacen falta (una app se mira 20 segundos; una
   web se recorre entera y necesita cambios de tono para no aplanarse).

   Reglas que condicionan este archivo (ui-ux-pro-max, prioridad 1→7):
     · Contraste 4,5:1 en texto, 3:1 en gráficos. Verificado, no supuesto.
     · Todo lo pulsable, 44×44 px, con 8 px de separación.
     · Anillo de foco visible SIEMPRE. Se diseña, no se borra.
     · Nada de scroll horizontal en la página; si algo no cabe, scrolla ÉL.
     · Escala de espaciado 4/8.
     · Solo se animan transform y opacity. Nunca width, height, top ni left.
     · 150–300 ms en microinteracciones, ≤400 ms en transiciones complejas.
     · prefers-reduced-motion se respeta de verdad: se QUITA el movimiento,
       y lo que aparecía animado queda visible.
   ========================================================================= */

:root {
  /* --- Marca (constants/theme.ts) --- */
  --azul-noche: #1a1a2e;
  --morado: #2d1b69;
  --morado-claro: #41208e;
  --morado-suave: #eeeaf8;
  --dorado: #f5a623;
  --dorado-suave: #ffc46b;
  --dorado-tenue: #fff8e8;
  --beige: #f8f6f0;
  --blanco: #ffffff;
  --borde: #e8e4dc;
  --verde: #2e7d52;

  /* --- Familia lila: del casi negro al vapor ---
     Los fondos oscuros de la web son lila, no azul: el azul noche de la app
     es para el splash, y repetido en cinco secciones seguidas apaga la
     página. El lila mantiene la marca y da profundidad. */
  --lila-abismo: #150c2e;
  --lila-profundo: #241547;
  --lila-oscuro: #35206b;
  --lila: #4a2d8f;
  --lila-vivo: #7c4dff;
  --lila-niebla: #f4f0fc;
  --lila-vapor: #faf8ff;

  /* --- Texto --- */
  --texto: #2c2c2c;
  --texto-2: #6b6456; /* 5,4:1 sobre beige · 5,7:1 sobre blanco */
  --texto-inv: #ffffff;
  --texto-inv-2: rgba(255, 255, 255, 0.8); /* 9,4:1 sobre lila profundo */
  --texto-inv-3: rgba(255, 255, 255, 0.6); /* 5,1:1 · el suelo, no se baja */

  /* --- Escala 4/8 --- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  --r-chip: 999px;
  --r-tarjeta: 18px;
  --r-grande: 28px;

  --sombra-1: 0 2px 8px rgba(36, 21, 71, 0.06);
  --sombra-2: 0 10px 30px rgba(36, 21, 71, 0.1);
  --sombra-3: 0 28px 70px rgba(21, 12, 46, 0.28);
  --brillo-lila: 0 0 60px rgba(124, 77, 255, 0.28);

  --t-rapida: 150ms;
  --t-normal: 260ms;
  --t-larga: 400ms;
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --muelle: cubic-bezier(0.34, 1.56, 0.64, 1);

  --ancho: 1140px;
  --ancho-lectura: 720px;
  --z-cabecera: 100;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--texto);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: Lora, Georgia, 'Times New Roman', serif;
  line-height: 1.2;
  margin: 0 0 var(--e3);
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--e4);
  max-width: 68ch; /* 60–75 caracteres: más, y el ojo pierde el renglón */
}

em {
  font-style: italic;
  color: var(--morado-claro);
}

a {
  color: var(--morado);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--lila-vivo);
  outline-offset: 3px;
  border-radius: 6px;
}

.oscuro :focus-visible,
.beta :focus-visible,
.pie :focus-visible {
  outline-color: var(--dorado);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  top: -100px;
  left: var(--e4);
  z-index: 1000;
  background: var(--lila);
  color: var(--texto-inv);
  padding: var(--e3) var(--e5);
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-rapida) var(--salida);
}

.saltar:focus {
  top: 0;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--e5);
}

/* =========================================================================
   Barra de progreso de lectura
   Se escala con transform (no con width) para que la anime la GPU y no
   provoque un reflow en cada píxel de scroll.
   ========================================================================= */

.progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-cabecera) + 1);
  background: linear-gradient(90deg, var(--lila-vivo), var(--dorado));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* =========================================================================
   Cabecera
   ========================================================================= */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  background: rgba(248, 246, 240, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-normal) ease,
    border-color var(--t-normal) ease,
    box-shadow var(--t-normal) ease;
}

/* Al separarse de arriba, la cabecera se despega visualmente del contenido. */
.cabecera.flotando {
  background: rgba(248, 246, 240, 0.93);
  border-bottom-color: var(--borde);
  box-shadow: var(--sombra-1);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 72px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: Lora, Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--texto);
  text-decoration: none;
  min-height: 44px;
}

.marca img {
  width: 36px;
  height: 36px;
  transition: transform var(--t-normal) var(--muelle);
}

.marca:hover img {
  transform: rotate(-7deg) scale(1.08);
}

.nav-enlaces {
  display: flex;
  align-items: center;
  gap: var(--e5);
}

.nav-enlaces a:not(.boton) {
  position: relative;
  color: var(--texto-2);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--t-rapida) ease;
}

/* Subrayado que crece desde la izquierda. Es un pseudoelemento con scaleX,
   así que no mueve nada de alrededor al aparecer. */
.nav-enlaces a:not(.boton)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  background: var(--lila-vivo);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-normal) var(--salida);
}

.nav-enlaces a:not(.boton):hover {
  color: var(--lila);
}

.nav-enlaces a:not(.boton):hover::after {
  transform: scaleX(1);
}

/* =========================================================================
   Botones
   ========================================================================= */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform var(--t-rapida) var(--salida),
    box-shadow var(--t-normal) ease,
    background-color var(--t-rapida) ease;
}

/* Texto sobre dorado SIEMPRE oscuro. #1A1A2E sobre #F5A623 = 8,6:1;
   en blanco daría 2,1:1, ilegible. */
.boton-primario {
  background: var(--dorado);
  color: var(--azul-noche);
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.34);
}

/* Destello que cruza el botón al pasar por encima. Va con transform sobre un
   pseudoelemento: ni toca el layout ni entorpece el clic. */
.boton-primario::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--t-larga) ease;
  pointer-events: none;
}

.boton-primario:hover::before {
  transform: translateX(120%);
}

.boton-primario:hover {
  background: var(--dorado-suave);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(245, 166, 35, 0.46);
}

.boton-primario:active {
  transform: translateY(0) scale(0.985);
}

.boton-secundario {
  background: var(--blanco);
  color: var(--lila);
  border-color: var(--borde);
}

.boton-secundario:hover {
  background: var(--lila-niebla);
  border-color: var(--lila);
  transform: translateY(-2px);
}

.boton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  padding: var(--e9) 0 var(--e8);
  overflow: hidden;
  background: linear-gradient(175deg, var(--lila-vapor) 0%, var(--beige) 62%);
}

/* Orbes de color en movimiento lento. Van detrás de todo, sin capturar
   clics, y desaparecen si se pide menos movimiento. */
.orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.orbe-1 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.5), transparent 70%);
  top: -140px;
  left: -110px;
  animation: derivar-1 22s ease-in-out infinite;
}

.orbe-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.42), transparent 70%);
  top: 8%;
  right: -120px;
  animation: derivar-2 27s ease-in-out infinite;
}

.orbe-3 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(74, 45, 143, 0.34), transparent 70%);
  bottom: -130px;
  left: 38%;
  animation: derivar-3 31s ease-in-out infinite;
}

@keyframes derivar-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 48px) scale(1.14); }
}

@keyframes derivar-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-52px, 62px) scale(0.9); }
}

@keyframes derivar-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(48px, -44px) scale(1.1); }
}

/* --- Rayos de luz ---------------------------------------------------------
   Luz que entra en diagonal desde arriba, como por la vidriera de un
   templo. Es lo que da el calor: sin esto el lila queda frío y tecnológico,
   y lo que se vende aquí es la compañía de un pastor, no una app de IA. */

.rayos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.rayo {
  position: absolute;
  top: -30%;
  width: 120px;
  height: 160%;
  background: linear-gradient(
    to bottom,
    rgba(255, 214, 145, 0.3) 0%,
    rgba(255, 214, 145, 0.12) 42%,
    transparent 78%
  );
  filter: blur(22px);
  transform-origin: top center;
  will-change: transform, opacity;
}

.rayo-1 { left: 8%;  transform: rotate(14deg); animation: respirar-rayo 11s ease-in-out infinite; }
.rayo-2 { left: 26%; width: 70px; transform: rotate(11deg); animation: respirar-rayo 14s ease-in-out infinite 1.8s; }
.rayo-3 { left: 62%; width: 150px; transform: rotate(17deg); animation: respirar-rayo 17s ease-in-out infinite 3.4s; }

@keyframes respirar-rayo {
  0%, 100% { opacity: 0.42; transform: rotate(14deg) translateX(0); }
  50% { opacity: 0.9; transform: rotate(16deg) translateX(22px); }
}

/* --- Motas de luz cayendo -------------------------------------------------
   Se dibujan en un <canvas> y no con cien <div>: cien nodos animados obligan
   al navegador a recalcular estilo en cada fotograma y el móvil se arrastra.
   El canvas es una sola capa y lo pinta la GPU.

   El JS lo apaga solo cuando la sección sale de pantalla y cuando el usuario
   pide menos movimiento. */

.motas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: var(--e8);
  align-items: center;
}

.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid var(--borde);
  border-radius: var(--r-chip);
  padding: 7px var(--e4) 7px var(--e2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lila);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra-1);
}

.sobretitulo img {
  width: 22px;
  height: 22px;
}

.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  margin-bottom: var(--e4);
}

/* El degradado del título usa background-clip: es texto de verdad, se
   selecciona y lo lee un lector de pantalla. */
.hero h1 em {
  background: linear-gradient(100deg, var(--lila-vivo) 0%, var(--morado-claro) 55%, var(--dorado) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--lila);
}

.entradilla {
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  color: var(--texto-2);
  max-width: 46ch;
  margin-bottom: var(--e5);
}

.nota-form {
  font-size: 13.5px;
  color: var(--texto-2);
  max-width: 44ch;
  margin: var(--e3) 0 0;
}

.tiendas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

.tienda {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  background: var(--lila-profundo);
  color: var(--texto-inv);
  border-radius: 14px;
  padding: 10px var(--e4);
  transition: transform var(--t-normal) var(--salida);
}

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

.tienda svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.tienda small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-inv-3);
  line-height: 1.4;
}

.tienda strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

/* =========================================================================
   Maqueta de móvil
   ========================================================================= */

.escenario {
  position: relative;
  display: flex;
  justify-content: center;
  /* Perspectiva para poder inclinar el móvil sin que parezca un recorte. */
  perspective: 1600px;
}

/* =========================================================================
   Retrato del pastor + móvil encima
   -------------------------------------------------------------------------
   La mano tendida es el argumento emocional de toda la web: lo que se vende
   no es una app de preguntas y respuestas, es que alguien te reciba. La foto
   va primero y el móvil se apoya encima, no al revés — el producto sostiene
   a la persona, no la tapa.
   ========================================================================= */

.escenario-hero {
  position: relative;
  padding: 0 0 var(--e7) var(--e7);
}

.retrato {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--sombra-3);
  /* Recorte alto: la cara y la mano arriba, el suelo de la sala fuera. */
  aspect-ratio: 4 / 5;
}

.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 32% desde arriba: deja la cara completa y la mano dentro del encuadre. */
  object-position: 50% 26%;
  transform: scale(1.02);
  transition: transform 900ms var(--salida);
}

.escenario-hero:hover .retrato img {
  transform: scale(1.05);
}

/* Velo cálido: iguala la foto con la paleta y da sitio a la frase de abajo
   sin que el texto quede sobre la cara. */
.retrato::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(190deg, rgba(124, 77, 255, 0.14) 0%, transparent 32%),
    linear-gradient(to top, rgba(21, 12, 46, 0.9) 0%, rgba(21, 12, 46, 0.42) 22%, transparent 48%);
  pointer-events: none;
}

.retrato-frase {
  position: absolute;
  left: var(--e5);
  right: var(--e5);
  bottom: var(--e5);
  z-index: 2;
  margin: 0;
  max-width: none;
  font-family: Lora, Georgia, serif;
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.5;
  color: var(--texto-inv);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.retrato-frase small {
  display: block;
  margin-top: 6px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dorado);
  text-shadow: none;
}

/* El móvil se apoya en la esquina inferior izquierda del retrato. */
.escenario-hero .movil {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 178px;
  z-index: 3;
  border-radius: 30px;
  padding: 7px;
  animation: flotar-apoyado 8s ease-in-out infinite;
}

@keyframes flotar-apoyado {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(-1.4deg); }
}

.escenario-hero .movil .bisel {
  border-radius: 24px;
  padding: 2px;
}

.escenario-hero .movil .pantalla {
  border-radius: 22px;
}

.escenario-hero .movil .barra-estado {
  height: 26px;
  padding: 0 12px;
  font-size: 9px;
}

.escenario-hero .movil .isla {
  top: 4px;
  height: 17px;
  width: 32%;
  padding-right: 6px;
}

.escenario-hero .movil .isla::after {
  width: 6px;
  height: 6px;
}

.escenario-hero .movil .iconos-estado svg {
  height: 8px;
}

.escenario-hero .movil .barra-gestos {
  bottom: 5px;
  height: 3px;
}

/* Aquí la sombra proyectada la pone el retrato, no el móvil. */
.escenario-hero::after {
  content: none;
}

/* --- Móvil ---------------------------------------------------------------
   Un rectángulo negro con una captura dentro no parece un teléfono. Lo que
   lo vende son cuatro cosas, y las cuatro están aquí:
     1. Un chasis metálico con degradado, no un color plano.
     2. Bisel negro entre chasis y pantalla (el borde real del cristal).
     3. Botones físicos que sobresalen del canto.
     4. Un reflejo diagonal sobre el cristal.
   El radio del chasis y el de la pantalla están anidados: el interior es el
   exterior menos el grosor del marco. Si no, las esquinas cantan. */

.movil {
  position: relative;
  width: min(312px, 78vw);
  aspect-ratio: 1009 / 2048;
  border-radius: 46px;
  padding: 11px;
  /* Chasis: claro arriba-izquierda, oscuro abajo-derecha, como el titanio. */
  background: linear-gradient(145deg, #6a6580 0%, #2b2740 26%, #17142a 52%, #3a3552 78%, #625d78 100%);
  box-shadow:
    var(--sombra-3),
    var(--brillo-lila),
    /* filo interior claro = canto biselado */
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55);
  animation: flotar 8s ease-in-out infinite;
  will-change: transform;
  transform-style: preserve-3d;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotateY(-3deg) rotateX(1deg); }
  50% { transform: translateY(-16px) rotateY(1deg) rotateX(-1deg); }
}

/* Botones físicos. Sobresalen 2 px del canto y llevan su propio degradado
   para que no parezcan pegatinas. */
.movil .btn-lateral {
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4a4560, #6d6885 45%, #322e48);
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.45);
}

.movil .btn-silencio { left: -3px; top: 15%; height: 30px; }
.movil .btn-vol-mas { left: -3px; top: 22.5%; height: 52px; }
.movil .btn-vol-menos { left: -3px; top: 32.5%; height: 52px; }

.movil .btn-encendido {
  right: -3px;
  top: 25%;
  height: 76px;
  background: linear-gradient(270deg, #4a4560, #6d6885 45%, #322e48);
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.45);
}

/* Bisel: el negro entre el metal y la imagen. Sin esto la captura parece
   flotar pegada al chasis. */
.movil .bisel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: #05040a;
  padding: 3px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
}

/* La pantalla es una columna: barra de estado arriba, captura debajo.
   ANTES la isla iba en `position: absolute` encima de la imagen y tapaba la
   cabecera de la app — se comía el logo, el "Mi Pastor" y el contador de
   mensajes, justo lo que hay que enseñar. Las capturas no llevan barra de
   estado, así que hay que darles una en vez de robarles espacio. */
.movil .pantalla {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
}

.movil .pantalla img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
}

/* --- Barra de estado ---
   Fondo blanco porque es el color de la cabecera de la app en las pantallas
   que enseñamos: así la barra y la captura parecen la misma pantalla y no
   dos trozos pegados. Con `.sobre-beige` se cambia para las capturas cuyo
   borde superior es beige. */
.movil .barra-estado {
  position: relative;
  z-index: 3;
  flex: none;
  height: 40px;
  padding: 0 20px;
  background: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Inter, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.01em;
}

.movil .pantalla.sobre-beige .barra-estado {
  background: var(--beige);
}

.movil .pantalla.sobre-beige {
  background: var(--beige);
}

.movil .hora {
  font-variant-numeric: tabular-nums;
}

.movil .iconos-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.movil .iconos-estado svg {
  height: 11px;
  width: auto;
  display: block;
}

/* Isla dinámica: va DENTRO de la barra de estado, centrada, sin tapar nada
   de la captura. */
.movil .isla {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 26px;
  background: #05040a;
  border-radius: 999px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9px;
}

.movil .isla::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #2f3a63 0%, #0d1024 58%, #05040a 100%);
  box-shadow: inset 0 0 2px rgba(120, 160, 255, 0.55);
}

/* Reflejo diagonal sobre el cristal. Va por encima de la captura y no
   captura clics. */
.movil .brillo {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 22%,
    transparent 40%,
    transparent 62%,
    rgba(255, 255, 255, 0.05) 82%,
    rgba(255, 255, 255, 0.11) 100%
  );
}

/* Destello que recorre el cristal cada pocos segundos, como cuando giras el
   móvil bajo una lámpara. */
.movil .brillo::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.13) 42%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.13) 58%,
    transparent
  );
  transform: rotate(14deg);
  animation: destello-cristal 7s ease-in-out infinite 1.6s;
}

@keyframes destello-cristal {
  0%, 62% { transform: translateX(0) rotate(14deg); }
  92%, 100% { transform: translateX(420%) rotate(14deg); }
}

/* Barra de gestos */
.movil .barra-gestos {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.42);
  z-index: 5;
}

/* Sombra proyectada en el suelo: apoya el móvil en la página en vez de
   dejarlo recortado sobre el fondo. */
.escenario::after {
  content: '';
  position: absolute;
  bottom: -28px;
  left: 50%;
  width: min(260px, 66vw);
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(36, 21, 71, 0.34), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  animation: sombra-respira 8s ease-in-out infinite;
}

@keyframes sombra-respira {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50% { transform: translateX(-50%) scale(0.86); opacity: 0.6; }
}

.etiqueta-flotante {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--borde);
  border-radius: var(--r-chip);
  padding: 9px var(--e4);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  box-shadow: var(--sombra-2);
  white-space: nowrap;
  will-change: transform;
}

.etiqueta-flotante .punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.ef-1 {
  top: 13%;
  left: -8%;
  animation: flotar-etiqueta 5.5s ease-in-out infinite;
}

.ef-2 {
  bottom: 17%;
  right: -6%;
  animation: flotar-etiqueta 6.5s ease-in-out infinite 0.8s;
}

@keyframes flotar-etiqueta {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Pulso del punto verde de "en línea". */
.punto.vivo {
  position: relative;
}

.punto.vivo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--verde);
  animation: pulsar 2.2s ease-out infinite;
}

@keyframes pulsar {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* =========================================================================
   Secciones y fondos
   ========================================================================= */

.seccion {
  position: relative;
  padding: var(--e9) 0;
}

.fondo-vapor {
  background: var(--lila-vapor);
}

.fondo-niebla {
  background: linear-gradient(180deg, var(--lila-niebla), var(--blanco));
}

.fondo-blanco {
  background: var(--blanco);
}

/* --- Bloques oscuros: lila profundo con textura --- */
.oscuro {
  color: var(--texto-inv);
  background:
    radial-gradient(900px 480px at 12% 0%, rgba(124, 77, 255, 0.28), transparent 62%),
    radial-gradient(700px 420px at 92% 100%, rgba(245, 166, 35, 0.14), transparent 60%),
    linear-gradient(165deg, var(--lila-profundo) 0%, var(--lila-abismo) 100%);
}

.oscuro h2,
.oscuro h3 {
  color: var(--texto-inv);
}

.oscuro p {
  color: var(--texto-inv-2);
}

.oscuro em {
  color: var(--dorado);
}

/* Transición diagonal entre una sección clara y una oscura. Es un
   pseudoelemento inclinado: no ocupa sitio en el flujo. */
.corte-arriba::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -5%;
  width: 110%;
  height: 70px;
  background: inherit;
  transform: skewY(-1.6deg);
  transform-origin: 0 0;
  z-index: 0;
}

.corte-arriba > * {
  position: relative;
  z-index: 1;
}

.cabeza {
  text-align: center;
  margin-bottom: var(--e8);
}

.cabeza h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  max-width: 20ch;
  margin-inline: auto;
}

.cabeza p {
  color: var(--texto-2);
  max-width: 56ch;
  margin-inline: auto;
}

.oscuro .cabeza p {
  color: var(--texto-inv-2);
}

.separador-marca {
  display: flex;
  justify-content: center;
  margin-bottom: var(--e5);
}

.separador-marca img {
  width: 42px;
  height: 42px;
}

/* =========================================================================
   REVELADOR — la pieza central
   -------------------------------------------------------------------------
   Arrastras y el versículo de 1909 se convierte en español de hoy. Es el
   argumento entero de la app convertido en algo que se toca.

   El mando es un <input type="range"> de verdad, escondido pero funcional:
   así se maneja con el teclado, lo anuncia un lector de pantalla y funciona
   con dedo, ratón y lápiz sin escribir una línea de gestos.
   ========================================================================= */

.revelador {
  --pos: 50%;
  position: relative;
  margin-top: var(--e7);
  border-radius: var(--r-grande);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--sombra-3);
  touch-action: pan-y; /* deja pasar el scroll vertical de la página */
}

.revelador .capas {
  display: grid;
  /* Las dos capas ocupan la MISMA celda: el alto lo fija la más larga y no
     hay salto al deslizar. */
}

.revelador .capa {
  grid-area: 1 / 1;
  padding: var(--e7) var(--e6);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.revelador .capa.antigua {
  background: linear-gradient(150deg, rgba(53, 32, 107, 0.55), rgba(21, 12, 46, 0.75));
}

.revelador .capa.nueva {
  background: linear-gradient(150deg, rgba(124, 77, 255, 0.3), rgba(245, 166, 35, 0.16));
  /* Se recorta por la derecha según la posición del mando. */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.revelador .etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: var(--e4);
  padding: 5px var(--e3);
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.12);
  color: var(--texto-inv-2);
}

.revelador .nueva .etiqueta {
  background: rgba(245, 166, 35, 0.25);
  color: var(--dorado);
}

.revelador blockquote {
  margin: 0;
  max-width: 34ch;
  font-family: Lora, Georgia, serif;
  font-size: clamp(1.12rem, 2.1vw, 1.5rem);
  line-height: 1.55;
  color: var(--texto-inv);
}

.revelador .antigua blockquote {
  color: var(--texto-inv-2);
}

/* Línea vertical que marca el corte */
.revelador .linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--dorado) 12%, var(--dorado) 88%, transparent);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}

/* Tirador. 46 px: por encima del mínimo de 44. */
.revelador .tirador {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--lila-abismo);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(245, 166, 35, 0.5);
  pointer-events: none;
  z-index: 4;
  transition: transform var(--t-rapida) var(--muelle);
}

.revelador .tirador svg {
  width: 22px;
  height: 22px;
}

.revelador .mando:hover + .tirador,
.revelador .mando:focus-visible + .tirador {
  transform: scale(1.12);
}

.revelador .mando:active + .tirador {
  transform: scale(0.95);
}

/* El input ocupa toda la pieza, invisible pero operable. */
.revelador .mando {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.revelador .mando::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 46px;
}

.revelador .mando::-moz-range-thumb {
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
}

/* El anillo de foco tiene que verse: el input es transparente, así que se
   pinta sobre el contenedor. */
.revelador:has(.mando:focus-visible) {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
}

.revelador .pie-revelador {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  background: rgba(21, 12, 46, 0.66);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: var(--texto-inv-3);
  pointer-events: none;
}

.revelador .pie-revelador strong {
  color: var(--texto-inv-2);
  font-weight: 600;
}

/* Pista de "arrástrame", solo hasta que se toca por primera vez. */
.pista-arrastre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: vaiven 2.4s ease-in-out infinite;
}

@keyframes vaiven {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}

.revelador.tocado .pista-arrastre {
  display: none;
}

/* =========================================================================
   Cifras que cuentan
   ========================================================================= */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e4);
  margin-top: var(--e7);
}

.cifra-caja {
  text-align: center;
  padding: var(--e5) var(--e4);
  border-radius: var(--r-tarjeta);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cifra-caja b {
  display: block;
  font-family: Lora, Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--dorado);
  /* Cifras de ancho fijo: si no, el número baila mientras cuenta. */
  font-variant-numeric: tabular-nums;
}

.cifra-caja span {
  display: block;
  margin-top: var(--e1);
  font-size: 13.5px;
  color: var(--texto-inv-3);
}

/* =========================================================================
   Cinta de referencias
   ========================================================================= */

.cinta {
  overflow: hidden;
  padding: var(--e5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Difumina los bordes para que no "aparezcan" de golpe. */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cinta-pista {
  display: flex;
  gap: var(--e7);
  width: max-content;
  animation: desfilar 42s linear infinite;
  will-change: transform;
}

.cinta span {
  font-family: Lora, Georgia, serif;
  font-size: 1.05rem;
  color: var(--texto-inv-3);
  white-space: nowrap;
}

@keyframes desfilar {
  from { transform: translateX(0); }
  /* -50% porque la lista está duplicada: el corte es invisible. */
  to { transform: translateX(-50%); }
}

/* =========================================================================
   Tarjetas
   ========================================================================= */

.rejilla-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e4);
}

.tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  padding: var(--e5);
  overflow: hidden;
  transition:
    transform var(--t-normal) var(--salida),
    box-shadow var(--t-normal) ease,
    border-color var(--t-normal) ease;
}

/* Velo lila que sube al pasar por encima. Opacidad, no color de fondo: se
   compone en GPU y no repinta la tarjeta entera. */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--lila-niebla), transparent 65%);
  opacity: 0;
  transition: opacity var(--t-normal) ease;
  pointer-events: none;
}

.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: rgba(124, 77, 255, 0.4);
}

.tarjeta:hover::before {
  opacity: 1;
}

.tarjeta > * {
  position: relative;
}

/* Iconos SVG, nunca emoji: el emoji cambia de dibujo en cada sistema y no
   se puede teñir con los colores de la marca. */
.icono {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: var(--e4);
  background: linear-gradient(145deg, var(--lila-niebla), var(--morado-suave));
  color: var(--lila);
  transition: transform var(--t-normal) var(--muelle);
}

.tarjeta:hover .icono {
  transform: scale(1.09) rotate(-5deg);
}

.icono svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.75; /* mismo grosor en todos: si no, se nota */
}

.icono.dorado {
  background: linear-gradient(145deg, var(--dorado-tenue), #ffeec9);
  color: #a86a00; /* el dorado puro sobre crema no llega a 4,5:1 */
}

.tarjeta h3 {
  font-size: 1.18rem;
  margin-bottom: 6px;
}

.tarjeta p {
  margin: 0;
  color: var(--texto-2);
  font-size: 15.5px;
}

/* =========================================================================
   Galería
   ========================================================================= */

.galeria-marco {
  position: relative;
}

.galeria {
  display: flex;
  gap: var(--e4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--e5) var(--e5) var(--e6);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.galeria::-webkit-scrollbar {
  display: none;
}

.captura {
  flex: none;
  width: 244px;
  scroll-snap-align: center;
  border-radius: 26px;
  overflow: hidden;
  border: 8px solid var(--lila-abismo);
  box-shadow: var(--sombra-2);
  background: var(--lila-abismo);
  transition:
    transform var(--t-normal) var(--salida),
    box-shadow var(--t-normal) ease;
}

.captura:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--sombra-3);
}

.captura img {
  width: 100%;
  aspect-ratio: 1009 / 2048;
  object-fit: cover;
}

/* La galería se desplaza sola de derecha a izquierda. Lo mueve el JS con
   scrollLeft y no una animación CSS, porque así el usuario puede seguir
   arrastrando con el dedo o la rueda: una animación CSS le quitaría el
   control del carrusel, y quitarle el control a alguien para enseñarle algo
   es justo lo contrario de lo que se busca. */
.galeria.auto {
  scroll-snap-type: none; /* el snap pelearía con el desplazamiento continuo */
}

/* =========================================================================
   Bloques partidos
   ========================================================================= */

.partido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e8);
  align-items: center;
}

.partido.invertido .texto-partido {
  order: 2;
}

.partido h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
}

.marcas {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.marcas li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  color: var(--texto-2);
  font-size: 16px;
}

.oscuro .marcas li {
  color: var(--texto-inv-2);
}

.tic {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lila-niebla);
  color: var(--lila);
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.oscuro .tic {
  background: rgba(245, 166, 35, 0.2);
  color: var(--dorado);
}

.tic svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.tarjeta-visual {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  padding: var(--e5);
  box-shadow: var(--sombra-2);
}

.oscuro .tarjeta-visual {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Chat simulado */
.chat-demo {
  display: grid;
  gap: var(--e3);
}

.burbuja {
  border-radius: 18px;
  padding: var(--e3) var(--e4);
  font-size: 15px;
  line-height: 1.55;
  max-width: 88%;
  margin: 0;
}

.burbuja.mia {
  background: linear-gradient(135deg, var(--lila), var(--morado));
  color: var(--texto-inv);
  justify-self: end;
  border-bottom-right-radius: 6px;
}

/* El color se declara AQUÍ, explícito, y no se hereda.
   Dentro de `.oscuro`, la regla `.oscuro p { color: blanco }` pintaba estas
   burbujas de blanco sobre fondo beige: texto invisible. Un componente que
   lleva su propio fondo tiene que llevar también su propio color de texto,
   o depende de en qué sección lo pegues. */
.burbuja.suya {
  background: var(--beige);
  border: 1px solid var(--borde);
  color: var(--texto);
  justify-self: start;
  border-bottom-left-radius: 6px;
  font-family: Lora, Georgia, serif;
}

.burbuja.mia {
  color: var(--texto-inv);
}

/* Versículo dentro de una respuesta del Pastor */
.burbuja .verso {
  display: block;
  margin: var(--e3) 0;
  padding-left: var(--e3);
  border-left: 3px solid var(--dorado);
  color: var(--morado);
  font-style: italic;
}

.burbuja .verso b {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a86a00;
}

/* Tres puntos de "escribiendo". */
.escribiendo {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: var(--e4);
}

.escribiendo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lila);
  opacity: 0.45;
  animation: rebotar 1.3s ease-in-out infinite;
}

.escribiendo i:nth-child(2) { animation-delay: 0.18s; }
.escribiendo i:nth-child(3) { animation-delay: 0.36s; }

@keyframes rebotar {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* =========================================================================
   Precios
   ========================================================================= */

.precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
  align-items: stretch;
}

.precio {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  padding: var(--e6) var(--e5) var(--e5);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition:
    transform var(--t-normal) var(--salida),
    box-shadow var(--t-normal) ease;
}

.precio:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
}

/* Un único destacado: dos CTA compitiendo es ninguno. */
.precio.destacado {
  border: 2px solid var(--lila-vivo);
  box-shadow: var(--sombra-2);
  position: relative;
  background: linear-gradient(180deg, var(--lila-vapor), var(--blanco) 55%);
}

.precio .insignia {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(100deg, var(--lila-vivo), var(--lila));
  color: var(--texto-inv);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px var(--e3);
  border-radius: var(--r-chip);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(124, 77, 255, 0.4);
}

.precio h3 {
  font-size: 1.1rem;
  margin-bottom: var(--e2);
}

.precio .cifra {
  font-family: Lora, Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--lila);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.precio .periodo {
  font-size: 13px;
  color: var(--texto-2);
  margin-bottom: var(--e4);
}

.precio .cuanto {
  font-size: 15px;
  color: var(--texto);
  margin: 0;
  max-width: none;
}

.nota-precios {
  text-align: center;
  font-size: 14px;
  color: var(--texto-2);
  margin: var(--e5) auto 0;
  max-width: 60ch;
}

/* =========================================================================
   Preguntas frecuentes
   ========================================================================= */

.faq {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  display: grid;
  gap: var(--e3);
}

.faq details {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  transition: border-color var(--t-normal) ease, box-shadow var(--t-normal) ease;
}

.faq details[open] {
  border-color: rgba(124, 77, 255, 0.42);
  box-shadow: var(--sombra-1);
}

.faq summary {
  cursor: pointer;
  padding: var(--e4) var(--e5);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  font-weight: 600;
  font-size: 16.5px;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--lila);
  border-bottom: 2px solid var(--lila);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-normal) var(--salida);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.faq .respuesta {
  padding: 0 var(--e5) var(--e5);
  animation: desplegar var(--t-normal) var(--salida);
}

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.faq .respuesta p {
  margin: 0;
  color: var(--texto-2);
  font-size: 16px;
  max-width: none;
}

.faq .respuesta p + p {
  margin-top: var(--e3);
}

/* =========================================================================
   Beta
   ========================================================================= */

.beta {
  position: relative;
  overflow: hidden;
  color: var(--texto-inv);
  padding: var(--e9) 0;
  background:
    radial-gradient(760px 420px at 20% 10%, rgba(124, 77, 255, 0.4), transparent 62%),
    radial-gradient(680px 400px at 84% 88%, rgba(245, 166, 35, 0.2), transparent 60%),
    linear-gradient(150deg, var(--lila-oscuro) 0%, var(--lila-abismo) 100%);
}

.beta .contenedor {
  position: relative;
  z-index: 1;
  max-width: 680px;
  text-align: center;
}

.beta h2 {
  color: var(--texto-inv);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

.beta h2 em {
  color: var(--dorado);
}

.beta > .contenedor > p {
  color: var(--texto-inv-2);
  margin-inline: auto;
}

.beta .nota-form {
  color: var(--texto-inv-3);
  margin-inline: auto;
}

.beta .nota-form a {
  color: var(--texto-inv-2);
}

/* --- Formulario --- */

.formulario {
  display: flex;
  gap: var(--e2);
  margin: var(--e6) 0 var(--e3);
  text-align: left;
}

.formulario .campo {
  flex: 1;
  min-width: 0;
}

.formulario input {
  width: 100%;
  min-height: 48px;
  padding: var(--e3) var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-chip);
  background: var(--blanco);
  color: var(--texto);
  font-family: inherit;
  /* 16 px mínimo: por debajo, iOS hace zoom solo al enfocar. */
  font-size: 16px;
  transition: border-color var(--t-rapida) ease, box-shadow var(--t-rapida) ease;
}

.formulario input:focus {
  border-color: var(--lila-vivo);
  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.16);
}

.beta .formulario input {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--texto-inv);
}

.beta .formulario input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.beta .formulario input:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--dorado);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.22);
}

.formulario input[aria-invalid='true'] {
  border-color: #ff9d94;
  border-width: 2px;
}

/* El error va PEGADO al campo, no en un resumen al principio. */
.error-campo {
  display: block;
  min-height: 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #c0392b;
  padding: 4px var(--e5) 0;
}

.beta .error-campo {
  color: #ffb3ab;
}

.mensaje {
  min-height: 26px;
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 var(--e2);
  max-width: none;
}

.mensaje.ok {
  color: var(--dorado);
  animation: entrar-ok var(--t-larga) var(--muelle);
}

@keyframes entrar-ok {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

.mensaje.error {
  color: #ffb3ab;
}

/* =========================================================================
   Pie
   ========================================================================= */

.pie {
  background: var(--lila-abismo);
  color: var(--texto-inv-3);
  padding: var(--e7) 0 var(--e6);
  font-size: 14.5px;
}

.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5) var(--e7);
  align-items: flex-start;
  justify-content: space-between;
}

.pie strong {
  color: var(--texto-inv);
}

.pie a {
  color: var(--texto-inv-2);
}

.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
}

.pie nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pie-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e2);
}

.pie-marca img {
  width: 34px;
  height: 34px;
}

/* Instagram pegado a la marca. El @ va escrito, no solo el icono: un icono
   suelto no dice cuál es la cuenta, y aquí lo que interesa es que se lea
   «@mi_pastor_app» y se pueda buscar aunque no se pulse. */
.pie-marca .social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--e3);
  padding: 6px var(--e3);
  min-height: 34px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--texto-inv-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--t-rapida) ease,
    border-color var(--t-rapida) ease,
    color var(--t-rapida) ease,
    transform var(--t-rapida) var(--salida);
}

.pie-marca .social svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.pie-marca .social:hover {
  /* Los colores de Instagram, sin usar su logotipo oficial: el icono es un
     trazo genérico. Copiar la marca ajena en un pie de página es la clase de
     detalle que acaba en un correo de su departamento legal. */
  background: linear-gradient(100deg, rgba(240, 148, 51, 0.22), rgba(188, 42, 141, 0.28), rgba(88, 81, 219, 0.24));
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--texto-inv);
  transform: translateY(-1px);
}

/* =========================================================================
   Páginas legales y blog
   ========================================================================= */

.legal {
  background: var(--blanco);
  padding: var(--e7) 0 var(--e9);
}

.legal .contenedor {
  max-width: var(--ancho-lectura);
}

.legal h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}

.legal h2 {
  font-size: 1.45rem;
  margin-top: 2.2em;
  padding-top: 0.7em;
  border-top: 1px solid var(--borde);
}

.legal h3 {
  font-size: 1.12rem;
  margin-top: 1.8em;
}

.legal p,
.legal li {
  max-width: none;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
}

.legal th,
.legal td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.legal th {
  background: var(--lila-niebla);
  font-weight: 600;
}

/* Una tabla ancha scrolla ELLA. La página, nunca. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal blockquote {
  margin: 1.6em 0;
  padding: var(--e4) var(--e5);
  background: var(--lila-niebla);
  border-left: 4px solid var(--dorado);
  border-radius: 0 12px 12px 0;
}

.legal blockquote > :first-child { margin-top: 0; }
.legal blockquote > :last-child { margin-bottom: 0; }

.legal hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 2.4em 0;
}

.legal code {
  background: var(--morado-suave);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.88em;
  color: var(--lila);
}

.legal ul {
  padding-left: 1.3em;
  list-style: disc;
}

.legal li {
  margin-bottom: 0.4em;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: var(--e4);
  font-size: 15px;
}

/* --- Blog --- */

.entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e5);
}

.entrada {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--t-normal) var(--salida),
    box-shadow var(--t-normal) ease;
}

.entrada:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
}

.entrada .portada {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(400px 200px at 30% 20%, rgba(124, 77, 255, 0.5), transparent 70%),
    linear-gradient(140deg, var(--lila-oscuro), var(--lila-abismo));
  display: grid;
  place-items: center;
}

.entrada .portada img {
  width: 56px;
  height: 56px;
  opacity: 0.94;
  transition: transform var(--t-normal) var(--muelle);
}

.entrada:hover .portada img {
  transform: scale(1.12) rotate(-6deg);
}

.entrada .cuerpo {
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.entrada .categoria {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lila);
  margin-bottom: var(--e2);
}

.entrada h2 {
  font-size: 1.24rem;
  margin-bottom: var(--e2);
}

.entrada h2 a {
  color: var(--texto);
  text-decoration: none;
}

.entrada h2 a:hover {
  color: var(--lila);
}

.entrada p {
  color: var(--texto-2);
  font-size: 15px;
  flex: 1;
  max-width: none;
}

.entrada time {
  font-size: 13px;
  color: var(--texto-2);
}

/* =========================================================================
   Aparición al hacer scroll
   ========================================================================= */

.aparece {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-larga) ease-out,
    transform var(--t-larga) var(--salida);
}

.aparece.visible {
  opacity: 1;
  transform: none;
}

/* Escalonado de 45 ms por elemento: por debajo no se percibe, por encima la
   última tarjeta llega tarde y parece que la página va lenta. */
.escalonado > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-larga) ease-out,
    transform var(--t-larga) var(--salida);
}

.escalonado.visible > * {
  opacity: 1;
  transform: none;
}

.escalonado.visible > *:nth-child(1) { transition-delay: 0ms; }
.escalonado.visible > *:nth-child(2) { transition-delay: 45ms; }
.escalonado.visible > *:nth-child(3) { transition-delay: 90ms; }
.escalonado.visible > *:nth-child(4) { transition-delay: 135ms; }
.escalonado.visible > *:nth-child(5) { transition-delay: 180ms; }
.escalonado.visible > *:nth-child(6) { transition-delay: 225ms; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 980px) {
  .hero-rejilla,
  .partido {
    grid-template-columns: 1fr;
    gap: var(--e7);
  }

  .partido.invertido .texto-partido {
    order: 0;
  }

  .etiqueta-flotante {
    display: none; /* en pantalla estrecha se salen del móvil */
  }

  .nav-enlaces a:not(.boton) {
    display: none;
  }

  /* Entre 721 y 980 px el retrato sí cabe con el móvil apoyado, pero más
     estrecho para que el teléfono no se salga por la izquierda. */
  .escenario-hero {
    max-width: 500px;
    margin-inline: auto;
    padding-left: var(--e7);
  }

  .escenario-hero .movil {
    width: 158px;
  }
}

@media (max-width: 720px) {
  :root {
    --e9: 64px;
    --e8: 48px;
  }

  body { font-size: 16px; }
  html { scroll-padding-top: 76px; }

  .revelador .capa {
    padding: var(--e6) var(--e5);
    min-height: 300px;
  }

  .revelador blockquote {
    font-size: 1.08rem;
    max-width: none;
  }

  .formulario {
    flex-direction: column;
  }

  .formulario .boton {
    width: 100%;
  }

  .error-campo {
    padding-left: var(--e4);
  }

  .pie .contenedor {
    flex-direction: column;
  }

  .cabeza {
    margin-bottom: var(--e7);
  }

  .galeria {
    padding-left: var(--e4);
    padding-right: var(--e4);
  }

  .orbe {
    filter: blur(60px);
    opacity: 0.4;
  }

  /* En el móvil el hero es SOLO el retrato.
     La maqueta del teléfono se retira, por dos razones:
       1. Un móvil dibujado dentro de un móvil sale a 150 px de ancho: la
          captura de dentro es ilegible y parece un adorno mal hecho.
       2. `.escenario` es un flex en fila, así que al quitarle el posicionamiento
          absoluto el teléfono pasa a ser un hermano del retrato y los dos se
          reparten el ancho. Ahí es donde se veía apretado y torcido.
     Las capturas ya se ven a tamaño usable en la galería, unas pantallas más
     abajo. Aquí lo que tiene que mandar es la cara del pastor. */
  .escenario-hero {
    padding: 0;
    max-width: 460px;
    margin-inline: auto;
  }

  .escenario-hero .movil {
    display: none;
  }

  /* El pie apila marca, Instagram y enlaces sin que se salgan. */
  .pie-marca {
    flex-wrap: wrap;
  }

  .pie-marca .social {
    margin-left: 0;
  }
}

/* =========================================================================
   Móvil estrecho (iPhone SE y similares, 375 px y menos)
   -------------------------------------------------------------------------
   A partir de aquí el ancho útil son 327 px con los márgenes puestos. Todo lo
   que se dimensionó pensando en escritorio hay que bajarlo a mano: un
   clamp() con `vw` no basta, porque por debajo de cierto ancho se queda
   clavado en su valor mínimo y el mínimo estaba pensado para 768.
   ========================================================================= */

@media (max-width: 520px) {
  .contenedor {
    padding: 0 var(--e4);
  }

  /* --- Cabecera: la marca cede espacio para que el CTA nunca se parta --- */
  .cabecera .contenedor {
    min-height: 62px;
    gap: var(--e2);
  }

  .marca {
    font-size: 17px;
    gap: 6px;
    /* Sin esto, "Mi Pastor" empuja al botón fuera de la pantalla. */
    min-width: 0;
    flex-shrink: 1;
  }

  .marca img {
    width: 30px;
    height: 30px;
    flex: none;
  }

  .cabecera .boton {
    flex: none;
    min-height: 44px;
    padding: 10px var(--e4);
    font-size: 14.5px;
  }

  /* --- Hero --- */
  .hero {
    padding: var(--e7) 0 var(--e8);
  }

  .hero h1 {
    /* 2,3rem = 37px, y el titular ocupaba nueve líneas. */
    font-size: 1.95rem;
    letter-spacing: -0.02em;
  }

  .entradilla {
    font-size: 1rem;
  }

  .sobretitulo {
    font-size: 12.5px;
    padding: 6px var(--e3) 6px 6px;
    margin-bottom: var(--e4);
  }

  .sobretitulo img {
    width: 19px;
    height: 19px;
  }

  /* Las dos insignias de tienda, una al lado de otra pero repartidas. */
  .tiendas {
    gap: var(--e2);
    margin-top: var(--e5);
  }

  .tienda {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px var(--e3);
    gap: var(--e2);
  }

  .tienda strong {
    font-size: 13px;
  }

  .tienda small {
    font-size: 9.5px;
  }

  /* --- Revelador: el tirador tiene que seguir cogiéndose con el dedo --- */
  .revelador .capa {
    padding: var(--e5) var(--e4);
    min-height: 320px;
  }

  .revelador blockquote {
    font-size: 1rem;
    line-height: 1.5;
  }

  .revelador .pie-revelador {
    padding: 10px var(--e4);
    font-size: 12px;
  }

  /* --- Cifras: dos columnas, no cuatro apretadas --- */
  .cifras {
    grid-template-columns: 1fr 1fr;
    gap: var(--e2);
  }

  .cifra-caja {
    padding: var(--e4) var(--e2);
  }

  .cifra-caja b {
    font-size: 1.6rem;
  }

  .cifra-caja span {
    font-size: 12px;
  }

  /* --- Resto --- */
  .cabeza h2,
  .partido h2 {
    font-size: 1.55rem;
  }

  .tarjeta,
  .tarjeta-visual,
  .precio {
    padding: var(--e4);
  }

  .faq summary {
    padding: var(--e3) var(--e4);
    font-size: 15.5px;
  }

  .faq .respuesta {
    padding: 0 var(--e4) var(--e4);
  }

  .captura {
    width: 200px;
  }

  .beta .contenedor,
  .legal .contenedor {
    padding: 0 var(--e4);
  }
}

/* =========================================================================
   Barra fija de conversión (solo móvil)
   -------------------------------------------------------------------------
   En el móvil el botón de la cabecera desaparece en cuanto bajas, y volver
   arriba a buscarlo es fricción que se paga en altas perdidas. Esta barra
   aparece pasado el hero y se esconde sola cuando el formulario de la beta
   ya está en pantalla: si el usuario puede apuntarse ahí mismo, taparle
   media pantalla con un botón que hace lo mismo es un estorbo.
   ========================================================================= */

.cta-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-cabecera) + 2);
  display: none;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  /* Respeta la barra de gestos del iPhone. */
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: rgba(21, 12, 46, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(110%);
  transition: transform var(--t-normal) var(--salida);
}

.cta-movil.visible {
  transform: none;
}

.cta-movil .texto {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--texto-inv-2);
}

.cta-movil .texto b {
  display: block;
  color: var(--texto-inv);
  font-size: 14.5px;
}

.cta-movil .boton {
  flex: none;
  min-height: 44px;
  padding: 10px var(--e4);
  font-size: 15px;
}

@media (max-width: 720px) {
  .cta-movil {
    display: flex;
  }

  /* Hueco al final para que la barra no tape el pie. */
  .pie {
    padding-bottom: calc(var(--e8) + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
   Accesibilidad del movimiento
   -------------------------------------------------------------------------
   Quien lo pide, lo pide por algo: hay gente a la que el movimiento le
   provoca mareo real. No se atenúa, se QUITA. Y lo que aparecía animado
   tiene que quedar VISIBLE, o la página se les queda en blanco.

   El revelador sigue funcionando: es una interacción, no una animación.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .aparece,
  .escalonado > * {
    opacity: 1;
    transform: none;
  }

  .orbe,
  .rayos,
  .motas {
    display: none;
  }

  .boton:hover,
  .tarjeta:hover,
  .entrada:hover,
  .captura:hover,
  .precio:hover,
  .tienda:hover {
    transform: none;
  }

  .progreso {
    display: none;
  }
}