/*
  Estados iniciales de las animaciones.
  - .js:not(.listo): hero oculto hasta que animaciones.js toma el control (el <head> agrega .listo a los 4 s por seguridad).
  - .anim: lo agrega animaciones.js; sin ese script, todo se ve en su estado final.
  - Con prefers-reduced-motion: reduce no se oculta nada.
*/
@media (prefers-reduced-motion: no-preference) {
  .js:not(.listo) .hero__gato img,
  .js:not(.listo) .hero h1,
  .js:not(.listo) .hero__sub,
  .js:not(.listo) .firma,
  .js:not(.listo) .hero__acciones,
  .js:not(.listo) .hero__dato {
    opacity: 0;
  }

  /* Títulos de sección: suben y se dibuja una línea tostado debajo */
  .anim .titulo-revela:not(.is-visible) {
    opacity: 0;
    transform: translateY(10px);
  }

  .anim .titulo-revela:not(.is-visible)::after {
    transform: scaleX(0);
  }

  .anim .sello:not(.is-visible) {
    opacity: 0;
  }
}

/* Línea de los h2 de sección */
.titulo-revela {
  transition: opacity var(--dur-media) var(--ease-salida), transform var(--dur-media) var(--ease-salida);
}

.titulo-revela::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--acento);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-salida) 150ms;
}

/* Líneas del h1 generadas por JS durante la entrada */
.linea {
  display: block;
}

/* Precios: el número animado no afecta el ancho mientras cuenta */
.contador {
  display: inline-block;
  min-width: 3ch;
  font-variant-numeric: tabular-nums lining-nums;
}