/* ══════════════════════════════════════════════════════════════════════════
   VIDA AL BAJAR — animaciones de entrada por scroll + sello «matrix» de la casa
   Añadido 2026-08-23.  NO reemplaza nada: convive con el `.reveal` de app.css
   (que se sigue usando donde estaba) y sólo AÑADE capas encima.
   Motor: js/animaciones.js  ·  Sello: js/matrix-sdv.js
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --anim-curva:cubic-bezier(.22,.85,.28,1);
  --anim-dura:.78s;
  /* La gota de delante de la lluvia y su halo, en la paleta de la casa. */
  --mx-cabeza:#fff7dd;
  --mx-halo:232,212,139;   /* --gold-light en componentes, para el color-mix */
}

/* ── 1. Entrada por scroll ────────────────────────────────────────────────
   Una sola transición para todos; lo que cambia es el punto de partida. El
   retardo lo escribe el JS en `--anim-espera` (escalonado dentro de cada
   rejilla), así el mismo par de reglas sirve para 4 tarjetas o para 40. */
[data-anim]{
  opacity:0;
  transition:opacity var(--anim-dura) var(--anim-curva) var(--anim-espera,0ms),
             transform var(--anim-dura) var(--anim-curva) var(--anim-espera,0ms),
             filter var(--anim-dura) var(--anim-curva) var(--anim-espera,0ms);
}
[data-anim="sube"]  {transform:translateY(30px)}
[data-anim="escala"]{transform:translateY(22px) scale(.965)}
[data-anim="izq"]   {transform:translateX(-30px)}
[data-anim="der"]   {transform:translateX(30px)}
[data-anim="asoma"] {transform:translateY(14px);filter:blur(6px)}
[data-anim].en{opacity:1;transform:none;filter:none}

/* Sin `will-change` permanente: con 40 tarjetas marcadas a la vez el móvil se
   queda sin memoria de composición. El JS lo pone al entrar y lo quita al
   terminar. */
[data-anim].moviendo{will-change:opacity,transform}

/* El `.reveal` de siempre, con la misma curva para que todo el Inicio respire
   igual. No se toca su lógica (vive en app.js). */
.reveal{transition:opacity .8s var(--anim-curva),transform .8s var(--anim-curva)}

/* ── 2. El trazo de oro bajo cada título ──────────────────────────────────
   Se dibuja de dentro hacia fuera cuando la sección entra. Va en una clase
   propia que pone el JS: así el `::after` sólo existe donde yo lo pongo y no
   pisa el de ningún título que ya tuviera el suyo. */
.anim-trazo{position:relative}
.anim-trazo::after{
  content:'';position:absolute;left:50%;bottom:-.45rem;
  width:min(180px,42%);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .95s var(--anim-curva) .3s;
}
.anim-trazo.en::after,
[data-anim].en .anim-trazo::after{transform:translateX(-50%) scaleX(1)}

/* ── 3. Los números que suben ─────────────────────────────────────────────
   Cifras de ancho fijo: sin esto el «1,189» empuja a sus vecinos mientras
   cuenta y la barra entera tiembla. */
.stat-item h3{font-variant-numeric:tabular-nums}

/* ── 4. La portada que se despide ─────────────────────────────────────────
   El JS mueve `--hero-y` / `--hero-op` con el scroll. La flecha de «baja» se
   apaga en cuanto el visitante ya bajó: seguir invitándole es ruido. */
.hero-content{transform:translateY(var(--hero-y,0px))}
.hero-scroll{transition:opacity .4s ease}
.hero-scroll.lejos{opacity:0;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════════════
   5. EL SELLO DE LA CASA — la lluvia que descifra el texto
   Portado de chequeclaro.com (js/comun.js + css/estilo.css). Aquí sólo cambia
   la paleta: la gota de delante es crema encendida con halo de oro.
   ══════════════════════════════════════════════════════════════════════════ */

/* Van con el tipo (`span.`) delante A PROPÓSITO: estas columnas se inyectan
   dentro de rótulos que ya tienen reglas de descendencia sobre `span`, y un
   `.clase` pelada perdería contra ellas. */
span.mx, span.mx-linea, span.mx-palabra, b.mx__g{
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  margin:0;padding:0;background:none;line-height:inherit;
}
span.mx{display:inline-block;position:relative}
span.mx-linea{display:inline}
/* El navegador parte de renglón entre dos cajas seguidas aunque no haya
   espacio, y una letra suelta ES una caja: sin esto un título estrecho se cae
   en una letra por renglón. Los espacios quedan fuera del `nowrap`, así que
   el texto sigue partiendo por donde partía. */
span.mx-palabra{display:inline;white-space:nowrap}

/* La letra que cae. Cada 80 ms se crea una nueva y por eso la animación vuelve
   a empezar: eso ES la lluvia. Dura un pelo menos que el relevo (78 de 80). */
.mx__g{display:inline-block;font:inherit;animation:mx-caer 78ms cubic-bezier(.28,.55,.5,1) both}
@keyframes mx-caer{
  /* Arranca en .22 y no en 0: si un aparato congela el reloj de las
     animaciones, con relleno `both` el texto quedaría INVISIBLE. */
  from{transform:translateY(-.5em);opacity:.22}
  50% {opacity:.85}
  to  {transform:translateY(0);opacity:1}
}
/* Y la que estaba se va por abajo, fuera del flujo: ese es el rastro. */
.mx__g--sale{position:absolute;left:0;top:0;pointer-events:none;animation:mx-salir 92ms linear forwards}
@keyframes mx-salir{from{transform:translateY(0);opacity:.5}to{transform:translateY(.5em);opacity:0}}

/* La cabeza de la lluvia va encendida, como la gota de delante en la película. */
.mx--cabeza{
  color:var(--mx-cabeza);
  text-shadow:0 0 5px rgba(var(--mx-halo),.55), 0 0 18px rgba(var(--mx-halo),.35);
}
/* Al posarse, baja del encendido al color del texto. Sin `both`: al terminar
   tiene que devolver el color heredado. */
.mx--fijo{animation:mx-posarse 400ms ease-out}
@keyframes mx-posarse{
  from{color:var(--mx-cabeza);text-shadow:0 0 6px rgba(var(--mx-halo),.6),0 0 20px rgba(var(--mx-halo),.4)}
  to  {color:inherit;text-shadow:none}
}
/* La puntuación no cae: no es letra. */
.mx--seco{opacity:.75}

/* ── 6. El ratón por encima de una tarjeta ────────────────────────────────
   Las tarjetas que ya traían su `:hover` de app.css lo recuperan solas: al
   terminar la entrada, js/animaciones.js le quita el `data-anim` a la pieza y
   con él se va el `transform:none` que lo estaba pisando. Aquí sólo se le da
   ese mismo gesto —leve, el de un botón— a las dos que no lo tenían. */
@media (hover: hover) and (pointer: fine){
  .shw-featured{transition:transform .35s var(--anim-curva),box-shadow .35s var(--anim-curva)}
  .shw-featured:hover{transform:translateY(-3px);box-shadow:0 18px 48px -14px rgba(201,168,76,.18)}
  .faq-card{transition:border-color .25s,box-shadow .25s,transform .3s var(--anim-curva)}
  .faq-card:hover{transform:translateY(-2px);border-color:rgba(201,168,76,.34)}
  /* La tarjeta abierta se queda quieta: si sube al pasar el ratón, la
     respuesta que se está leyendo se mueve bajo los ojos. */
  .faq-card.open:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   8. LAS TRES PROMOS DEL INICIO — que no se vean planas
   Añadido 2026-08-23: «esto está plano… anima las tarjetas un poco, que cuando
   le pase el mouse también, el botón debe parpadear o hacer algo». Todo vive
   aquí, sin tocar app.css: son capas encima de las tarjetas que ya existían.
   ══════════════════════════════════════════════════════════════════════════ */

/* El halo de cada tarjeta respira. Muy despacio y sin mover el contenido: es
   luz de fondo, y si se nota el ciclo ya es demasiado. */
.shw-rvsdv-glow,
.shw-retos-card::before,
.shw-tienda-card::before{animation:promo-respira 9s ease-in-out infinite}
@keyframes promo-respira{
  0%,100%{opacity:.7;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.09)}
}

/* Y el icono late, apenas. Un cuadro dorado completamente quieto en medio de
   una tarjeta grande es parte de lo que la hacía parecer una foto. */
.shw-rvsdv-ico,.shw-tienda-ico{animation:promo-late 5.5s ease-in-out infinite}
@keyframes promo-late{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-3px) scale(1.02)}
}

.shw-rvsdv-card,.shw-retos-card,.shw-tienda-card{
  transition:transform .4s var(--anim-curva),box-shadow .4s var(--anim-curva),border-color .4s ease;
}
.shw-rvsdv-ico,.shw-tienda-ico,.shw-retos-day{transition:transform .35s var(--anim-curva),
  border-color .35s ease,background .35s ease,color .35s ease,box-shadow .35s ease}

@media (hover: hover) and (pointer: fine){
  /* La tarjeta entera se levanta y se le enciende el borde. */
  .shw-rvsdv-card:hover,.shw-retos-card:hover,.shw-tienda-card:hover{
    transform:translateY(-4px);
    border-color:rgba(201,168,76,.62);
    box-shadow:0 28px 66px -22px rgba(201,168,76,.42);
  }
  /* El icono deja de latir y se planta un poco más grande: si sigue su ciclo
     mientras el ratón está encima, el gesto de respuesta no se lee. */
  .shw-rvsdv-card:hover .shw-rvsdv-ico,
  .shw-tienda-card:hover .shw-tienda-ico{
    animation:none;transform:scale(1.07) rotate(-3deg);
    box-shadow:0 14px 34px -8px rgba(201,168,76,.65);
  }
  .shw-rvsdv-card:hover .shw-rvsdv-glow,
  .shw-retos-card:hover::before,
  .shw-tienda-card:hover::before{animation-duration:4.5s}

  /* Los once días se encienden en cascada, como si el reto arrancara. */
  .shw-retos-card:hover .shw-retos-day{
    background:rgba(201,168,76,.2);border-color:rgba(201,168,76,.55);color:#fff;
  }
  .shw-retos-card:hover .shw-retos-day:nth-child(1){transition-delay:0.00s}
  .shw-retos-card:hover .shw-retos-day:nth-child(2){transition-delay:0.04s}
  .shw-retos-card:hover .shw-retos-day:nth-child(3){transition-delay:0.07s}
  .shw-retos-card:hover .shw-retos-day:nth-child(4){transition-delay:0.11s}
  .shw-retos-card:hover .shw-retos-day:nth-child(5){transition-delay:0.14s}
  .shw-retos-card:hover .shw-retos-day:nth-child(6){transition-delay:0.18s}
  .shw-retos-card:hover .shw-retos-day:nth-child(7){transition-delay:0.21s}
  .shw-retos-card:hover .shw-retos-day:nth-child(8){transition-delay:0.25s}
  .shw-retos-card:hover .shw-retos-day:nth-child(9){transition-delay:0.28s}
  .shw-retos-card:hover .shw-retos-day:nth-child(10){transition-delay:0.32s}
  .shw-retos-card:hover .shw-retos-day:nth-child(11){transition-delay:0.35s}
  .shw-retos-card:hover .shw-retos-day:nth-child(12){transition-delay:0.39s}
}

/* ── El botón que llama ────────────────────────────────────────────────────
   Vale para los tres botones de las promos Y para el CTA dorado de la casa
   (`.btn-primary`: «Probar 7 días gratis», «Escuchar la Biblia»…), que es
   donde él pidió que se notara más.

   Tres cosas a la vez y ninguna estridente: el botón late —halo Y un punto de
   tamaño, que es lo que de verdad se ve—, y un destello lo cruza cada 4,6 s.
   El destello está parado fuera del botón casi todo el ciclo y barre sólo en
   el último tramo: un brillo continuo sería un anuncio de casino, no una
   invitación. */
.shw-rvsdv-btn,.shw-retos-btn,.shw-tienda-btn,.btn-primary{
  position:relative;overflow:hidden;isolation:isolate;
  animation:btn-halo 3.4s ease-in-out infinite;
}
.shw-rvsdv-btn::after,.shw-retos-btn::after,.shw-tienda-btn::after,.btn-primary::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%,rgba(255,255,255,.3) 41%,rgba(255,255,255,.88) 50%,
    rgba(255,255,255,.3) 59%,transparent 70%);
  transform:translateX(-130%);
  animation:btn-destello 4.6s cubic-bezier(.4,0,.25,1) infinite;
}
@keyframes btn-halo{
  0%,100%{box-shadow:0 6px 18px -8px rgba(201,168,76,.45);transform:scale(1)}
  50%    {box-shadow:0 14px 40px -6px rgba(201,168,76,.95),
                     0 0 0 1px rgba(232,212,139,.35);transform:scale(1.022)}
}
@keyframes btn-destello{
  0%,70%  {transform:translateX(-130%)}
  90%,100%{transform:translateX(130%)}
}
/* Con el ratón encima manda la respuesta al ratón, no el reclamo: se para el
   latido y el botón sube. */
.shw-rvsdv-btn:hover,.shw-retos-btn:hover,.shw-tienda-btn:hover,.btn-primary:hover{
  animation:none;transform:translateY(-3px);
  box-shadow:0 16px 38px -8px rgba(201,168,76,.75);
}
.shw-retos-btn,.shw-tienda-btn{transition:transform .25s var(--anim-curva),box-shadow .25s ease}

/* ── 9. Quien pide quietud, quietud tiene ────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  [data-anim]{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .shw-rvsdv-glow,.shw-retos-card::before,.shw-tienda-card::before,
  .shw-rvsdv-ico,.shw-tienda-ico,
  .shw-rvsdv-btn,.shw-retos-btn,.shw-tienda-btn,.btn-primary,
  .shw-rvsdv-btn::after,.shw-retos-btn::after,.shw-tienda-btn::after,
  .btn-primary::after{animation:none}
  .anim-trazo::after{transform:translateX(-50%) scaleX(1);transition:none}
  .mx__g,.mx__g--sale,.mx--fijo{animation:none}
  .hero-content{transform:none}
}