/* ==========================================================================
   PUBLIGO USA — Design System v2
   Dark lab: violeta elétrico + ciano de dados sobre preto-azulado.
   Sem imagens. Tudo é tipografia, gradiente, grade e movimento.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:            #08070D;
  --bg-2:          #0D0C16;
  --bg-3:          #12101F;
  --surface:       rgba(255,255,255,.030);
  --surface-2:     rgba(255,255,255,.055);
  --line:          rgba(255,255,255,.085);
  --line-2:        rgba(255,255,255,.16);
  --line-strong:   rgba(255,255,255,.28);

  --violet:        #A855F7;
  --violet-deep:   #A855F7;
  --magenta:       #A855F7;
  --neon:          #A855F7;
  --cyan:          #A855F7;
  --cyan-deep:     #A855F7;

  --grad:          linear-gradient(115deg,#A855F7 0%,#A855F7 42%,#A855F7 100%);
  --grad-2:        linear-gradient(115deg,#A855F7 0%,#A855F7 60%,#A855F7 100%);
  --grad-soft:     linear-gradient(130deg,rgba(168,85,247,.20),rgba(168,85,247,.12));

  --ink:           #FFFFFF;
  --ink-2:         #E9E6FF;
  --muted:         #9793C4;
  --muted-2:       #8A85B8;   /* 5.67:1 sobre a superfície — antes 3.43:1, reprovava AA */

  --ff-display:    'Archivo','Archivo Black',-apple-system,'Helvetica Neue',sans-serif;
  --ff-body:       'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-mono:       'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* escala tipográfica: antes havia 9 tamanhos distintos abaixo de 14px
     (9.5 / 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13.2 / 13.5). Agora são três. */
  --fs-micro: 11px;   /* rótulos mono, eyebrows, tags */
  --fs-small: 12px;   /* mono secundário, metadados */
  --fs-text:  14px;   /* texto de apoio */

  --pad: clamp(20px,5vw,76px);
  --maxw: 1520px;

  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
  --ease-3: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--ff-body); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
::selection{ background:var(--neon); color:#fff; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(#A855F7,#A855F7); border-radius:99px; }

/* ---------- 3. Bilíngue ---------- */
html[data-lang="pt"] [data-l="en"],
html[data-lang="en"] [data-l="pt"]{ display:none !important; }

/* ---------- 4. Camadas de fundo ---------- */
#fx-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85;
}
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(168,85,247,.10), transparent 58%),
    radial-gradient(90% 60% at 100% 110%, rgba(168,85,247,.05), transparent 60%);
}
.grain{
  position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.scan{
  position:fixed; inset:0; z-index:9989; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
main, .header, .footer, .mobilenav{ position:relative; z-index:2; }

/* ---------- 5. Utilitários ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cy{ color:var(--cyan); }

.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.eyebrow::before{
  content:''; width:24px; height:1px; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}

.display{
  font-family:var(--ff-display); text-transform:uppercase;
  line-height:.86; letter-spacing:-.042em; font-weight:900; color:var(--ink);
}
.h-xl{ font-size:clamp(2.6rem,8.6vw,8rem); }
.h-lg{ font-size:clamp(2rem,5.2vw,4.4rem); }
.h-md{ font-size:clamp(1.7rem,3.6vw,3rem); }
.h-sm{ font-size:clamp(1.3rem,2.1vw,1.8rem); }
.lead{ font-size:clamp(1rem,1.45vw,1.22rem); color:var(--muted); max-width:62ch; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.mono{ font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.08em; }

.section{ padding-block:clamp(60px,8vh,116px); position:relative; }
.section--tight{ padding-block:clamp(46px,5.5vh,78px); }

.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent);
}

/* ---------- 6. Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__in{ text-align:center; width:min(420px,72vw); }
.preloader__logo{
  font-family:var(--ff-display); font-size:clamp(2.4rem,7vw,3.6rem);
  text-transform:lowercase; letter-spacing:-.02em; line-height:1;
}
.preloader__bar{
  height:2px; background:var(--line); margin-top:22px; overflow:hidden; border-radius:99px;
}
.preloader__bar i{
  display:block; height:100%; width:0%; background:var(--grad-2);
  box-shadow:0 0 14px rgba(168,85,247,.8);
}
.preloader__num{
  font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.24em;
  color:var(--muted-2); margin-top:14px;
}

/* ---------- 7. Cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9995; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:fixed; width:7px; height:7px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease);
}
.cursor__ring{
  position:fixed; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), border-color .3s, background .3s;
  display:grid; place-items:center;
}
.cursor__label{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .25s; color:#fff; white-space:nowrap;
}
body.cur-hover .cursor__ring{ width:64px; height:64px; background:rgba(255,255,255,.14); border-color:transparent; }
body.cur-hover .cursor__dot{ width:0; height:0; }
body.cur-drag .cursor__ring{ width:82px; height:82px; background:rgba(255,255,255,.16); border-color:transparent; }
body.cur-drag .cursor__label{ opacity:1; }
body.cur-drag .cursor__dot{ width:0; height:0; }
@media (hover:none),(max-width:900px){ .cursor{ display:none; } }

/* ---------- 8. Transição de página ---------- */
.wipe{
  position:fixed; inset:0; z-index:9994; pointer-events:none;
  background:var(--grad); transform:scaleY(0); transform-origin:bottom;
}
.wipe.is-in{ transform:scaleY(1); transform-origin:bottom; transition:transform .55s var(--ease-2); }
.wipe.is-out{ transform:scaleY(0); transform-origin:top; transition:transform .55s var(--ease-2); }

/* ---------- 9. Seta "go" ---------- */
.arrow{
  display:inline-block; width:1em; height:1em; vertical-align:-.08em;
  background:currentColor; flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--ease);
}

/* ---------- 10. Botões ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 30px; border-radius:var(--r-pill);
  font-family:var(--ff-mono); font-size:var(--fs-small); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .5s var(--ease), color .3s, box-shadow .4s;
  will-change:transform;
}
.btn:hover .arrow{ transform:translateX(5px); }

.btn--primary{
  background:var(--grad); color:#fff;
  box-shadow:0 12px 44px -14px rgba(168,85,247,.95);
}
.btn--primary::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(115deg,#A855F7,#A855F7 55%,#A855F7);
  transition:opacity .5s var(--ease);
}
.btn--primary:hover::after{ opacity:1; }
.btn--primary:hover{ box-shadow:0 16px 54px -12px rgba(168,85,247,.6); }

.btn--ghost{ border:1px solid var(--line-2); color:var(--ink); }
.btn--ghost::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--grad); transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn--ghost:hover{ border-color:transparent; }
.btn--ghost:hover::after{ transform:translateY(0); }

.btn--sm{ padding:11px 20px; font-size:var(--fs-micro); }

.link-u{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:4px;
  background-image:linear-gradient(90deg,var(--cyan),var(--neon));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease), color .3s;
}
.link-u:hover{ background-size:100% 1px; color:#fff; }
.link-u:hover .arrow{ transform:translateX(4px); }

/* ---------- 11. Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s, transform .55s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(4,4,12,.66);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
.header.is-hidden{ transform:translateY(-102%); }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:80px; }

.logo{ display:flex; align-items:baseline; gap:2px; }
.logo__mark{
  font-family:var(--ff-display); font-size:25px; letter-spacing:-.015em;
  text-transform:lowercase; line-height:1; color:var(--ink);
}
.logo .arrow{ font-size:15px; margin-left:5px; color:var(--cyan); animation:nudge 3s var(--ease) infinite; }
@keyframes nudge{ 0%,72%,100%{transform:translateX(0)} 82%{transform:translateX(6px)} }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:10px 14px; border-radius:var(--r-pill);
  font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.06em;
  color:var(--muted); transition:color .3s;
}
.nav a::before{
  content:''; position:absolute; left:14px; right:14px; bottom:5px; height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--neon));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::before,
.nav a[aria-current="page"]::before{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:#fff; }

.header__actions{ display:flex; align-items:center; gap:10px; }
.lang{ display:flex; align-items:center; padding:3px; gap:2px; border:1px solid var(--line); border-radius:var(--r-pill); }
.lang button{
  padding:6px 11px; border-radius:var(--r-pill);
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.1em;
  color:var(--muted-2); transition:.3s;
}
.lang button[aria-pressed="true"]{ background:var(--grad); color:#fff; }

.burger{ display:none; width:44px; height:44px; place-items:center; border:1px solid var(--line); border-radius:50%; }
.burger span{ display:block; width:17px; height:1.5px; background:var(--ink); transition:.45s var(--ease); }
.burger span+span{ margin-top:5px; }
.burger.is-open span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.burger.is-open span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

.mobilenav{
  position:fixed; inset:0; z-index:890; background:var(--bg-2);
  padding:110px var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:circle(0% at 92% 6%); transition:clip-path .8s var(--ease);
  pointer-events:none;
}
.mobilenav.is-open{ clip-path:circle(150% at 92% 6%); pointer-events:auto; }
.mobilenav a.mob{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--ff-display); font-size:clamp(1.9rem,8.5vw,3rem);
  text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--line);
  color:var(--muted); transition:color .3s, padding-left .4s var(--ease);
}
.mobilenav a.mob:hover{ color:#fff; padding-left:10px; }

/* ---------- 12. Split text ---------- */
.split{ display:inline; }
.split .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split .char{
  display:inline-block; transform:translateY(110%) rotate(4deg); opacity:0;
  transition:transform .9s var(--ease-3), opacity .7s ease;
}
.split.is-in .char{ transform:none; opacity:1; }

/* ---------- 13. Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 14. Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:110px; padding-bottom:clamp(34px,5vh,70px); overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 72% 62% at 50% 45%,#000 15%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 45%,#000 15%,transparent 76%);
}
.hero__in{ position:relative; z-index:2; width:100%; }
.hero__title{ margin:24px 0 0; max-width:19ch; }
.hero__title .arrow{ font-size:.4em; vertical-align:.04em; margin-left:.14em; color:var(--cyan); }
.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:34px; margin-top:clamp(34px,5vh,58px);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__scroll{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2);
}
.hero__scroll i{ width:1px; height:36px; background:linear-gradient(var(--cyan),transparent); animation:drop 2s ease-in-out infinite; }
@keyframes drop{ 0%,100%{transform:scaleY(.3);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }

/* Barra de dados do hero */
.hero__bar{
  display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(22px,3.6vh,46px);
  border-top:1px solid var(--line);
}
.hero__bar div{
  flex:1 1 160px; padding:18px 22px 0 0; border-right:1px solid var(--line);
}
.hero__bar div:last-child{ border-right:0; }
.hero__bar b{
  display:block; font-family:var(--ff-display); font-size:clamp(1.5rem,2.6vw,2.2rem);
  line-height:1; color:var(--ink);
}
.hero__bar span{
  display:block; margin-top:8px; font-family:var(--ff-mono);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------- 15. Marquee ---------- */
.marquee{
  border-block:1px solid var(--line); padding-block:20px; overflow:hidden;
  background:linear-gradient(90deg,rgba(168,85,247,.08),rgba(168,85,247,.05));
  position:relative; z-index:2;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track > *{
  display:inline-flex; align-items:center; gap:26px; padding-inline:26px;
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(.95rem,1.7vw,1.5rem); color:var(--muted-2); white-space:nowrap; font-weight:900; letter-spacing:-.02em;
}
.marquee__track > * b{ color:var(--ink); font-weight:400; }
.marquee__track > * em{ color:var(--cyan); font-style:normal; font-size:.55em; }

/* ---------- 16. Cabeçalho de seção ---------- */
.sec-head{ display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:clamp(30px,4vh,52px); }
@media(min-width:900px){ .sec-head--split{ grid-template-columns:1.15fr .85fr; align-items:end; gap:52px; } }

/* ---------- 17. Cards com spotlight ---------- */
.card, .card-s, .quote, .feature, .post-card{ position:relative; isolation:isolate; }
.spot::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,.14), transparent 60%);
}
.spot:hover::before{ opacity:1; }
.spot::after{
  content:''; position:absolute; inset:-1px; z-index:-2; border-radius:inherit;
  opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,.30), transparent 52%);
}
.spot:hover::after{ opacity:1; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:32px; transition:transform .55s var(--ease), background .5s;
  overflow:hidden;
}
.card:hover{ transform:translateY(-5px); background:var(--surface-2); }
.card h3{ font-size:1.12rem; font-weight:700; margin-bottom:11px; color:var(--ink); }
.card p{ color:var(--muted); font-size:14.5px; }

/* ---------- 18. Seção fixa horizontal (serviços) ---------- */
.pin{ position:relative; }
.pin__sticky{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden;
}
.pin__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-inline:var(--pad); margin-bottom:34px; flex-wrap:wrap;
}
.pin__track{ display:flex; gap:22px; padding-inline:var(--pad); will-change:transform; }
.pin__progress{
  height:1px; background:var(--line); margin:34px var(--pad) 0; position:relative;
}
.pin__progress i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--neon)); box-shadow:0 0 10px rgba(168,85,247,.7);
}
.card-s{
  flex:0 0 clamp(280px,26vw,380px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px 30px; min-height:min(420px,52svh);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transition:background .5s, transform .5s var(--ease);
}
.card-s:hover{ background:var(--surface-2); }
.card-s__num{ font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.22em; color:var(--cyan); }
.card-s h3{ font-size:1.42rem; font-weight:700; margin:18px 0 12px; letter-spacing:-.01em; color:var(--ink); }
.card-s p{ color:var(--muted); font-size:14.5px; }
.card-s ul{ margin-top:22px; display:flex; flex-wrap:wrap; gap:7px; }
.card-s li{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted-2);
}
/* fallback quando não há pin (mobile / reduced motion) */
.rail{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--pad); padding-bottom:20px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail .card-s{ scroll-snap-align:start; flex:0 0 min(84vw,360px); }
.rail-hint{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2);
}

/* ---------- 19. Feature / Sprint ---------- */
.feature{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg,rgba(168,85,247,.16),rgba(4,4,12,0) 52%),var(--bg-2);
}
.feature__in{ display:grid; gap:40px; padding:clamp(30px,5vw,66px); }
@media(min-width:960px){ .feature__in{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; } }
.phases{ display:grid; gap:2px; }
.phase{
  display:grid; grid-template-columns:56px 1fr; align-items:center; gap:18px;
  padding:17px 20px; background:var(--surface); border-radius:var(--r-sm);
  transition:background .45s var(--ease), transform .45s var(--ease);
  position:relative; overflow:hidden;
}
.phase::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--cyan),var(--neon)); transform:scaleY(0);
  transform-origin:top; transition:transform .5s var(--ease);
}
.phase:hover{ background:var(--surface-2); transform:translateX(8px); }
.phase:hover::before{ transform:scaleY(1); }
.phase b{ font-family:var(--ff-display); font-weight:900; font-size:20px; letter-spacing:-.03em; color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; }
.phase span{ font-size:14.5px; font-weight:600; color:var(--ink); }
.phase i{ display:block; font-style:normal; font-size:var(--fs-small); color:var(--muted-2); font-weight:400; }
.price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:26px 0 6px; }
.price strong{ font-family:var(--ff-display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; }

/* ---------- 20. Números ---------- */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
@media(min-width:820px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--bg); padding:36px 28px; transition:background .5s; position:relative; }
.stat:hover{ background:var(--bg-3); }
.stat b{ display:block; font-family:var(--ff-display); font-size:clamp(2.4rem,5.4vw,4rem); line-height:1; color:var(--ink); }
.stat span{
  display:block; margin-top:11px; font-family:var(--ff-mono);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------- 21. Grid ---------- */
.grid{ display:grid; gap:20px; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
@media(min-width:760px){ .grid--2{ grid-template-columns:1fr 1fr; } .grid--3{ grid-template-columns:1fr 1fr; } }
@media(min-width:1080px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 22. Depoimentos ---------- */
.quote{
  border:1px solid var(--line); border-radius:var(--r); padding:32px;
  background:var(--surface); display:flex; flex-direction:column; gap:22px; height:100%;
  overflow:hidden;
}
.quote p{ font-size:1.02rem; line-height:1.65; }
.quote footer{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.avatar{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); font-family:var(--ff-mono); font-size:var(--fs-small); color:#fff; flex:0 0 auto;
}
.quote footer b{ display:block; font-size:14px; color:var(--ink); }
.quote footer span{ display:block; font-size:var(--fs-small); color:var(--muted-2); }

/* ---------- 23. CTA ---------- */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--bg-2); border:1px solid var(--line);
  padding:clamp(46px,7vw,96px) clamp(26px,5vw,72px); text-align:center;
}
.cta::before{
  content:''; position:absolute; inset:-40% -10% auto; height:180%;
  background:radial-gradient(50% 50% at 50% 40%, rgba(168,85,247,.35), transparent 70%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.15); opacity:1 } }
.cta > *{ position:relative; z-index:2; }

/* ---------- 24. Accordion ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); transition:background .4s; }
.acc__item.is-open{ background:linear-gradient(90deg,rgba(168,85,247,.06),transparent); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 0; text-align:left; font-size:clamp(1rem,1.8vw,1.25rem); font-weight:600;
  color:var(--ink); transition:color .3s, padding-left .4s var(--ease);
}
.acc__btn:hover{ color:var(--cyan); padding-left:8px; }
.acc__ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; position:relative; transition:.5s var(--ease);
}
.acc__ico::before,.acc__ico::after{ content:''; position:absolute; background:currentColor; transition:.45s var(--ease); }
.acc__ico::before{ width:12px; height:1.5px; }
.acc__ico::after{ width:1.5px; height:12px; }
.acc__item.is-open .acc__ico{ background:var(--grad); border-color:transparent; color:#fff; transform:rotate(180deg); }
.acc__item.is-open .acc__ico::after{ transform:scaleY(0); }
.acc__panel{ overflow:hidden; height:0; transition:height .55s var(--ease); }
.acc__panel > div{ padding-bottom:28px; max-width:76ch; color:var(--muted); }

/* ---------- 25. Blog ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px; }
.chip{
  padding:9px 17px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); transition:.35s var(--ease);
}
.chip:hover{ border-color:var(--line-2); color:#fff; }
.chip.is-active{ background:var(--grad); border-color:transparent; color:#fff; }

.post-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:transform .5s var(--ease), background .5s;
}
.post-card:hover{ transform:translateY(-6px); background:var(--surface-2); }
.post-card__cover{
  aspect-ratio:16/9; position:relative; overflow:hidden; display:grid; place-items:center;
}
.post-card__cover::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,0,0,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.20) 1px,transparent 1px);
  background-size:26px 26px; opacity:.5;
}
.post-card__cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(4,4,12,.9)); }
.post-card__cover span{
  position:relative; z-index:1; font-family:var(--ff-display);
  font-size:clamp(1.6rem,3.6vw,2.4rem); text-transform:uppercase;
  color:rgba(255,255,255,.92); text-align:center; padding:0 18px; line-height:.95;
  mix-blend-mode:overlay; transition:transform .6s var(--ease);
}
.post-card:hover .post-card__cover span{ transform:scale(1.06); }
.post-card__body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post-card__meta{
  display:flex; gap:14px; flex-wrap:wrap; font-family:var(--ff-mono);
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}
.post-card__meta b{ color:var(--cyan); font-weight:500; }
.post-card h3{ font-size:1.2rem; font-weight:700; line-height:1.3; color:var(--ink); }
.post-card p{ color:var(--muted); font-size:14px; }
.post-card .link-u{ margin-top:auto; padding-top:8px; }

/* Artigo */
.article{ max-width:760px; margin-inline:auto; }
.article__body{ font-size:1.06rem; line-height:1.82; color:#D6D2F0; }
.article__body h2{ font-family:var(--ff-display); text-transform:uppercase; color:var(--ink); font-size:clamp(1.5rem,3.2vw,2.2rem); margin:54px 0 16px; }
.article__body h3{ font-size:1.18rem; font-weight:700; color:var(--ink); margin:34px 0 12px; }
.article__body p{ margin-bottom:20px; }
.article__body ul{ list-style:none; margin:0 0 24px; }
.article__body li{ padding-left:26px; position:relative; margin-bottom:10px; }
.article__body li::before{ content:'→'; position:absolute; left:0; color:var(--cyan); }
.article__body strong{ color:#fff; }
.article__body blockquote{
  margin:32px 0; padding:24px 28px; border-left:2px solid var(--cyan);
  background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink); font-size:1.08rem;
}
.progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:950; background:linear-gradient(90deg,var(--cyan),var(--neon),var(--magenta)); }

/* ---------- 26. Formulário ---------- */
.form{ display:grid; gap:18px; }
@media(min-width:720px){ .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } }
.field{ position:relative; display:block; }
.field label{
  display:block; font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%; padding:16px 18px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.field textarea{ min-height:154px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--cyan); background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(168,85,247,.12);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A855F7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:17px;
}
.field select option{ background:#0B0A20; color:var(--ink); }

.contact-item{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.contact-item .ico{
  width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--cyan);
}
.contact-item b{
  display:block; font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:5px;
}

/* ---------- 27. Auth ---------- */
.auth{ min-height:100svh; display:grid; place-items:center; padding:130px var(--pad) 70px; position:relative; overflow:hidden; }
.auth__card{
  position:relative; z-index:2; width:100%; max-width:460px;
  background:rgba(7,7,26,.82); backdrop-filter:blur(22px);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(30px,5vw,48px);
}
.badge-soon{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(168,85,247,.09); border:1px solid rgba(168,85,247,.35);
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
}
.badge-soon i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 1.8s infinite; }
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.7); } }

/* ---------- 28. Page hero interno ---------- */
.phero{ position:relative; padding:clamp(150px,21vh,240px) 0 clamp(50px,8vh,90px); overflow:hidden; }

/* ---------- 29. Footer ---------- */
.footer{ border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,rgba(168,85,247,.06)); padding-top:clamp(58px,8vh,96px); }
.footer__cols{ display:grid; gap:38px; }
@media(min-width:820px){ .footer__cols{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; } }
.footer h4{ font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.footer li{ margin-bottom:9px; }
.footer li a{ font-size:14px; color:var(--muted); transition:color .3s, padding-left .35s var(--ease); display:inline-block; }
.footer li a:hover{ color:var(--cyan); padding-left:5px; }
.footer__big{
  font-family:var(--ff-display); text-transform:uppercase; line-height:.8;
  font-size:clamp(3.2rem,15.5vw,14rem); letter-spacing:-.025em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13);
  margin-top:64px; user-select:none; text-align:center;
  transition:-webkit-text-stroke-color .5s;
}
.footer__big:hover{ -webkit-text-stroke-color:rgba(168,85,247,.6); }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  border-top:1px solid var(--line); margin-top:36px; padding-block:24px;
  font-family:var(--ff-mono); font-size:var(--fs-small); color:var(--muted-2);
}
.socials{ display:flex; gap:9px; }
.socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); transition:.45s var(--ease);
}
.socials a:hover{ background:var(--grad); border-color:transparent; color:#fff; transform:translateY(-4px); }

/* ---------- 30. Responsivo ---------- */
@media(max-width:1024px){
  .nav{ display:none; }
  .burger{ display:grid; }
}
@media(max-width:600px){
  .header__in{ height:70px; }
  .lang{ display:none; }
  .mobilenav .lang{ display:flex; }
  .btn{ padding:14px 24px; }
  .hero__bar div{ flex:1 1 45%; padding-right:14px; }
}

/* ---------- 31. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .split .char{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  #fx-canvas{ display:none; }
}

/* ---------- 32. Extras ---------- */
.glow{
  position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none;
  opacity:.55; z-index:0;
}
.glow--v{ background:radial-gradient(circle, rgba(168,85,247,.6), transparent 70%); }
.glow--m{ background:radial-gradient(circle, rgba(168,85,247,.35), transparent 70%); }
.phero .glow--v{ width:52vw; height:52vw; top:-24vw; right:-14vw; }
.auth .glow--v{ width:70vw; height:70vw; top:-30vw; left:-22vw; }
.hero .glow--v{ width:56vw; height:56vw; top:-18vw; left:-14vw; }
.hero .glow--m{ width:44vw; height:44vw; bottom:-20vw; right:-12vw; }
.cta .glow--v{ display:none; }

.pin--off .pin__sticky{ position:static; height:auto; display:block; }
.pin--off .pin__progress{ display:none; }
.pin--off .pin__head{ margin-bottom:34px; }

/* ==========================================================================
   33. PAINEL AO VIVO (marketing em movimento)
   ========================================================================== */
.dash{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,rgba(168,85,247,.10),rgba(4,4,12,0) 55%),var(--bg-2);
}
.dash__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 26px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.dash__live{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
}
.dash__live i{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan); animation:pulse 1.6s infinite;
}
.dash__grid{ display:grid; gap:1px; background:var(--line); }
@media(min-width:1000px){ .dash__grid{ grid-template-columns:1.5fr 1fr; } }
.dash__chart,.dash__bars,.dash__kpis{ background:var(--bg-2); padding:26px 28px; }
@media(min-width:1000px){
  .dash__chart{ grid-row:span 2; }
}
.dash__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:22px;
}
.dash__label b{ font-family:var(--ff-display); font-size:1.7rem; letter-spacing:0; }

.chart{ width:100%; height:clamp(170px,22vw,240px); overflow:visible; }
.chart__grid line{ stroke:rgba(255,255,255,.06); stroke-width:1; }
.chart__line{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.55));
}
.chart.is-in .chart__line{ animation:drawLine 2.2s var(--ease) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
.chart__area{ opacity:0; }
.chart.is-in .chart__area{ animation:fadeArea 1s .9s ease forwards; }
@keyframes fadeArea{ to{ opacity:1; } }
.chart__dot{ opacity:0; filter:drop-shadow(0 0 8px #A855F7); }
.chart.is-in .chart__dot{ opacity:1; }
.chart__axis{
  display:flex; justify-content:space-between; margin-top:12px;
  color:var(--muted-2); font-size:var(--fs-micro); letter-spacing:.14em;
}

.bar{
  display:grid; grid-template-columns:66px 1fr 44px; align-items:center; gap:14px;
  margin-bottom:16px;
}
.bar span{ color:var(--muted-2); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; }
.bar i{
  display:block; height:6px; border-radius:99px; background:rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.bar i::after{
  content:''; position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--neon),var(--magenta));
  border-radius:99px; box-shadow:0 0 12px rgba(168,85,247,.6);
  transition:width 1.4s var(--ease);
}
.dash.is-in .bar i::after{ width:var(--w); }
.bar b{ text-align:right; color:var(--ink); font-size:var(--fs-small); }

.dash__kpis{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); padding:0; }
.kpi{ background:var(--bg-2); padding:22px 24px; }
.kpi span{ display:block; color:var(--muted-2); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; }
.kpi b{ display:block; font-family:var(--ff-display); font-size:clamp(1.5rem,2.4vw,2rem); margin-top:8px; color:var(--ink); }
.kpi em{ font-style:normal; font-family:var(--ff-mono); font-size:var(--fs-micro); }
.kpi .up{ color:#4ADE80; }
.kpi .down{ color:var(--cyan); }

/* ==========================================================================
   34. FUNIL ANIMADO
   ========================================================================== */
.funnel{ display:grid; gap:12px; }
.funnel__row{
  display:grid; grid-template-columns:minmax(110px,150px) 1fr auto; gap:18px; align-items:center;
}
.funnel__row span{ color:var(--muted-2); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; }
.funnel__row i{
  display:block; height:clamp(30px,4.4vw,52px); border-radius:8px;
  background:rgba(255,255,255,.045); position:relative; overflow:hidden;
}
.funnel__row i::after{
  content:''; position:absolute; inset:0 auto 0 0; width:0; border-radius:8px;
  background:linear-gradient(90deg,rgba(168,85,247,.85),rgba(168,85,247,.95),rgba(168,85,247,.9));
  transition:width 1.5s var(--ease);
  box-shadow:0 0 26px -6px rgba(168,85,247,.9);
}
.funnel.is-in .funnel__row i::after{ width:var(--w); }
.funnel__row i::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-100%);
}
.funnel.is-in .funnel__row i::before{ animation:shine 2.6s 1s var(--ease) infinite; }
@keyframes shine{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(200%)} }
.funnel__row b{
  font-family:var(--ff-display); font-size:clamp(1.1rem,2vw,1.7rem);
  color:var(--ink); min-width:5ch; text-align:right;
}
.funnel__row:nth-child(1) i::after{ transition-delay:.05s }
.funnel__row:nth-child(2) i::after{ transition-delay:.18s }
.funnel__row:nth-child(3) i::after{ transition-delay:.31s }
.funnel__row:nth-child(4) i::after{ transition-delay:.44s }
.funnel__row:nth-child(5) i::after{ transition-delay:.57s }

@media(max-width:640px){
  .funnel__row{ grid-template-columns:1fr auto; }
  .funnel__row i{ grid-column:1 / -1; order:3; }
}

/* ---------- 35. Ajustes finos ---------- */
.pin + .section{ padding-top:clamp(30px,5vh,70px); }
.hero{ padding-bottom:clamp(30px,5vh,66px); }

/* ---------- 36. Nebulosa (fundo cósmico) ---------- */
.neb{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.neb i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(130px); opacity:.15; will-change:transform;
}
.neb .neb--a{
  width:48vw; height:48vw; top:-18vw; left:-12vw;
  background:radial-gradient(circle,rgba(168,85,247,.75),rgba(168,85,247,0) 68%);
  animation:nebA 34s ease-in-out infinite alternate;
}
.neb .neb--b{
  width:40vw; height:40vw; top:34vh; right:-14vw;
  background:radial-gradient(circle,rgba(168,85,247,.42),rgba(168,85,247,0) 68%);
  animation:nebB 42s ease-in-out infinite alternate;
}
.neb .neb--c{
  width:36vw; height:36vw; bottom:-14vw; left:26vw;
  background:radial-gradient(circle,rgba(168,85,247,.30),rgba(168,85,247,0) 68%);
  animation:nebC 38s ease-in-out infinite alternate;
}
@keyframes nebA{ to{ transform:translate3d(16vw,10vh,0) scale(1.22); } }
@keyframes nebB{ to{ transform:translate3d(-14vw,-12vh,0) scale(1.16); } }
@keyframes nebC{ to{ transform:translate3d(10vw,-8vh,0) scale(1.3); } }

/* horizonte luminoso no fim do hero, como a curvatura de um planeta */
.hero::after{
  content:none;
}
.hero__grid{ opacity:.4; }
#fx-canvas{ opacity:.82; }

/* ---------- 37. Fundo mais discreto ---------- */
.hero .glow{ display:none; }
.hero::after{ opacity:.5; }
.phero .glow--v{ opacity:.30; }
.auth .glow--v{ opacity:.30; }

/* ==========================================================================
   38. DIREÇÃO C — statement esportivo
   ========================================================================== */

/* grade vertical fixa, a assinatura da direção C */
.vgrid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.040) 0 1px, transparent 1px 92px);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}

/* peso display em todos os títulos herdados */
.display, .footer__big, .preloader__logo, .logo__mark,
.stat b, .kpi b, .funnel__row b, .dash__label b, .price strong{
  font-family:var(--ff-display); font-weight:900; letter-spacing:-.035em;
}
.logo__mark{ letter-spacing:-.045em; font-size:23px; }

/* ---- texto vazado que se preenche no scroll ---- */
.outline{
  color:transparent;
  -webkit-text-stroke:1.4px var(--neon);
  background-image:linear-gradient(90deg,var(--neon),var(--magenta));
  background-repeat:no-repeat;
  background-size:var(--p,0%) 100%;
  -webkit-background-clip:text; background-clip:text;
  transition:background-size .12s linear;
  paint-order:stroke fill;
}
@media(max-width:600px){ .outline{ -webkit-text-stroke-width:1px; } }

/* ---- HERO direção C ---- */
.hero{ padding-top:120px; }
.hero__title{ max-width:none; margin:20px 0 0; }
.hero__title .ln{ display:block; }
.hero__title .arrow{ display:none; }
.hero__fx{ will-change:transform,opacity; }

.hero__bar{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,7,13,0),rgba(8,7,13,.6));
}
.hero__bar b{ font-family:var(--ff-display); font-weight:900; letter-spacing:-.035em; }

.eyebrow{ color:var(--neon); }
.eyebrow::before{ background:var(--neon); box-shadow:0 0 8px var(--neon); }

/* botão principal sólido, sem gradiente difuso */
.btn--primary{
  background:var(--neon); color:#fff;
  box-shadow:0 10px 40px -16px rgba(168,85,247,.9);
}
.btn--primary::after{ background:var(--magenta); }
.btn--primary:hover{ box-shadow:0 14px 46px -14px rgba(168,85,247,.7); }

/* cards mais secos */
.card, .card-s, .quote, .post-card{ border-radius:14px; background:rgba(255,255,255,.022); }
.card-s{ border-radius:18px; }
.feature, .cta, .dash{ border-radius:20px; }

/* numeração de seção no canto, como em site esportivo */
.sec-num{
  position:absolute; top:clamp(24px,4vh,44px); right:var(--pad);
  font-family:var(--ff-mono); font-size:var(--fs-small); letter-spacing:.24em;
  color:var(--muted-2); text-transform:uppercase;
}
.sec-num b{ color:var(--neon); font-weight:500; }

/* ==========================================================================
   39. LOGOS DE CLIENTES — prova social tipográfica, sem imagem
   ========================================================================== */
.clients{ border-block:1px solid var(--line); padding-block:26px; position:relative; z-index:2; }
.clients__lead{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:20px;
}
.clients__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,4vw,58px);
}
.clients__row span{
  font-family:var(--ff-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1rem,1.9vw,1.5rem); letter-spacing:-.03em;
  color:rgba(255,255,255,.30); transition:color .4s var(--ease), transform .4s var(--ease);
  cursor:default;
}
.clients__row span:hover{ color:#fff; transform:translateY(-2px); }

/* ==========================================================================
   40. CASES — o bloco que faz o site virar site de agência
   ========================================================================== */
.cases{ display:grid; gap:20px; }
@media(min-width:820px){ .cases{ grid-template-columns:1fr 1fr; } }
@media(min-width:1240px){
  .cases{ grid-template-columns:repeat(6,1fr); }
  .cases > .case{ grid-column:span 3; }
  /* o case principal ocupa a linha inteira e deita o conteúdo em duas colunas */
  .cases > .case--wide{
    grid-column:span 6; min-height:0;
    display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,64px); align-items:center;
  }
  .cases > .case--wide .case__top{ grid-column:1; }
  .cases > .case--wide .case__note{ grid-column:1; margin-top:-8px; }
  .cases > .case--wide .case__head{ grid-column:1; margin-top:8px; font-size:clamp(2.2rem,4.2vw,3.8rem); }
  .cases > .case--wide .case__metrics{ grid-column:2; grid-row:1 / span 3; align-self:stretch; }
  .cases > .case--wide .case__metrics div{ display:flex; flex-direction:column; justify-content:center; padding:26px 20px; }
}

.case{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line); border-radius:18px;
  background:var(--bg-2);
  padding:clamp(26px,2.6vw,36px);
  display:flex; flex-direction:column; gap:22px; min-height:340px;
  transition:transform .55s var(--ease), border-color .5s;
}
.case:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.case::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(160deg,rgba(168,85,247,.20),transparent 60%);
  transition:opacity .55s var(--ease);
}
.case:hover::before{ opacity:1; }

.case__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.case__client{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:-.03em; color:var(--ink);
}
.case__tag{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 11px;
}
.case__head{
  font-family:var(--ff-display); font-weight:900; text-transform:uppercase;
  line-height:.88; letter-spacing:-.04em; margin-top:auto;
  font-size:clamp(1.9rem,3.4vw,3rem); color:var(--ink);
}
.case__head em{ font-style:normal; color:var(--neon); }
.case__metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.case__metrics div{ background:var(--bg-2); padding:14px 12px; transition:background .4s; }
.case:hover .case__metrics div{ background:var(--bg-3); }
.case__metrics b{
  display:block; font-family:var(--ff-display); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(1.05rem,1.7vw,1.4rem); color:var(--ink);
}
.case__metrics span{
  display:block; margin-top:5px; font-family:var(--ff-mono); font-size:var(--fs-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}
.case__ph{
  border-style:dashed; background:transparent;
}
.case__ph .case__head{ color:var(--muted-2); }
.case__note{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.1em;
  color:var(--muted-2); text-transform:uppercase;
}

/* ---------- 41. Onde o vazado vira cor ----------
   O preenchimento violeta é o momento da marca: fica reservado ao hero.
   Nas seções o mesmo movimento acontece, mas resolvendo em branco —
   assim o gesto se repete sem transformar a página inteira em roxo. */
.outline{
  -webkit-text-stroke-color:rgba(255,255,255,.34);
  background-image:linear-gradient(90deg,#fff,#fff);
}
.hero .outline{
  -webkit-text-stroke-color:var(--neon);
  background-image:linear-gradient(90deg,var(--neon),var(--magenta));
}


/* ---------- 42. Alvos de clique ----------
   WCAG 2.2 AA pede 24x24 CSS px. Vários links de rodapé, o link sublinhado
   e o logo estavam em 22-23px de altura. */
.footer li a, .mobilenav .muted, .link-u, .logo, .clients__row span{
  min-height:24px; display:inline-flex; align-items:center;
}
.footer li{ margin-bottom:6px; }
.link-u{ padding-block:2px; }

/* ==========================================================================
   43. LAYOUT v3 — EDITORIAL GRID
   Estilo verificado: "Editorial Grid / Magazine" — grade assimétrica,
   divisores de seção visíveis, tipografia de impresso, alto contraste
   preto/branco + cor da marca. Corner radius sai: revista não tem canto
   arredondado, tem coluna, fio e bloco.
   ========================================================================== */
:root{
  --r-sm: 0px;
  --r:    0px;
  --r-lg: 0px;
  /* o pill continua só nos botões e chips, que são "carimbos" da marca */
}

/* ---- fios de seção: a página passa a ser lida como grade ---- */
.section{ border-top:1px solid var(--line); }
.section:first-of-type{ border-top:0; }
.pin{ border-top:1px solid var(--line); }
.sec-num{ top:18px; }

/* ---- cabeçalho de seção assimétrico (7 / 5, não 50/50) ---- */
@media(min-width:900px){
  .sec-head--split{ grid-template-columns:7fr 5fr; gap:clamp(32px,5vw,80px); align-items:start; }
  .sec-head--split > :last-child{ padding-top:10px; }
}

/* ---- HERO editorial: tipo gigante à esquerda, standfirst à direita ---- */
@media(min-width:1000px){
  .hero__foot{
    display:grid; grid-template-columns:7fr 5fr; gap:clamp(32px,5vw,80px);
    align-items:end;
  }
  .hero__foot > div:first-child{ max-width:none; }
  /* o standfirst ganha medida curta e um fio, como entrada de revista */
  .hero__foot .lead{
    max-width:38ch; border-left:1px solid var(--line-2); padding-left:24px;
  }
}

/* ---- células que se tocam, divididas por fio (grade de impresso) ---- */
.cases{ gap:1px; background:var(--line); border:1px solid var(--line); }
.case{ border:0; background:var(--bg-2); }
.case:hover{ transform:none; background:var(--bg-3); }

.grid--3, .grid--2{ gap:1px; background:var(--line); border:1px solid var(--line); }
.grid--3 > *, .grid--2 > *{ border:0 !important; }
.card, .quote, .post-card{ background:var(--bg-2); }
.card:hover, .post-card:hover{ transform:none; background:var(--bg-3); }

/* ---- pull quote: depoimento vira citação de revista ---- */
.quote p{
  font-family:var(--ff-body); font-size:clamp(1.05rem,1.5vw,1.32rem);
  line-height:1.5; color:var(--ink-2); text-wrap:balance;
}
.quote::before{
  content:'“'; display:block; font-family:var(--ff-display); font-weight:900;
  font-size:3.4rem; line-height:.7; color:var(--neon); margin-bottom:4px;
}

/* ---- inputs quadrados, coerentes com a grade ---- */
.field input,.field select,.field textarea{ border-radius:0; }

/* ---- o marquee vira cinta de revista ---- */
.marquee{ border-block:1px solid var(--line); }

/* ---- números do hero: divisórias reais ---- */
.hero__bar div{ border-right:1px solid var(--line); }
@media(max-width:600px){
  .hero__bar div:nth-child(2n){ border-right:0; }
}


/* ---- coerência da grade: nada arredondado dentro de célula quadrada ---- */
.case__metrics{ border-radius:0; }
.stats{ border-radius:0; }
.dash__grid, .dash{ border-radius:0; }
.funnel__row i, .funnel__row i::after{ border-radius:0; }
.bar i, .bar i::after{ border-radius:0; }
.acc__ico{ border-radius:0; }
.avatar{ border-radius:0; }

/* ==========================================================================
   44. ÍNDICE DO HERO — sumário de revista, que também navega
   ========================================================================== */
.hero__index{ display:none; }
@media(min-width:1000px){
  .hero__index{
    display:block; border-top:1px solid var(--line-2);
    align-self:end; justify-self:end; width:100%; max-width:340px;
  }
  .hero__index li{
    display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px;
    padding:11px 0; border-bottom:1px solid var(--line);
    font-family:var(--ff-mono); font-size:var(--fs-small);
    color:var(--muted); transition:color .35s var(--ease), padding-left .4s var(--ease);
    min-height:24px;
  }
  .hero__index li:hover{ color:#fff; padding-left:8px; }
  .hero__index b{ color:var(--neon); font-weight:500; }
  .hero__index i{
    font-style:normal; opacity:0; transform:translateX(-6px);
    transition:opacity .35s, transform .35s var(--ease); color:var(--neon);
  }
  .hero__index li:hover i{ opacity:1; transform:none; }
}

/* ==========================================================================
   45. PASSE PROFISSIONAL
   Três coisas entregavam amadorismo: fundo de estrelas animado, brilho
   (glow) em tudo, e três cores de acento competindo. Saem as três.
   Base: estilo "Dark Mode (OLED)" verificado — #121212, brilho mínimo,
   contraste 7:1+, UM acento vibrante.
   ========================================================================== */
:root{
  /* fundo neutro, não azul-arroxeado: cinza-quase-preto como referência */
  --bg:            #0B0B0C;
  --bg-2:          #121214;
  --bg-3:          #17171A;

  --line:          rgba(255,255,255,.10);
  --line-2:        rgba(255,255,255,.20);
  --surface:       rgba(255,255,255,.026);
  --surface-2:     rgba(255,255,255,.05);

  --ink:           #FFFFFF;
  --ink-2:         #EDEDF0;
  --muted:         #A1A1A8;   /* 7.29:1 */
  --muted-2:       #86868F;   /* 5.19:1 */

  /* UM acento. magenta e ciano saem de circulação. */
  --neon:          #A855F7;
  --magenta:       #A855F7;
  --cyan:          #A855F7;
  --violet:        #A855F7;
  --violet-deep:   #A855F7;
  --grad:          linear-gradient(90deg,#A855F7,#A855F7);
  --grad-2:        linear-gradient(90deg,#A855F7,#A855F7);

  /* uma família só, como fazem os sites de marca de alta energia */
  --ff-display:    'Space Grotesk',-apple-system,'Helvetica Neue',sans-serif;
  --ff-body:       'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* o fundo animado sai; fica a grade, que é estrutura e não enfeite */
#fx-canvas, .neb, .veil, .scan{ display:none !important; }
.hero__grid, .glow{ display:none !important; }
.vgrid{ background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px); }

/* display em Space Grotesk 700: menos larga, mais afiada */
.display, .footer__big, .preloader__logo, .logo__mark,
.stat b, .kpi b, .funnel__row b, .dash__label b, .price strong,
.case__client, .case__head, .case__metrics b, .clients__row span, .bar b, .hero__bar b{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.035em;
}
.display{ line-height:.94; }
.h-xl{ font-size:clamp(2.5rem,7.6vw,7rem); }

/* ---- brilho zerado ---- */
.btn--primary{
  background:var(--neon); color:#0B0B0C; box-shadow:none;   /* preto sobre violeta = 4.97:1 */
}
.btn--primary::after{ background:#C08BFF; }
.btn--primary:hover{ box-shadow:none; color:#0B0B0C; }
.eyebrow::before{ box-shadow:none; }
.dash__live i, .badge-soon i{ box-shadow:none; }
.chart__line{ filter:none; }
.chart__dot{ filter:none; }
.preloader__bar i{ box-shadow:none; }
.bar i::after, .funnel__row i::after{ box-shadow:none; }
.pin__progress i{ box-shadow:none; }
.cta::before{ display:none; }
.feature{ background:var(--bg-2); }
.dash{ background:var(--bg-2); }

/* setas indicadoras deixam de usar cor como único sinal */
.kpi .up::before{ content:'↑ '; }
.kpi .down::before{ content:'↓ '; }
.kpi .up, .kpi .down{ color:var(--muted); }


/* ---- último passe: sem camada decorativa sobrando ---- */
.hero::after{ content:none !important; }
.marquee{ background:transparent; }
.footer{ background:none; }
.feature{ background:var(--bg-2); }
.spot::after{ display:none; }          /* o halo ciano em volta do card sai */
.spot::before{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,.13), transparent 62%); }
::-webkit-scrollbar-thumb{ background:#3A3A40; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--neon); }

/* ==========================================================================
   46. POPPINS + SEÇÕES CLARAS
   Par verificado no banco: "Modern Professional" — Poppins nos títulos,
   Open Sans no corpo. Indicado para SaaS, corporativo e serviços
   profissionais. Mono continua nos rótulos.
   ========================================================================== */
:root{
  --ff-display: 'Poppins',-apple-system,'Helvetica Neue',sans-serif;
  --ff-body:    'Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;

  /* o violeta do fundo escuro reprova contraste sobre branco (3,54:1),
     então o claro usa uma versão mais fechada. */
  --neon-light: #7C3AED;   /* 5,10:1 sobre o cinza; branco por cima dá 5,70:1 */
}

.display, .footer__big, .preloader__logo, .logo__mark,
.stat b, .kpi b, .funnel__row b, .dash__label b, .price strong,
.case__client, .case__head, .case__metrics b, .clients__row span,
.hero__bar b, .card h3, .post-card h3, .card-s h3{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.03em;
}
.display{ line-height:.98; letter-spacing:-.035em; }
.h-xl{ font-size:clamp(2.4rem,6.8vw,6.2rem); }
.h-lg{ font-size:clamp(1.9rem,4.6vw,3.9rem); }

/* ---- SEÇÃO CLARA: branco em degradê para cinza claro ---- */
.sec--light{
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F2F4 100%);
  border-top:0;

  --ink:      #101014;
  --ink-2:    #1A1A1E;
  --muted:    #55555E;   /* 6,60:1 */
  --muted-2:  #6B6B75;   /* 4,71:1 */
  --line:     rgba(0,0,0,.10);
  --line-2:   rgba(0,0,0,.22);
  --surface:  rgba(0,0,0,.022);
  --surface-2:rgba(0,0,0,.045);
  --bg-2:     #FFFFFF;
  --bg-3:     #F7F7F9;
  --neon:     var(--neon-light);
}
.sec--light .eyebrow{ color:var(--neon-light); }
.sec--light .eyebrow::before{ background:var(--neon-light); }
.sec--light .outline{
  -webkit-text-stroke-color:rgba(16,16,20,.30);
  background-image:linear-gradient(90deg,#101014,#101014);
}
.sec--light .btn--ghost{ color:var(--ink); border-color:var(--line-2); }
.sec--light .btn--ghost::after{ background:var(--neon-light); }
.sec--light .btn--ghost:hover{ color:#fff; }
.sec--light .btn--primary{ background:var(--neon-light); color:#fff; }
.sec--light .btn--primary::after{ background:#6D28D9; }
.sec--light .link-u{ background-image:linear-gradient(90deg,var(--neon-light),var(--neon-light)); }
.sec--light .sec-num b{ color:var(--neon-light); }
.sec--light .quote::before{ color:var(--neon-light); }
.sec--light .case__head em{ color:var(--neon-light); }
.sec--light .card-s__num{ color:var(--neon-light); }
.sec--light .chip.is-active{ background:var(--neon-light); }
.sec--light .avatar{ background:var(--neon-light); }
.sec--light .acc__item.is-open{ background:linear-gradient(90deg,rgba(124,58,237,.06),transparent); }
.sec--light .acc__item.is-open .acc__ico{ background:var(--neon-light); }
.sec--light .acc__btn:hover{ color:var(--neon-light); }
.sec--light .post-card__cover::after{ background:linear-gradient(180deg,transparent 35%,rgba(255,255,255,.92)); }
.sec--light .post-card__cover span{ mix-blend-mode:normal; color:#fff; }
.sec--light .spot::before{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(124,58,237,.10), transparent 62%);
}

/* ---- BOTÕES: preset verificado (transform/opacity, 150-250ms) ---- */
.btn{
  transition:transform .22s cubic-bezier(.2,.6,.3,1), background .3s, color .3s, box-shadow .22s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:.09s; }
.btn--primary:hover{ box-shadow:0 10px 22px rgba(0,0,0,.28); }
.sec--light .btn--primary:hover{ box-shadow:0 10px 22px rgba(124,58,237,.30); }

/* ==========================================================================
   47. FUNDO: FORA AS LINHAS, ENTRA A MARCA D'ÁGUA
   A grade vertical fixa estava marcando a tela inteira o tempo todo.
   No lugar dela, o lettermark da Publigo em escala grande e opacidade
   muito baixa — presença de marca sem ruído.
   ========================================================================== */
.vgrid{ display:none !important; }

.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:'publigo';
  position:absolute; right:-4vw; bottom:-6vw; z-index:0; pointer-events:none;
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.05em;
  font-size:min(34vw,460px); line-height:.8; color:#fff; opacity:.022;
  user-select:none; white-space:nowrap;
}

/* uma marca por seção escura, alternando o lado — nunca duas na mesma tela */
.section:not(.sec--light){ position:relative; overflow:hidden; }
.section:not(.sec--light)::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:min(46vw,560px); height:min(46vw,560px);
  top:50%; right:-10vw; transform:translateY(-50%);
  opacity:.030;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section:not(.sec--light):nth-of-type(even)::before{ right:auto; left:-10vw; transform:translateY(-50%) scaleX(-1); }
.section > .wrap, .section > .sec-num{ position:relative; z-index:1; }

/* nas seções claras a marca é ainda mais discreta e some no degradê */
.sec--light{ position:relative; overflow:hidden; }
.sec--light::after{
  content:''; position:absolute; inset:auto -8vw -12vw auto; z-index:0; pointer-events:none;
  width:min(38vw,430px); height:min(38vw,430px); opacity:.045;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' stroke='%23101014' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   48. SISTEMA DERIVADO DA MARCA
   O logo real chegou. Duas coisas saem dele e passam a reger o site:
   (1) o gradiente verdadeiro — #564ACC no extremo escuro, #B38EEF no claro;
   (2) o corte de canto a 45°, que é a assinatura de todas as letras.
   ========================================================================== */
:root{
  --brand-deep:  #564ACC;
  --brand-lite:  #B38EEF;
  --brand-grad:  linear-gradient(115deg,#564ACC 0%,#8D75E2 55%,#B38EEF 100%);

  /* nos fundos escuros usa-se a ponta clara do gradiente (6,13:1);
     nas seções claras, a ponta escura (5,78:1). */
  --neon:        #9B84EA;
  --neon-light:  #564ACC;
  --grad:        var(--brand-grad);
  --grad-2:      var(--brand-grad);

  --chamfer: 14px;   /* o corte das letras */
}
.sec--light{ --neon: var(--neon-light); }

/* ---- o corte de canto ---- */
.chamfer, .btn, .chip, .case__tag, .card-s li, .avatar,
.case__metrics, .stats, .metrics, .badge-soon{
  clip-path:polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer));
  border-radius:0 !important;
}
.btn{ --chamfer:12px; }
.chip, .case__tag, .card-s li, .badge-soon{ --chamfer:9px; }
.avatar{ --chamfer:10px; }

/* cartões: sem contorno, separados pelo próprio fundo, com o mesmo corte */
.card, .quote, .post-card, .case, .card-s, .feature, .dash, .cta{
  --chamfer:20px;
  clip-path:polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer));
  border:0 !important;
}
.cases, .grid--2, .grid--3{ background:transparent; border:0; gap:14px; }
.card, .quote, .post-card, .case{ background:var(--bg-2); }
.sec--light .card, .sec--light .quote,
.sec--light .post-card, .sec--light .case{ background:#FFFFFF; }

/* ---- logo de verdade ---- */
.logo img{ height:26px; width:auto; display:block; }
.logo--footer img{ height:34px; }
.logo .arrow{ display:none; }
@media(max-width:600px){ .logo img{ height:22px; } }

/* ---- a marca d'água passa a ser a seta do "go" ---- */
.hero::before{ content:none; }
.section:not(.sec--light)::before,
.sec--light::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.sec--light::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23101014' stroke-width='2.2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* a seta inline do site passa a ser a seta diagonal da marca */
.arrow{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.btn:hover .arrow{ transform:translate(3px,-3px); }

/* ==========================================================================
   49. CASES LIDERADOS POR IMAGEM
   As duas referências (Africa Creative e Criative) têm a mesma estrutura:
   o trabalho aparece como imagem grande e o texto vem depois. É o oposto
   do que o site fazia — texto grande e nenhuma imagem.
   ========================================================================== */
.cases--media{ display:grid; gap:16px; }
@media(min-width:900px){
  .cases--media{ grid-template-columns:repeat(2,1fr); }
  .cases--media .case--feat{ grid-column:1 / -1; }
  .cases--media .case--feat{ display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; }
  .cases--media .case--feat .case__media{ aspect-ratio:auto; height:100%; min-height:360px; }
}
.case{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.case__media{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3);
  display:grid; place-items:center;
}
.case__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1); }
.case:hover .case__media img{ transform:scale(1.05); }

/* enquanto o frame não chega: bloco da marca, não um cinza vazio */
.case__media[data-ph]{ background:var(--brand-grad); }
.case__media[data-ph]::after{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23ffffff' stroke-width='1.4' fill='none' stroke-linecap='square' opacity='.28'/%3E%3C/svg%3E") center/38% no-repeat;
}
.case__phlab{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
}
.case__body{ padding:clamp(22px,2.2vw,30px); display:flex; flex-direction:column; gap:18px; flex:1; }
.case__head{ margin:0; font-size:clamp(1.4rem,2.2vw,2rem); }
.cases--media .case__metrics{ margin-top:auto; }
.case--feat .case__body{ justify-content:center; }

/* ==========================================================================
   50. FOTOGRAFIA
   Os frames chegaram. É o que faltava: agora a imagem carrega a página e a
   tipografia para de ter que fazer o trabalho sozinha.
   ========================================================================== */
.hero__shot{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__shot img{
  width:100%; height:100%; object-fit:cover; object-position:65% 55%;
  transform:scale(1.04);
}
/* véu: garante o contraste do texto sobre a foto, sem apagar a imagem */
.hero__shot::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,11,12,.97) 0%, rgba(11,11,12,.93) 34%,
                            rgba(11,11,12,.62) 62%, rgba(11,11,12,.30) 100%),
    linear-gradient(0deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,0) 42%);
}
.hero__in{ position:relative; z-index:2; }
@media(max-width:900px){
  .hero__shot img{ object-position:60% 50%; }
  .hero__shot::after{
    background:linear-gradient(0deg, rgba(11,11,12,.97) 30%, rgba(11,11,12,.72) 70%, rgba(11,11,12,.5) 100%);
  }
}

/* faixa de bastidor */
.strip{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media(min-width:900px){ .strip{ grid-template-columns:repeat(4,1fr); } }
.strip figure{
  margin:0; overflow:hidden; aspect-ratio:4/5; background:var(--bg-2);
  --chamfer:16px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.strip img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.strip figure:hover img{ filter:none; transform:scale(1.06); }
@media(min-width:900px){
  .strip figure:nth-child(even){ margin-top:32px; }
}

/* ---- legibilidade sobre a foto ---- */
/* o logo é empilhado em duas linhas: a 26px cada linha ficava com 11px */
.logo img{ height:40px; }
.logo--footer img{ height:52px; }
@media(max-width:600px){ .logo img{ height:32px; } }

/* o índice e a barra de números caíam sobre a parte clara da imagem */
@media(min-width:1000px){
  .hero__index{
    background:rgba(11,11,12,.72);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    padding:6px 18px 4px; border-top-color:var(--line-2);
    --chamfer:14px;
    clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                      calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  }
}
.hero__bar{
  background:linear-gradient(180deg, rgba(11,11,12,.55), rgba(11,11,12,.92));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding-inline:0;
}
.hero__bar div{ padding-left:18px; }
.hero__bar div:first-child{ padding-left:0; }

/* o parágrafo de apoio também ganha um pouco de chão */
.hero__foot .lead{ text-shadow:0 1px 12px rgba(11,11,12,.8); }

/* ---- correções de conflito ----
   1) `.section > .sec-num{position:relative}` estava anulando o
      `position:absolute` do próprio .sec-num, jogando-o para cima do eyebrow.
   2) as regras antigas de .cases (grade de 6 colunas) brigavam com
      .cases--media; a grade de mídia passa a mandar. */
.section > .sec-num{ position:absolute; z-index:2; }

.cases.cases--media{ display:grid; gap:16px; grid-template-columns:1fr; background:transparent; border:0; }
@media(min-width:900px){
  .cases.cases--media{ grid-template-columns:repeat(2,1fr); }
  .cases.cases--media > .case{ grid-column:auto; }
  .cases.cases--media > .case--feat{
    grid-column:1 / -1;
    display:grid; grid-template-columns:1.05fr .95fr; min-height:0;
  }
  .cases.cases--media > .case--feat .case__media{ height:100%; min-height:420px; aspect-ratio:auto; }
  .cases.cases--media > .case--feat .case__body{ justify-content:center; }
}

/* o case principal agrupava o texto no topo e as métricas no rodapé,
   abrindo um vazio no meio; agora o bloco fica junto e centrado */
@media(min-width:900px){
  .cases.cases--media > .case--feat .case__metrics{ margin-top:0; }
  .cases.cases--media > .case--feat .case__body{ gap:24px; }
}

/* ==========================================================================
   51. GRÁFICO DE FORÇAS
   Barras que sobem até a nota quando a seção entra na tela.
   ========================================================================== */
.skills{ display:grid; gap:14px; }
.skill{
  display:grid; grid-template-columns:minmax(150px,230px) 1fr auto;
  align-items:center; gap:20px;
}
.skill__name{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(.95rem,1.4vw,1.15rem); color:var(--ink);
}
.skill i{
  display:block; height:clamp(26px,3.2vw,38px); position:relative;
  background:rgba(0,0,0,.06); overflow:hidden;
  --chamfer:8px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.section:not(.sec--light) .skill i{ background:rgba(255,255,255,.07); }
.skill i b{
  position:absolute; inset:0 auto 0 0; width:0; display:block;
  background:var(--brand-grad);
  transition:width 1.5s cubic-bezier(.16,1,.3,1);
}
.skills.is-in .skill i b{ width:var(--v); }
.skills .skill:nth-child(1) i b{ transition-delay:.05s }
.skills .skill:nth-child(2) i b{ transition-delay:.16s }
.skills .skill:nth-child(3) i b{ transition-delay:.27s }
.skills .skill:nth-child(4) i b{ transition-delay:.38s }
.skills .skill:nth-child(5) i b{ transition-delay:.49s }
.skill__score{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.2rem,2vw,1.7rem); color:var(--neon); min-width:2.6ch; text-align:right;
  font-variant-numeric:tabular-nums;
}
@media(max-width:640px){
  .skill{ grid-template-columns:1fr auto; }
  .skill i{ grid-column:1 / -1; order:3; }
}

/* nota de rodapé dentro do painel */
.dash__note{
  margin-top:16px; color:var(--muted-2); font-size:var(--fs-micro);
  letter-spacing:.06em; line-height:1.6; text-transform:none;
}
.kpi em{ display:block; margin-top:6px; font-style:normal; font-family:var(--ff-mono);
  font-size:var(--fs-micro); color:var(--muted-2); text-transform:none; letter-spacing:.04em; }

/* o que fizemos por cada cliente, no lugar da tabela de métricas */
.case__what{ color:var(--muted); font-size:var(--fs-text); line-height:1.6; }
.case__lines{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.case__lines li{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--neon);
  padding:7px 12px; background:rgba(139,117,226,.10);
  --chamfer:8px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}

/* ==========================================================================
   52. PLANOS EM TRILHO
   Mesmo gesto dos serviços: cartões que correm na horizontal, arrastáveis.
   ========================================================================== */
.plans{ padding-block:8px 24px; }
.plan{
  flex:0 0 min(84vw,340px); scroll-snap-align:start;
  background:#FFFFFF; padding:32px 28px 28px;
  display:flex; flex-direction:column; gap:16px;
  --chamfer:20px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition:transform .5s var(--ease);
}
.section:not(.sec--light) .plan{ background:var(--bg-2); }
.plan:hover{ transform:translateY(-4px); }
.plan__num{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.22em; color:var(--neon);
}
.plan h3{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.03em;
  font-size:1.4rem; color:var(--ink); margin:0;
}
.plan p{ color:var(--muted); font-size:var(--fs-text); line-height:1.6; }
.plan ul{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.plan li{
  font-size:var(--fs-text); color:var(--ink-2); padding-left:22px; position:relative;
}
.plan li::before{
  content:''; position:absolute; left:0; top:.45em; width:11px; height:11px;
  background:var(--neon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan__cta{ margin-top:auto; align-self:flex-start; }
.plan--hi{ outline:2px solid var(--neon); outline-offset:-2px; }
@media(min-width:1100px){
  .plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
          padding-inline:var(--pad); overflow:visible; }
  .plans .plan{ flex:auto; }
  .plans + .wrap .rail-hint{ display:none; }
}

/* o plano em destaque: o contorno retangular brigava com o canto cortado */
.plan--hi{ outline:0; background:linear-gradient(180deg,#F4F1FF,#FFFFFF); }
.section:not(.sec--light) .plan--hi{ background:var(--bg-3); }
.plan--hi .plan__num::after{
  content:' · recomendado'; color:var(--muted-2);
}
html[data-lang="en"] .plan--hi .plan__num::after{ content:' · recommended'; }

/* espaço reservado para os frames do segundo cliente */
.strip__ph{
  display:grid; place-items:center; background:var(--brand-grad); position:relative;
}
.strip__ph span{
  font-family:var(--ff-mono); font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.9); z-index:1;
}
.strip__ph::after{
  content:''; position:absolute; inset:0; opacity:.25;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23ffffff' stroke-width='1.4' fill='none' stroke-linecap='square'/%3E%3C/svg%3E") center/34% no-repeat;
}

/* ==========================================================================
   53. BARRA DE NAVEGAÇÃO EM POPPINS
   O menu estava em mono (JetBrains), o que dava ar de terminal. Poppins
   deixa a barra com a mesma voz dos títulos. O mono continua onde tem
   função: rótulos de dado, números e etiquetas.
   ========================================================================== */
.nav a{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:var(--fs-text);
  letter-spacing:-.005em;
  text-transform:none;
  padding:10px 15px;
}
.nav a[aria-current="page"]{ font-weight:600; }

.lang button{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.02em;
}

/* o botão do header vive na mesma barra: acompanha, senão destoa ao lado */
.header .btn--sm{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.02em;
  text-transform:none;
}

/* menu mobile na mesma família */
.mobilenav a.mob{
  font-family:var(--ff-display); font-weight:700;
  text-transform:none; letter-spacing:-.03em;
}

/* ==========================================================================
   54. POPPINS EM TODA A PÁGINA
   Uma família só, do peso 200 ao 800. O que antes era diferença de fonte
   (mono para rótulo, sans para texto) agora é diferença de peso, tamanho
   e espacejamento — que é como um sistema tipográfico deve funcionar.
   ========================================================================== */
:root{
  --ff-display: 'Poppins',-apple-system,'Helvetica Neue',sans-serif;
  --ff-body:    'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-mono:    'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
}
body{ font-weight:300; }              /* corpo leve: Poppins 400 pesa muito em bloco */
.lead{ font-weight:300; }
p{ font-weight:300; }
strong, b{ font-weight:600; }

/* tudo que era "mono" vira rótulo: caixa alta, peso 500, bem espacejado */
.mono, .eyebrow, .sec-num, .case__tag, .case__lines li, .card-s li,
.chart__axis, .clients__lead, .rail-hint, .plan__num, .badge-soon,
.field label, .footer h4, .footer__bar, .post-card__meta, .chip,
.kpi span, .bar span, .bar b, .dash__live, .stat span, .hero__index li,
.skill__score, .dash__note, .kpi em, .case__phlab, .strip__ph span{
  font-family:var(--ff-display);
  font-weight:500;
  letter-spacing:.14em;
}
.dash__note, .kpi em, .clients__lead{ letter-spacing:.04em; font-weight:400; text-transform:none; }
.skill__score{ letter-spacing:-.02em; font-weight:700; }

/* números alinhados em coluna, agora que não há mais fonte monoespaçada */
.stat b, .kpi b, .skill__score, .case__metrics b, .bar b,
.dash__label b, .chart__axis, .hero__index b{
  font-variant-numeric:tabular-nums;
}

/* o botão respira melhor com Poppins do que com mono */
.btn{ font-family:var(--ff-display); font-weight:600; letter-spacing:.06em; }
.link-u{ font-family:var(--ff-display); font-weight:600; letter-spacing:.06em; }

/* peso fino nos títulos de apoio, para a família aparecer inteira */
.dash__label{ font-weight:500; letter-spacing:.14em; }
.hero__index span{ letter-spacing:0; font-weight:400; }

/* ==========================================================================
   55. FUNDO DAS SEÇÕES ESCURAS
   Preto chapado deixava as seções sem chão. Três camadas, todas discretas:
   (1) um brilho da marca que anda devagar, (2) a marca d'água da seta,
   (3) grão. Nada de partícula — foi o que deixou o site amador antes.
   ========================================================================== */
.section:not(.sec--light), .pin{ position:relative; overflow:hidden; isolation:isolate; }

/* (1) brilho que respira, alternando de lado a cada seção */
.section:not(.sec--light)::after,
.pin::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:120vw; height:120vw; max-width:1500px; max-height:1500px;
  top:50%; left:-30vw; transform:translateY(-50%);
  background:radial-gradient(circle,
    rgba(139,117,226,.10) 0%,
    rgba(86,74,204,.05) 38%,
    transparent 68%);
  animation:washA 38s ease-in-out infinite alternate;
}
.section:not(.sec--light):nth-of-type(even)::after{
  left:auto; right:-30vw; animation-name:washB; animation-duration:46s;
}
@keyframes washA{ to{ transform:translate(14vw,-46%) scale(1.18); } }
@keyframes washB{ to{ transform:translate(-12vw,-54%) scale(1.14); } }

/* (2) marca d'água um pouco mais presente do que estava */
.section:not(.sec--light)::before{ opacity:.05; }

/* (3) o CTA ganha textura de foto: a imagem vira fundo, não ilustração */
.cta{ position:relative; overflow:hidden; }
.cta__bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.cta__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1); opacity:.16;
  transform:scale(1.05);
}
.cta__bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 50%, rgba(11,11,12,.62), rgba(11,11,12,.94) 78%);
}

@media (prefers-reduced-motion:reduce){
  .section:not(.sec--light)::after, .pin::after{ animation:none; }
}

/* ---- acabamento do fundo e dos rótulos ---- */
/* a marca d'água estava sendo cortada em reta pelo overflow da seção;
   a máscara faz ela sumir na borda em vez de encostar num corte */
.section:not(.sec--light)::before{
  mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}

/* Poppins com espacejamento largo ocupa mais que mono: os rótulos das
   barras quebravam em duas linhas */
.bar{ grid-template-columns:104px 1fr 52px; }
.bar span{ letter-spacing:.08em; }
.kpi span{ letter-spacing:.10em; }
@media(max-width:520px){ .bar{ grid-template-columns:88px 1fr 46px; } }

/* o brilho ficava transparente só aos 68% do próprio quadro, e o quadro
   é menor que a tela — dava para ver a borda reta dele. Agora ele some
   antes de chegar na borda. */
.section:not(.sec--light)::after,
.pin::after{
  background:radial-gradient(circle,
    rgba(139,117,226,.11) 0%,
    rgba(86,74,204,.05) 26%,
    transparent 50%);
}

/* faixa de três frames: mesmo desencontro, proporção mais larga */
@media(min-width:900px){
  .strip--3{ grid-template-columns:repeat(3,1fr); }
  .strip--3 figure:nth-child(even){ margin-top:40px; }
}
.strip--3 figure{ aspect-ratio:4/3; }

/* garantia contra borda visível: as duas camadas de fundo somem por máscara,
   independentemente do tamanho da caixa que as contém */
.section:not(.sec--light)::after,
.pin::after{
  mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 60%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 60%);
}

/* ==========================================================================
   56. ESFERA DE AUDIÊNCIA (3D no hero)
   Ocupa o vazio à direita do título. Malha de pessoas conectadas girando,
   com pulsos de alcance e duas órbitas de campanha. Fica atrás do índice,
   que tem fundo próprio e continua legível.
   ========================================================================== */
.hero__viz{
  position:absolute; z-index:1; pointer-events:none;
  right:-4vw; top:50%; transform:translateY(-50%);
  width:min(58vw,760px); height:min(58vw,760px);
  mask-image:radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
}
.hero__viz canvas{ display:block; width:100%; height:100%; }
@media(max-width:1000px){
  .hero__viz{
    right:-24vw; width:min(120vw,720px); height:min(120vw,720px);
    opacity:.42;
  }
}
@media(max-width:600px){ .hero__viz{ opacity:.30; } }

/* a esfera fica atrás do índice: reforço o fundo dele para o texto não
   competir com a malha */
@media(min-width:1000px){
  .hero__index{ background:rgba(11,11,12,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
}
/* empurra a esfera um pouco mais para a direita, longe do título */
.hero__viz{ right:-9vw; width:min(56vw,720px); height:min(56vw,720px); }

/* ==========================================================================
   57. GALERIA DE DESIGN
   Mesma ideia da parede de capacetes do Lando: colunas desencontradas,
   cartões escuros e a legenda no canto. O corte no canto inferior direito,
   que lá é um detalhe do site, aqui já é a forma das letras do logo.
   ========================================================================== */
.arts{
  display:grid; gap:16px; grid-template-columns:repeat(2,1fr);
  align-items:start;
}
/* as colunas de verdade estão na seção 82, na grade de 12 */
@media(min-width:1200px){ .arts{ gap:20px; } }

/* desencontro por coluna: nada alinha, como na parede de capacetes */
@media(min-width:1200px){
  .art:nth-child(4n+2){ margin-top:56px; }
  .art:nth-child(4n+3){ margin-top:22px; }
  .art:nth-child(4n+4){ margin-top:74px; }
}

.art{
  position:relative; margin:0; background:var(--bg-2);
  padding:0 0 46px; overflow:hidden;
  --chamfer:26px;
  clip-path:polygon(0 0, 100% 0,
                    100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%,
                    0 100%);
  transition:transform .55s var(--ease), background .5s;
}
.art:hover{ transform:translateY(-6px); background:var(--bg-3); }
/* as artes da Publigo saem em 1080x1440, então a parede inteira é 3:4.
   O desencontro vem do deslocamento das colunas, não de proporções diferentes. */
.art > img, .art__ph{
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform .9s var(--ease);
}
/* fotos horizontais não entram aqui: elas mostram a peça instalada e vivem
   na seção de produção. Esta parede é só para o arquivo da arte. */
.art:hover > img{ transform:scale(1.05); }

.art__ph{
  background:var(--brand-grad); display:grid; place-items:center; position:relative;
}
.art__ph span{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9); z-index:1;
}
.art__ph::after{
  content:''; position:absolute; inset:0; opacity:.22;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M23 9h-11M23 9v11' stroke='%23ffffff' stroke-width='1.4' fill='none' stroke-linecap='square'/%3E%3C/svg%3E") center/34% no-repeat;
}

.art figcaption{
  position:absolute; right:18px; bottom:14px;
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-small);
  letter-spacing:.02em; color:var(--ink-2);
}
.art figcaption b{ color:var(--neon); font-weight:600; font-variant-numeric:tabular-nums; }

/* filtro */
.art[hidden]{ display:none; }
.filters .chip{ cursor:pointer; }

/* logo no preloader, no lugar do lettermark digitado */
.preloader__logo img{ height:clamp(46px,9vw,74px); width:auto; margin-inline:auto; display:block; }

/* ---- o trilho de serviços deixava ~360px de vazio dentro da tela travada ----
   os cartões passam a ocupar a altura útil, e o bloco centraliza de verdade */
.card-s{ min-height:min(560px,62svh); }
.pin__sticky{ justify-content:center; gap:0; }
.pin__head{ margin-bottom:28px; }
.pin__progress{ margin-top:28px; }

/* ---- BUG: overflow:hidden cria um contêiner de rolagem e mata o
   position:sticky do trilho de serviços — era isso que deixava o
   vazio embaixo. overflow:clip corta igual e não quebra o sticky. ---- */
.pin{ overflow:clip; }
.pin__sticky{ position:sticky; top:0; }


/* ==========================================================================
   58. A SETA DA MARCA
   Redesenhada a partir do lettermark: cabeça triangular no canto superior
   direito e haste diagonal grossa que rompe a moldura. É a mesma forma que
   vive dentro do "o" do "go".
   ========================================================================== */
.arrow{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero__index i, .plan li::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") !important;
}
.section:not(.sec--light)::before, .sec--light::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") !important;
}
.section:not(.sec--light)::before{ filter:invert(1); }
.case__media[data-ph]::after, .art__ph::after, .strip__ph::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") !important;
  filter:invert(1);
}

/* ==========================================================================
   59. GLOBO MAIS PERTO DO TÍTULO
   ========================================================================== */
.hero__viz{ right:2vw; width:min(50vw,660px); height:min(50vw,660px); }
@media(min-width:1600px){ .hero__viz{ right:6vw; } }

/* ==========================================================================
   60. LUZ
   Focos radiais violeta, bem abertos e desfocados, para o preto deixar de
   ser chapado. Opacidade baixa: é luz de ambiente, não brilho de botão.
   ========================================================================== */
.lux{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(90px); opacity:.5;
  background:radial-gradient(circle, rgba(139,117,226,.55), rgba(86,74,204,.16) 45%, transparent 70%);
}
.lux--a{ width:42vw; height:42vw; max-width:620px; max-height:620px; top:-12vw; left:-10vw; }
.lux--b{ width:34vw; height:34vw; max-width:500px; max-height:500px; bottom:-14vw; right:-8vw;
         background:radial-gradient(circle, rgba(179,142,239,.42), transparent 68%); }
.lux--c{ width:50vw; height:50vw; max-width:720px; max-height:720px; top:30%; left:38%;
         opacity:.34; filter:blur(120px); }
.sec--light .lux{ opacity:.30; filter:blur(80px);
  background:radial-gradient(circle, rgba(124,58,237,.34), transparent 70%); }
.hero .lux--a{ opacity:.62; }

/* ---- fio que varre o topo da seção quando ela entra ---- */
.sec-sweep{
  position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, var(--neon) 18%, var(--brand-lite) 50%, var(--neon) 82%, transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.sec-in .sec-sweep{ transform:scaleX(1); }
.sec--light .sec-sweep{ background:linear-gradient(90deg, transparent, var(--neon-light) 20%, #8D75E2 50%, var(--neon-light) 80%, transparent); }

/* o conteúdo das seções fica acima da luz */
.section > .wrap, .section > .sec-num, .pin > .pin__sticky, .hero > .hero__in{ z-index:2; }

/* ==========================================================================
   61. LUZ CORRENDO NA BORDA
   Um arco claro dá a volta no contorno do cartão. Feito com conic-gradient
   girando e máscara de borda — acompanha o corte de canto sozinho.
   ========================================================================== */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.ring{
  position:absolute; inset:-1px; z-index:0; pointer-events:none;
  padding:1.6px; border-radius:inherit;
  background:conic-gradient(from var(--ang),
    transparent 0 58%,
    rgba(139,117,226,.35) 70%,
    var(--brand-lite) 80%,
    #FFFFFF 85%,
    var(--brand-lite) 90%,
    rgba(139,117,226,.35) 96%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:ringSpin 5.5s linear infinite;
  opacity:.85;
}
@keyframes ringSpin{ to{ --ang:360deg; } }
.card-s .ring{ animation-duration:6.5s; }
.dash .ring{ animation-duration:9s; }
.plan .ring{ animation-duration:5s; }
.stat .ring{ animation-duration:7s; opacity:.6; }
/* cada cartão começa em um ponto diferente do giro */
.card-s:nth-child(2) .ring{ animation-delay:-1.1s }
.card-s:nth-child(3) .ring{ animation-delay:-2.2s }
.card-s:nth-child(4) .ring{ animation-delay:-3.3s }
.card-s:nth-child(5) .ring{ animation-delay:-4.4s }
.card-s:nth-child(6) .ring{ animation-delay:-5.5s }
.card-s:nth-child(7) .ring{ animation-delay:-0.6s }
.plan:nth-child(2) .ring{ animation-delay:-1.3s }
.plan:nth-child(3) .ring{ animation-delay:-2.6s }
.plan:nth-child(4) .ring{ animation-delay:-3.9s }
.stat:nth-child(2) .ring{ animation-delay:-1.8s }
.stat:nth-child(3) .ring{ animation-delay:-3.6s }
.stat:nth-child(4) .ring{ animation-delay:-5.4s }

.card-s, .plan, .dash, .stat{ position:relative; }
.card-s > *, .plan > *, .dash > *, .stat > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .ring{ animation:none; opacity:.4; } }

/* ==========================================================================
   62. NUMERAÇÃO DAS FRENTES EM DESTAQUE
   ========================================================================== */
.card-s__num{
  display:inline-flex; align-items:baseline; gap:2px;
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--neon);
  line-height:1; text-transform:none;
}
.card-s__num small{
  font-size:.44em; font-weight:500; letter-spacing:.06em; color:var(--muted-2);
}
.plan__num{
  display:block; font-family:var(--ff-display); font-weight:800;
  font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.03em; color:var(--neon);
  line-height:1; text-transform:none;
}
.plan--hi .plan__num::after{
  display:block; font-size:.42em; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; margin-top:6px;
}

/* ==========================================================================
   63. NOTAS: O 10 SÓ VEM COM O CLIENTE JUNTO
   Cada barra para pouco antes do fim de propósito. No hover, ela fecha em
   10 e a piada aparece — a nota máxima depende de estar com você.
   ========================================================================== */
.skill{ cursor:default; }
.skill i b{ transition:width 1.5s cubic-bezier(.16,1,.3,1); }
.skills.is-in .skill:hover i b{ width:100% !important; transition-duration:.7s; }
.skill__score{ position:relative; transition:color .3s; }
.skill:hover .skill__score{ color:var(--brand-lite); }
.skill__score .dez{
  position:absolute; inset:0; display:grid; place-items:end;
  opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s var(--ease);
}
.skill:hover .skill__score .dez{ opacity:1; transform:none; }
.skill:hover .skill__score .nota{ opacity:0; }
.skill__score .nota{ transition:opacity .25s; }

.skills__joke{
  margin-top:26px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-text);
  color:var(--muted);
}
.skills__joke b{
  font-weight:700; color:var(--neon);
}
.skills__joke i{
  width:16px; height:16px; background:var(--neon); flex:0 0 auto;
}

/* ==========================================================================
   64. ABERTURA E TRANSIÇÃO
   A seta da marca sobe na diagonal, como no lettermark. Nada de barra.
   ========================================================================== */
.preloader{ background:var(--bg); }
.preloader__seta{
  display:block; width:clamp(56px,9vw,96px); height:clamp(56px,9vw,96px);
  background:var(--brand-grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:setaGo 1.15s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes setaGo{
  0%   { transform:translate3d(-28%,28%,0) scale(.82); opacity:0; }
  38%  { transform:translate3d(0,0,0) scale(1); opacity:1; }
  72%  { transform:translate3d(0,0,0) scale(1); opacity:1; }
  100% { transform:translate3d(28%,-28%,0) scale(.86); opacity:0; }
}
.preloader.is-done{ opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility .55s; }

/* ==========================================================================
   65. CORTINA DE SEÇÃO
   O bloco entra por trás de uma cortina que abre de baixo para cima.
   ========================================================================== */
.sec-veil{
  clip-path:inset(0 0 100% 0);
  opacity:0;
  transition:clip-path 1.05s cubic-bezier(.16,1,.3,1), opacity .6s ease, transform 1.05s cubic-bezier(.16,1,.3,1);
  transform:translateY(26px);
}
.sec-open{ clip-path:inset(0 0 0 0); opacity:1; transform:none; }

/* BUG: `.card-s > *` etc. vinha depois de `.ring` no arquivo e, com a mesma
   especificidade, transformava o anel em elemento de fluxo (position:relative).
   Ele passava a ocupar espaço em vez de contornar o cartão. */
.card-s > *:not(.ring), .plan > *:not(.ring),
.dash > *:not(.ring), .stat > *:not(.ring){ position:relative; z-index:1; }
.card-s > .ring, .plan > .ring, .dash > .ring, .stat > .ring{
  position:absolute; inset:-1px; z-index:0;
}

/* BUG: o rótulo das estatísticas era estilizado por `.stat span`, que também
   pegava o <span data-count> dentro do <b> — o número de 64px virava rótulo
   de 11px em caixa alta. O rótulo agora é só o filho direto. */
.stat > span{
  display:block; margin-top:11px; font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.stat b > span{
  display:inline; margin:0; font-family:var(--ff-display); font-weight:800;
  font-size:inherit; letter-spacing:-.035em; text-transform:none; color:inherit;
}

/* cartões de serviço mais estreitos: sete cabem em bem menos rolagem */
.card-s{ flex:0 0 clamp(255px,21vw,318px); }

/* ==========================================================================
   66. PAREDE DE MARCAS
   Nomes vazados numa grade. O cursor acende uma área ao redor dele — quanto
   mais perto, mais a marca aparece. No hover a marca fecha em cor cheia e o
   segmento sobe.
   ========================================================================== */
.brands{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(2,1fr);
  --mx:50%; --my:50%;
}
@media(min-width:760px){ .brands{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1100px){ .brands{ grid-template-columns:repeat(5,1fr); } }

.brand{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-2); min-height:clamp(120px,13vw,168px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:20px 18px; text-decoration:none;
  transition:background .45s var(--ease), transform .5s var(--ease);
}
.sec--light .brand{ background:#FFFFFF; }

/* o facho que segue o mouse pela parede inteira */
.brands::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my),
    rgba(139,117,226,.16), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.brands:hover::after{ opacity:1; }
.brands{ position:relative; }

.brand__nome{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.05;
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  transition:color .35s, -webkit-text-stroke-color .35s;
}
.sec--light .brand__nome{ -webkit-text-stroke-color:rgba(0,0,0,.28); }

.brand__seg{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  opacity:0; transform:translateY(8px);
  transition:opacity .35s, transform .45s var(--ease);
}

/* perto do cursor a marca começa a aparecer; no hover ela fecha de vez */
.brand.perto .brand__nome{ color:rgba(139,117,226,.55); -webkit-text-stroke-color:transparent; }
.brand:hover{ background:var(--bg-3); transform:translateY(-4px); }
.sec--light .brand:hover{ background:#F7F5FF; }
.brand:hover .brand__nome{ color:var(--neon); -webkit-text-stroke-color:transparent; }
.brand:hover .brand__seg{ opacity:1; transform:none; }

/* a seta da marca aparece no canto de quem é clicável */
a.brand::before{
  content:''; position:absolute; top:16px; right:16px; width:14px; height:14px;
  background:var(--neon); opacity:0; transform:translate(-4px,4px);
  transition:opacity .3s, transform .4s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='0,26 16.61,7.61 12,3 29,3 29,20 24.39,15.39 6.5,32' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
a.brand:hover::before{ opacity:1; transform:none; }

/* ---- a dica do 10 vive em cima da barra e só aparece no hover ---- */
.skill i{ overflow:visible; }
.skill i > b{ overflow:hidden; }
.skill__dica{
  position:absolute; right:12px; top:50%; transform:translateY(-50%) translateX(10px);
  z-index:3; pointer-events:none; white-space:nowrap; font-style:normal;
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
  opacity:0; transition:opacity .3s, transform .4s var(--ease);
  text-shadow:0 1px 10px rgba(11,11,12,.55);
}
.skill:hover .skill__dica{ opacity:1; transform:translateY(-50%); }
@media(max-width:760px){ .skill__dica{ display:none; } }

/* o anel de luz também no painel de dados de mercado */
.dash{ position:relative; }
.dash > .ring{ position:absolute; inset:-1px; z-index:0; opacity:.9; }
.dash > .dash__head, .dash > .dash__grid{ position:relative; z-index:1; }

/* ==========================================================================
   67. O "GO" NA ABERTURA E NA TRANSIÇÃO
   O lettermark inteiro do "go" entra com sobra, segura e dispara na
   diagonal — o mesmo sentido da seta que vive dentro dele.
   ========================================================================== */
.preloader__go{
  display:block; width:clamp(96px,15vw,180px); height:clamp(68px,10.6vw,128px);
  background:url("../img/publigo-go.png") center/contain no-repeat;
  animation:goDispara 1.5s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes goDispara{
  0%   { transform:translate3d(-16%,16%,0) scale(.84); opacity:0; }
  26%  { transform:translate3d(0,0,0) scale(1.04); opacity:1; }
  40%  { transform:translate3d(0,0,0) scale(1); opacity:1; }
  68%  { transform:translate3d(0,0,0) scale(1); opacity:1; }
  100% { transform:translate3d(34%,-34%,0) scale(.9); opacity:0; }
}

/* o hero perdeu o eyebrow: o título sobe e ganha a tela */
.hero{ padding-top:clamp(96px,13vh,150px); }
.hero__title{ margin-top:0; }
.h-xl{ font-size:clamp(2.6rem,7.6vw,7.2rem); }

/* trava de segurança: nenhuma transição de transform pode pegar o trilho */
.pin__track{ transition:none !important; }

/* ==========================================================================
   68. TRANSIÇÃO DE SEÇÃO — versão que se vê
   Um facho atravessa o topo, um brilho pulsa na borda e o conteúdo sobe.
   ========================================================================== */
.sec-sweep{
  height:2px; overflow:visible;
  background:linear-gradient(90deg, transparent, var(--neon) 12%, #FFFFFF 50%, var(--neon) 88%, transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.25s cubic-bezier(.16,1,.3,1), opacity .9s ease .9s;
}
.sec-in .sec-sweep{ transform:scaleX(1); opacity:.55; }

/* o clarão que corre junto com o facho */
.sec-sweep::after{
  content:''; position:absolute; top:-3px; right:-2px; width:120px; height:8px;
  background:radial-gradient(closest-side, rgba(255,255,255,.9), transparent 70%);
  opacity:0;
}
.sec-in .sec-sweep::after{ animation:sweepGlow 1.25s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes sweepGlow{ 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }

/* a borda inteira acende por um instante quando a seção chega */
.section::marker{ content:none; }
.sec-in > .sec-sweep{ box-shadow:0 0 22px rgba(139,117,226,.55); }

/* o conteúdo sobe mais, para o movimento ser perceptível */
.sec-veil{ transform:translateY(46px); }

@media (prefers-reduced-motion:reduce){
  .sec-sweep{ transform:scaleX(1); transition:none; }
  .sec-veil{ transform:none; clip-path:none; opacity:1; }
}

/* a arte manda no formato: cada peça aparece inteira, no próprio proporção.
   O desencontro das colunas já dá o ritmo — não preciso cortar nada. */
.art > img{ aspect-ratio:auto; height:auto; object-fit:contain; }
.art__ph{ aspect-ratio:3/4; }

/* ==========================================================================
   69. VÍDEOS
   Fachada leve: nada do YouTube é carregado até alguém clicar. O site não
   faz requisição nenhuma para lá enquanto o vídeo não é pedido.
   ========================================================================== */
.videos{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:720px){ .videos{ grid-template-columns:repeat(2,1fr); } }
.video{
  position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate;
  background:var(--bg-2);
  --chamfer:20px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition:transform .5s var(--ease);
}
.video:hover{ transform:translateY(-4px); }
.video::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--brand-grad); opacity:.9;
}
.video img, .video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1;
  object-fit:cover; display:block;
}
.video__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:transparent; cursor:pointer;
}
.video__tri{
  width:clamp(56px,6vw,78px); height:clamp(56px,6vw,78px);
  background:rgba(255,255,255,.95); display:block;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position:relative; transition:transform .4s var(--ease), background .3s;
}
.video__tri::after{
  content:''; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-left:16px solid var(--brand-deep);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
}
.video:hover .video__tri{ transform:scale(1.08); background:#fff; }
.video__nome{
  position:absolute; left:20px; bottom:16px; z-index:3;
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-text);
  color:#fff; text-shadow:0 1px 12px rgba(11,11,12,.6);
}
.video.is-on .video__play, .video.is-on .video__nome, .video.is-on::before{ display:none; }

/* ---- a parede é 4:5, o formato em que as artes saem daqui (1080x1350) ----
   object-fit:contain porque a peça foi diagramada inteira: cortar a arte
   comeria logo, chamada ou assinatura. */
.art > img{ aspect-ratio:4/5; height:auto; object-fit:contain; background:var(--bg-3); }
.art__ph{ aspect-ratio:4/5; }

/* ==========================================================================
   70. ASSINATURA E CAPA DOS ARTIGOS
   ========================================================================== */
.byline{
  display:flex; align-items:center; gap:14px; margin-top:30px;
  padding-top:22px; border-top:1px solid var(--line);
}
.byline__ini{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--brand-grad); color:#fff;
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-text); letter-spacing:.02em;
  --chamfer:10px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.byline__txt b{
  display:block; font-family:var(--ff-display); font-weight:600;
  font-size:var(--fs-text); color:var(--ink);
}
.byline__txt span{
  display:block; margin-top:3px; font-family:var(--ff-display); font-weight:400;
  font-size:var(--fs-small); color:var(--muted-2); letter-spacing:.04em;
}
.article__capa{
  margin:30px 0 0; overflow:hidden;
  --chamfer:20px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.article__capa img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }

.post-card__cover--img{ background:var(--bg-3); }
.post-card__cover--img::before, .post-card__cover--img::after{ content:none; }
.post-card__cover--img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.post-card:hover .post-card__cover--img img{ transform:scale(1.05); }

/* ==========================================================================
   71. RESPONSIVO — CELULAR, IPAD E PC
   Passe final feito olhando cada quebra de verdade (375 / 390 / 430 / 768 /
   1024 / 1280 / 1440 / 1920). Aqui só entra o que quebrava de fato.
   ========================================================================== */

/* ---- 71.1 A esfera do hero não pode cair em cima do texto --------------
   No desktop ela ocupa o vazio à direita do título. Abaixo de 1000px não
   existe vazio: a coluna é única e a malha caía por cima do parágrafo,
   deixando a leitura suja. Ela sobe para trás do título e perde peso. */
@media(max-width:1000px){
  .hero__viz{
    right:-26vw; top:6%; transform:none;
    width:min(104vw,620px); height:min(104vw,620px);
    opacity:.34;
  }
}
@media(max-width:760px){
  .hero__viz{ top:2%; right:-34vw; width:min(118vw,520px); height:min(118vw,520px); opacity:.24; }
  /* 100svh mais 110px de topo sobrava tela vazia embaixo dos botões */
  .hero{ min-height:auto; padding-top:96px; padding-bottom:clamp(48px,9vh,86px); }
  .hero__foot{ margin-top:30px; }
  .hero__scroll{ display:none; }
}

/* ---- 71.2 Parede de marcas no toque -----------------------------------
   O nome vazado só existe porque o cursor acende. Em telefone e iPad não
   há cursor: sem isto a seção inteira aparece em branco. */
@media (hover:none), (pointer:coarse){
  .brand__nome{ color:var(--muted); -webkit-text-stroke-color:transparent; }
  .sec--light .brand__nome{ color:#2A2540; }
  .brand__seg{ opacity:1; transform:none; }
  a.brand::before{ opacity:.65; transform:none; }
  .brands::after{ display:none; }
}
/* 10 marcas: 2 ou 5 colunas fecham a grade certinho. Com 3 sobrava uma
   célula vazia enorme no iPad em retrato. */
@media(min-width:760px) and (max-width:1099px){
  .brands{ grid-template-columns:repeat(2,1fr); }
}

/* ---- 71.3 Legenda da parede de design ---------------------------------
   A legenda era absoluta dentro de 46px reservados. Em duas colunas de
   telefone, "Carrossel · RM Travel" quebrava em duas linhas e subia por
   cima da arte. Abaixo de 820px ela volta para o fluxo. */
@media(max-width:819px){
  .art{ padding-bottom:0; }
  .art figcaption{
    position:static; padding:12px 14px 14px; gap:8px;
    justify-content:space-between; align-items:baseline;
  }
  .art figcaption > :first-child{ min-width:0; }
}

/* ---- 71.4 Números do painel ------------------------------------------
   "5,79" e "BI" são o mesmo dado: não podem quebrar linha entre si. */
.stat b, .dash__num{ white-space:nowrap; }
@media(max-width:430px){
  .stat b{ font-size:clamp(30px,10vw,44px); }
}

/* ---- 71.5 Toques finais de telefone ---------------------------------- */
@media(max-width:600px){
  /* alvo de toque: nada abaixo de 44px de altura em botão de verdade */
  .btn{ min-height:46px; }
  /* respiro lateral menor deixa mais texto por linha sem apertar */
  :root{ --pad:20px; }
  .sec-num{ font-size:var(--fs-micro); }
  .article__body{ font-size:1.02rem; line-height:1.78; }
  .article__capa{ --chamfer:14px; }
}

/* ---- 71.6 iPad em retrato -------------------------------------------
   768px é largo demais para uma coluna só de cartão e estreito demais
   para o trilho fixo. Duas colunas resolvem sem tocar no desktop. */
@media(min-width:700px) and (max-width:899px){
  .rail .card-s{ flex:0 0 min(56vw,340px); }
  .plans .plan{ flex:0 0 min(58vw,360px); }
}

/* ==========================================================================
   72. RITMO VERTICAL — UMA ESCALA SÓ PARA O SITE INTEIRO
   O problema não era um espaço errado, eram oito valores fazendo o mesmo
   trabalho: o intervalo entre a eyebrow e o título aparecia como 14, 16 e
   18px em páginas diferentes; o intervalo entre o título e o conteúdo, como
   30, 34, 36 e 8px. Sem escala, cada seção respirava de um jeito.
   Agora tudo sai de uma régua de 8px, e cada distância tem um nome.
   ========================================================================== */
:root{
  --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:32px;
  --s-6:clamp(40px,4.5vw,56px);
  --s-7:clamp(56px,6.5vw,80px);
  --s-8:clamp(72px,9vw,112px);

  /* papéis: é por aqui que se muda o ritmo, não pelos componentes */
  --gap-eyebrow:var(--s-3);   /* eyebrow  → título   */
  --gap-lead:   var(--s-4);   /* título   → apoio    */
  --gap-head:   var(--s-7);   /* cabeçalho → conteúdo da seção */
  --gap-block:  var(--s-6);   /* bloco    → bloco    */
  --gap-nota:   var(--s-4);   /* conteúdo → nota de rodapé da seção */
}

/* ---- 72.1 A seção ----------------------------------------------------
   Duas alturas de respiro, não cinco. O `.pin + .section` cortava o topo
   de Clientes pela metade (45px em cima, 72 embaixo) — a seção ficava
   torta em relação a ela mesma. */
.section{ padding-block:var(--s-8); }
.section--tight{ padding-block:var(--s-7); }
.pin + .section{ padding-top:var(--s-8); }

/* ---- 72.2 O cabeçalho da seção --------------------------------------
   Este é o espaço que faltava: os cartões de plano encostavam no título
   de "Escolha o tamanho da operação". */
.sec-head{ gap:var(--s-4); margin-bottom:var(--gap-head); }
.pin__head{ margin-bottom:var(--gap-head); }

.eyebrow + h2, .sec-head h2, .pin__head h2{ margin-top:var(--gap-eyebrow); }
.sec-head h2 + .lead,
.sec-head h2 + p,
.sec-head .lead,
.sec-head > div > .link-u{ margin-top:var(--gap-lead); }
.sec-head--split > :last-child > .link-u{ margin-top:var(--gap-lead); }

/* ---- 72.3 Conteúdo → nota de rodapé ---------------------------------- */
.skills + .mono,
.arts + .mono,
.dash + .mono,
.plans + .wrap .rail-hint,
.rail + .rail-hint{ margin-top:var(--gap-nota); }

/* ---- 72.4 Componentes: um gap interno cada ---------------------------- */
.grid{ gap:var(--s-4); }
.skills{ gap:var(--s-2); }
.strip{ gap:var(--s-2); }
.arts{ gap:var(--s-3); }
.filters{ gap:var(--s-1); margin-bottom:var(--s-5); }
.socials{ gap:var(--s-1); margin-top:var(--s-4); }
.plans{ padding-block:0 var(--s-4); }
.brands{ gap:1px; }

/* ---- 72.5 O que estava preso no HTML --------------------------------
   As margens que viviam em `style="margin-top:14px"` saíram do markup e
   passaram a vir daqui, para que mexer no ritmo seja mexer num lugar só. */
.hero__cta{ margin-top:var(--s-5); }
.article__body > :first-child{ margin-top:0; }

/* ==========================================================================
   73. O LINK DE TEXTO PRECISA DE COR PRÓPRIA
   BUG: `.link-u` nunca declarou `color` — herdava do que estivesse por
   perto. No bloco do blog, que é seção clara, ele herdava o branco do
   tema escuro e sumia: "Ver todos os artigos" saía #EDEDF0 sobre #FFF,
   contraste 1,1:1. E o `:hover{color:#fff}`, escrito pensando no fundo
   preto, apagava o link em qualquer seção clara.
   ========================================================================== */
.link-u{ color:var(--ink-2); }
.link-u:hover{ color:var(--ink); }

.sec--light .link-u{ color:#1C1826; }          /* 15,3:1 sobre branco */
.sec--light .link-u:hover{ color:var(--neon-light); }   /* 5,78:1 */
.sec--light .link-u .arrow{ color:var(--neon-light); }

/* ==========================================================================
   74. A PAREDE DE DESIGN GANHA MOVIMENTO
   Duas coisas movem a mesma peça: a rolagem (--drift, escrita quadro a
   quadro pelo JS) e o hover (--lift). Se as duas escrevessem `transform`,
   a última apagaria a outra — e a transição de .55s que dá o toque do
   hover deixaria o parallax um segundo atrasado, o mesmo defeito que já
   travou o trilho de serviços. Então cada uma tem sua variável e só o
   `--lift` é transicionado.
   ========================================================================== */
@property --lift{ syntax:'<length>'; inherits:false; initial-value:0px; }

.art{
  --lift:0px;
  transform:translate3d(0,calc(var(--drift,0px) + var(--lift)),0);
  transition:--lift .5s var(--ease), background .5s;
  will-change:transform;
}
.art:hover{ --lift:-8px; transform:translate3d(0,calc(var(--drift,0px) + var(--lift)),0); }

@media (prefers-reduced-motion:reduce){
  .art{ transform:none; transition:background .5s; will-change:auto; }
  .art:hover{ transform:none; }
}

/* ==========================================================================
   75. A CORTINA NUNCA TERMINAVA DE ABRIR
   BUG de ordem no arquivo: `.sec-open{transform:none}` está na seção 65 e
   `.sec-veil{transform:translateY(46px)}` na 68. Mesma especificidade, e a
   última vence — então o conteúdo de TODA seção do site ficava 46px abaixo
   do lugar, para sempre, mesmo depois da cortina abrir. Era isso que fazia
   o respiro de cima parecer grande e o de baixo, curto: a seção inteira
   estava deslocada dentro do próprio padding. Também era o que colava os
   cartões de plano no título — o vão de 80px chegava como 34px.
   ========================================================================== */
.sec-veil.sec-open{ transform:none; }

/* ==========================================================================
   76. CAPA DE VÍDEO COM FOTO
   Enquanto a capa era o gradiente da marca, o nome branco tinha contraste
   garantido. Com um frame real embaixo — a fachada iluminada da barbearia,
   por exemplo — o branco encosta no branco. Uma sombra por baixo do texto
   resolve sem escurecer a foto inteira.
   ========================================================================== */
.video::after{
  content:''; position:absolute; inset:auto 0 0 0; height:58%; z-index:1;
  background:linear-gradient(to top, rgba(9,9,12,.82) 0%, rgba(9,9,12,.34) 46%, transparent 100%);
  pointer-events:none;
}
.video.is-on::after{ display:none; }
.video__nome{ z-index:2; }

/* ==========================================================================
   77. ESTEIRA DE CLIENTES
   A parede era uma grade parada de dez células. Virou duas fileiras que
   correm em sentidos opostos: a de cima para a esquerda, a de baixo para a
   direita. O movimento contrário é o ponto — dá tensão ao bloco sem
   precisar de mais nenhum enfeite, e faz a lista parecer uma esteira de
   clientes em vez de uma tabela.
   Duas decisões que vêm junto: o segmento agora aparece sempre (ninguém
   consegue ler algo que só surge no hover de um alvo que está andando) e a
   fileira para quando o mouse encosta, senão o nome foge do cursor.
   ========================================================================== */
.belt{
  display:grid; gap:1px; background:var(--line);
  border-block:1px solid var(--line);
  overflow:hidden;
  --dur:46s;
}
.belt__row{
  display:flex; width:max-content;
  background:var(--bg-2);
  animation:beltAnda var(--dur) linear infinite;
}
.sec--light .belt__row{ background:#FFFFFF; }
.belt__row--rev{ animation-direction:reverse; }
.belt:hover .belt__row{ animation-play-state:paused; }

/* a faixa anda exatamente a largura de uma cópia: no fim do ciclo a
   segunda cópia está onde a primeira começou e o corte não aparece */
@keyframes beltAnda{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

.belt__track{ display:flex; flex:0 0 auto; }

/* o item deixa de ser célula de grade e vira parada da esteira */
.belt .brand{
  flex:0 0 auto; width:clamp(210px,22vw,300px);
  min-height:auto; border-right:1px solid var(--line);
  justify-content:center; gap:7px;
  padding:26px 24px;
}
.belt .brand:hover{ transform:none; }

/* nome cheio: texto vazado não se lê em movimento */
.belt .brand__nome{
  color:var(--muted); -webkit-text-stroke-color:transparent;
  font-size:clamp(1rem,1.35vw,1.2rem);
}
.sec--light .belt .brand__nome{ color:#2A2540; }
.belt .brand__seg{ opacity:1; transform:none; }
.belt .brand:hover .brand__nome{ color:var(--neon); }
.sec--light .belt .brand:hover .brand__nome{ color:var(--neon-light); }
.belt a.brand::before{ opacity:.55; transform:none; }
.belt a.brand:hover::before{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .belt__row{ animation:none; }
  .belt{ overflow-x:auto; }
}

/* ---- 77.1 O rodapé sem o letreiro gigante --------------------------
   O "publi go" vazado ocupava a última tela inteira e empurrava a barra
   de créditos para longe. Sem ele, a barra fecha o rodapé com o mesmo
   respiro das outras separações da página. */
.footer__bar{ margin-top:var(--s-6); }

/* ---- 77.2 A parada da esteira se ajusta ao nome ----------------------
   Com largura fixa, "Dominium Account · Contabilidade · Marca + Site" não
   cabia no celular e saía cortado no meio da palavra. Numa esteira, cada
   parada deve ter a largura do que carrega — como uma faixa de logos. */
.belt .brand{ width:auto; min-width:clamp(150px,18vw,230px); }
.belt .brand__nome, .belt .brand__seg{ white-space:nowrap; }
@media(max-width:600px){
  .belt .brand{ padding:20px 18px; min-width:130px; }
  .belt .brand__nome{ font-size:1rem; }
  .belt{ --dur:34s; }
}

/* as bordas comem o item pela metade; um esmaecido nas pontas faz a marca
   entrar e sair em vez de ser cortada na régua */
.belt{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}

/* ==========================================================================
   78. A ESTEIRA COM OS LOGOS DAS MARCAS
   Cada parada é uma caixa de tamanho fixo com o logo dentro em `contain`:
   é o que garante que nenhuma marca distorça e que todas ocupem o mesmo
   espaço, por mais diferentes que sejam as proporções entre elas.
   Os arquivos já saíram normalizados numa mesma tela de 560x240, com a
   área de tinta equalizada, então um logo largo e fino não parece maior
   que um quadrado só por preencher a largura.
   ========================================================================== */
.belt--logos .brand{
  width:clamp(190px,17vw,250px); min-width:0;
  align-items:center; text-align:center; gap:14px;
  padding:26px 22px;
}
.belt--logos .brand img{
  width:100%; height:clamp(52px,4.6vw,64px);
  object-fit:contain; object-position:center;
  /* Parede calma por padrão, marca cheia quando a pessoa para nela.
     Só dessaturar não bastava: logo claro (o amarelo do Repair Hub, o
     bege do BOHO) vira cinza claro e some no branco da seção. O brilho
     puxado para baixo iguala o peso de todos sem mexer na cor real, que
     volta inteira no hover. */
  filter:grayscale(1) brightness(.55) contrast(1.15); opacity:.62;
  transition:filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.belt--logos .brand:hover img{ filter:none; opacity:1; transform:scale(1.04); }
.belt--logos .brand__seg{
  white-space:nowrap; font-size:var(--fs-micro); color:var(--muted-2);
}
.sec--light .belt--logos .brand__seg{ color:#55555E; }
.belt--logos a.brand::before{ top:12px; right:12px; }

@media(max-width:600px){
  .belt--logos .brand{ width:150px; padding:20px 14px; gap:10px; }
  .belt--logos .brand img{ height:40px; }
  .belt--logos .brand__seg{ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .belt--logos .brand img{ filter:none; opacity:1; }
}

/* ---- 78.1 Ajuste de leitura da parede de logos --------------------
   Em cinza a 62% os logos sumiam no branco da seção. A 80% a parede
   continua calma e cada marca ainda se lê de longe. */
.belt--logos .brand img{ opacity:.8; }
.belt--logos .brand{ justify-content:center; }
/* o rótulo ocupa sempre duas linhas de altura, com ou sem quebra: assim
   os logos de uma mesma fileira ficam todos na mesma linha de base */
.belt--logos .brand__seg{
  min-height:2.4em; display:flex; align-items:flex-start;
  justify-content:center; line-height:1.2;
}
@media(max-width:600px){
  .belt--logos .brand{ width:168px; }
  .belt--logos .brand img{ height:44px; opacity:.85; }
  .belt--logos .brand__seg{ min-height:3.6em; }
}

/* ==========================================================================
   79. AVALIAÇÕES DO GOOGLE
   São avaliações reais, então o cartão não inventa nada: nome, nota e o
   texto como a pessoa escreveu. Sem foto de perfil, porque a que existe
   é pequena demais para ampliar sem borrar, e iniciais já identificam
   quem falou.
   ========================================================================== */
.reviews{ display:grid; gap:var(--s-3); grid-template-columns:1fr; align-items:stretch; }
@media(min-width:640px){ .reviews{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1140px){ .reviews{ grid-template-columns:repeat(4,1fr); } }

.review{
  margin:0; background:var(--surface); border:1px solid var(--line);
  padding:26px 24px; display:flex; flex-direction:column; gap:16px;
  --chamfer:16px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.sec--light .review{ background:#FFFFFF; border-color:rgba(16,16,20,.10); }
.review:hover{ transform:translateY(-4px); }
.sec--light .review:hover{ background:#FBFAFF; }

.review__topo{ display:flex; align-items:center; gap:12px; }
.review__quem{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.review__quem b{
  font-family:var(--ff-display); font-weight:600; font-size:var(--fs-text);
  color:var(--ink); letter-spacing:.01em;
}
.sec--light .review__quem b{ color:#16131E; }

.review__estrelas{ display:inline-flex; gap:3px; }
.review__estrelas svg{ width:14px; height:14px; fill:#F5A623; flex:0 0 auto; }

.review p{
  margin:0; font-size:15px; line-height:1.6; color:var(--muted);
}
.sec--light .review p{ color:#3C3846; }

@media(max-width:600px){
  .review{ padding:22px 20px; }
}

/* ==========================================================================
   80. O FUNDO DO CONVITE FINAL
   Fachada de vidro ao entardecer: uma grade de janelas com algumas acesas,
   feita só com gradiente. Sugere escritório sem recorrer a banco de imagem,
   e por ser desenho e não fotografia não briga com o título na frente.
   ========================================================================== */
.cta__bg--predio{ position:absolute; inset:0; z-index:-1; overflow:hidden; }

/* a cena do escritório: parede de vidro, mesa longa, monitores e a cidade
   lá fora. Desenho, não fotografia, porque atrás de uma vinheta pesada a
   silhueta lê melhor que o detalhe fotográfico e não vira banco de imagem. */
.cta__bg--predio::before{
  content:''; position:absolute; inset:0;
  background:url("../img/escritorio.svg") center bottom / cover no-repeat;
  opacity:.5;
  mask-image:radial-gradient(120% 100% at 50% 46%, #000 22%, transparent 82%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 46%, #000 22%, transparent 82%);
}

/* as janelas acesas, sempre nas mesmas posições para o fundo não cintilar */
.cta__bg--predio::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(30px 20px at 18% 26%, rgba(226,208,255,.20), transparent 70%),
    radial-gradient(26px 17px at 27% 44%, rgba(179,142,239,.16), transparent 70%),
    radial-gradient(24px 16px at 76% 22%, rgba(226,208,255,.17), transparent 70%),
    radial-gradient(30px 20px at 84% 52%, rgba(179,142,239,.14), transparent 70%),
    radial-gradient(22px 15px at 64% 68%, rgba(226,208,255,.12), transparent 70%),
    radial-gradient(70% 90% at 50% 50%, rgba(11,11,12,.55), rgba(11,11,12,.95) 78%);
}

@media(max-width:600px){
  .cta__bg--predio::before{ background-size:200% auto; background-position:52% bottom; }
}

/* ---- 80.1 A fachada precisa aparecer -------------------------------
   Na primeira medida a vinheta ia a 95% de preto e engolia o desenho
   inteiro: sobrava um retângulo escuro. Abrindo o centro e reforçando a
   grade, a fachada se lê sem competir com o título. */
.cta__bg--predio::before{ opacity:1; }
.cta__bg--predio::after{
  background:radial-gradient(84% 100% at 50% 44%, rgba(11,11,12,.30), rgba(11,11,12,.90) 78%);
}


/* ==========================================================================
   81. A ABA DE MARCAS NA PAREDE DE DESIGN
   As peças de social saem em 4:5 e as de identidade vêm quadradas. Em vez
   de cortar uma para caber no formato da outra, cada peça guarda a própria
   proporção: a parede já é desencontrada por natureza, então altura
   diferente entra no ritmo em vez de brigar com ele.
   ========================================================================== */
.art--quadrada > img{ aspect-ratio:1/1; }

/* ---- 81.1 A foto do escritório entra por cima da fachada desenhada ----
   Quando o arquivo existir, a foto cobre o desenho; quando não existir, a
   <img> se remove sozinha e a fachada continua no lugar. Assim a seção
   nunca fica com um retângulo quebrado enquanto a foto não chega. */
.cta__bg--predio img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:58% 50%;
  /* a foto entra em cinza e com um véu roxo por cima, para o escritório
     aparecer sem trazer uma segunda paleta para dentro da página */
  filter:grayscale(1) contrast(1.06) brightness(1.18); opacity:.38;
}
/* com a foto no ar, a cena desenhada desliga: dois escritórios sobrepostos
   viram ruído. A classe é posta no HTML e retirada pelo onerror da <img>,
   em vez de :has(), para funcionar em qualquer navegador. */
.cta__bg--foto::before{ display:none; }
.cta__bg--predio::after{ z-index:2; }

/* ==========================================================================
   82. A ABA MARCAS TEM UMA LINHA POR CLIENTE
   Cada empresa entregou três peças. Em quatro colunas elas se partiam
   (4 + 4 + 1) e a leitura embaralhava clientes diferentes na mesma linha.
   Em três colunas, cada linha é uma marca inteira: VC Master, BB Group,
   FloorEver. Aqui o desencontro das colunas também sai, porque o que
   organiza esta vista é a linha, não o ritmo solto da parede.
   ========================================================================== */
/* Uma grade de 12 colunas resolve as duas larguras de peça na MESMA vista.
   A peça de social ocupa 3 (quatro por linha) e a de marca ocupa 4 (três
   por linha), então na aba "Tudo" o social fecha as suas linhas e as
   marcas começam linha nova, três a três, sem precisar de duas grades. */
.arts{ grid-template-columns:repeat(12,1fr); }
.art{ grid-column:span 6; }                       /* 2 por linha no celular */
@media(min-width:820px){
  .art{ grid-column:span 4; }                     /* 3 por linha no tablet  */
}
@media(min-width:1200px){
  .art{ grid-column:span 3; }                     /* 4 de social por linha  */
  .art--quadrada{ grid-column:span 4; }           /* 3 de marca por linha   */
}

/* o desencontro das colunas é do ritmo de parede do social. Nas peças de
   marca ele sai: ali o que organiza é a linha do cliente. */
@media(min-width:1200px){
  .art--quadrada{ margin-top:0 !important; }
}

/* ---- 82.1 O escritório fica atrás do texto, não em volta dele ------
   Na primeira medida a mesa e os monitores caíam exatamente na faixa do
   parágrafo e disputavam a leitura. Baixando o desenho e escurecendo o
   miolo, a cena continua reconhecível nas bordas e o texto volta a ter
   fundo limpo. */
.cta__bg--predio::before{ opacity:.34; }
.cta__bg--predio::after{
  background:
    radial-gradient(46% 54% at 50% 46%, rgba(11,11,12,.86), rgba(11,11,12,.52) 70%, transparent 100%),
    radial-gradient(92% 104% at 50% 44%, rgba(11,11,12,.26), rgba(11,11,12,.92) 80%);
}

/* no celular a coluna de texto ocupa quase toda a largura: não sobra borda
   para a cena aparecer sem passar por trás das letras, então ela recua */
@media(max-width:760px){
  .cta__bg--predio::before{ opacity:.20; }
  .cta__bg--predio::after{
    background:radial-gradient(72% 62% at 50% 48%, rgba(11,11,12,.90), rgba(11,11,12,.96) 76%);
  }
}

/* ---- 82.1 O rótulo do blog ------------------------------------------
   Mesma casca do chip ativo, mas sem cursor de clique: ele conta quantos
   artigos existem, não filtra. */
.chip--rotulo{
  display:inline-flex; align-items:center; gap:9px; cursor:default;
}
.chip--rotulo b{
  font-weight:600; padding:1px 7px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.22); font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   83. FAQ: RITMO DA PÁGINA E DESENHO DA LISTA
   A página vinha com o respiro no inline (padding-top de 20px na seção,
   margem de 24px sob cada título, 80px entre grupos) e por isso não
   acompanhava a régua do resto do site. Agora ela usa os mesmos tokens
   das seções da home.
   ========================================================================== */
.phero--curto{ padding-bottom:var(--s-5); }

/* o título de grupo pertence à lista que vem depois dele, então fica perto
   dela e longe do grupo anterior. Estava ao contrário: 44px acima e 56
   abaixo, o que colava o título no fim da lista de cima. */
.faq-grupo{ margin-bottom:var(--s-5); }
.faq-grupo h2{ margin:0; }
.acc + .faq-grupo{ margin-top:var(--s-8); }

/* ---- 83.1 A lista deixa de ser um monte de linhas -------------------
   Antes eram fios de 1px separando as perguntas, o mesmo desenho de uma
   tabela. Cada pergunta virou cartão com o canto cortado do logo, igual
   aos planos, aos vídeos e às avaliações: a página inteira passa a falar
   a mesma língua. Aberta, a pergunta ganha uma barra violeta na lateral
   e sobe um pouco, então dá para ver de longe qual está aberta. */
.acc{ border-top:0; display:grid; gap:var(--s-2); }

.acc__item{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-bottom:1px solid var(--line);
  --chamfer:16px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.acc__item:hover{ background:var(--surface-2); }
.acc__item.is-open{ background:var(--bg-3); transform:translateY(-2px); }

/* a barra que marca a pergunta aberta */
.acc__item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:2;
  background:var(--brand-grad);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform .5s var(--ease);
}
.acc__item.is-open::before{ transform:scaleY(1); }

.acc__btn{
  padding:24px 26px; gap:20px;
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.35;
}
.acc__btn:hover{ color:var(--ink); padding-left:26px; }
.acc__item.is-open .acc__btn{ color:var(--ink); }

.acc__ico{
  width:30px; height:30px; border-radius:0;
  --chamfer:8px;
  clip-path:polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  border-color:var(--line-2); color:var(--neon);
}
.acc__item.is-open .acc__ico{ color:#0B0B0C; }
.acc__panel > div{ padding:0 26px 26px; }

@media(max-width:600px){
  .acc__btn{ padding:20px 18px; gap:14px; }
  .acc__panel > div{ padding:0 18px 20px; }
}

/* ==========================================================================
   84. A SEÇÃO DE FOTOGRAFIA MOSTRA A FOTO COMO ELA É
   As outras faixas entram em cinza, que é a linguagem do site para
   bastidor. Aqui não dá: a seção pergunta se a foto do cliente tem
   qualidade, então esconder a cor das nossas esconde justamente a
   resposta. Estas entram inteiras, e o hover aproxima em vez de colorir.
   ========================================================================== */
#bastidor-2 .strip img{ filter:none; }
#bastidor-2 .strip figure:hover img{ transform:scale(1.05); }

/* ---- 84.1 A faixa de produção também vira retrato -------------------
   O tripé e a bancada de edição chegaram em pé. Numa moldura 4:3 o rig
   perderia o monitor em cima e os pés do tripé embaixo, que é justamente
   o que identifica a foto. O 4:5 alinha a faixa com a de fotografia e
   mostra as três peças inteiras. */
.strip--retrato figure{ aspect-ratio:4/5; }

/* ==========================================================================
   85. O MENU DO CELULAR EM TAMANHO NORMAL
   Estava em clamp(1.9rem, 8.5vw, 3rem): num tablet de 900px o item batia
   nos 48px, tamanho de título de seção, não de item de menu. E a seta, por
   ser 1em, crescia junto e ficava do tamanho da palavra.
   Agora o item tem porte de menu e a seta deixa de acompanhar a fonte:
   fica num tamanho fixo e discreto, acendendo só quando o dedo encosta.
   ========================================================================== */
.mobilenav a.mob{
  font-size:clamp(1.4rem,6vw,1.7rem);
  padding:17px 0;
  gap:20px;
}
.mobilenav a.mob .arrow{
  width:19px; height:19px;
  opacity:.42;
  transition:opacity .3s, transform .45s var(--ease);
}
.mobilenav a.mob:hover .arrow,
.mobilenav a.mob:focus-visible .arrow{ opacity:1; transform:translateX(4px); }

/* em tela baixa e deitada o menu inteiro precisa caber sem rolar */
@media(max-height:620px){
  .mobilenav{ padding-top:92px; }
  .mobilenav a.mob{ font-size:1.25rem; padding:12px 0; }
}

/* ==========================================================================
   86. O TÍTULO DAS PÁGINAS INTERNAS NÃO É O TÍTULO DA HOME
   As internas herdavam o mesmo .h-xl do hero da home: até 115px. Na home
   aquilo funciona, é a frase que define o site e tem uma tela inteira em
   volta. Numa página de contato ou de blog, o mesmo tamanho vira grito e
   empurra o conteúdo para fora da primeira tela.
   Aqui elas passam a ter um degrau próprio, abaixo da home e igual entre
   si, independente da classe h- que cada uma carrega.
   ========================================================================== */
.phero h1{ font-size:clamp(2.1rem,5.2vw,4.4rem); }

@media(max-width:600px){
  .phero h1{ font-size:clamp(1.9rem,8vw,2.4rem); }
}

/* o parágrafo de apoio das internas encostava no título depois que ele
   diminuiu: com a fonte menor, a margem que vinha do tamanho sumiu junto */
.phero h1 + .lead{ margin-top:var(--gap-lead); }