/* =========================================================================
   Personly Digital — v4
   Design system: dark stage, terracotta signal, engineered typography.
   ========================================================================= */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--terra-hi);outline-offset:3px;border-radius:4px}

/* ---------- 2. Tokens ---------- */
:root{
  /* surfaces */
  --void:#050506;
  --ink:#0A0A0C;
  --surface:#101013;
  --surface-2:#141418;
  --surface-3:#1A1A1F;

  /* lines */
  --line:rgba(239,234,228,.085);
  --line-2:rgba(239,234,228,.145);
  --line-3:rgba(239,234,228,.24);

  /* type */
  --bone:#EFEAE4;
  --bone-2:#C9C3BB;
  --mute:#948E86;
  --dim:#66615B;

  /* brand */
  --terra:#C4653A;
  --terra-hi:#E8814B;
  --terra-lo:#8A4526;
  --terra-ghost:rgba(196,101,58,.14);
  --terra-glow:rgba(232,129,75,.45);

  /* type stacks */
  --display:'Anybody','Eurostile','Bahnschrift','DIN Alternate',system-ui,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* rhythm */
  --gutter:clamp(20px,5vw,56px);
  --maxw:1280px;
  --sect:clamp(88px,11vw,168px);
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. Base ---------- */
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(.97rem,.35vw + .88rem,1.06rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::after{ /* film grain — keeps the flat black from looking digital-dead */
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sect);position:relative}
section[id]{scroll-margin-top:92px}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line-2) 15%,var(--line-2) 85%,transparent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Typography ---------- */
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display{
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 600;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.02;
  text-wrap:balance;
}
.h1{
  font-size:clamp(2.25rem,5.3vw,4.55rem);
  line-height:1;
  letter-spacing:-.038em;
  font-variation-settings:'wdth' 106,'wght' 600;
}
.h2{font-size:clamp(1.62rem,3.5vw,2.95rem);letter-spacing:-.033em;line-height:1.04}
.h3{font-size:clamp(1.18rem,1.5vw,1.44rem);letter-spacing:-.022em;line-height:1.16;font-variation-settings:'wdth' 102,'wght' 600}
.h4{font-variation-settings:'wdth' 101,'wght' 600;font-size:1.02rem;letter-spacing:-.012em;line-height:1.3}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--terra);
  display:flex;align-items:center;gap:.7em;margin-bottom:1.5rem;
}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.65;flex:none}

.lead{
  font-size:clamp(1.02rem,.6vw + .92rem,1.24rem);
  line-height:1.58;color:var(--bone-2);max-width:60ch;text-wrap:pretty;
}
.muted{color:var(--mute)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--terra);--fg:#0A0A0C;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.02em 1.7em;border-radius:100px;
  font-family:var(--body);font-size:.94rem;font-weight:600;letter-spacing:-.005em;
  background:var(--bg);color:var(--fg);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 34px -14px rgba(196,101,58,.85);
  isolation:isolate;overflow:hidden;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--terra-hi),var(--terra));
  opacity:0;transition:opacity .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 46px -16px rgba(232,129,75,.95)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0)}
.btn .ico{width:17px;height:17px;flex:none}

.btn--ghost{
  --bg:transparent;--fg:var(--bone);
  border:1px solid var(--line-2);box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn--ghost::before{background:rgba(239,234,228,.06)}
.btn--ghost:hover{box-shadow:none;border-color:var(--line-3)}

.btn--sm{padding:.72em 1.25em;font-size:.86rem}

/* text link with an animated rule */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.9rem;font-weight:600;color:var(--bone);
  padding-bottom:.35em;position:relative;width:fit-content;
}
.tlink::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--terra);transform:scaleX(.999);transform-origin:left;
  opacity:.45;transition:opacity .3s var(--ease),transform .45s var(--ease);
}
.tlink:hover{color:var(--terra-hi)}
.tlink:hover::after{opacity:1;transform:scaleX(1)}
.tlink .arw{transition:transform .4s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

/* ---------- 6. Wordmark (real brand artwork) ---------- */
.mark{display:inline-flex;align-items:center;line-height:0}
.mark img{height:23px;width:auto;display:block}
.mark--foot img{height:26px}
@media (max-width:900px){ .mark img{height:21px} }

/* ---------- 7. Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(6,6,8,.72);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:74px}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,2rem)}
.nav a{
  font-size:.88rem;font-weight:500;color:var(--bone-2);position:relative;padding:.3em 0;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--terra);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:flex;align-items:center;gap:.9rem}

/* ---------- Agrupamento "Nossos Serviços" no menu do topo ----------
   O gatilho é um <button> de verdade: abre no hover e no clique, fecha no Esc,
   no clique fora e quando o foco sai do grupo. O painel usa visibility em vez
   de display:none para poder animar — e, fechado, sai da ordem de tabulação. */
.nav__grp{position:relative;display:flex;align-items:center}
.nav__btn{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--body);font-size:.88rem;font-weight:500;color:var(--bone-2);
  background:none;border:0;padding:.3em 0;cursor:pointer;position:relative;
  transition:color .3s var(--ease);
}
.nav__btn::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--terra);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav__btn:hover,.nav__grp.is-open .nav__btn{color:var(--bone)}
.nav__btn:hover::after,.nav__grp.is-open .nav__btn::after{transform:scaleX(1);transform-origin:left}
.nav__btn.is-current{color:var(--bone)}
.nav__btn.is-current::after{transform:scaleX(1);transform-origin:left}
.nav__btn:focus-visible{outline:2px solid var(--terra-hi);outline-offset:4px;border-radius:3px}
.nav__caret{width:11px;height:11px;flex:none;transition:transform .4s var(--ease)}
.nav__grp.is-open .nav__caret{transform:rotate(180deg)}

.nav__drop{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,-8px);
  width:min(92vw,352px);padding:.5rem;z-index:20;
  border:1px solid var(--line-2);border-radius:16px;
  background:rgba(12,12,15,.94);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .38s var(--ease),visibility .3s;
}
.nav__grp.is-open .nav__drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__drop::before{ /* ponte invisível: o cursor atravessa o vão sem fechar */
  content:'';position:absolute;left:0;right:0;top:-18px;height:18px;
}
.nav__drop a{
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:.8rem;
  padding:.7rem .75rem;border-radius:11px;color:var(--bone-2);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav__drop a::after{display:none}          /* sem o sublinhado dos links do topo */
.nav__drop a:hover{background:rgba(239,234,228,.05);color:var(--bone)}
.nav__drop a.is-current{background:rgba(196,101,58,.11);color:var(--bone)}
.nav__drop a svg{width:19px;height:19px;color:var(--terra);justify-self:center;transition:color .3s var(--ease)}
.nav__drop a:hover svg,.nav__drop a.is-current svg{color:var(--terra-hi)}
.nav__drop b{
  display:block;font-family:var(--display);font-variation-settings:'wdth' 102,'wght' 600;
  font-size:.94rem;letter-spacing:-.015em;line-height:1.2;color:inherit;
}
.nav__drop i{display:block;font-style:normal;font-size:.78rem;line-height:1.4;color:var(--mute);margin-top:.14rem}

/* ---------- O mesmo agrupamento dentro do menu do celular ----------
   Aqui não há sanfona: os serviços são o destino principal e esconder atrás de
   um toque atrapalha. Eles ficam visíveis, com rótulo e régua terracota, e num
   corpo um pouco menor — o grupo inteiro ocupa menos altura que a lista solta. */
.sheet__grp{border-bottom:1px solid var(--line);padding:.9rem 0 .55rem}
.sheet__gt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terra);margin-bottom:.15rem;display:flex;align-items:center;gap:.6rem;
}
.sheet__gt::before{content:'';width:22px;height:1px;background:var(--terra);flex:none}
.sheet__in{display:flex;flex-direction:column;padding-left:.9rem;border-left:1px solid var(--line-2);margin-left:.15rem}
.sheet nav .sheet__in a{
  font-size:clamp(1rem,3.8vw,1.2rem);padding:.6em 0;border-bottom:0;gap:.7em;
}
.sheet nav .sheet__in a+a{border-top:1px solid rgba(239,234,228,.05)}
.sheet nav a.is-current{color:var(--terra-hi)}


.burger{position:relative;display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px}
.burger span{
  position:absolute;left:50%;top:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;
  background:var(--bone);border-radius:2px;
  transition:transform .42s var(--ease),opacity .28s var(--ease);
}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(3){transform:translateY(6px)}
body.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu-open .burger span:nth-child(3){transform:rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:99;background:var(--void);
  padding:104px var(--gutter) 40px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s;
  overflow-y:auto;
}
body.menu-open .sheet{opacity:1;visibility:visible;transform:none}
.sheet nav{display:flex;flex-direction:column;gap:.1rem;border-top:1px solid var(--line)}
.sheet nav a{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 600;
  font-size:clamp(1.12rem,4.4vw,1.42rem);letter-spacing:-.02em;
  padding:.78em 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.85em;
}
.sheet nav a svg{
  width:1.05em;height:1.05em;flex:none;color:var(--terra);
  transition:transform .4s var(--ease),color .4s var(--ease);
}
.sheet nav a:hover svg,.sheet nav a:active svg{transform:translateX(2px);color:var(--terra-hi)}
.sheet .btn{margin-top:auto;width:100%}
.sheet__foot{margin-top:2rem;display:grid;gap:.4rem;font-size:.9rem;color:var(--mute)}

/* =========================================================================
   8. HERO — scroll-scrubbed sequence
   ========================================================================= */
.hero{position:relative;background:#000}
.hero__track{height:575vh}   /* 5 falas na hero; ver WIN em app.js */
.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000;
}
/* atmospheric grading over the sequence */
.hero__grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 50%,transparent 0%,rgba(5,5,6,.24) 62%,rgba(5,5,6,.86) 100%),
    linear-gradient(180deg,rgba(5,5,6,.7) 0%,transparent 22%,transparent 62%,rgba(5,5,6,.94) 100%);
}
/* dimmer that lifts as the headline clears the frame */
.hero__veil{position:absolute;inset:0;pointer-events:none;background:#050506;opacity:.7;will-change:opacity}

.hero__layer{
  position:relative;z-index:3;width:100%;max-width:var(--maxw);height:100%;
  padding-inline:var(--gutter);text-align:center;
  display:grid;grid-template-rows:minmax(0,1fr);justify-items:center;
}
.hero__intro{grid-area:1/1;align-self:center;width:100%;will-change:opacity,transform,filter}

.hero .eyebrow{justify-content:center;flex-wrap:wrap;color:var(--bone-2)}
.hero .eyebrow::before{background:var(--terra);opacity:1}
.hero__h1{margin-bottom:1.35rem;max-width:17ch;margin-inline:auto;text-shadow:0 2px 40px rgba(0,0,0,.62)}
.hero__h1 em{font-style:normal;color:var(--terra);}
.hero__sub{max-width:52ch;margin-inline:auto;color:var(--bone-2);font-size:clamp(1rem,.5vw + .92rem,1.16rem);text-shadow:0 2px 26px rgba(0,0,0,.7)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.3rem}

/* scroll cue */
.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  display:grid;justify-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--dim);
}
.cue__bar{width:1px;height:44px;background:linear-gradient(180deg,var(--terra),transparent);position:relative;overflow:hidden}
.cue__bar::after{content:'';position:absolute;inset:0;background:var(--terra-hi);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* four statements that fade through as the film scrubs */
.hero__seq{
  grid-area:1/1;align-self:center;width:100%;
  display:grid;justify-items:center;gap:1.15rem;
  opacity:0;pointer-events:none;position:relative;
  will-change:opacity,transform;
}
.hero__seq .eyebrow{margin-bottom:0}
.hero__seq::before{           /* private scrim: the copy never fights the film */
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(148%,1180px);aspect-ratio:16/10;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(4,4,5,.9) 0%,rgba(4,4,5,.76) 36%,rgba(4,4,5,.42) 64%,transparent 82%);
}
.hero__seq .hero__h1{margin-bottom:0}
.hero__seq .hero__acts{margin-top:.9rem}

/* scroll indicator — progress rail + one tick per hero statement */
.hscroll{
  position:absolute;z-index:6;right:clamp(14px,2.6vw,40px);top:50%;translate:0 -50%;
  display:flex;align-items:center;gap:11px;
  opacity:0;transition:opacity .6s var(--ease);
}
.hscroll.is-on{opacity:1}
.hscroll__rail{position:relative;width:2px;height:96px;background:rgba(239,234,228,.13);border-radius:2px;overflow:hidden}
.hscroll__rail i{
  position:absolute;inset:0 0 auto 0;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--terra),var(--terra-hi));
  box-shadow:0 0 12px var(--terra-glow);
}
.hscroll__ticks{display:grid;gap:9px;justify-items:end}
.hscroll__ticks i{
  display:block;width:14px;height:2.5px;border-radius:2px;
  background:rgba(239,234,228,.3);
  transition:width .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.hscroll__ticks i.done{background:rgba(232,129,75,.5);width:17px}
.hscroll__ticks i.now{background:var(--terra-hi);width:27px;box-shadow:0 0 14px var(--terra-glow)}

/* loading state for the sequence */
.hero__load{
  position:absolute;right:var(--gutter);bottom:26px;z-index:5;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:.8rem;transition:opacity .5s var(--ease);
}
.hero__load .track{width:120px;height:1px;background:var(--line-2);overflow:hidden}
.hero__load .track i{display:block;height:100%;width:0;background:var(--terra);transition:width .25s linear}
.hero__load.is-done{opacity:0;pointer-events:none}

/* =========================================================================
   9. Proof strip
   ========================================================================= */

/* =========================================================================
   10. Section heads
   ========================================================================= */
.shead{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-bottom:clamp(2.8rem,5vw,4.6rem);max-width:56rem}
.shead--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,4rem);align-items:end;max-width:none}
.shead p:not(.eyebrow){color:var(--mute)}

/* =========================================================================
   11. Solutions
   ========================================================================= */
.sol{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.6vw,24px)}

.sol__c{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--surface-2) 0%,var(--ink) 58%);
  transition:transform .55s var(--ease),border-color .5s var(--ease),box-shadow .55s var(--ease);
}
.sol__c::after{                 /* ambient bloom that wakes on hover */
  content:'';position:absolute;left:50%;top:-28%;width:130%;aspect-ratio:1;translate:-50% 0;
  background:radial-gradient(circle,rgba(196,101,58,.2) 0%,transparent 62%);
  opacity:0;transition:opacity .6s var(--ease);z-index:-1;pointer-events:none;
}
.sol__c:hover{transform:translateY(-6px);border-color:rgba(232,129,75,.42);box-shadow:0 26px 60px -32px rgba(0,0,0,.9),0 0 0 1px rgba(232,129,75,.12)}
.sol__c:hover::after{opacity:1}

/* --- the plate --- */
.sol__plate{
  position:relative;height:clamp(140px,15vw,168px);display:grid;place-items:center;
  border-bottom:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(120% 140% at 50% 118%,rgba(196,101,58,.38) 0%,rgba(196,101,58,.1) 44%,transparent 74%),
    linear-gradient(180deg,#141419 0%,#0C0C10 100%);
}
.sol__plate::before{            /* engineering grid */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(239,234,228,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(239,234,228,.05) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse at 50% 60%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 25%,transparent 78%);
}
.sol__beam{                     /* light sweep on hover */
  position:absolute;top:0;bottom:0;width:60%;left:-70%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,225,205,.13),transparent);
  transition:left .85s var(--ease);
}
.sol__c:hover .sol__beam{left:120%}

.sol__glyph{
  position:relative;width:clamp(60px,7vw,76px);height:auto;color:var(--terra);
  filter:drop-shadow(0 0 16px rgba(196,101,58,.4));
  transition:color .5s var(--ease),transform .6s var(--ease),filter .5s var(--ease);
}
.sol__c:hover .sol__glyph{color:var(--terra-hi);transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 0 26px rgba(232,129,75,.6))}

.sol__ix{
  position:absolute;top:2px;right:14px;left:auto;z-index:2;
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 700;font-weight:700;
  font-size:clamp(3.6rem,6vw,5.4rem);line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(196,101,58,.42);
  pointer-events:none;user-select:none;
  transition:-webkit-text-stroke-color .55s var(--ease),color .55s var(--ease),transform .6s var(--ease);
}
.sol__c:hover .sol__ix{
  -webkit-text-stroke-color:rgba(232,129,75,.72);
  color:rgba(196,101,58,.09);
  transform:translateY(-2px);
}

/* --- body --- */
.sol__body{
  padding:clamp(1.5rem,2.2vw,2rem) clamp(1.4rem,2vw,1.9rem) clamp(1.6rem,2.2vw,2.1rem);
  display:grid;gap:.95rem;align-content:start;
}
.sol__t{
  font-family:var(--display);font-variation-settings:'wdth' 103,'wght' 700;font-weight:700;
  font-size:clamp(1.28rem,1.75vw,1.62rem);line-height:1.12;letter-spacing:-.028em;
  color:var(--bone);text-wrap:balance;
  transition:color .4s var(--ease);
}
.sol__c:hover .sol__t{color:#fff}
.sol__q{font-size:.95rem;line-height:1.5;font-weight:600;color:var(--bone)}
.sol__d{font-size:.92rem;line-height:1.62;color:var(--mute)}

.feats{display:grid;gap:.6rem;margin-top:.2rem}
.feats li{display:grid;grid-template-columns:16px 1fr;gap:.7rem;font-size:.86rem;color:var(--bone-2);line-height:1.45;align-items:start}
.feats li::before{
  content:'';width:8px;height:8px;margin-top:.42em;border-radius:2px;
  border:1px solid var(--terra);background:var(--terra-ghost);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.sol__c:hover .feats li::before{background:var(--terra);box-shadow:0 0 10px var(--terra-glow)}

/* --- cta --- */
.sol__cta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem clamp(1.4rem,2vw,1.9rem);margin-top:auto;
  border-top:1px solid var(--line);
  font-size:.92rem;font-weight:600;color:var(--bone);
  transition:color .35s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
}
.sol__cta svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.sol__c:hover .sol__cta{color:#0A0A0C;background:linear-gradient(90deg,var(--terra),var(--terra-hi));border-top-color:transparent}
.sol__c:hover .sol__cta svg{transform:translateX(5px)}
.sol__cta:focus-visible{outline-offset:-4px}

/* =========================================================================
   12. Process rail — the scrubbed trail
   ========================================================================= */
.proc{position:relative}
.proc__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.proc__aside{position:sticky;top:118px}
.proc__aside .lead{font-size:1rem;max-width:38ch}
.proc__aside .btn{margin-top:2rem}
.rail{
  position:relative;
  display:grid;grid-template-columns:76px minmax(0,1fr);
  column-gap:clamp(1.4rem,3vw,3rem);
}
.rail__line{
  position:absolute;left:38px;top:14px;height:0;width:2px;transform:translateX(-50%);
  background:var(--line);border-radius:2px;
}
.rail__line i{ /* scrubbed fill */
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--terra-lo),var(--terra) 22%,var(--terra-hi));
  box-shadow:0 0 16px var(--terra-glow),0 0 44px rgba(232,129,75,.22);
  clip-path:inset(0 0 100% 0);
  will-change:clip-path;
}
.rail__head{ /* travelling spark */
  position:absolute;left:38px;top:0;width:6px;height:6px;border-radius:50%;
  transform:translate(-50%,-50%);background:#FFD9C4;
  box-shadow:0 0 10px var(--terra-hi),0 0 30px var(--terra-glow),0 0 76px rgba(232,129,75,.34);
  opacity:0;transition:opacity .4s var(--ease);will-change:transform;
}
.rail.is-live .rail__head{opacity:1}

.phase{display:contents}
.node{
  grid-column:1;justify-self:center;align-self:start;position:relative;z-index:2;
  display:grid;place-items:center;border-radius:50%;
  background:var(--void);border:1px solid var(--line-2);color:var(--dim);
  transition:border-color .55s var(--ease),color .55s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease),background .55s var(--ease);
}
.node--phase{
  width:74px;height:74px;margin-top:-12px;
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 600;
  font-size:1.5rem;letter-spacing:-.03em;
}
.node--step{width:34px;height:34px;margin-top:-5px}
.node--step::after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;transition:background .5s var(--ease)}
.node.lit{
  color:var(--terra-hi);border-color:var(--terra);
  background:radial-gradient(circle at 50% 50%,rgba(196,101,58,.2),var(--void) 72%),
             linear-gradient(0deg,var(--void),var(--void));
  box-shadow:0 0 0 1px rgba(232,129,75,.28),0 0 26px rgba(232,129,75,.34),0 0 66px rgba(232,129,75,.16);
}
.node--phase.lit{transform:scale(1.06)}
.node--step.lit{transform:scale(1.14)}

.rail__body{grid-column:2;padding-block:0 clamp(2.1rem,3.8vw,3.2rem)}
.phase__head{padding-top:.2rem}
.phase__kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin-bottom:.6rem}
.phase__head p{color:var(--mute);font-size:1rem;max-width:46ch;margin-top:.7rem}
.step{padding-top:0}
.step h4{margin-bottom:.4rem}
.step p{color:var(--mute);font-size:.93rem;line-height:1.6;max-width:52ch}
.rail__row{display:contents}

/* =========================================================================
   13. Differentiators
   ========================================================================= */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.4vw,20px)}
.why__c{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.9rem,3vw,2.7rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(150deg,var(--surface-2) 0%,var(--ink) 62%);
  display:grid;gap:.85rem;align-content:start;
  transition:transform .55s var(--ease),border-color .5s var(--ease),box-shadow .55s var(--ease);
}
.why__c::before{                /* terracotta wash from the corner */
  content:'';position:absolute;right:-22%;top:-46%;width:78%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(196,101,58,.24) 0%,transparent 66%);
  opacity:.42;transition:opacity .6s var(--ease);pointer-events:none;
}
.why__c:hover{transform:translateY(-5px);border-color:rgba(232,129,75,.4);box-shadow:0 24px 56px -34px rgba(0,0,0,.9)}
.why__c:hover::before{opacity:1}

.why__n{                        /* ghost numeral */
  position:absolute;right:clamp(-6px,1vw,10px);top:-14px;z-index:-1;pointer-events:none;
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(6rem,10vw,9.5rem);line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,129,75,.26);
  transition:-webkit-text-stroke-color .6s var(--ease),transform .8s var(--ease),opacity .6s var(--ease);
}
.why__c:hover .why__n{-webkit-text-stroke-color:rgba(232,129,75,.55);transform:translateY(4px) scale(1.04)}

.why__t{
  font-family:var(--display);font-variation-settings:'wdth' 103,'wght' 700;font-weight:700;
  font-size:clamp(1.16rem,1.5vw,1.42rem);line-height:1.16;letter-spacing:-.026em;
  color:var(--bone);max-width:22ch;text-wrap:balance;
  padding-top:.2rem;
}
.why__t::before{
  content:'';display:block;width:26px;height:2px;border-radius:2px;margin-bottom:1rem;
  background:linear-gradient(90deg,var(--terra),var(--terra-hi));
  transition:width .55s var(--ease);
}
.why__c:hover .why__t::before{width:52px}
.why__c p{color:var(--mute);font-size:.94rem;line-height:1.62;max-width:46ch}

/* =========================================================================
   14. Projects
   ========================================================================= */
.projs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px)}

.proj{display:flex;flex-direction:column;gap:1.05rem}

.proj__shot{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  aspect-ratio:16/10;
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.proj__shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s var(--ease);filter:saturate(.8) brightness(.8)}
.proj__shot::after{            /* terracotta wash that warms on hover */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.1) 0%,transparent 42%,rgba(5,5,6,.62) 100%),
             linear-gradient(0deg,rgba(196,101,58,.24),rgba(196,101,58,.24));
  opacity:.55;transition:opacity .55s var(--ease);
}
.proj:hover .proj__shot{border-color:rgba(232,129,75,.5);transform:translateY(-5px);box-shadow:0 26px 60px -34px rgba(0,0,0,.95)}
.proj:hover .proj__shot img{transform:scale(1.05);filter:saturate(1.02) brightness(1)}
.proj:hover .proj__shot::after{opacity:.18}

.proj__tag{
  position:absolute;z-index:2;left:12px;top:12px;
  font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terra-hi);background:rgba(6,6,8,.66);border:1px solid rgba(232,129,75,.4);
  padding:.46em .78em;border-radius:100px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.proj__go{
  position:absolute;z-index:2;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;font-weight:600;color:#0A0A0C;
  background:linear-gradient(90deg,var(--terra),var(--terra-hi));
  padding:.58em 1em;border-radius:100px;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .5s var(--ease);
  box-shadow:0 10px 26px -12px rgba(196,101,58,.9);
}
.proj__go svg{width:12px;height:12px}
.proj:hover .proj__go{opacity:1;transform:none}

.proj__info{display:grid;gap:.62rem}
.proj__kind{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);
}
.proj__name{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-variation-settings:'wdth' 103,'wght' 700;font-weight:700;
  font-size:clamp(1.22rem,1.6vw,1.5rem);line-height:1.12;letter-spacing:-.028em;color:var(--bone);
  transition:color .4s var(--ease);
}
.proj:hover .proj__name{color:var(--terra-hi)}
.proj__ix{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.16em;color:var(--dim);flex:none}
.proj__d{font-size:.92rem;line-height:1.62;color:var(--mute)}
.proj__scope{
  font-size:.8rem;line-height:1.5;color:var(--bone-2);
  padding-top:.7rem;border-top:1px solid var(--line);
}

/* featured project spans the row */
.proj--lead{
  grid-column:1/-1;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.6rem,3vw,3.2rem);align-items:center;
  padding:clamp(1.2rem,2vw,1.7rem);
  border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  background:linear-gradient(120deg,var(--surface-2) 0%,var(--ink) 70%);
  transition:border-color .5s var(--ease)}
.proj--lead:hover{border-color:rgba(232,129,75,.3)}
.proj--lead .proj__shot{aspect-ratio:16/9}
.proj--lead .proj__info{gap:.8rem;padding-right:clamp(0px,1.5vw,1.4rem)}
.proj--lead .proj__name{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.proj--lead .proj__d{font-size:.98rem}
.proj__link{margin-top:.5rem}

.projs__foot{margin-top:clamp(2.4rem,4vw,3.4rem)}

/* =========================================================================
   15. FAQ
   ========================================================================= */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;text-align:left;
  padding:1.45rem 0;font-family:var(--display);font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(1rem,1.15vw,1.12rem);letter-spacing:-.018em;line-height:1.32;color:var(--bone);
  transition:color .35s var(--ease);
}
.qa__q:hover{color:var(--terra-hi)}
.qa__ic{position:relative;flex:none;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.qa__ic::before,.qa__ic::after{content:'';position:absolute;left:50%;top:50%;background:var(--bone-2);transition:transform .45s var(--ease),background .4s var(--ease)}
.qa__ic::before{width:9px;height:1px;transform:translate(-50%,-50%)}
.qa__ic::after{width:1px;height:9px;transform:translate(-50%,-50%)}
.qa.is-open .qa__ic{border-color:var(--terra);transform:rotate(90deg)}
.qa.is-open .qa__ic::before,.qa.is-open .qa__ic::after{background:var(--terra-hi)}
.qa.is-open .qa__ic::after{transform:translate(-50%,-50%) scaleY(0)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{padding-bottom:1.6rem;color:var(--mute);font-size:.95rem;line-height:1.68;max-width:62ch}

/* =========================================================================
   16. Final CTA
   ========================================================================= */
.close{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.close::before{
  content:'';position:absolute;left:50%;bottom:-58%;width:min(1100px,150%);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(196,101,58,.2) 0%,rgba(196,101,58,.05) 42%,transparent 68%);
  pointer-events:none;
}
.close__in{position:relative;text-align:center;display:grid;justify-items:center;gap:1.5rem}
.close .h2{max-width:20ch}
.close .lead{margin-inline:auto;text-align:center}
.close__acts{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1rem}
.close__note{font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:1.4rem}

/* =========================================================================
   17. Footer
   ========================================================================= */
.foot{border-top:1px solid var(--line);background:var(--ink);padding-block:clamp(3rem,6vw,5rem) 2rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
.foot__brand p{color:var(--mute);font-size:.9rem;line-height:1.62;max-width:38ch;margin-top:1.2rem}
.foot__col h3{font-family:var(--mono);font-variation-settings:normal;font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:1.15rem}
.foot__col ul{display:grid;gap:.62rem}
.foot__col a,.foot__col li{font-size:.9rem;color:var(--bone-2);transition:color .3s var(--ease)}
.foot__col a:hover{color:var(--terra-hi)}
.foot__bar{margin-top:clamp(2.6rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.foot__bar p,.foot__bar a{font-size:.78rem;color:var(--dim);line-height:1.6}
.foot__bar a:hover{color:var(--mute)}
.foot__legal{display:flex;flex-wrap:wrap;gap:1.2rem}

/* whatsapp float */
.wapp{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--terra-hi),var(--terra));color:#0A0A0C;
  box-shadow:0 12px 34px -10px rgba(196,101,58,.75),0 0 0 1px rgba(255,255,255,.1) inset;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.wapp.is-on{opacity:1;transform:none;pointer-events:auto}
.wapp:hover{transform:translateY(-3px)}
.wapp svg{width:27px;height:27px}

/* =========================================================================
   18. Reveal choreography
   ========================================================================= */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .95s var(--ease)}
[data-rise].is-in{opacity:1;transform:none}

/* =========================================================================
   19. Responsive
   ========================================================================= */
@media (max-width:1080px){
  .proc__grid{grid-template-columns:1fr;gap:clamp(2.4rem,5vw,3.4rem)}
  .proc__aside{position:static}
  .proc__aside .btn{margin-top:1.6rem}
  .sol{grid-template-columns:1fr;max-width:620px}
  .projs{grid-template-columns:repeat(2,1fr)}
  .proj--lead{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .proj--lead .proj__shot{aspect-ratio:16/10}
  .faq{grid-template-columns:1fr}
  .shead--split{grid-template-columns:1fr;align-items:start}
  .foot__grid{grid-template-columns:1fr 1fr;gap:2.4rem}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .hscroll{right:10px;gap:8px}
  .hscroll__rail{height:78px}
  .hscroll__ticks i{width:10px}
  .hscroll__ticks i.done{width:13px}
  .hscroll__ticks i.now{width:20px}
  .hero__seq{gap:.9rem}
  /* reserva a faixa do indicador de rolagem dos dois lados, para o texto
     continuar centrado e nunca encostar nele. Abaixo de 420px o indicador
     some e o respiro volta ao normal. */
  .hero__layer{padding-inline:max(var(--gutter),46px)}
  .nav,.hdr__cta .btn{display:none}
  .burger{display:block}
  .hdr__in{height:66px}
  .hero__canvas{object-fit:contain}
  .hero__track{height:500vh}
  .hero__grade{background:
    radial-gradient(70% 40% at 50% 50%,transparent 0%,rgba(5,5,6,.2) 60%,rgba(5,5,6,.8) 100%),
    linear-gradient(180deg,rgba(5,5,6,.86) 0%,rgba(5,5,6,.1) 30%,rgba(5,5,6,.1) 58%,rgba(5,5,6,.96) 100%)}
  .hero__h1{max-width:none}
  .why{grid-template-columns:1fr}
  .rail{grid-template-columns:52px minmax(0,1fr);column-gap:1.1rem}
  .rail__line,.rail__head{left:26px}
  .node--phase{width:52px;height:52px;font-size:1.05rem;margin-top:-6px}
  .node--step{width:26px;height:26px;margin-top:-2px}
  .node--step::after{width:6px;height:6px}
  .phase__head{padding-top:0}
  .rail__body{padding-bottom:2rem}
}
@media (max-width:560px){
  /* com a faixa do indicador reservada, o sobretítulo mais longo da hero
     não cabia em uma linha e deixava o traço terracota sozinho em cima */
  .hero .eyebrow{font-size:.62rem;letter-spacing:.15em}
  .projs{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .why{grid-template-columns:1fr}
  .why__n{font-size:5.4rem;top:-6px}
  .foot__grid{grid-template-columns:1fr}
  .btn{width:100%}
  .hero__acts .btn{width:auto;flex:1 1 100%}
  .close__acts .btn{flex:1 1 100%}
  .foot__bar{flex-direction:column;align-items:flex-start}
}

/* the hero has to fit the viewport it lands in */
@media (max-width:900px){
  .hero__layer{padding-block:80px 40px}
}
@media (max-width:420px){
  .hscroll{display:none}
  .hero__layer{padding-inline:var(--gutter)}   /* sem indicador, sem reserva */
  .btn{font-size:.88rem;padding:.95em 1.4em}
  .hero__h1{font-size:clamp(1.95rem,9.6vw,2.5rem);margin-bottom:1.05rem}
  .hero__sub{font-size:.95rem;line-height:1.5}
  .hero .eyebrow{font-size:.62rem;letter-spacing:.16em;margin-bottom:1.1rem}
  .hero__acts{margin-top:1.7rem;gap:.6rem}
  .hero__load{right:14px;font-size:.55rem}
  .hero__load .track{width:70px}
}
@media (max-height:700px) and (max-width:900px){
  .hero__h1{font-size:clamp(1.75rem,7.6vw,2.2rem);margin-bottom:.85rem}
  .hero__sub{font-size:.9rem;line-height:1.45}
  .hero .eyebrow{margin-bottom:.9rem}
  .hero__acts{margin-top:1.3rem}
  .cue{display:none}
}
@media (max-height:640px) and (min-width:901px){
  .hero__h1{font-size:clamp(2rem,4.6vw,3.4rem)}
  .hero__sub{font-size:1rem}
  .cue{display:none}
}

html.rm .hero__track{height:100vh;height:100svh}
html.rm .cue{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rise]{opacity:1;transform:none}
  .cue__bar::after{display:none}
}

/* --- trilha de navegação (usada por páginas internas e documentos legais) --- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:1.5rem}
.crumb a{transition:color .3s var(--ease)}
.crumb a:hover{color:var(--terra-hi)}
.crumb span[aria-current]{color:var(--bone-2)}
.crumb i{font-style:normal;opacity:.5}

/* =========================================================================
   Consentimento de cookies — banner e painel de preferências
   Requisitos vindos da Política de Cookies (seções 04 e 05): categorias não
   necessárias desativadas por padrão, aceitar/rejeitar/gerenciar com o mesmo
   peso visual, e um caminho permanente para rever a escolha.
   ========================================================================= */
.cbar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:clamp(14px,2vw,20px) var(--gutter) calc(clamp(14px,2vw,20px) + env(safe-area-inset-bottom));
  background:rgba(10,10,12,.94);border-top:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 -20px 60px -30px rgba(0,0,0,.9);
  transform:translateY(110%);transition:transform .6s var(--ease);
}
.cbar.is-on{transform:none}
.cbar__in{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;
}
.cbar__txt{flex:1 1 380px;min-width:0}
.cbar__t{
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 102,'wght' 600;
  font-size:1rem;color:var(--bone);margin-bottom:.3rem;
}
.cbar__d{font-size:.86rem;line-height:1.55;color:var(--mute)}
.cbar__d a{color:var(--terra-hi);text-decoration:underline;text-underline-offset:3px}
.cbar__acts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;flex:none}

/* Botão de consentimento: Aceitar e Rejeitar usam exatamente o mesmo estilo,
   para nenhuma das duas escolhas parecer a preferida. */
.cbtn{
  font-family:var(--body);font-size:.84rem;font-weight:600;white-space:nowrap;
  color:var(--bone);background:rgba(239,234,228,.05);
  border:1px solid var(--line-2);border-radius:999px;
  padding:.72em 1.25em;cursor:pointer;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.cbtn:hover{background:var(--terra-ghost);border-color:rgba(232,129,75,.5);color:var(--terra-hi)}
.cbtn:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.cbtn--save{background:var(--terra);border-color:var(--terra);color:#0A0A0C}
.cbtn--save:hover{background:var(--terra-hi);border-color:var(--terra-hi);color:#0A0A0C}

.cbar__link{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);background:none;border:0;cursor:pointer;padding:.5em .2em;
  text-decoration:underline;text-underline-offset:4px;
  transition:color .35s var(--ease);
}
.cbar__link:hover{color:var(--terra-hi)}

/* painel de preferências */
.cpref{
  position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  padding:var(--gutter);
  background:rgba(5,5,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.cpref.is-on{opacity:1;pointer-events:auto}
.cpref__box{
  width:min(620px,100%);max-height:86vh;overflow-y:auto;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(168deg,var(--surface-2),var(--surface) 70%);
  padding:clamp(1.4rem,2.6vw,2.1rem);
  transform:translateY(14px) scale(.985);transition:transform .45s var(--ease);
}
.cpref.is-on .cpref__box{transform:none}
.cpref__t{
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--bone);
}
.cpref__d{margin-top:.7rem;font-size:.9rem;line-height:1.6;color:var(--mute)}
.cpref__d a{color:var(--terra-hi);text-decoration:underline;text-underline-offset:3px}

.ccat{
  display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.ccat:first-of-type{margin-top:1.4rem;border-top:1px solid var(--line)}
.ccat__t{font-size:.97rem;font-weight:600;color:var(--bone)}
.ccat__d{margin-top:.35rem;font-size:.85rem;line-height:1.55;color:var(--mute);max-width:46ch}
.ccat__fix{
  flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:.45em .8em;border:1px solid var(--line);border-radius:999px;white-space:nowrap;
}
/* interruptor */
.csw{flex:none;position:relative;width:46px;height:26px}
.csw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.csw span{
  position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:rgba(239,234,228,.09);border:1px solid var(--line-2);
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.csw span::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--mute);transition:transform .35s var(--ease),background-color .35s var(--ease);
}
.csw input:checked+span{background:var(--terra-ghost);border-color:rgba(232,129,75,.5)}
.csw input:checked+span::after{transform:translateX(20px);background:var(--terra-hi)}
.csw input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}

.cpref__acts{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.5rem}
.cpref__acts .cbtn{flex:1 1 auto}

/* botão "Gerenciar cookies" no rodapé — mesma aparência dos links legais */
.foot__cc{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;transition:color .35s var(--ease);
}

@media (max-width:860px){
  .cbar{padding-block:clamp(12px,2vw,16px)}
  .cbar__in{flex-direction:column;align-items:stretch;gap:.85rem}
  /* em coluna, flex-basis vira ALTURA — sem isto o bloco de texto
     esticava 380px e abria um vão enorme antes dos botões */
  .cbar__txt{flex:0 0 auto}
  .cbar__d{font-size:.82rem}
  .cbar__acts{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .cbar__acts .cbtn{width:100%;padding:.8em .6em;font-size:.8rem;white-space:normal;line-height:1.25}
  .cbar__link{grid-column:1/-1;justify-self:center}
  .cpref__acts{display:grid;grid-template-columns:1fr;gap:.5rem}
  .cpref__acts .cbtn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cbar,.cpref,.cpref__box,.csw span,.csw span::after{transition-duration:.001ms!important}
}