/* ═══════════════════════════════════════════════════════════════════════════
   MACCHINA DETAIL — dark automotive editorial
   Desktop-first. Alvo primário 1920×1080 e 1440×900.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* paleta base */
  --bg:        #090B0C;
  --bg-2:      #111416;
  --off:       #F2F1EC;
  --metal:     #9EA3A6;
  --dark:      #303437;

  /* acentos da identidade Macchina */
  --red:       #D0303A;
  --red-deep:  #9E2029;
  --green:     #0F8A5F;

  /* zona clara — derivada do couro do frame 104–120 */
  --cream:     #E9E2D6;
  --cream-2:   #D6CBB9;
  --ink:       #14171A;

  /* variáveis de zona cromática — dirigidas por GSAP (js/app.js) */
  --zone-ink:   #F2F1EC;
  --zone-mut:   #9EA3A6;
  --zone-line:  rgba(242,241,236,.18);
  --zone-page:  #090B0C;

  --font-display: "Archivo", "Archivo Expanded", sans-serif;
  --font-body:    "Barlow", "Archivo", sans-serif;

  --ease: cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scrollbar-width:none; }
html::-webkit-scrollbar{ display:none; }

body{
  margin:0;
  background:var(--zone-page);
  color:var(--zone-ink);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .6s linear;
}

body.is-loading{ overflow:hidden; height:100vh; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:var(--off); }

/* utilitário de composição: tipografia display expandida */
.disp{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 115,'wght' 800;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.018em;
}


/* ══════════════════════════════ LOADER ══════════════════════════════ */

#loader{
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:0 5vw 7vh;
  transition:opacity .9s var(--ease), visibility .9s;
}
#loader.done{ opacity:0; visibility:hidden; }

.loader-inner{ width:100%; }

.loader-brand{ display:flex; align-items:center; gap:.85rem; margin-bottom:2.2rem; }
.loader-brand .mark{ width:26px; height:26px; opacity:.9; }
.loader-word{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:1.05rem; letter-spacing:.16em; color:var(--off);
}

.loader-track{
  height:1px; width:100%;
  background:rgba(242,241,236,.12);
  position:relative; overflow:hidden;
}
#loader-bar{
  position:absolute; inset:0 auto 0 0;
  width:0%; background:var(--off);
  transition:width .25s linear;
}

.loader-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.9rem;
}
.loader-label{ font-size:.62rem; letter-spacing:.26em; color:var(--metal); }
#loader-percent{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:.9rem; letter-spacing:.06em; color:var(--off);
}
#loader-percent::after{ content:'%'; font-size:.6em; margin-left:.15em; opacity:.5; }


/* ══════════════════════════════ CURSOR ══════════════════════════════ */

#cursor{ position:fixed; inset:0; z-index:900; pointer-events:none; display:none; }
#cursor-dot,#cursor-ring{
  position:absolute; top:0; left:0;
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  will-change:transform,width,height;
}
#cursor-dot{ width:5px; height:5px; background:var(--off); mix-blend-mode:difference; }
#cursor-ring{
  width:34px; height:34px;
  border:1px solid rgba(242,241,236,.35);
  transition:width .28s var(--ease), height .28s var(--ease),
             border-color .28s var(--ease), opacity .28s;
}
#cursor.hot #cursor-ring{ width:64px; height:64px; border-color:var(--red); }
#cursor.light #cursor-ring{ border-color:rgba(20,23,26,.4); }
#cursor.light #cursor-dot{ background:var(--ink); }

@media (hover:hover) and (pointer:fine){
  #cursor{ display:block; }
  body,a,button{ cursor:none; }
}


/* ══════════════════════════════ HEADER ══════════════════════════════ */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.7rem 5vw 0;
  mix-blend-mode:difference;
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }

.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ width:19px; height:19px; transition:transform .5s var(--ease); }
.brand-word{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:.82rem; letter-spacing:.15em; color:var(--off);
}

.header-rp{
  font-size:.55rem; letter-spacing:.42em; color:var(--metal);
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap;
}

.header-nav{ display:flex; gap:2.2rem; }
.hlink{
  position:relative;
  font-size:.62rem; letter-spacing:.26em; color:var(--off);
  padding-bottom:.3rem;
}
.hlink::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.hlink:hover::after{ transform:scaleX(1); transform-origin:left; }


/* ══════════════════════════════ HERO ══════════════════════════════ */

.hero{
  position:fixed; inset:0; z-index:400;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 5vw;
  will-change:opacity,transform;
}

/* malha técnica quase invisível — dá profundidade sem virar "template" */
.hero-grid{
  position:absolute; inset:0; opacity:.5;
  background:
    linear-gradient(to right, rgba(242,241,236,.035) 1px, transparent 1px) 0 0/ 12.5vw 100%,
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(208,48,58,.055), transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 100%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 100%);
}

.hero-body{ position:relative; }

.hero-label{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 2.4rem;
  font-size:.6rem; letter-spacing:.34em; color:var(--metal);
}
.hero-label i{ width:38px; height:1px; background:var(--red); display:block; }

/* composição gráfica assimétrica — cada linha tem seu próprio recuo */
.hero-heading{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 120,'wght' 800;
  text-transform:uppercase;
  font-size:clamp(3.4rem, 10.4vw, 13.5rem);
  line-height:.85;
  letter-spacing:-.03em;
  margin:0;
  color:var(--off);
}
.hero-heading .hl{ display:block; overflow:hidden; }
.hero-heading .hl-i{ display:block; will-change:transform; }
.hero-heading .hl-1{ margin-left:0; }
.hero-heading .hl-2{ margin-left:14.5vw; font-variation-settings:'wdth' 92,'wght' 500; opacity:.62; }
.hero-heading .hl-3{ margin-left:5.5vw; }

.hero-tagline{
  position:absolute; right:0; bottom:.4rem;
  max-width:19rem; text-align:right;
  margin:0;
  font-size:.95rem; font-weight:300; line-height:1.65;
  color:var(--metal);
}

.hero-scroll{
  position:absolute; left:5vw; bottom:6vh;
  display:flex; align-items:center; gap:.9rem;
}
.hero-scroll-word{ font-size:.55rem; letter-spacing:.4em; color:var(--metal); }
.hero-scroll-line{
  width:64px; height:1px; background:rgba(242,241,236,.22);
  position:relative; overflow:hidden; display:block;
}
.hero-scroll-line::after{
  content:''; position:absolute; inset:0; width:34%;
  background:var(--off);
  animation:scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue{
  0%{ transform:translateX(-110%); }
  55%,100%{ transform:translateX(330%); }
}


/* ══════════════════════════════ CANVAS ══════════════════════════════ */

.canvas-wrap{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 1%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 1%);
  will-change:mask-image;
}

#bg-canvas{
  position:absolute; inset:-8%;
  width:116%; height:116%;
  object-fit:cover;
  filter:blur(54px) saturate(1.12) brightness(.58);
  transform:scale(1.08);
}

#canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* vinheta + lavagem cromática da zona ativa */
/* scrim direcional — duas camadas que fazem crossfade entre seções */
.scrim{
  position:absolute; inset:0; pointer-events:none;
  opacity:0;
  transition:opacity .75s cubic-bezier(.33,.1,.28,1);
  will-change:opacity;
}

.edge-wash{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 94% 86% at 50% 50%, transparent 40%, rgba(9,11,12,.6) 100%),
    linear-gradient(to bottom, rgba(9,11,12,.45), transparent 22%, transparent 74%, rgba(9,11,12,.5));
  transition:opacity .4s linear;
}

.cta-veil{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(100deg, rgba(9,11,12,.96) 0%, rgba(9,11,12,.74) 42%, rgba(9,11,12,.34) 100%),
    radial-gradient(ellipse 70% 70% at 62% 58%, transparent 10%, rgba(9,11,12,.55) 100%);
}

.grain{
  position:absolute; inset:-32px; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grainshift 1.05s steps(1) infinite;
  will-change:transform;
}
@keyframes grainshift{
  0%  { transform:translate3d(0,0,0); }
  20% { transform:translate3d(-13px,7px,0); }
  40% { transform:translate3d(9px,-11px,0); }
  60% { transform:translate3d(-7px,-5px,0); }
  80% { transform:translate3d(11px,9px,0); }
  100%{ transform:translate3d(0,0,0); }
}


/* ══════════════════════════════ MARQUEE ══════════════════════════════ */

.marquee-wrap{
  position:fixed; top:50%; left:0; z-index:150;
  width:100%; transform:translateY(-50%);
  pointer-events:none; overflow:hidden;
  opacity:0;
  mix-blend-mode:exclusion;   /* vive na composição: clareia no carro, inverte no céu */
}
.marquee-text{
  display:flex; align-items:center; gap:2.4vw;
  white-space:nowrap; width:max-content;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 76,'wght' 500;
  font-size:clamp(3.4rem, 13vw, 15rem);
  line-height:.9; letter-spacing:.012em;
  text-transform:uppercase;
  color:#F2F1EC;
  will-change:transform;
}
.marquee-text i{ font-style:normal; color:var(--red); font-size:.45em; opacity:.9; }


/* ══════════════════════ SCROLL CONTAINER / SEÇÕES ══════════════════════ */

#scroll-container{ position:relative; z-index:200; height:1040vh; }

/* seção que persiste fica presa ao viewport — o fecho nunca "passa" */
.sec[data-persist="true"]{
  position:fixed; top:0; left:0;
  width:100%; height:100vh;
  transform:none;
  z-index:210;
}

.sec{
  position:absolute; left:0;
  width:100%; height:100vh;
  transform:translateY(-50%);
  pointer-events:none;
}
.sec a,.sec button{ pointer-events:auto; }
.sec-inner{ position:absolute; }

/* rótulo comum */
.sec-label{
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.5rem;
  font-size:.6rem; letter-spacing:.3em;
  color:var(--zone-mut);
  transition:color .55s linear;
}
.sec-label b{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-weight:400; font-size:.78rem; color:var(--red);
}
.sec-label i{ width:26px; height:1px; background:var(--zone-line); display:block; }
.sec-label.align-r{ justify-content:flex-end; }

.sec-body{
  margin:1.8rem 0 0;
  font-size:1rem; font-weight:400; line-height:1.7;
  color:var(--zone-ink);
  max-width:26rem;
  text-shadow:0 1px 3px rgba(9,11,12,.9), 0 2px 26px rgba(9,11,12,.95);
  transition:color .55s linear, text-shadow .55s linear;
}
.sec-body.align-r{ margin-left:auto; text-align:right; }

.sec-heading{
  margin:0; color:var(--zone-ink);
  transition:color .55s linear, text-shadow .55s linear;
  font-family:var(--font-display);
  text-transform:uppercase;
  text-shadow:0 2px 42px rgba(9,11,12,.55);
}


/* ── 01a · coluna encostada na lateral esquerda ───────────────────────── */
.sec-rail-left .sec-inner{
  left:4.6vw; top:53%; transform:translateY(-50%);
  width:36vw; max-width:36vw;
}
.h-rail{
  font-variation-settings:'wdth' 104,'wght' 800;
  font-size:clamp(1.9rem, 3.55vw, 4.7rem);
  line-height:.94; letter-spacing:-.022em;
}
.h-rail .ln{ display:block; }
.h-rail .ln-i{ display:block; will-change:transform,clip-path; }
.h-rail .dim .ln-i{ color:var(--metal); font-variation-settings:'wdth' 96,'wght' 400; }


/* ── 01b · micro-tipografia no canto, filete na diagonal do estribo ───── */
.sec-sill .sec-inner{
  left:4.6vw; bottom:11vh; width:min(30rem,36vw);
}
.sill-rule{
  display:block; width:15rem; height:1px;
  background:linear-gradient(to right, var(--red), rgba(242,241,236,.5), transparent);
  transform:rotate(-28deg); transform-origin:left center;
  margin:0 0 3.6rem .2rem;
}
.sill-body{
  margin:0; font-size:1.06rem; font-weight:300; line-height:1.75;
  color:var(--off);
  text-shadow:0 1px 26px rgba(9,11,12,.9);
}
.sill-body b{ font-weight:500; color:var(--off); }
.sill-foot{
  margin:1.5rem 0 0;
  font-size:.58rem; letter-spacing:.26em; color:rgba(242,241,236,.72);
  text-shadow:0 1px 16px rgba(9,11,12,.95);
}


/* ── 02 · degraus à direita ───────────────────────────────────────────── */
.sec-steps .sec-inner{
  right:4.6vw; top:63%; transform:translateY(-50%);
  max-width:52vw; text-align:right;
}
.sec-steps .sec-heading{ text-shadow:0 3px 44px rgba(9,11,12,.92), 0 1px 10px rgba(9,11,12,.8); }
.sec-steps .sec-body{ text-shadow:0 2px 26px rgba(9,11,12,.95); }
/* o degrau "quase desaparece" não pode sumir de vez sobre o céu claro */
.h-steps .st-2{ color:#C7CBCD; }
.h-steps{
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(2.2rem, 5.2vw, 6.8rem);
  line-height:.92; letter-spacing:-.026em;
}
.h-steps .st{ display:block; }
.h-steps .st-i{ display:inline-block; will-change:transform,opacity; }
.h-steps .st-1{ padding-right:0; }
.h-steps .st-2{ padding-right:3.4vw; font-variation-settings:'wdth' 88,'wght' 400; color:var(--metal); }
.h-steps .st-3{ padding-right:1.2vw; }


/* ── 03 · texto dentro da área escura dos vidros ──────────────────────── */
.sec-glass .sec-inner{
  left:34vw; top:12vh; width:46vw;
}
.h-glass{
  font-variation-settings:'wdth' 104,'wght' 700;
  font-size:clamp(1.9rem, 4.2vw, 5.4rem);
  line-height:.96; letter-spacing:-.02em;
}
.h-glass .gl{ display:block; }
.h-glass .gl-i{ display:inline-block; will-change:transform,opacity; }
.h-glass .outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(242,241,236,.72);
  font-variation-settings:'wdth' 104,'wght' 400;
}
.sec-glass .sec-body{ margin-top:2.2rem; max-width:22rem; }


/* ── 04 · radial, ancorado no cubo da roda ────────────────────────────── */
.sec-radial .hub{
  position:absolute; left:26%; top:53%;
  width:0; height:0;
}
.hub-ring{
  position:absolute; left:50%; top:50%;
  width:30vw; height:30vw; max-width:420px; max-height:420px;
  border:1px solid rgba(208,48,58,.62);
  box-shadow:0 0 0 1px rgba(9,11,12,.35), 0 0 40px rgba(208,48,58,.16);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.6);
  opacity:0; will-change:transform,opacity;
}
.hub-tick{
  position:absolute; left:50%; top:50%;
  width:13vw; height:1px;
  background:linear-gradient(to right, var(--red), rgba(208,48,58,.15));
  box-shadow:0 0 14px rgba(208,48,58,.5);
  transform-origin:left center;
  transform:translateY(-50%) scaleX(0);
  will-change:transform;
}
.hub-cap{
  position:absolute; left:calc(13vw + .8rem); top:50%;
  transform:translateY(-50%);
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:.66rem; letter-spacing:.2em; color:var(--red);
  opacity:0;
}
.sec-radial .sec-inner{
  right:4.6vw; top:50%; transform:translateY(-50%);
  width:38vw; max-width:34rem;
}
.h-radial{
  font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(1.9rem, 3.8vw, 4.9rem);
  line-height:.94; letter-spacing:-.02em;
}
.h-radial .rd{ display:block; }
.h-radial .rd-i{ display:inline-block; will-change:transform,opacity; }


/* ── 05 · zona clara (interior) ───────────────────────────────────────── */
.sec-light .sec-inner{
  left:5.4vw; top:50%; transform:translateY(-50%);
  max-width:40vw;
}
.h-light{
  font-variation-settings:'wdth' 114,'wght' 700;
  font-size:clamp(2.1rem, 4.4vw, 5.7rem);
  line-height:.94; letter-spacing:-.022em;
  text-shadow:0 2px 34px rgba(233,226,214,.5);
}
.h-light .lt{ display:block; overflow:hidden; }
.h-light .lt-i{ display:block; will-change:transform; }
.sec-light .sec-body{ text-shadow:0 1px 20px rgba(233,226,214,.75); }


/* ── volta ao preto · palavra gigante cortada ─────────────────────────── */
.sec-crop{ display:flex; flex-direction:column; justify-content:center; align-items:center; }
.crop-word{
  display:block; white-space:nowrap;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(5rem, 19vw, 19rem);
  line-height:.8; letter-spacing:-.045em;
  color:rgba(242,241,236,.045);
  -webkit-text-stroke:1.5px rgba(242,241,236,.78);
  transform:translateY(-4vh);
  will-change:transform,opacity;
}
.crop-sub{
  margin:2.4rem 0 0;
  font-size:.58rem; letter-spacing:.52em; color:var(--metal);
  transform:translateY(-4vh);
}


/* ── burnout · respiro ────────────────────────────────────────────────── */
.sec-drift .drift-line{
  position:absolute; left:7vw; top:76vh;
  margin:0; white-space:nowrap;
  font-size:.66rem; letter-spacing:.58em; color:rgba(242,241,236,.92);
  text-shadow:0 1px 20px rgba(9,11,12,.9);
  will-change:transform,opacity;
}


/* ── CTA ──────────────────────────────────────────────────────────────── */
.sec-cta .sec-inner{
  left:6vw; top:50%; transform:translateY(-50%);
  max-width:50vw;
}
.cta-mark{ width:34px; height:34px; margin-bottom:1.6rem; }
.h-cta{
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(2.4rem, 5.6vw, 7.2rem);
  line-height:.89; letter-spacing:-.03em;
}
.h-cta .ct{ display:block; overflow:hidden; }
.h-cta .ct-i{ display:block; will-change:transform; }

.cta-actions{ display:flex; align-items:center; gap:2.6rem; margin-top:3rem; flex-wrap:wrap; }

.cta-button{
  position:relative; display:inline-flex; align-items:center; gap:1.1rem;
  padding:1.15rem 2.2rem;
  border:1px solid rgba(242,241,236,.45);
  background:rgba(9,11,12,.62);
  font-size:.68rem; letter-spacing:.26em; color:var(--off);
  overflow:hidden;
  will-change:transform;
}
.cta-button::before{
  content:''; position:absolute; inset:0; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.cta-button:hover::before{ transform:scaleX(1); }
.cta-button-t,.cta-button-arrow{ position:relative; z-index:1; }
.cta-button-arrow{ transition:transform .45s var(--ease); }
.cta-button:hover{ border-color:var(--red); }
.cta-button:hover .cta-button-arrow{ transform:translateX(7px); }

.cta-link{
  position:relative; font-size:.82rem; letter-spacing:.1em; color:rgba(242,241,236,.9);
  padding-bottom:.25rem;
  text-shadow:0 1px 16px rgba(9,11,12,.95);
}
.cta-link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.cta-link:hover{ color:var(--off); }
.cta-link:hover::after{ transform:scaleX(1); transform-origin:left; }

.cta-services{
  margin:3.4rem 0 0; max-width:34rem;
  font-size:.72rem; font-weight:400; line-height:2.05; letter-spacing:.05em;
  color:rgba(242,241,236,.72);
  text-shadow:0 1px 3px rgba(9,11,12,.9), 0 1px 18px rgba(9,11,12,.95);
}
.cta-foot{ margin:1.4rem 0 0; font-size:.68rem; letter-spacing:.12em; }
.cta-foot a{ color:rgba(242,241,236,.8); border-bottom:1px solid rgba(242,241,236,.3); padding-bottom:.1rem;
  text-shadow:0 1px 16px rgba(9,11,12,.95); }
.cta-foot a:hover{ color:var(--red); border-color:var(--red); }


/* zona clara — o halo de leitura inverte junto com a cor */
body.zone-light .sec-heading{ text-shadow:0 2px 40px rgba(233,226,214,.85); }
body.zone-light .sec-body{ text-shadow:0 1px 3px rgba(233,226,214,.95), 0 2px 18px rgba(233,226,214,.95); }
body.zone-light .sec-label i{ background:rgba(20,23,26,.3); }


/* ══════════════════════════════ HUD ══════════════════════════════ */

.hud{
  position:fixed; left:5vw; bottom:3.2vh; z-index:450;
  display:flex; align-items:center; gap:1.1rem;
  opacity:0; mix-blend-mode:difference; pointer-events:none;
}
.hud-frame{
  display:flex; align-items:baseline; gap:.28rem;
  font-family:var(--font-display);
  font-variation-settings:'wdth' 92,'wght' 500;
  font-size:.6rem; letter-spacing:.14em; color:var(--off);
}
.hud-frame i{ font-style:normal; opacity:.4; }
.hud-frame span:last-child{ opacity:.4; }
.hud-progress{ width:12vw; max-width:150px; height:1px; background:rgba(242,241,236,.2); }
#hud-bar{ display:block; height:100%; width:0%; background:var(--off); }


/* ══════════════════════════════ RESPONSIVO ══════════════════════════════ */

/* laptops 1440×900 — encolhe recuos, mantém a composição */
@media (max-width:1500px){
  .sec-glass .sec-inner{ left:31vw; width:50vw; top:10vh; }
  .sec-radial .sec-inner{ width:42vw; }
  .hero-heading .hl-2{ margin-left:12vw; }
}

@media (max-width:1180px){
  .sec-rail-left .sec-inner{ max-width:46vw; }
  .sec-steps .sec-inner{ max-width:62vw; }
  .sec-glass .sec-inner{ left:26vw; width:60vw; top:9vh; }
  .sec-radial .sec-inner{ width:48vw; }
  .sec-light .sec-inner{ max-width:52vw; }
  .sec-cta .sec-inner{ max-width:64vw; }
  .header-rp{ display:none; }
}

/* ── tablet / mobile: recompõe, não espreme ────────────────────────────── */
@media (max-width:820px){
  #scroll-container{ height:720vh; }

  .site-header{ padding:1.2rem 6vw 0; }
  .header-nav{ gap:1.4rem; }

  .hero{ padding:0 6vw; }
  .hero-heading{
    font-size:clamp(2.1rem,12.2vw,5.4rem);
    font-variation-settings:'wdth' 103,'wght' 800;
    letter-spacing:-.022em;
  }
  .hero-heading .hl{ padding-right:.06em; }
  .hero-heading .hl-2{ margin-left:7vw; font-variation-settings:'wdth' 84,'wght' 500; }
  .hero-heading .hl-3{ margin-left:1.5vw; }
  .hero-tagline{
    position:static; text-align:left; max-width:100%;
    margin-top:2.4rem; font-size:.88rem;
  }
  .hero-label{ margin-bottom:1.6rem; }

  /* no vertical, todo bloco vira base do quadro com scrim próprio */
  .sec .sec-inner{
    position:absolute !important;
    left:6vw !important; right:6vw !important;
    top:auto !important; bottom:12vh !important;
    transform:none !important;
    width:auto !important; max-width:none !important;
    text-align:left !important;
  }
  .sec::after{
    content:''; position:absolute; inset:auto 0 0 0; height:66%;
    background:linear-gradient(to top, rgba(9,11,12,.94) 12%, rgba(9,11,12,.72) 46%, transparent);
    pointer-events:none;
  }
  .sec[data-zone="light"]::after{
    background:linear-gradient(to top, rgba(233,226,214,.95) 12%, rgba(233,226,214,.7) 46%, transparent);
  }
  .sec-inner{ z-index:2; }

  .sec-heading{ font-size:clamp(1.9rem,8.6vw,3.1rem) !important; line-height:.96; }
  .h-steps .st{ padding-right:0 !important; }
  .sec-body,.sec-body.align-r{ text-align:left; margin-left:0; max-width:100%; font-size:.9rem; }
  .sec-label.align-r{ justify-content:flex-start; }

  .sill-rule{ width:8rem; margin-bottom:2rem; }
  .sill-body{ font-size:.95rem; }

  .sec-radial .hub{ left:50%; top:42%; }
  .hub-ring{ width:64vw; height:64vw; }
  .hub-tick{ width:24vw; }
  .hub-cap{ left:calc(24vw + .6rem); }

  .crop-word{ font-size:26vw; -webkit-text-stroke-width:1px; }
  .crop-sub{ font-size:.5rem; letter-spacing:.34em; }

  .sec-drift .drift-line{ left:6vw; top:auto; bottom:8vh; font-size:.55rem; letter-spacing:.4em; }

  .cta-actions{ gap:1.4rem; margin-top:2rem; }
  .cta-button{ padding:1rem 1.6rem; font-size:.6rem; }
  .cta-services{ font-size:.62rem; line-height:1.95; margin-top:2.2rem; }
  .cta-mark{ width:26px; height:26px; margin-bottom:1rem; }

  .marquee-text{ font-size:19vw; }

  .hud{ left:6vw; bottom:2.4vh; }
  .hud-progress{ width:26vw; }

  /* menos custo gráfico no celular */
  #bg-canvas{ filter:blur(30px) saturate(1.1) brightness(.62); }
  .grain{ display:none; }
}

@media (max-width:420px){
  .brand-word{ font-size:.72rem; }
  .hlink{ font-size:.55rem; letter-spacing:.18em; }
  .sec .sec-inner{ bottom:10vh !important; }
}

@media (max-width:360px){
  .hero-heading{ font-size:11.4vw; }
  .sec-heading{ font-size:7.8vw !important; }
  .header-nav{ gap:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .hero-scroll-line::after{ animation:none; }
  .grain{ animation:none; }
  html{ scroll-behavior:auto; }
}