/* =========================================================
   5STAR — estudio creativo
   Paleta oficial: negro #000000 · hueso #F2EFE9 · bordó #910005
   ========================================================= */

/* ---------- tipografía de marca ---------- */
@font-face{
  font-family:'Druk Wide';
  src:url('../assets/fonts/DrukWideBold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --black:#000000;
  --bone:#F2EFE9;
  --bordeaux:#910005;

  --bone-70:rgba(242,239,233,.70);
  --bone-55:rgba(242,239,233,.55);
  --hair:rgba(242,239,233,.14);

  /* Druk Wide es la display de marca; Anton queda de reemplazo mientras carga */
  --display:'Druk Wide','Anton','Haettenschweiler','Arial Narrow Bold',Impact,sans-serif;
  /* Archivo es la sub-fuente de marca: grotesca editorial que sostiene a la Druk */
  --sub:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:var(--sub);

  /* «5STAR» mide 5.172 em en Druk Wide; con la estrella y el gap, 5.49 em.
     A 15.8vw el lockup ocupa ~96% del ancho útil (100vw menos los dos
     gutters) en todo el rango: llena la línea de borde a borde sin
     recortarse. El 17vw anterior desbordaba por debajo de 1080px y el tope
     de 11.5rem congelaba el título en 184px a partir de 1082px, que es por
     lo que en escritorio se veía chico. */
  --fs-hero:clamp(2rem,15.8vw,19.5rem);
  --fs-display:clamp(1.5rem,5.8vw,4.6rem);
  --fs-svc:clamp(1.05rem,2.5vw + .3rem,2.5rem);
  --fs-row:clamp(1rem,1.9vw + .32rem,2.3rem);
  --fs-body:clamp(.95rem,.5vw + .82rem,1.2rem);
  --fs-meta:clamp(.68rem,.28vw + .62rem,.82rem);

  --pad:clamp(1.25rem,4vw,4.5rem);
  --gutter:clamp(1.25rem,5vw,5rem);
  --sectionY:clamp(5rem,12vw,11rem);

  --out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,figure,ol,li{margin:0;padding:0}
ol{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

html,body{background:var(--black)}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--bone);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{overflow:hidden;height:100%}

::selection{background:var(--bordeaux);color:var(--bone)}

:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:4px;
  border-radius:2px;
}

.u-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.eyebrow{
  font-family:var(--display);
  font-size:clamp(.62rem,.26vw + .56rem,.78rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-70);
}

/* ---------- marca separada: el 5 y la estrella nunca son un solo glifo ---------- */
.mark__five{
  font-family:var(--display);
  font-size:1.35em;
  line-height:.8;
  color:var(--bone);
}
.mark__star{width:.62em;height:.62em;fill:var(--bordeaux);flex:none}
.nav__mark,.foot__mark{
  display:inline-flex;align-items:center;gap:.22em;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed;inset:0;z-index:100;
  background:var(--black);
  display:grid;place-items:center;align-content:center;gap:2.5rem;
  clip-path:inset(0 0 0 0);
}
.preloader__inner{position:relative;display:grid;place-items:center}
.preloader__star{width:clamp(88px,16vw,150px);height:auto;overflow:visible}
.preloader__count{
  position:absolute;
  font-family:var(--display);
  font-size:clamp(1rem,2vw,1.5rem);
  line-height:1;
  color:var(--bone);
}
/* Doble exposición: el mismo número corrido y en bordó sobre el original,
   ~100 ms justo antes de que reviente. */
.preloader__ghost{
  position:absolute;
  font-family:var(--display);
  font-size:clamp(1rem,2vw,1.5rem);
  line-height:1;
  color:var(--bordeaux);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}
.preloader__flare{
  position:absolute;width:130%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,230,.95) 0%,rgba(145,0,5,.55) 35%,transparent 70%);
  opacity:0;pointer-events:none;mix-blend-mode:screen;
}
.preloader__label{
  font-size:var(--fs-meta);letter-spacing:.34em;text-transform:uppercase;
  color:var(--bone-55);
}
html:not(.js) .preloader{display:none}

/* =========================================================
   NAV + PROGRESO
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:clamp(.9rem,2vw,1.6rem) var(--gutter);
  mix-blend-mode:difference;
  will-change:transform;
}
.nav__links{display:flex;gap:clamp(.9rem,2.5vw,2rem)}
.nav__links a{
  position:relative;
  font-size:var(--fs-meta);
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.7rem .1rem;
  display:inline-block;
  min-height:44px;
  line-height:1.9;
  transition:transform .35s var(--out);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--out);
}
.progress{position:fixed;inset:0 0 auto;z-index:61;height:2px;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--bordeaux);transform:scaleX(0);transform-origin:left}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--sectionY) * .75) var(--gutter) clamp(1.5rem,4vw,3rem);
  overflow:hidden;
}
/* blur(0px) explícito, no `none`: deja el desenfoque cero como estado de
   reposo (sin JS, en estático y con movimiento reducido el hero nunca
   queda velado) y le da a GSAP un valor interpolable del que partir. */
.hero__inner{align-self:center;width:100%;filter:blur(0px)}
.hero__meta{
  font-size:var(--fs-meta);letter-spacing:.28em;text-transform:uppercase;
  color:var(--bone-70);
  margin-bottom:clamp(1rem,2.5vw,2rem);
}
.hero__title{
  display:flex;align-items:flex-start;gap:.12em;
  font-family:var(--display);
  font-size:var(--fs-hero);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.005em;
  text-transform:uppercase;
  font-kerning:none;
}
/* El 5STAR nace hueco: sólo el contorno de marcador. El scroll lo rellena
   (ver heroFill en main.js). Sólo en modo completo — sin JS o en estático
   la palabra arranca y queda sólida. */
html.js-motion .hero__word{
  color:transparent;
  -webkit-text-stroke:clamp(1.2px,.16vw,3px) var(--bone);
}
.hero__star{
  width:.2em;height:.2em;flex:none;
  fill:var(--bordeaux);
  margin-top:.06em;
  filter:drop-shadow(0 0 .12em rgba(145,0,5,.9));
}
.hero__sub{
  max-width:34ch;
  margin-top:clamp(1.1rem,2.5vw,2rem);
  color:var(--bone-70);
}
.hero__cue{
  justify-self:start;
  display:flex;align-items:center;gap:.9rem;
  min-height:44px;
  font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-70);
}
.cue__line{display:block;width:clamp(38px,8vw,90px);height:1px;background:var(--bordeaux);transform-origin:left}
.cue__text{display:block}

/* =========================================================
   THE REEL — sección fijada, el scroll conduce el video
   ========================================================= */
.reel{position:relative}
.reel__pin{display:none}

html.js-reel .reel{height:720vh}
html.js-reel .reel__pin{
  display:grid;
  grid-template-columns:100%;
  grid-template-rows:100%;
  position:relative;
  width:100%;
  height:100vh;height:100svh;
  overflow:hidden;
  background:var(--black);
}

.reel__media{
  grid-area:1/1;
  position:relative;
  width:100%;height:100%;
  filter:brightness(var(--vb,1)) contrast(1.04) saturate(1.06);
  will-change:filter;
}
.reel__video{width:100%;height:100%;object-fit:cover;background:var(--black)}
.reel__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.80) 14%,rgba(0,0,0,.36) 38%,rgba(0,0,0,0) 62%),
    linear-gradient(to right,rgba(0,0,0,.74) 0%,rgba(0,0,0,.36) 30%,rgba(0,0,0,0) 58%),
    radial-gradient(122% 94% at 50% 44%,rgba(0,0,0,0) 36%,rgba(0,0,0,.30) 70%,rgba(0,0,0,.62) 100%);
}
/* Leak de luz: el bordó del propio humo tiñe dos esquinas. Estático,
   fuera del recorrido de la copy (abajo-izquierda) y en screen para que
   sólo sume luz donde ya la hay. */
.reel__media::after{
  content:'';
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 42% at 80% 16%,rgba(145,0,5,.06),rgba(145,0,5,0) 100%),
    radial-gradient(50% 38% at 88% 84%,rgba(145,0,5,.05),rgba(145,0,5,0) 100%);
  mix-blend-mode:screen;
}
.reel__flare{
  position:absolute;left:50%;top:46%;width:min(160vw,180vh);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,235,.75) 0%,rgba(145,0,5,.45) 28%,transparent 62%);
  mix-blend-mode:screen;opacity:0;pointer-events:none;
  will-change:opacity,transform;
}

.reel__copy{grid-area:1/1;position:relative;min-height:0;pointer-events:none}
.reel__intro,.reel__end{
  position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);
  font-family:var(--display);
  font-size:clamp(.75rem,1.5vw,1.3rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 2px 24px rgba(0,0,0,.85);
}
.reel__intro span,.reel__end span{color:var(--bordeaux)}

.svc-list{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad)}
.svc{position:absolute;left:0;right:0;bottom:0}
.svc__num{display:block;overflow:hidden;line-height:1}
.svc__num i{
  display:block;
  font-family:var(--display);
  font-style:normal;
  font-size:clamp(1.5rem,4.2vw,3.4rem);
  line-height:.95;
  letter-spacing:.01em;
  color:var(--bone);
  text-shadow:0 2px 30px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.85);
}
.svc__title{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--fs-svc);
  line-height:1.0;
  letter-spacing:-.005em;
  text-transform:uppercase;
  max-width:16ch;
  margin-top:.18em;
  text-shadow:0 2px 30px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.85);
  will-change:transform,filter,opacity;
  filter:blur(0px);   /* estado de reposo: el título entra desde blur(18px) y siempre vuelve a cero */
}
.svc__rule{
  display:block;height:2px;width:min(300px,42%);
  background:var(--bordeaux);
  transform-origin:left;transform:scaleX(0);
  margin:clamp(.7rem,1.6vw,1.1rem) 0 clamp(.5rem,1.2vw,.9rem);
}
.svc__desc{
  max-width:38ch;
  color:var(--bone);
  text-shadow:0 2px 22px rgba(0,0,0,1),0 0 8px rgba(0,0,0,.9);
}

/* HUD: indicador de progreso fijo — cinco estrellas que se encienden con el scrub */
.hud{
  position:fixed;
  right:var(--pad);bottom:var(--pad);
  z-index:70;
  display:flex;align-items:center;gap:.75rem;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--out);
}
.hud.is-live{opacity:1}
html:not(.js-reel) .hud{display:none}
.hud__label{
  font-size:var(--fs-meta);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-55);
}
.hud__stars{display:flex;gap:.3rem}
.hud__star{
  width:clamp(13px,1.6vw,20px);height:auto;
  fill:rgba(145,0,5,0);
  stroke:var(--bone-55);stroke-width:6;
  overflow:visible;
  transform-box:fill-box;transform-origin:center;
}
.hud__star.is-on{fill:var(--bordeaux);stroke:var(--bordeaux)}

/* ---------- fallback estático (sin JS, móvil lento o movimiento reducido) ---------- */
.lite{padding:var(--sectionY) var(--gutter);display:block}
html.js-reel .lite{display:none}
.lite__intro{
  font-family:var(--display);font-size:clamp(.8rem,1.7vw,1.35rem);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:clamp(2rem,5vw,3.5rem);
}
.lite__intro span{color:var(--bordeaux)}
.lite__list{display:grid;gap:clamp(3rem,8vw,5.5rem)}
.lite__item img,.lite__end img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lite__num{
  display:block;font-family:var(--display);font-size:clamp(1.35rem,5.4vw,2.5rem);
  line-height:1;margin-top:1.1rem;
}
.lite__title{
  font-family:var(--display);font-weight:400;font-size:var(--fs-svc);
  line-height:1.0;text-transform:uppercase;margin-top:.2em;
}
.lite__desc{color:var(--bone-70);margin-top:.7rem;max-width:44ch}
.lite__end{margin-top:clamp(3rem,8vw,5.5rem)}
.lite__end figcaption{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.78rem,1.6vw,1.25rem);margin-top:1.1rem;
}
.lite__end figcaption span{color:var(--bordeaux)}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:clamp(1.1rem,2.4vw,2rem) 0;
  overflow:hidden;
  display:grid;gap:clamp(.2rem,.6vw,.6rem);
}
.marquee__row{overflow:hidden;will-change:transform}
.marquee__track{display:flex;width:max-content}
/* Tipografía 30% más grande que en v3: el marquee tiene que golpear. */
.marquee__track span{
  display:block;white-space:nowrap;
  font-family:var(--display);
  font-size:clamp(1.5rem,5.7vw,4.7rem);
  line-height:1.06;
  letter-spacing:-.005em;
  text-transform:uppercase;
  padding-right:.4em;
}
.marquee__track b{color:var(--bordeaux);font-weight:400}
/* La fila fantasma es puro contorno: sostiene sin competir con la de arriba */
.marquee__row--ghost .marquee__track span{
  font-size:clamp(.88rem,2.1vw,1.7rem);
  color:transparent;
  -webkit-text-stroke:1px rgba(242,239,233,.35);
  letter-spacing:.06em;
}
.marquee__row--ghost .marquee__track b{color:transparent}

/* =========================================================
   CONSTELACIÓN 5STAR — las cinco disciplinas orbitando la estrella
   ========================================================= */
.constel{position:relative;background:var(--black)}
html.js-constel .constel{height:240vh}
.constel__pin{
  position:relative;
  width:100%;
  min-height:100vh;min-height:100svh;
  overflow:hidden;
}
.constel__head{
  position:absolute;top:var(--pad);left:var(--pad);right:var(--pad);
  z-index:4;pointer-events:none;
}
.constel__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,3.2vw,2.6rem);
  line-height:.94;letter-spacing:-.005em;text-transform:uppercase;
  margin-top:.35em;
}
.constel__hint{
  position:absolute;left:var(--pad);bottom:var(--pad);z-index:4;
  font-family:var(--sub);
  font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-55);pointer-events:none;
}
.constel__hint span{color:var(--bordeaux)}

/* Pentagrama: la estrella de la marca, enorme y apenas insinuada, que el
   scroll va trazando por detrás de todo. Sólo con la órbita activa. */
.constel__pentagram{
  position:absolute;left:50%;top:48%;
  width:min(62vw,720px);height:auto;
  transform:translate(-50%,-50%);
  z-index:0;
  overflow:visible;
  fill:none;
  stroke:var(--bordeaux);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;   /* trazo constante, no crece con el viewBox */
  stroke-linejoin:round;
  stroke-linecap:round;
  opacity:0;
  pointer-events:none;
}
.constel--stack .constel__pentagram{display:none}

/* Campo de estrellitas: fondo de la sección, sólo opacidad (nunca layout) */
.constel__field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.constel__field i{
  position:absolute;
  display:block;
  background:var(--bone);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity:0;
}

/* núcleo: la estrella late en el centro; el 5 llega al final, siempre aparte */
.constel__core{
  position:absolute;left:50%;top:48%;
  z-index:1;pointer-events:none;
  will-change:transform;
}
.core__star{
  display:block;
  width:clamp(62px,8.6vw,138px);height:auto;
  overflow:visible;
  opacity:.85;
  fill:rgba(145,0,5,.10);
  stroke:var(--bordeaux);stroke-width:2.5;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 18px rgba(145,0,5,.55));
}
.core__five{
  position:absolute;right:100%;top:50%;
  margin-right:.06em;
  transform:translateY(-50%);
  font-family:var(--display);
  font-size:clamp(62px,8.6vw,138px);
  line-height:.78;
  color:var(--bone);
  opacity:0;
}

/* órbita */
.constel__orbit{position:absolute;inset:0;z-index:2}
.orb{
  position:absolute;left:50%;top:48%;
  width:min(80vw,880px);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  will-change:transform,opacity,filter;
}
.orb__flare{
  position:absolute;left:50%;top:38%;
  width:150%;aspect-ratio:3/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,238,232,.60) 0%,rgba(145,0,5,.42) 30%,rgba(145,0,5,.13) 56%,rgba(145,0,5,0) 80%);
  mix-blend-mode:screen;opacity:0;pointer-events:none;
}
.orb__word{
  position:relative;
  font-family:var(--display);
  font-size:clamp(.85rem,2.1vw,1.75rem);
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--bone);
  white-space:nowrap;
  text-shadow:0 2px 26px rgba(0,0,0,.9);
  transition:text-shadow .5s var(--out);
}
.orb.is-lit .orb__word{
  text-shadow:0 2px 26px rgba(0,0,0,.9),0 0 .5em rgba(145,0,5,.40);
}
.orb__rule{
  display:block;height:2px;width:min(220px,32%);
  margin:.7em 0 .55em;
  background:var(--bordeaux);
  transform:scaleX(0);transform-origin:center;
}
.orb__note{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sub);
  font-size:clamp(.76rem,.7vw + .55rem,1rem);
  color:var(--bone);
  opacity:0;
}
.orb__bullet{width:.85em;height:.85em;flex:none;fill:var(--bordeaux)}

@media (hover:hover) and (pointer:fine){
  /* con el cursor de marcador puesto no queremos que nada reponga un puntero */
  html:not(.has-cursor) .orb.is-lit .orb__word{cursor:default}
}

/* Apilado: táctil, pantallas angostas o sin órbita */
.constel--stack .constel__pin{
  min-height:0;
  padding:var(--sectionY) var(--gutter);
  overflow:visible;
}
.constel--stack .constel__head{position:static;padding:0;margin-bottom:clamp(1.6rem,4vw,3rem)}
.constel--stack .constel__hint{display:none}
.constel--stack .constel__core{
  position:static;
  display:flex;align-items:center;gap:.06em;
  margin:0 0 clamp(2rem,6vw,3.5rem);
}
.constel--stack .core__five{
  position:static;order:-1;
  right:auto;margin-right:0;transform:none;opacity:1;
}
.constel--stack .constel__orbit{position:static}
.constel--stack .orb{
  position:static;width:auto;margin:0;
  align-items:flex-start;text-align:left;
  padding:clamp(1rem,3.2vw,1.9rem) 0;
  border-top:1px solid var(--hair);
}
.constel--stack .orb:last-child{border-bottom:1px solid var(--hair)}
.constel--stack .orb__flare{display:none}
.constel--stack .orb__word{white-space:normal;font-size:clamp(1.15rem,5.4vw,2.2rem)}
.constel--stack .orb__rule{transform:scaleX(1);transform-origin:left;width:min(160px,40%)}
.constel--stack .orb__note{opacity:1}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{
  position:relative;
  padding:var(--sectionY) var(--gutter) clamp(4rem,9vw,8rem);
  overflow:hidden;
  isolation:isolate;
}
.contact__inner{position:relative;z-index:1;max-width:1500px;margin-inline:auto}
.contact__title{
  font-family:var(--display);font-weight:400;
  font-size:var(--fs-display);
  line-height:.94;letter-spacing:-.005em;text-transform:uppercase;
  margin:.28em 0 clamp(1.8rem,4vw,3rem);
  max-width:11ch;
  text-shadow:0 4px 40px rgba(0,0,0,.7);
}
/* Estrella gigante de contorno, detrás del copy. La dibuja el scroll. */
.contact__star{
  position:absolute;
  right:-8vw;top:52%;
  width:min(52vw,620px);height:auto;
  transform:translateY(-50%);
  z-index:0;
  overflow:visible;
  fill:none;
  stroke:var(--bordeaux);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  opacity:0;
  pointer-events:none;
}

/* El mail deja de ser un botón: es el título más grande de la sección.
   Druk Wide tiene minúsculas y son 19% más angostas que las versales, así
   que va tal cual está escrito —que además es el copy aprobado— y entra
   más grande. 17.75 em de ancho: a 4.5rem son 1278px, dentro de los
   1500px de .contact__inner. */
.mail{
  display:inline-block;
  max-width:100%;
  margin-top:.1em;
}
.mail__text{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.15rem,4.9vw,4.5rem);
  line-height:.95;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;        /* red de seguridad: nunca desborda, parte la línea */

  /* Dos capas recortadas contra el texto: el hueso siempre debajo y el
     bordó creciendo por encima de izquierda a derecha. Así el relleno
     barre sin que el glifo se lave a medio camino. */
  color:transparent;
  background-image:
    linear-gradient(var(--bordeaux),var(--bordeaux)),
    linear-gradient(var(--bone),var(--bone));
  background-repeat:no-repeat,no-repeat;
  background-position:left center,left center;
  background-size:0% 100%,100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:background-size .55s var(--out);
}
.mail:hover .mail__text,
.mail:focus-visible .mail__text{background-size:100% 100%,100% 100%}

/* Sin recorte contra el texto el glifo transparente sería invisible */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .mail__text{color:var(--bone);background-image:none}
  .mail:hover .mail__text{color:var(--bordeaux)}
}

.mail__cue{
  display:block;
  margin-top:clamp(.6rem,1.4vw,1rem);
  font-family:var(--sub);
  font-size:var(--fs-meta);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-55);
  transition:color .4s var(--out);
}
.mail:hover .mail__cue,.mail:focus-visible .mail__cue{color:var(--bordeaux)}
.contact__alt{margin-top:clamp(1.3rem,3vw,2.2rem);color:var(--bone-70)}
.contact__alt a{
  display:inline-block;min-height:44px;line-height:2.4;
  color:var(--bone);
  border-bottom:1px solid var(--bordeaux);
  transition:color .35s var(--out)
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem clamp(1rem,4vw,3rem);
  padding:clamp(1.6rem,4vw,3rem) var(--gutter) clamp(2.2rem,5vw,3.5rem);
  border-top:1px solid var(--hair);
}
.foot__mark{min-height:44px}
.foot__meta{
  font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-55);
}

/* =========================================================
   CURSOR DE MARCADOR — una estrella y su estela
   Sólo lo crea el JS en punteros finos sin movimiento reducido.
   ========================================================= */
.cursor{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0}
.cursor__tip,.cursor__dot{position:fixed;left:0;top:0;display:block}
.cursor__tip{width:26px;height:26px}
.cursor__dot{width:9px;height:9px}
.cursor__tip svg,.cursor__dot svg{display:block;width:100%;height:100%;overflow:visible}
.cursor__tip svg path{
  fill:transparent;
  stroke:var(--bone);stroke-width:7;stroke-linejoin:round;
  transition:fill .3s var(--out),stroke .3s var(--out);
}
.cursor__tip.is-hot svg path{fill:var(--bordeaux);stroke:var(--bordeaux)}
.cursor__dot svg path{fill:rgba(242,239,233,.5)}

/* El puntero del sistema desaparece sólo cuando la estrella ya existe */
html.has-cursor,html.has-cursor *{cursor:none}

/* =========================================================
   SPOTLIGHT — el negro se tiñe de bordó donde está el cursor
   Sólo lo crea el JS en punteros finos sin movimiento reducido.
   ========================================================= */
.spot{
  position:fixed;left:0;top:0;
  width:min(64vw,820px);height:min(64vw,820px);
  border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(145,0,5,.20) 0%,
    rgba(145,0,5,.11) 38%,
    rgba(145,0,5,0) 72%);
  mix-blend-mode:screen;   /* sólo suma luz: no ensucia el copy claro */
  pointer-events:none;
  z-index:55;
  opacity:0;
  will-change:transform,opacity;
}

/* =========================================================
   GRANO DE PELÍCULA (solo escritorio)
   ========================================================= */
.grain{
  position:fixed;inset:-160px;z-index:90;pointer-events:none;
  background-image:var(--grain-src);
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:0;
  will-change:transform;
}
/* En pantallas densas el mismo mosaico se muestra más chico: el grano
   queda del tamaño de un grano y no de una mancha. */
@media (min-resolution:2dppx){
  .grain{background-size:132px 132px}
}
html.has-grain .grain{
  opacity:.042;
  animation:grainShift .56s steps(8) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(-38px,22px,0)}
  25%{transform:translate3d(24px,-34px,0)}
  37.5%{transform:translate3d(-46px,-12px,0)}
  50%{transform:translate3d(40px,30px,0)}
  62.5%{transform:translate3d(-16px,44px,0)}
  75%{transform:translate3d(34px,-26px,0)}
  87.5%{transform:translate3d(-30px,10px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* =========================================================
   RENDIMIENTO — saltear el render de lo que no está en pantalla

   content-visibility:auto le deja al navegador saltear layout y pintado de
   las secciones fuera del viewport. contain-intrinsic-size:auto reserva el
   alto real de la última vez que se pintó, así que la barra de scroll no
   salta y ScrollTrigger sigue midiendo bien.

   NO se aplica a .reel ni a .marquee: el reel está fijado todo el tramo y
   el marquee corre en bucle aunque esté fuera de cuadro.
   ========================================================= */
.hero,
.contact{
  content-visibility:auto;
  contain-intrinsic-size:auto 100vh;
}

/* La constelación sólo puede contenerse cuando NO está fijada.
   content-visibility implica `contain:paint`, y el paint containment
   convierte al elemento en bloque contenedor de sus descendientes
   position:fixed — que es exactamente como ScrollTrigger fija .constel__pin
   sobre el scroller del body. Con la órbita activa (html.js-constel) el pin
   quedaría anclado a la sección en vez de al viewport y se rompería.
   En apilado no hay pin, que además es el modo de los equipos lentos. */
html:not(.js-constel) .constel{
  content-visibility:auto;
  contain-intrinsic-size:auto 100vh;
}

/* =========================================================
   ESTADOS INICIALES CONTROLADOS POR JS
   ========================================================= */
.ch-mask{padding-top:.18em;margin-top:-.18em}

html.js-motion [data-fade],
html.js-motion [data-split]{visibility:hidden}
html.js-motion .svc,
html.js-motion .reel__intro,
html.js-motion .reel__end{visibility:hidden;opacity:0}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Retrato angosto: el video se muestra entero (banda 16:9) y la copy vive debajo */
@media (orientation:portrait) and (max-width:900px){
  html.js-reel .reel{height:470vh}
  html.js-reel .reel__pin{
    grid-template-rows:auto minmax(0,1fr);
    align-content:center;
    gap:clamp(1rem,4vw,2rem);
  }
  .reel__media{grid-area:1/1;height:auto;aspect-ratio:16/9}
  .reel__video{object-fit:contain}
  .reel__scrim{background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%)}
  .reel__media::after{display:none}
  .reel__copy{grid-area:2/1}
  .svc__title{max-width:none}
  .hud{left:var(--pad);right:auto}
  .svc-list,.reel__intro,.reel__end{bottom:calc(var(--pad) + 2.6rem)}
}

@media (max-width:640px){
  .nav__links a{letter-spacing:.14em}
  .hero__title{gap:.06em}
  .marquee__row--ghost{display:none}
  .foot{flex-direction:column;align-items:flex-start;gap:.9rem}
  .foot__meta--end{opacity:.8}
}

@media (max-width:400px){
  .nav__links{gap:.75rem}
}

/* Pantallas anchas: la copy no cruza toda la pantalla */
@media (min-width:1024px){
  .svc-list,.reel__intro,.reel__end{right:auto;width:min(52vw,760px)}
  .svc__title{max-width:15ch}
}

/* =========================================================
   MOVIMIENTO REDUCIDO — todo visible, nada se mueve
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.has-grain .grain{animation:none;opacity:.04}
  .preloader{display:none}
  /* Nada queda velado ni hueco: blur cero y el 5STAR sólido. */
  .hero__inner,.svc__title,.hero__word{filter:blur(0px)}
  html.js-motion .hero__word{color:var(--bone);-webkit-text-stroke-width:0}
  .orb__rule{transform:scaleX(1)}
  .orb__note{opacity:1}
  html.js-motion [data-fade],
  html.js-motion [data-split],
  html.js-motion .svc,
  html.js-motion .reel__intro,
  html.js-motion .reel__end{visibility:visible;opacity:1}
}

/* =========================================================
   MODO ESTÁTICO (fallback) — revelado por IntersectionObserver
   ========================================================= */
html.js-static .lite__item,
html.js-static .lite__end,
html.js-static .orb{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--out),transform .8s var(--out);
}
html.js-static .lite__item.is-in,
html.js-static .lite__end.is-in,
html.js-static .orb.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js-static .lite__item,
  html.js-static .lite__end,
  html.js-static .orb{opacity:1;transform:none}
}

/* Sin GSAP (modo estático o sin JS) el marquee sigue corriendo por CSS */
html.js-static .marquee__track,
html:not(.js) .marquee__track{animation:mqLeft 26s linear infinite}
html.js-static .marquee__row[data-dir="-1"] .marquee__track,
html:not(.js) .marquee__row[data-dir="-1"] .marquee__track{animation:mqRight 38s linear infinite}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  html.js-static .marquee__track,
  html:not(.js) .marquee__track,
  html.js-static .marquee__row[data-dir="-1"] .marquee__track{animation:none}
}