/* ═══════════════════════════════════════════════════════════════
   MOVIMIENTO — portado del chasis HK v2 (WEBS PROMO KLINIKARE).
   Reglas de oro que vienen de sustos reales:
   1. El hero se anima AL CARGAR (animation … both). Nunca depende
      del IntersectionObserver: si el observador no llega, el hero
      se quedaría invisible para siempre.
   2. Lo demás se revela con UN observador global que pone
      .is-visible sobre cada .reveal.
   3. Nada se oculta hasta que el JS confirma que va a revelarlo:
      todo cuelga de html.js-anim, que pone anim.js en su primera
      línea. Sin JS -> web completa y quieta, nunca invisible.
   4. Las cascadas definen retardo hasta el hijo n+7. Con menos, el
      5º entraría ANTES que el 1º (retardo 0) y se leería al revés.
   ═══════════════════════════════════════════════════════════════ */

@keyframes bbLinea { from { opacity: 0; transform: translateY(0.40em); } to { opacity: 1; transform: none; } }
@keyframes bbSube  { from { opacity: 0; transform: translateY(16px);   } to { opacity: 1; transform: none; } }
@keyframes bbEntra { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes bbFunde { from { opacity: 0; } to { opacity: 1; } }

/* ─────────── HERO: entra solo, al cargar ─────────── */
.js-anim .apertura        { animation: bbFunde 0.7s 0.05s both; }
/* El salto de línea va FUERA del guard: sin JS los tramos del titular
   quedarían pegados ("un" + "nuevo camino" = "unnuevo camino"), porque
   al partirlo no queda espacio entre los <span>. */
.hero-h1 .ln              { display: block; }
.js-anim .hero-h1 .ln     { animation: bbLinea 0.9s cubic-bezier(.22,.68,.24,1) both; }
.js-anim .hero-h1 .ln-1   { animation-delay: 0.18s; }
.js-anim .hero-h1 .ln-2   { animation-delay: 0.34s; }
.js-anim .hero-h1 .ln-3   { animation-delay: 0.74s; }   /* la pausa antes del remate */
.js-anim .hero-txt > .ojal{ animation: bbFunde 0.8s 0.06s both; }
.js-anim .hero-lede       { animation: bbSube 0.85s 1.00s both; }
.js-anim .hero-cta        { animation: bbSube 0.85s 1.14s both; }
.js-anim .hero-pie        { animation: bbSube 0.85s 1.26s both; }
.js-anim .hero-foto       { animation: bbEntra 1.0s 0.46s both; }

/* ─────────── SECCIONES: al entrar en pantalla ─────────── */
.js-anim .reveal .col-txt > *:not(h2),
.js-anim .reveal > .col-txt {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.68,.24,1);
}
.js-anim .reveal.is-visible .col-txt > *:not(h2),
.js-anim .reveal.is-visible > .col-txt { opacity: 1; transform: none; }
.js-anim .reveal.is-visible .col-txt > *:nth-child(1) { transition-delay: .04s; }
.js-anim .reveal.is-visible .col-txt > *:nth-child(2) { transition-delay: .12s; }
.js-anim .reveal.is-visible .col-txt > *:nth-child(3) { transition-delay: .20s; }
.js-anim .reveal.is-visible .col-txt > *:nth-child(4) { transition-delay: .28s; }
.js-anim .reveal.is-visible .col-txt > *:nth-child(5) { transition-delay: .34s; }
.js-anim .reveal.is-visible .col-txt > *:nth-child(n+6) { transition-delay: .40s; }

/* el titular de sección asoma desde abajo, como en el chasis HK */
.js-anim .reveal h2 { clip-path: inset(105% 0 0 0); transition: clip-path 1s cubic-bezier(.22,.68,.24,1) .10s; }
.js-anim .reveal.is-visible h2 { clip-path: inset(-18% 0 0 0); }

/* fotos: entran con un punto de escala, nunca de golpe */
.js-anim .reveal .foto {
  opacity: 0; transform: translateY(20px) scale(.988);
  transition: opacity .85s ease .06s, transform .85s cubic-bezier(.22,.68,.24,1) .06s;
}
.js-anim .reveal.is-visible .foto { opacity: 1; transform: none; }

/* tarjetas y columnas: cascada (retardos hasta n+7, ver regla 4) */
.js-anim .reveal .casc > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.68,.24,1);
}
.js-anim .reveal.is-visible .casc > * { opacity: 1; transform: none; }
.js-anim .reveal.is-visible .casc > *:nth-child(1) { transition-delay: .16s; }
.js-anim .reveal.is-visible .casc > *:nth-child(2) { transition-delay: .25s; }
.js-anim .reveal.is-visible .casc > *:nth-child(3) { transition-delay: .34s; }
.js-anim .reveal.is-visible .casc > *:nth-child(4) { transition-delay: .43s; }
.js-anim .reveal.is-visible .casc > *:nth-child(5) { transition-delay: .52s; }
.js-anim .reveal.is-visible .casc > *:nth-child(6) { transition-delay: .61s; }
.js-anim .reveal.is-visible .casc > *:nth-child(n+7) { transition-delay: .68s; }

/* listas escalonadas (horario, lo que cambia) */
.js-anim .reveal .casc-li li {
  opacity: 0; transform: translateX(-9px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.24,1);
}
.js-anim .reveal.is-visible .casc-li li { opacity: 1; transform: none; }
.js-anim .reveal.is-visible .casc-li li:nth-child(1) { transition-delay: .22s; }
.js-anim .reveal.is-visible .casc-li li:nth-child(2) { transition-delay: .30s; }
.js-anim .reveal.is-visible .casc-li li:nth-child(3) { transition-delay: .38s; }
.js-anim .reveal.is-visible .casc-li li:nth-child(4) { transition-delay: .46s; }
.js-anim .reveal.is-visible .casc-li li:nth-child(n+5) { transition-delay: .52s; }

/* el botón de WhatsApp respira al pasar por encima (escritorio) */
@media (hover: hover) {
  a[href*="wa.me"] { transition: transform .22s cubic-bezier(.22,.68,.24,1), box-shadow .22s ease; }
  a[href*="wa.me"]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(169,78,107,.28); }
}

/* ─────────── Si el usuario pide menos movimiento, no hay movimiento ─────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim *, .js-anim *::before, .js-anim *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .js-anim .apertura, .js-anim .hero-h1 .ln, .js-anim .hero-txt > .ojal,
  .js-anim .hero-lede, .js-anim .hero-cta, .js-anim .hero-pie, .js-anim .hero-foto,
  .js-anim .reveal .col-txt > *, .js-anim .reveal > .col-txt,
  .js-anim .reveal .foto, .js-anim .reveal .casc > *, .js-anim .reveal .casc-li li {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .js-anim .reveal h2 { clip-path: none !important; }
  a[href*="wa.me"]:hover { transform: none; }
}

/* ─────────── Dudas frecuentes ───────────
   <details>/<summary> nativos: abren y cierran SIN JavaScript. Aquí solo se
   quita el triangulito del navegador y se gira la flecha de la marca. */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq details[open] summary .faq-flecha { transform: rotate(180deg); }
.faq summary:hover span { color: #6B58A0; }
.faq summary:focus-visible { outline: 2px solid #6B58A0; outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .faq-flecha { transition: none !important; } }