/* ============================================================
   animaciones.css — todo el movimiento del sitio en un archivo

   Criterio para este nicho: reposo. Recorridos cortos (12-20px),
   curvas de salida suaves y duraciones de 400-700ms. Nada rebota
   y nada entra desde fuera de la pantalla.

   La excepción es el isotipo en volumen de la portada, que gira:
   es una pieza tridimensional y sin giro no se leería como tal.
   Lo hace en 15 segundos y oscilando, no dando vueltas.

   Todo el bloque se apaga entero con prefers-reduced-motion.
   ============================================================ */

:root {
  --anim-entrada: 400ms;
  --anim-media:   500ms;
  --anim-larga:   700ms;
  --ease-salida:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════
   1. APARICIÓN AL HACER SCROLL
   El estado inicial lo pone js/reveal.js: así, sin JavaScript,
   el contenido se ve siempre.
   ══════════════════════════════════════════════════════════ */

[data-reveal] {
  transition: opacity var(--anim-entrada) ease-out,
              transform var(--anim-entrada) ease-out;
  /* Escalonado dentro de una rejilla: cada tarjeta entra 70ms
     después de la anterior, hasta un máximo razonable. */
  transition-delay: calc(var(--orden, 0) * 70ms);
}

[data-reveal].is-oculto {
  opacity: 0;
  transform: translateY(16px);
}

/* ══════════════════════════════════════════════════════════
   2. FOTOGRAFÍA
   La imagen se descubre con un desenfoque que se resuelve, no
   con un salto de opacidad. Da sensación de foco clínico.
   ══════════════════════════════════════════════════════════ */

.foto {
  overflow: hidden;
}

.foto .foto-img {
  transition: transform var(--anim-larga) var(--ease-salida);
}

@media (hover: hover) {
  .trat-card:hover .foto-img,
  .foto:hover .foto-img {
    transform: scale(1.03);
  }
}

/* ══════════════════════════════════════════════════════════
   3. PORTADA
   El movimiento de la home. Cuatro piezas: el fondo, el isotipo en
   volumen, la palabra que se releva en el titular y el barrido de
   la ficha de valoración.

   La única que lleva JavaScript es la ficha: `js/hero.js` mide
   dónde cae cada línea y le pone su retraso, para que el barrido
   la encienda justo al pasarle por encima. Sin JavaScript la ficha
   se queda quieta y legible.
   ══════════════════════════════════════════════════════════ */

/* ── 3.1 · Fondo: las manchas van y vienen en un minuto ── */

.hero-aurora {
  animation: vf-deriva 52s ease-in-out infinite;
  will-change: transform;
}

.hero-aurora--b { animation-duration: 67s; animation-direction: reverse; }
.hero-aurora--c { animation-duration: 44s; animation-delay: -12s; }

@keyframes vf-deriva {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, -4%, 0) scale(1.09); }
}

/* ── 3.2 · El isotipo en volumen ──
   Oscila en lugar de dar la vuelta entera: pasado el perfil, 18
   siluetas de canto se leen como una raya. Entre -26° y 26° el
   volumen se entiende y la pieza nunca se rompe. */

.iso3d-pila {
  animation: vf-iso-gira 15s ease-in-out infinite;
}

/* Solo gira: el `translateY` que llevaba antes la subía y bajaba un
   2.5%, y como el ciclo dura 15s y la palabra del titular se releva
   cada pocos segundos, el desplazamiento parecía provocado por el
   cambio de palabra. La pieza se queda quieta en su sitio. */
@keyframes vf-iso-gira {
  0%, 100% { transform: rotateX(7deg)  rotateY(-26deg); }
  50%      { transform: rotateX(-5deg) rotateY(26deg); }
}

.iso3d-halo {
  animation: vf-iso-halo 15s ease-in-out infinite;
}

@keyframes vf-iso-halo {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.iso3d-sombra {
  animation: vf-iso-sombra 15s ease-in-out infinite;
}

@keyframes vf-iso-sombra {
  0%, 100% { opacity: 1;    transform: scaleX(1); }
  50%      { opacity: 0.72; transform: scaleX(0.9); }
}

/* ── 3.3 · La palabra que se releva en el titular ──
   Entra letra por letra con el desenfoque resolviéndose, y por
   debajo se vuelve a trazar el subrayado. */

.hero-rota-palabra {
  transition: opacity 300ms ease, transform 300ms var(--ease-salida);
}

.hero-rota-palabra.is-saliendo {
  opacity: 0;
  transform: translateY(-7px);
}

.hero-rota-letras i {
  animation: vf-letra 560ms var(--ease-salida) both;
  animation-delay: calc(var(--l, 0) * 26ms);
}

@keyframes vf-letra {
  from { opacity: 0; transform: translateY(0.36em); filter: blur(5px); }
  to   { opacity: 1; transform: none;               filter: blur(0); }
}

/* pathLength="1" en el SVG deja el trazo medido en una unidad */
.hero-rota-trazo path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hero-rota-trazo.is-trazando path {
  animation: vf-trazo 760ms var(--ease-salida) 200ms both;
}

@keyframes vf-trazo {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* ── 3.4 · El barrido de la ficha de valoración ──
   `--ciclo` es la única fuente del ritmo: js/hero.js lo lee de
   aquí para calcular el retraso de cada línea. Si lo cambias,
   cámbialo solo aquí. */

.hero-ficha {
  --ciclo: 7200ms;
  --barrido-alto: 132px;
  --ficha-alto: 520px;
  /* Parte del ciclo que tarda el barrido en cruzar la ficha. Tiene
     que coincidir con el 42% de @keyframes vf-barrido. */
  --barrido-fraccion: 0.42;
}

.hero-ficha.is-quieta *,
.hero-ficha.is-quieta *::after { animation-play-state: paused; }

.hero-ficha.is-viva .ficha-barrido {
  animation: vf-barrido var(--ciclo) linear infinite;
  will-change: transform, opacity;
}

@keyframes vf-barrido {
  0%        { opacity: 0; transform: translateY(calc(-1 * var(--barrido-alto))); }
  5%        { opacity: 1; }
  36%       { opacity: 1; }
  42%, 100% { opacity: 0; transform: translateY(var(--ficha-alto)); }
}

/* Cada línea se enciende cuando el frente del barrido le llega.
   El retraso lo pone js/hero.js según su posición real. */
.hero-ficha.is-viva .ficha-medidas li,
.hero-ficha.is-viva .ficha-marca,
.hero-ficha.is-viva .ficha-marca::after {
  animation-duration: var(--ciclo);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--retraso, 0ms);
}

.hero-ficha.is-viva .ficha-medidas li   { animation-name: vf-fila; }
.hero-ficha.is-viva .ficha-marca        { animation-name: vf-aro; }
.hero-ficha.is-viva .ficha-marca::after { animation-name: vf-palomita; }

@keyframes vf-fila {
  0%, 5%    { background: transparent; }
  9%, 64%   { background: color-mix(in oklab, var(--marca-pale-silver) 30%, transparent); }
  72%, 100% { background: transparent; }
}

@keyframes vf-aro {
  0%, 5%    { border-color: var(--color-borde-suave); background: var(--color-superficie); }
  9%, 64%   { border-color: var(--color-acento);      background: color-mix(in oklab, var(--marca-camel) 18%, var(--color-superficie)); }
  72%, 100% { border-color: var(--color-borde-suave); background: var(--color-superficie); }
}

@keyframes vf-palomita {
  0%, 5%    { opacity: 0; transform: rotate(42deg) scale(0.5); }
  9%, 64%   { opacity: 1; transform: rotate(42deg) scale(1); }
  72%, 100% { opacity: 0; transform: rotate(42deg) scale(0.5); }
}

/* ══════════════════════════════════════════════════════════
   4. ENLACES Y BOTONES
   ══════════════════════════════════════════════════════════ */

/* El subrayado del enlace de texto crece de izquierda a derecha */
.enlace-subrayado {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  box-shadow: inset 0 -1px 0 0 var(--color-vegetal);
  transition: background-size var(--anim-entrada) var(--ease-salida),
              color var(--t-rapida) ease;
}

.enlace-subrayado:hover,
.enlace-subrayado:focus-visible {
  background-size: 100% 1px;
}

/* Los links del nav revelan su línea desde el centro */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--color-acento);
  transition: left var(--t-media) var(--ease-salida),
              right var(--t-media) var(--ease-salida);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  left: 0;
  right: 0;
}

/* El link de la página actual ya tiene su línea puesta */
.nav-link.is-activa::after { left: 0; right: 0; }

/* Botones: elevación mínima, sin rebote */
.boton-primario,
.boton-wa,
.boton-contorno,
.boton-contorno--sm,
.nav-cta {
  transition: background var(--t-larga) var(--ease-salida),
              color var(--t-larga) ease,
              box-shadow var(--t-larga) ease,
              transform var(--t-media) var(--ease-salida);
}

.boton-primario:active,
.boton-wa:active,
.nav-cta:active { transform: translateY(1px); }

/* ══════════════════════════════════════════════════════════
   5. TARJETAS DE TRATAMIENTO
   ══════════════════════════════════════════════════════════ */

.trat-card {
  transition: transform var(--anim-media) var(--ease-salida),
              box-shadow var(--anim-media) ease,
              border-color var(--anim-media) ease;
}

/* ══════════════════════════════════════════════════════════
   6. ACORDEÓN DE PREGUNTAS
   Se abre con grid-template-rows, que sí anima a altura
   automática. visibility retira el texto del árbol de
   accesibilidad mientras está cerrado.
   ══════════════════════════════════════════════════════════ */

.faq-respuesta {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--anim-media) var(--ease-salida),
              visibility var(--anim-media),
              opacity var(--anim-entrada) ease;
  opacity: 0;
}

.faq-respuesta > * {
  overflow: hidden;
  min-height: 0;
}

.faq-respuesta.is-abierta {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq-icono::before,
.faq-icono::after {
  transition: transform var(--anim-entrada) var(--ease-salida);
}

.faq-boton[aria-expanded="true"] .faq-icono::before { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════
   7. BARRA DE NAVEGACIÓN
   ══════════════════════════════════════════════════════════ */

.nav {
  transition: background var(--anim-media) ease,
              box-shadow var(--anim-media) ease,
              padding var(--anim-media) var(--ease-salida);
}

/* Al condensarse, la barra pierde altura */
.nav.is-solido .nav-barra {
  padding-top: 4px;
  padding-bottom: 4px;
}

.nav-barra {
  transition: padding var(--anim-media) var(--ease-salida);
}

/* ══════════════════════════════════════════════════════════
   8. DESPLAZAMIENTO
   ══════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  /* La barra fija no debe tapar el destino de un ancla */
  scroll-padding-top: 96px;
}

/* ══════════════════════════════════════════════════════════
   9. RESPETO POR EL MOVIMIENTO REDUCIDO
   Un solo bloque apaga todo lo anterior.
   ══════════════════════════════════════════════════════════ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal].is-oculto { opacity: 1; transform: none; }
  .faq-respuesta.is-abierta { grid-template-rows: 1fr; }

  /* El subrayado del titular solo se dibuja con el relevo, que aquí
     no corre: se deja puesto. */
  .hero-rota-trazo path { stroke-dashoffset: 0; }
}