/* =====================================================================
   MASIGAS · Capa premium de movimiento (todas las páginas)
   Se apoya en css/styles.css: mismos colores, tipografías y contenido.
   Todo lo que oculta contenido vive bajo .has-motion, clase que solo
   agrega premium.js cuando GSAP cargó y no hay movimiento reducido.
===================================================================== */

/* ─── Desplazamiento suave (Lenis) ─── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ─── Barra de progreso de lectura ─── */
.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ─── Header: se esconde al bajar y vuelve al subir ─── */
.header { transition: transform .45s var(--ease-out), background-color .3s ease; }
.header.is-hidden { transform: translateY(-100%); }
/* Entrada en la intro: solo 'backwards' para no pisar .is-hidden después */
.has-motion .header { animation: header-in .9s .55s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes header-in { from { transform: translateY(-100%); } }

/* ─── Portada ─── */
.hero__title {
  font-size: clamp(2.3rem, 5.2vw, 4.9rem);
  line-height: 1.02; letter-spacing: -0.03em;
}
.hero__media::after { z-index: 2; }
.hero__inner { position: relative; z-index: 3; }
.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 1.75rem;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2);
}
.hero__scroll-line {
  width: 1px; height: 44px; overflow: hidden; position: relative;
  background: rgba(255,255,255,.14);
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  animation: scroll-cue 2.2s cubic-bezier(.77,0,.175,1) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ─── Video en tarjeta + reflejo ambiental ───
   Los clips originales miden ~480–850 px: a pantalla completa en 2560 px se estiraban 3–5 veces.
   En una tarjeta de ≤ 500 px se ven casi a su tamaño real; el fondo es un reflejo difuminado a
   propósito (lienzo de 32×18 px que copia el video), así la baja resolución no se nota. */
.hero__media { background: var(--bg); }
.hero__media::before {
  content: ''; position: absolute; inset: -10%;
  background: url("../video/hero-poster-4x5.webp?v=20261007b") center / cover;
  filter: blur(60px) saturate(1.3); opacity: .5;
}
/* Sin filter de CSS: el desenfoque se hace dentro del lienzo (32×18) y el navegador solo lo agranda.
   Un blur de 60 px a pantalla completa que cambia varias veces por segundo trababa el video en PCs modestas. */
.hero__ambient {
  position: absolute; inset: -10%; width: 120%; height: 120%;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero__ambient.is-live { opacity: .6; }
.hero__media::after {
  background:
    radial-gradient(ellipse 60% 70% at 72% 50%, rgba(6,11,24,.25) 0%, rgba(6,11,24,.7) 100%),
    linear-gradient(90deg, rgba(6,11,24,.9) 0%, rgba(6,11,24,.55) 45%, rgba(6,11,24,.35) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(6,11,24,0) 30%);
}
.hero--video .hero__visual { align-self: center; justify-content: flex-end; position: relative; }
.hero__frame {
  position: relative; width: 100%; max-width: 480px; aspect-ratio: 4 / 5;
  border-radius: 24px; overflow: hidden;
  background: var(--bg-3) url("../video/hero-poster-4x5.webp?v=20261007b") center / cover;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(0,200,255,.08);
}
.hero__frame .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__frame .hero__video-toggle {
  left: auto; right: .9rem; bottom: .9rem;
  /* sin backdrop-filter: sobre un video obliga a redibujar el desenfoque en cada cuadro */
  background: rgba(6,11,24,.78); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero--video .hero__stat { position: absolute; left: -2.5rem; bottom: 2.5rem; z-index: 2; box-shadow: 0 20px 50px rgba(0,0,0,.5); }

/* Las palabras partidas son <span>: restablecer el color (styles.css pinta de naranja todo span del título) */
.hero__title .w { color: var(--text); }
.hero__title > span .w { color: var(--accent-2); }
.hero__title .w__i { color: inherit; }

/* Palabras con máscara (las genera premium.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w__i { display: inline-block; will-change: transform; }

/* Estado inicial de la portada mientras corre la intro */
.has-motion .hero__title,
.has-motion .hero__subtitle,
.has-motion .hero__cta,
.has-motion .hero__trust,
.has-motion .hero__badge,
.has-motion .hero__visual { animation: none; }
.has-motion .hero__title .w__i { transform: translateY(110%); }
.has-motion .hero__badge,
.has-motion .hero__subtitle,
.has-motion .hero__cta > *,
.has-motion .hero__trust-item,
.has-motion .hero__stat,
.has-motion .hero__scroll { opacity: 0; }

/* ─── Títulos de sección: más presencia ─── */
.section-head__title {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.06; letter-spacing: -0.025em;
}
.has-motion [data-split] .w__i { transform: translateY(110%); }

/* ─── Cabecera de páginas interiores ───
   Mientras premium.js no termina de preparar la intro (.is-ready), el título y la foto
   quedan ocultos para que no "parpadeen" antes de animarse. */
.page-hero__title { letter-spacing: -0.02em; }
.has-motion .hero__title:not(.is-split),
.has-motion .page-hero__title:not(.is-split) { visibility: hidden; }
.has-motion .page-hero__title .w__i { transform: translateY(110%); }
.has-motion .page-hero:not(.is-ready) .page-hero__photo { clip-path: inset(100% 0 0 0); }

/* ─── Servicios: luz que sigue al cursor ─── */
.svc-card { position: relative; isolation: isolate; overflow: hidden; }
.svc-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0,200,255,.16), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover::before { opacity: 1; }
}

/* ─── Declaración que se ilumina con el scroll ─── */
.statement {
  background: var(--bg);
  padding: clamp(5rem, 12vw, 10rem) 1.5rem;
}
.statement__text {
  max-width: 1180px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 3.9vw, 3.6rem);
  line-height: 1.14; letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: pretty;
}
.statement__text em { font-style: normal; color: var(--accent); }
.statement__text .sw { opacity: .14; }
.no-motion .statement__text .sw { opacity: 1; }

/* ─── Fotos: revelado con máscara + parallax interno ─── */
.work-card { translate: 0 var(--py, 0px); }
/* (el estado inicial de la máscara lo pone premium.js con gsap.set) */
.work-card__media img, .work-card__media video { will-change: transform; }

/* ─── Cinta de texto grande ─── */
.band {
  overflow: hidden; background: var(--bg);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.band__track { display: flex; width: max-content; will-change: transform; }
.band__track span {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 9vw, 8.5rem); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text); white-space: nowrap;
}
/* Separador: punto naranja redondo, independiente del color de la palabra */
.band__track span::after {
  content: ''; flex: none;
  width: .13em; height: .13em; border-radius: 50%;
  margin: 0 .55em; background: var(--accent-2);
}
/* Palabras en segundo plano: celeste tenue sólido (sin text-stroke, que dibuja los trazos internos de la fuente) */
.band__track .band__o { color: rgba(0,200,255,.22); }

/* ─── CTA final ─── */
.cta-wa__title { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.05; letter-spacing: -0.025em; }
.cta-wa__inner { max-width: 900px; }
.btn--wa { will-change: transform; }

/* ─── Móvil (después de las bases de este archivo) ─── */
@media (max-width: 768px) {
  .hero__scroll { display: none; }
  .hero__frame { max-width: 360px; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 20px; }
  .hero__frame .hero__video-toggle { top: .75rem; bottom: auto; right: .75rem; }
  .hero--video .hero__stat { left: 50%; bottom: -1.5rem; translate: -50% 0; white-space: nowrap; }
  .hero--video .hero__visual { justify-content: center; margin-bottom: 1.5rem; }
  .work-card { translate: none; }
}

/* ─── Movimiento reducido: todo visible y quieto ─── */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; }
  .header { transition: none; }
}