/* Aquita · Home · capa de movimiento cinematográfico.
   Todo cuelga de .cine, que solo se añade si hay JS, GSAP cargado y el usuario no pide menos movimiento.
   Si algo falla, el JS quita .cine y la web queda exactamente como la versión estática. */

/* ---- Estados iniciales (solo con .cine) ---- */
.cine .v2 .v2-hero-copy .v2-eyebrow,
.cine .v2 .v2-hero-copy .v2-sub,
.cine .v2 .v2-cta-row .v2-btn,
.cine .v2 .v2-seal,
.cine .v2 .v2-svc,
.cine .v2 .v2-panel,
.cine .v2 .v2-cred li,
.cine .v2 .v2-steps li,
.cine .v2 .v2-faq-side > *,
.cine .v2 .v2-faq-wrap details,
.cine .v2 .v2-section-head > p,
.cine .v2 .v2-authority-body > .v2-eyebrow,
.cine .v2 .v2-process-body > .v2-eyebrow,
.cine .v2 .v2-process-body > .v2-btn,
.cine .v2 .v2-cta .v2-eyebrow,
.cine .v2 .v2-cta p,
.cine .v2 .v2-cta .v2-btn,
.cine .v2 .v2-fade{opacity:0}
/* titulares: ocultos hasta que el JS los parte en palabras (evita parpadeo) */
.cine .v2 h1:not(.cs),.cine .v2 h2:not(.cs){visibility:hidden}
.cine .v2 .cw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;padding-right:.04em}
.cine .v2 .cw-i{display:inline-block;will-change:transform}
.cine .v2 .v2-hero h1 em .cw-i{color:var(--v2naranja)}

/* ---- Hero: fondo con margen para el parallax ---- */
.cine .v2 .v2-hero{overflow:hidden}
.cine .v2 .v2-hero-bg{inset:-9% 0;will-change:transform}
.cine .v2 .v2-hero-bg img{transform-origin:70% 50%;will-change:transform}

/* ---- Fotos con parallax: la imagen es más alta que su marco ---- */
.cine .v2 .v2-authority-ph,.cine .v2 .v2-process-ph{overflow:hidden}
.cine .v2 .v2-authority-ph img,.cine .v2 .v2-process-ph img{top:-10%;height:120%;inset-inline:0;will-change:transform}

/* ---- Imágenes de tarjetas: entran con zoom y luego dejan el hover a CSS ---- */
.cine .v2 .v2-svc img,.cine .v2 .v2-panel img{will-change:transform}

/* ---- Botones magnéticos: la transición de transform la lleva GSAP ---- */
.cine .v2 .v2-btn[data-mag]{transition:box-shadow var(--v2t),background var(--v2t),color var(--v2t)}
.cine .v2 .v2-btn[data-mag]:hover{transform:none}

/* ---- Sellos: la barra superior se dibuja al entrar ---- */
.cine .v2 .v2-seal::after{height:3px;width:100%;transform:scaleX(0);transform-origin:left;transition:none}
.cine .v2 .v2-seal.is-on::after{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.cine .v2 .v2-seal:hover::after{transform:scaleX(1)}

/* ---- Cinta de texto que se desplaza con el scroll ---- */
.v2 .v2-band{display:none}
.cine .v2 .v2-band{display:block;overflow:hidden;background:var(--v2negro);padding:clamp(22px,3vw,40px) 0;border-block:1px solid rgba(255,255,255,.08)}
.cine .v2 .v2-band-track{display:flex;width:max-content;gap:clamp(28px,4vw,56px);will-change:transform;white-space:nowrap;padding-left:var(--v2gutter)}
.cine .v2 .v2-band-track span{font:800 clamp(2.4rem,7vw,6rem)/1 var(--v2display);letter-spacing:-.035em;color:transparent;-webkit-text-stroke:1.5px rgba(184,217,122,.55);display:inline-flex;align-items:center;gap:clamp(28px,4vw,56px)}
.cine .v2 .v2-band-track span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--v2naranja);flex:none}
.cine .v2 .v2-band-track span:nth-child(3n+2){color:rgba(255,255,255,.92);-webkit-text-stroke:0}

/* ---- Proceso: línea de progreso y números que se encienden ---- */
.cine .v2 .v2-steps{position:relative}
.cine .v2 .v2-steps-line{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v2linea);display:none}
.cine .v2 .v2-steps li::before{transition:color .5s var(--v2t)}
.cine .v2 .v2-steps li.is-on::before{color:var(--v2verde)}
@media (min-width:1001px){
  .cine .v2 .v2-steps{padding-left:22px}
  .cine .v2 .v2-steps-line{display:block}
  .cine .v2 .v2-steps-line i{position:absolute;inset:0;background:var(--v2naranja);transform:scaleY(0);transform-origin:top}
}

/* ---- CTA final: el isotipo gira despacio con el scroll ---- */
.cine .v2 .v2-cta::before{transform:translateY(-50%) rotate(var(--cr,0deg))}

/* ---- Cabecera compacta al hacer scroll: transición suave ---- */
.cine .site-header .nav{transition:min-height .35s cubic-bezier(.16,1,.3,1)}
.cine .site-header .brand img{transition:height .35s cubic-bezier(.16,1,.3,1)}
.cine .site-header{transition:box-shadow .35s ease,background .35s ease}
.cine .site-header.shrink{box-shadow:0 14px 40px -22px rgba(18,24,9,.45)}