/* ============================================================================
   MOVIMIENTO — y por qué esta página no puede quedarse en blanco
   ----------------------------------------------------------------------------
   Tres intentos de la landing hermana fracasaron por lo mismo: el contenido
   nacía invisible y dependía de que algo lo mostrara. Aquí la regla es la
   inversa, y se cumple así:

   1. base.css y pagina.css pintan TODO visible. Si este archivo no llega, o si
      pagina.js no se ejecuta nunca, la página se ve entera y quieta.
   2. Ocultar sólo ocurre DENTRO de una animación de duración FINITA con
      `animation-fill-mode: both`. El fotograma final siempre es visible, y
      quien lo garantiza es el motor de CSS, no un script.
   3. La entrada del hero no depende de JavaScript en absoluto.
   4. El ÚNICO estado oculto que aplica un script es la clase `.rv-e`, y sólo
      sobre elementos que en ese momento están a más de una pantalla de
      distancia. Lleva su propia red: a los ~11 s se revela sola aunque nadie
      vuelva a tocarla.
   5. Con `prefers-reduced-motion: reduce` no se aplica ninguna de estas
      reglas: la página queda quieta y completa.

   El ritmo es reposado, no enérgico: desfases más largos y lentos que en la
   landing del Dr. Dorian. Y aquí NO hay contador animado ni franja en
   movimiento; los dos son recursos suyos y aquí romperían la calma.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Entrada del hero — CSS puro, sin JavaScript ────────────────────── */

  .ent {
    animation: ent-subir .72s var(--salto) both;
    animation-delay: var(--ret, 0s);
  }
  @keyframes ent-subir {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* El titular entra línea a línea, cada una emergiendo desde debajo de un
     recorte. Sólo se anima `transform`: no hay ningún estado de opacidad 0
     del que dependa que el texto se lea. */
  .titular .pal > i {
    animation: linea-emerger .82s var(--salto) both;
    animation-delay: var(--ret, 0s);
  }
  @keyframes linea-emerger {
    from { transform: translate3d(0, 108%, 0); }
    to   { transform: none; }
  }

  /* El retrato entra el último, subiendo y creciendo apenas. */
  .ent-retrato {
    animation: ent-retrato .95s var(--salto) both;
    animation-delay: var(--ret, .38s);
  }
  @keyframes ent-retrato {
    from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.975); }
    to   { opacity: 1; transform: none; }
  }

  .ent-ficha {
    animation: ent-ficha .7s var(--salto) both;
    animation-delay: var(--ret, .78s);
  }
  @keyframes ent-ficha {
    from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
  }

  /* ── 2. Flotación continua ──────────────────────────────────────────────
     Va en un elemento interior distinto del de la entrada, para que las dos
     animaciones no compitan por la misma propiedad `transform`. Admite
     variables por instancia (--flota-dur, --flota-ret) para que dos tarjetas
     en la misma pantalla no se muevan exactamente al compás: con los valores
     por omisión, el comportamiento es idéntico al de una sola tarjeta. */
  .flota {
    animation: flotar var(--flota-dur, 11s) ease-in-out var(--flota-ret, 1.9s) infinite alternate;
  }
  @keyframes flotar {
    from { transform: translate3d(0, -4px, 0); }
    to   { transform: translate3d(0,  4px, 0); }
  }

  /* ── 3. Latido del punto turquesa de la píldora ────────────────────────── */
  .punto::after { animation: latir 3.6s ease-out infinite; }
  @keyframes latir {
    0%   { opacity: .5; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(2.8); }
    100% { opacity: 0;  transform: scale(2.8); }
  }

  /* ── 4. Aparición al desplazarse ───────────────────────────────────────── */
  /*
     `.rv-e` (en espera) es el ÚNICO estado oculto que aplica JavaScript.
     Fíjate en el fotograma 92%: la propia animación se revela sola a los ~11 s
     aunque el observador no se dispare nunca. Es la red que no depende de que
     ningún script vuelva a ejecutarse.
  */
  .rv-e { animation: rv-espera 12s linear both; }
  @keyframes rv-espera {
    0%, 92% { opacity: 0; transform: translate3d(0, 16px, 0); }
    100%    { opacity: 1; transform: none; }
  }

  .rv-v {
    animation: rv-entrar .78s var(--salto) both;
    animation-delay: var(--ret, 0s);
  }
  @keyframes rv-entrar {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* ── 5. Interacciones: discretas. Nada rebota ni gira. ─────────────────── */
  .boton, .opcion, .ficha, .enlace-suave {
    transition: transform .24s var(--salto), box-shadow .24s ease,
                background-color .24s ease, border-color .24s ease, color .24s ease;
  }
  .opcion::before { transition: height .28s var(--salto); }
  .boton .flecha { transition: transform .24s var(--salto); }
  @media (hover: hover) {
    .boton:hover { transform: translateY(-2px); }
    .boton:hover .flecha { transform: translateX(4px); }
    .ficha:hover { box-shadow: 0 3px 8px rgba(42,35,51,.05), 0 30px 64px -28px rgba(42,35,51,.3); }
  }
  .boton:active { transform: translateY(0); }
}

/* Sin movimiento: nada se anima y nada se oculta. La clase .rv-e ni siquiera
   llega a aplicarse, porque el script comprueba la preferencia antes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}