/* ============================================================
   Fase 2 · Animaciones — coreografía con dirección
   · Titulares: barrido de izquierda a derecha (sigue la lectura).
   · Imágenes: entran desde la derecha / acercamiento (se encuentran con el texto).
   · Datos destacados: del centro hacia afuera.
   · Listas y tarjetas: secuencia izquierda → derecha.
   · Bloques grandes: se expanden desde el centro.
   Hero: animación CSS al cargar, gateada por html.js (script en <head>).
   Scroll: solo afecta elementos con [data-rv], que pone animaciones.js;
   si el script no carga, todo se ve completo.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.4, .64, 1);
}

/* Las entradas laterales no deben generar scroll horizontal en móvil */
html, body { overflow-x: clip; }

/* ════════════════ 1. HERO (al cargar) ════════════════ */
.hero-copy h1 .h1-line { display: block; }

@keyframes wipe-in {
  from { clip-path: inset(-20% 100% -20% -4%); transform: translateX(-18px); }
  to   { clip-path: inset(-20% -4% -20% -4%); transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }

.js .hero-copy > .eyebrow { animation: fade-in .5s var(--ease-out) backwards; }
.js .hero-copy h1 .h1-line { animation: wipe-in .75s var(--ease-out) backwards; }
.js .hero-copy h1 .h1-line:nth-child(1) { animation-delay: .12s; }
.js .hero-copy h1 .h1-line:nth-child(2) { animation-delay: .32s; }
.js .hero-copy h1 .h1-line:nth-child(3) { animation-delay: .52s; }
.js .hero-copy > .lead { animation: fade-in .6s var(--ease-out) .75s backwards; }
.js .hero-copy > .hero-price { animation: slide-from-left .6s var(--ease-out) .85s backwards; }
.js .hero-copy > .price-caption { animation: fade-in .5s var(--ease-out) .95s backwards; }
.js .hero-copy > .button { animation: slide-from-left .6s var(--ease-out) 1s backwards; }
.js .hero-copy .payment-brands > * { animation: slide-from-left .5s var(--ease-out) backwards; }
.js .hero-copy .payment-brands > *:nth-child(1) { animation-delay: 1.10s; }
.js .hero-copy .payment-brands > *:nth-child(2) { animation-delay: 1.15s; }
.js .hero-copy .payment-brands > *:nth-child(3) { animation-delay: 1.20s; }
.js .hero-copy .payment-brands > *:nth-child(4) { animation-delay: 1.25s; }
.js .hero-copy .payment-brands > *:nth-child(5) { animation-delay: 1.30s; }
.js .hero-art { animation: slide-from-right 1s var(--ease-out) .25s backwards; }

/* Pulso en el pin del mapa (posición la calcula animaciones.js) */
/* El contenedor del pin debe respetar el centrado original de la imagen
   (la imagen es más ancha que su espacio y se recorta igual por ambos lados). */
.hero-photo { position: relative; display: flex; justify-content: inherit; align-items: center; width: 100%; flex: none; }
.hero-pin { position: absolute; left: 42.8%; top: 51.4%; width: 0; height: 0; pointer-events: none; }
.hero-pin span {
  position: absolute; left: -14px; top: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(0, 106, 202, .55);
  background: rgba(0, 106, 202, .10);
  opacity: 0;
  animation: pin-pulse 2.6s var(--ease-out) infinite;
  animation-delay: 1.4s;
}
.hero-pin span:nth-child(2) { animation-delay: 2.25s; }
@keyframes pin-pulse {
  0%   { opacity: 0; transform: scale(.6); }
  12%  { opacity: 1; }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
.hero-pin.is-paused span { animation-play-state: paused; }

/* ════════════════ 2. AL HACER SCROLL ════════════════
   --stagger escalona los elementos de un mismo grupo. */
html [data-rv] { transition-delay: var(--stagger, 0ms); }

html .rv-init, html .rv-init *, html .rv-init::before { transition: none !important; }

/* Izquierda → derecha */
html [data-rv="left"] { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--stagger, 0ms); }
html [data-rv="left"]:not(.is-in) { opacity: 0; transform: translateX(-28px); }

/* Desde la derecha */
html [data-rv="right"] { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--stagger, 0ms); }
html [data-rv="right"]:not(.is-in) { opacity: 0; transform: translateX(40px); }

/* Solo aparece */
html [data-rv="fade"] { transition: opacity .6s var(--ease-out); transition-delay: var(--stagger, 0ms); }
html [data-rv="fade"]:not(.is-in) { opacity: 0; }

/* Acercamiento (imagen del equipo) */
html [data-rv="zoom"] { transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
html [data-rv="zoom"]:not(.is-in) { opacity: 0; transform: scale(.9) rotate(-3deg); }

/* Del centro hacia afuera, con un pequeño rebote (datos destacados) */
html [data-rv="pop"] { transition: opacity .45s var(--ease-out), transform .6s var(--ease-pop); transition-delay: var(--stagger, 0ms); }
html [data-rv="pop"]:not(.is-in) { opacity: 0; transform: scale(.7); }

/* Crece desde su propio centro, uno por uno (barra de refuerzos).
   El escalonado (320 ms) es mayor que la duración de la opacidad (.35 s)
   para que cada bloque termine de aparecer antes de que salga el siguiente. */
html [data-rv="grow"] { transition: opacity .35s var(--ease-out), transform .55s var(--ease-pop); transition-delay: var(--stagger, 0ms); transform-origin: center; }
html [data-rv="grow"]:not(.is-in) { opacity: 0; transform: scale(.82); }

/* Títulos de sección: etiqueta → barrido del título → texto */
html [data-rv="intro"] > .eyebrow { transition: opacity .5s var(--ease-out); }
html [data-rv="intro"] > h2 { transition: clip-path .8s var(--ease-out) .1s, transform .8s var(--ease-out) .1s; }
html [data-rv="intro"] > p,
html [data-rv="intro"] > .plan-inclusions { transition: opacity .6s var(--ease-out) .45s; }
html [data-rv="intro"]:not(.is-in) > .eyebrow { opacity: 0; }
html [data-rv="intro"]:not(.is-in) > h2 { clip-path: inset(-20% 100% -20% -4%); transform: translateX(-18px); }
html [data-rv="intro"].is-in > h2 { clip-path: inset(-20% -4% -20% -4%); }
html [data-rv="intro"]:not(.is-in) > p,
html [data-rv="intro"]:not(.is-in) > .plan-inclusions { opacity: 0; }

/* Bloques grandes: se expanden desde el centro; su contenido entra por los lados */
html [data-rv="expand"] { transition: clip-path .9s var(--ease-out), opacity .4s var(--ease-out); }
html [data-rv="expand"]:not(.is-in) { clip-path: inset(0 10% round 20px); opacity: 0; }
html [data-rv="expand"].is-in { clip-path: inset(0 0 round 20px); }

.connectivity[data-rv] .connection-copy { transition: opacity .6s var(--ease-out) .35s, transform .7s var(--ease-out) .35s; }
.connectivity[data-rv]:not(.is-in) .connection-copy { opacity: 0; transform: translateX(-28px); }
.connectivity[data-rv] .connection-details article { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.connectivity[data-rv] .connection-details article:nth-child(1) { transition-delay: .5s; }
.connectivity[data-rv] .connection-details article:nth-child(2) { transition-delay: .62s; }
.connectivity[data-rv] .connection-details article:nth-child(3) { transition-delay: .74s; }
.connectivity[data-rv]:not(.is-in) .connection-details article { opacity: 0; transform: translateX(32px); }

.closing[data-rv] > div { transition: opacity .6s var(--ease-out) .3s, transform .7s var(--ease-out) .3s; }
.closing[data-rv] > .button { transition: opacity .6s var(--ease-out) .45s, transform .7s var(--ease-out) .45s; }
.closing[data-rv]:not(.is-in) > div { opacity: 0; transform: translateX(-28px); }
.closing[data-rv]:not(.is-in) > .button { opacity: 0; transform: translateX(28px); }

/* ════════════════ 3. CÓMO FUNCIONA: 01 → 02 → 03 ════════════════
   Línea que se dibuja, número que aparece con rebote, luego el texto. */
.steps article { position: relative; }
.steps article::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--blue);
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.steps article[data-rv]:not(.is-in)::before { transform: scaleX(0); }
.steps article[data-rv] .step-number { display: inline-block; transition: opacity .3s var(--ease-out), transform .5s var(--ease-pop); transition-delay: calc(var(--stagger, 0ms) + .35s); }
.steps article[data-rv]:not(.is-in) .step-number { opacity: 0; transform: scale(.5); }
.steps article[data-rv] > h3,
.steps article[data-rv] > p { transition: opacity .5s var(--ease-out); transition-delay: calc(var(--stagger, 0ms) + .4s); }
.steps article[data-rv]:not(.is-in) > h3,
.steps article[data-rv]:not(.is-in) > p { opacity: 0; }

/* ════════════════ 4. FAQ ════════════════ */
summary:after { content: '+'; transition: transform .25s var(--ease-out); }
details[open] summary:after { content: '+'; transform: rotate(45deg); }
details p { overflow: hidden; }

/* ════════════════ 5. RESPUESTA AL TACTO ════════════════ */
.button { transition: background .2s, transform .16s var(--ease-out), box-shadow .2s; }
.button:active { transform: scale(.97); transition-duration: .08s; }
.button span[aria-hidden="true"],
.text-link span[aria-hidden="true"] { display: inline-block; transition: transform .2s var(--ease-out); }
@media (hover: hover) {
  .button:hover span[aria-hidden="true"],
  .text-link:hover span[aria-hidden="true"] { transform: translate(2px, -2px); }
}
.plan { transition: border-color .18s, background-color .18s, transform .16s var(--ease-out); }
.plan:active { transform: scale(.985); }
.radio-mark { transition: border-width .18s var(--ease-out), border-color .18s; }

/* ════════════════ Movimiento reducido ════════════════
   animaciones.js no pone [data-rv] en este caso; aquí solo se apaga el hero. */
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > *, .js .hero-copy h1 .h1-line, .js .hero-copy .payment-brands > *, .js .hero-art { animation: none; }
  .hero-pin { display: none; }
  summary:after, .button, .plan { transition: none; }
}