*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:#1E232A;--surface:#252B34;--panel:#2C3340;
  --light:#EAEAE5;--accent:#B2CD3C;--accent-dim:rgba(178,205,60,0.08);
  --text:#EAEAE5;--muted:rgba(234,234,229,0.45);--border:rgba(234,234,229,0.1);
  --rule:rgba(234,234,229,0.14);
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --serif:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'Courier New',Courier,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-in:cubic-bezier(0.4,0,1,1);
  --radius-pill:999px;
  --radius-btn:10px
}
body{background:linear-gradient(180deg,#000000 0%,#0E1116 22%,#1E232A 55%,#1E232A 100%) fixed;color:var(--text);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* Scrim de topo: conteúdo que sobe ao rolar (ex.: as pills dos projetos) some
   suavemente atrás do menu flutuante, sem barra dura e sem grudar. Cor = preto
   do topo do gradiente do body, então é imperceptível como "faixa". Fica acima
   do conteúdo (z-index:5) e abaixo do menu (z:100) e das barras sticky (z:10+),
   então header pinado e nav continuam nítidos. pointer-events:none pra não
   bloquear cliques. */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:120px;z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,0) 100%)
}

/* TEXT MASK REVEAL */
.mask-wrap{overflow:hidden}
.mask-inner{display:block;transform:translateY(110%);transition:transform .85s var(--ease)}
.mask-wrap.on .mask-inner{transform:translateY(0)}
.mask-wrap.d1 .mask-inner{transition-delay:.12s}
.mask-wrap.d2 .mask-inner{transition-delay:.24s}
.mask-wrap.d3 .mask-inner{transition-delay:.36s}
.mask-wrap.d4 .mask-inner{transition-delay:.48s}

.fade{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);transform:translateY(14px)}
.fade.on{opacity:1;transform:translateY(0)}
.fade.d1{transition-delay:.1s}.fade.d2{transition-delay:.2s}.fade.d3{transition-delay:.3s}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.on{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* GRID BASELINE */
.container{max-width:1440px;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container{padding:0 2.5rem}}
@media(min-width:1280px){.container{padding:0 4rem}}

/* NAV — FLOATING PILL / GLASS */
.nav{position:fixed;top:1.5rem;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 1rem;pointer-events:none;transition:top .4s var(--ease)}
.nav__inner{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  width:728px;max-width:calc(100vw - 2rem);
  height:64px;padding:0 .5rem 0 1.5rem;
  border-radius:var(--radius-pill);
  background:rgba(37,43,52,.46);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(234,234,229,.1);
  box-shadow:0 1px 1px rgba(234,234,229,.06) inset,0 12px 32px -8px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);
  transition:height .4s var(--ease),width .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)
}
.nav.is-scrolled .nav__inner{
  height:52px;width:660px;
  background:rgba(22,26,32,.82);
  box-shadow:0 1px 1px rgba(234,234,229,.05) inset,0 8px 24px -8px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.35)
}
.nav__logo{height:33px;display:flex;align-items:center;transition:height .4s var(--ease)}
.nav__logo svg{height:100%;width:auto}
.nav.is-scrolled .nav__logo{height:18px}
.nav__center{display:none;gap:2.5rem;list-style:none}
@media(min-width:900px){.nav__center{display:flex}}
.nav__center a{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s}
.nav__center a:hover{color:var(--accent)}
.nav__right{display:flex;align-items:center;gap:1rem;align-self:stretch;padding:.5rem 0}
.nav__num{display:none;font-family:var(--sans);font-size:.55rem;letter-spacing:.12em;color:var(--muted);text-align:center}
@media(min-width:640px){.nav__num{display:inline}}
.nav__contact{
  display:inline-flex;align-items:center;justify-content:center;
  height:100%;
  width: 178px;
  font-family:var(--sans);font-weight:700;font-size:.575rem;letter-spacing:.16em;text-transform:uppercase;
  padding:0 1.4rem;border-radius:var(--radius-pill);
  background:var(--accent);color:#000;text-decoration:none;transition:background .15s,transform .15s;
  flex-shrink:0
}
.nav__contact:hover{background:#c8e048;transform:translateY(-1px)}

/* HERO — EDITORIAL SPLIT */
.hero{min-height:100svh;display:grid;grid-template-rows:1fr auto;border-bottom:1px solid var(--rule);padding-top:104px;position:relative;overflow:hidden}
.hero__video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__video video{
  position:absolute;top:50%;left:50%;
  width:100%;height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%)
}
.hero__video::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 55%,#000 100%)}
.hero__main{position:relative;z-index:1;display:grid;grid-template-columns:1fr;padding:2rem 1.5rem 3rem}
@media(min-width:768px){.hero__main{padding:2rem 2.5rem 3rem}}
@media(min-width:1024px){.hero__main{grid-template-columns:minmax(0,780px) 240px;justify-content:center;gap:4rem;max-width:1440px;margin:0 auto;padding:2.5rem 4rem 3.5rem;align-items:center}}
.hero__content{}
.hero__overline{font-family:var(--mono);font-size:.575rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:2rem;display:block}
.hero__heading{font-family:var(--serif);font-size:clamp(2.5rem,7.5vw,6.5rem);font-weight:600;letter-spacing:-.03em;line-height:.98;margin-bottom:2rem;font-style:italic;text-wrap:balance}
.hero__heading em{font-style:normal;color:var(--accent)}
.hero__body{max-width:48ch;font-size:1rem;line-height:1.8;color:var(--muted);margin-bottom:2rem}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero__sidebar{position:relative;z-index:1;padding:0 0 2rem;border-top:1px solid var(--rule);margin-top:2.5rem}
@media(min-width:1024px){.hero__sidebar{padding:0;border-top:none;border-left:1px solid var(--rule);margin-top:0;padding-left:2.5rem}}
.sidebar-stat{padding:1.75rem 0;border-bottom:1px solid var(--rule)}
.sidebar-stat:first-child{border-top:1px solid var(--rule)}
@media(min-width:1024px){.sidebar-stat:first-child{border-top:none}}
.s-num{font-family:var(--serif);font-size:clamp(2.25rem,4vw,3rem);font-weight:600;font-style:italic;color:var(--accent);line-height:1;margin-bottom:.5rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.s-unit{font-size:.5em;margin-left:.06em}
.s-label{font-family:var(--mono);font-size:.555rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.hero__ticker{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--rule);overflow:hidden;padding:.875rem 0}
.ticker-track{display:flex;gap:3rem;white-space:nowrap;animation:ticker 22s linear infinite}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{font-family:var(--sans);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex-shrink:0;display:flex;align-items:center;gap:1.5rem}
.ticker-sep{color:var(--accent);font-size:.7rem}

/* ===== HERO V2 — hero em coluna única (sem sidebar) + números em faixa horizontal abaixo do marquee ===== */
@media(min-width:1024px){.hero__main--solo{grid-template-columns:minmax(0,900px);justify-content:center}}

.hero-stats{background:#15181E;border-bottom:1px solid var(--rule)}
.hero-stats__inner{max-width:1440px;margin:0 auto;padding:2.5rem 1.5rem;display:grid;grid-template-columns:1fr;gap:2.25rem}
@media(min-width:640px){.hero-stats__inner{grid-template-columns:repeat(3,auto);justify-content:center;gap:3.5rem}}
@media(min-width:768px){.hero-stats__inner{padding:3.25rem 2.5rem}}
@media(min-width:1024px){.hero-stats__inner{gap:5rem}}
@media(min-width:1280px){.hero-stats__inner{padding:4rem 4rem}}
.hero-stat{display:flex;flex-direction:column;min-width:180px}
.hero-stats .s-num{font-size:clamp(2.5rem,6vw,4.5rem);margin-bottom:0}
.hero-stat__rule{width:100%;max-width:220px;height:0;border:0;border-top:1px solid var(--rule);margin:1.1rem 0}

/* SECTION BASE */
.section{max-width:1440px;margin-left:auto;margin-right:auto;padding:4.5rem 1.5rem;border-bottom:1px solid var(--rule)}
#servicos{border-bottom:none}
#servicos.section{padding-bottom:1.25rem}
@media(min-width:768px){.section{padding:5.5rem 2.5rem}}
@media(min-width:768px){#servicos.section{padding-bottom:1.5rem}}
@media(min-width:1280px){.section{padding:6rem 7.5rem}}
@media(min-width:1280px){#servicos.section{padding-bottom:1.75rem}}
.section__header{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:3.5rem}
@media(min-width:768px){.section__header{grid-template-columns:auto 1fr;align-items:baseline;gap:2rem}}
.sh-label{font-family:var(--mono);font-size:.555rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.sh-rule{display:none;border:none;border-top:1px solid var(--rule);width:100%}
@media(min-width:768px){.sh-rule{display:block}}

/* SERVICES — 12-COL EDITORIAL */
.services-table{display:grid;grid-template-columns:1fr}
@media(min-width:640px){.services-table{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.services-table{grid-template-columns:repeat(4,1fr)}}
.st-cell{padding:2.25rem 1.5rem;border:1px solid var(--rule);border-radius:var(--radius-btn);margin:.375rem;position:relative;transition:background .25s}
.st-cell:hover{background:var(--accent-dim)}
.st-idx{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:2.5rem;font-variant-numeric:tabular-nums}
.st-title{font-family:var(--serif);font-size:1.5rem;font-style:italic;font-weight:600;letter-spacing:-.02em;margin-bottom:1rem;line-height:1.15}
.st-body{font-size:.8125rem;line-height:1.75;color:var(--muted)}
.st-arrow{position:absolute;bottom:1.5rem;right:1.5rem;font-size:1rem;color:var(--border);transition:color .2s,transform .25s}
.st-cell:hover .st-arrow{color:var(--accent);transform:rotate(-45deg)}

/* PROJECTS — STICKY STACKING CARDS (from V3), restyled to editorial palette */
.sticky-section{position:relative;padding-top:1.25rem}
@media(min-width:768px){.sticky-section{padding-top:1.5rem}}
@media(min-width:1280px){.sticky-section{padding-top:1.75rem}}
.sticky-section__header{
  position:sticky;top:88px;z-index:10;
  max-width:1440px;margin-left:auto;margin-right:auto;
  padding:.875rem 1.5rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem
}
@media(min-width:768px){.sticky-section__header{padding:.875rem 2.5rem}}
@media(min-width:1280px){.sticky-section__header{padding:.875rem 7.5rem}}
/* JS (app.js → freezeProjectsHeader) troca pra absolute quando o último card
   se aproxima por baixo, travando o header numa posição fixa a partir dali —
   ver comentário detalhado no app.js sobre por que isso é necessário (sticky
   puro não resolve: o card sempre solta do seu sticky antes do header soltar
   do dele, matematicamente, dado que top+altura do card é bem maior). */
.sticky-section__header.is-frozen{position:absolute;left:0;right:0}
.sticky-section__header .sh-rule{display:none;flex:1;margin:0 1.5rem}
@media(min-width:768px){.sticky-section__header .sh-rule{display:block}}
.ssh-count{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--muted);white-space:nowrap;flex-shrink:0}

.project-cards{display:flex;flex-direction:column;max-width:1440px;margin-left:auto;margin-right:auto;padding:0 1.5rem 1.5rem}
@media(min-width:768px){.project-cards{padding:0 2.5rem 2.5rem}}
@media(min-width:1280px){.project-cards{padding:0 7.5rem 4rem}}
.pcard{
  position:sticky;
  display:grid;
  grid-template-columns:1fr;
  min-height:260px;
  border:1px solid var(--rule);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
  margin-top:1rem;
  text-decoration:none;color:inherit;
  transition:background .3s
}
@media(min-width:768px){.pcard{grid-template-columns:1fr 1fr;min-height:200px}}
.pcard:nth-child(1){top:160px;background:var(--surface)}
.pcard:nth-child(2){top:192px;background:#282F39}
.pcard:nth-child(3){top:224px;background:#2B323D}
.pcard:nth-child(4){top:256px;background:#2E3542}
.pcard:nth-child(5){top:288px;background:#313846}
.pcard:nth-child(6){top:320px;background:#343B4A}
/* /projetos/ pode ter N cases (todos do portfólio): do 7º em diante todos
   grudam no mesmo top do 6º, mantendo a sobreposição sem empurrar a pilha
   pra fora da tela. Sem estilo inline (CSP), o empilhamento é 100% CSS. */
.project-cards .pcard:nth-child(n+7){top:320px;background:#343B4A}
.pcard__left{padding:2.25rem 2rem;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--rule);position:relative;z-index:1}
.pcard__right{position:relative;padding:1.25rem;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease);filter:saturate(.85) brightness(.92)}
.pcard:hover .pc-img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.pc-num{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--accent);margin-bottom:1.25rem;font-variant-numeric:tabular-nums}
.pc-title{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,4vw,2.75rem);font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:.875rem;transition:color .2s}
.pcard:hover .pc-title{color:var(--accent)}
.pc-meta{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pc-tag{display:inline-flex;align-items:center;padding:.35rem .8rem;border:1px solid var(--rule);border-radius:var(--radius-pill);font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pc-arrow{position:relative;z-index:1;width:44px;height:44px;border:1px solid rgba(234,234,229,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:1rem;background:rgba(20,24,29,.55);backdrop-filter:blur(8px);transition:all .25s;align-self:flex-end;margin-top:1.25rem}
.pcard:hover .pc-arrow{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:rotate(-45deg)}
/* Cards de projeto — cidade no topo + metragem (ajuste Figma 2026-07-24) */
.pcard__left .pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.pcard__left .pc-top .pc-num{margin-bottom:0}
.pc-loc{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pc-mid{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;margin:0}
.pc-mid .pc-title{margin-bottom:0}
.pc-area{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.1rem,2.6vw,2rem);line-height:1;letter-spacing:-.01em;color:var(--text);opacity:.82;white-space:nowrap;flex-shrink:0}
.ssh-all{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap;flex-shrink:0;text-decoration:none;transition:opacity .2s;margin-left:1.25rem}
.ssh-all:hover{opacity:.7}
/* Página de cases gerais (/projetos/) — lista plana, não-sticky */
.projetos-hero{padding-bottom:1.5rem}
.projetos-lead{max-width:52ch;color:var(--muted);font-size:1rem;line-height:1.7;margin-top:1.25rem;padding:0 1.5rem}
@media(min-width:768px){.projetos-lead{padding:0 2.5rem}}
@media(min-width:1280px){.projetos-lead{padding:0 7.5rem}}
.cases-list{display:flex;flex-direction:column;max-width:1440px;margin:1.5rem auto 0;padding:0 1.5rem 1.5rem;gap:1px;background:transparent}
@media(min-width:768px){.cases-list{padding:0 2.5rem 2.5rem}}
@media(min-width:1280px){.cases-list{padding:0 7.5rem 3rem}}
.cases-list .pcard{position:relative;top:auto!important;border-radius:var(--radius,14px);overflow:hidden}
.cases-list .pcard:nth-child(n){background:var(--surface)}

/* ============================================================
   FILTRO DE PROJETOS (home + /projetos/) — ajuste Figma 2026-07-24
   Comportamento: entra com todos ativos (verde/texto preto); clique
   isola uma categoria (demais viram contorno verde/texto branco);
   clicar na ativa volta para todas. JS em app.js (módulo cases-filter).
   ============================================================ */
/* Header da página de cases gerais */
.projetos-hero{padding:calc(104px + 2.5rem) 1.5rem 1.25rem}
@media(min-width:768px){.projetos-hero{padding:calc(104px + 3.5rem) 2.5rem 1.5rem}}
@media(min-width:1280px){.projetos-hero{padding:calc(104px + 4.5rem) 7.5rem 1.75rem}}
.crumb{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem}
.crumb a{color:var(--muted);text-decoration:none;transition:color .18s}
.crumb a:hover{color:var(--text)}
.crumb__sep{color:var(--accent)}
.crumb [aria-current]{color:var(--text)}
.projetos-eyebrow{display:block;font-family:var(--mono);font-size:.575rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem}
.projetos-title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(2rem,6vw,4rem);line-height:1.04;letter-spacing:-.02em;color:var(--text);max-width:18ch;margin:0}
.projetos-title em{font-style:italic;color:var(--accent)}
/* Folga entre o título editorial e a barra "Projetos selecionados" na /projetos/. */
.projetos-hero + .sticky-section{padding-top:2.5rem}

/* Barra de filtros — mesmo eixo dos cards (1440 + padding responsivo) */
.cases-filter{display:flex;flex-wrap:wrap;gap:.6rem;max-width:1440px;margin:0 auto;padding:1.5rem 1.5rem 0}
@media(min-width:768px){.cases-filter{padding:1.75rem 2.5rem 0}}
@media(min-width:1280px){.cases-filter{padding:2rem 7.5rem 0}}
.cf-pill{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;padding:.7rem 1.4rem;border-radius:var(--radius-pill);border:1px solid var(--accent);background:transparent;color:var(--text);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.cf-pill:hover{background:var(--accent-dim)}
.cf-pill.is-active{background:var(--accent);border-color:var(--accent);color:#000}
.cf-pill.is-active:hover{background:var(--accent)}
.cf-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Contador "Projetos selecionados / NN obras" (página de cases) */
.cases-count{display:flex;align-items:center;gap:1.25rem;max-width:1440px;margin:0 auto;padding:1.75rem 1.5rem 0}
@media(min-width:768px){.cases-count{padding:2rem 2.5rem 0}}
@media(min-width:1280px){.cases-count{padding:2.25rem 7.5rem 0}}
.cases-count__label{font-family:var(--mono);font-size:.555rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.cases-count__rule{flex:1;height:0;border:0;border-top:1px solid var(--rule);margin:0}
.cases-count__num{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Esconder cards filtrados (vence .pcard{display:grid}) */
.pcard[hidden]{display:none}
/* O empilhamento sticky com sobreposição é mantido MESMO com filtro ativo
   (decisão do Victor). Cards ocultos saem do fluxo; os visíveis continuam
   grudando nos seus tops e sobrepondo normalmente. */


/* MODALITIES — SIDE BY SIDE */
.modalities-split{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
@media(min-width:768px){.modalities-split{grid-template-columns:1fr 1fr}}
.mod-pane{background:var(--bg);padding:3rem 1.5rem}
@media(min-width:768px){.mod-pane{padding:3.5rem 2.5rem}}
@media(min-width:1280px){
  .mod-pane{padding-top:4rem;padding-bottom:4rem;padding-left:4rem;padding-right:4rem}
  /* telas >=1280px: a margem de conteudo do site e 7.5rem; .section/.cta-inner etc centralizam em 1440px e o
     conteúdo deles "some" da borda real da tela; aqui compensamos pra bater exatamente
     no mesmo ponto, já que este bloco continua sangrando ponta a ponta de propósito */
  .modalities-split .mod-pane:first-child{padding-left:max(7.5rem,calc((100vw - 1440px) / 2 + 7.5rem))}
  .modalities-split .mod-pane:last-child{padding-right:max(7.5rem,calc((100vw - 1440px) / 2 + 7.5rem))}
}
.mod-pane--accent{background:var(--accent);color:#000}
.mod-pane--accent .mp-label{color:rgba(0,0,0,.5)}
.mod-pane--accent .mp-body{color:rgba(0,0,0,.65)}
.mp-label{font-family:var(--mono);font-size:.555rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2rem}
.mp-title{font-family:var(--serif);font-size:clamp(2rem,5vw,4rem);font-weight:600;font-style:italic;letter-spacing:-.03em;line-height:1;margin-bottom:1.25rem}
.mp-body{font-size:.9375rem;line-height:1.8;max-width:40ch}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr;gap:6rem;align-items:center}}
.about-quote{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.75rem);font-style:italic;font-weight:600;letter-spacing:-.025em;line-height:1.25;color:var(--text)}
.about-quote span{color:var(--accent)}
.about-right p{font-size:.9375rem;line-height:1.85;color:var(--muted)}
.about-right p+p{margin-top:1.25rem}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--rule)}
.office-city{font-family:var(--mono);font-size:.555rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.625rem}
.office-addr{font-style:normal;font-size:.8125rem;line-height:1.7;color:var(--muted)}

/* CTA EDITORIAL */
/* .cta-section sangra ponta a ponta só pra cor de fundo (var(--surface) cobrindo
   a tela inteira) — SEM padding lateral nela mesma. Todo o respiro/margem lateral
   agora vive no .cta-inner, que tem max-width:1440px + padding, igual .section.
   Isso é o que garante que o padding conta a partir da borda do container de
   1440px centralizado (a mesma régua que .about-quote usa), em qualquer largura
   de tela — não só acima de um breakpoint calculado como antes. */
.cta-section{background:var(--surface)}
.cta-inner{display:flex;flex-direction:column;gap:2.5rem;max-width:1440px;margin:0 auto;padding:5rem 1.5rem}
@media(min-width:768px){.cta-inner{padding:6rem 2.5rem}}
@media(min-width:1280px){.cta-inner{padding:7rem 4rem}}
@media(min-width:1024px){.cta-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:4rem}}
.cta-heading{font-family:var(--serif);font-size:clamp(2.25rem,5.2vw,5rem);font-weight:600;font-style:italic;letter-spacing:-.04em;line-height:.95;text-wrap:balance}
.cta-heading em{font-style:normal;color:var(--accent)}
@media(min-width:1024px){.cta-heading{flex:1;min-width:0}}
.cta-aside{display:flex;flex-direction:column;gap:1.75rem;flex-shrink:0;width:100%}
@media(min-width:1024px){.cta-aside{width:560px}}
.cta-email{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.75rem;transition:color .15s,border-color .15s;align-self:flex-start}
.cta-email:hover{color:var(--accent);border-color:var(--accent)}

/* CTA FORM — GLASS PANEL (mesma linguagem visual do nav) */
.cta-form{
  display:flex;flex-direction:column;gap:1.25rem;padding:2rem;
  background:rgba(22, 22, 22, 0.5);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(108, 108, 108, 0.719);
  border-radius:20px;
  box-shadow:0 1px 1px rgba(234,234,229,.06) inset,0 12px 32px -8px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2)
}
.cf-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:480px){.cf-row{grid-template-columns:1fr 1fr}}
.cf-field{display:flex;flex-direction:column;gap:.55rem}
.cf-field label,.cf-label-standalone{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cf-field input,.cf-field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--text);
  background:rgba(20,24,29,.4);border:1px solid var(--border);border-radius:var(--radius-btn);
  padding:.8rem .95rem;width:100%;transition:border-color .15s,background .15s
}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--muted)}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--accent)}
.cf-field textarea{resize:vertical;min-height:88px;line-height:1.6;font-family:var(--sans)}
.cf-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.cf-pills input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cf-pills label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem 1rem;border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--muted);cursor:pointer;transition:all .15s;user-select:none
}
.cf-pills input[type=radio]:checked+label{background:var(--accent);border-color:var(--accent);color:#000}
.cf-pills input[type=radio]:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
/* honeypot anti-spam: fora da tela, nunca "display:none" (bots ignoram esse truque, este não) */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cta-form .cf-submit{width:100%;justify-content:center;font-size:.7rem}
.cf-note{font-size:.8125rem;line-height:1.6;color:var(--muted)}

/* CONTACT MODAL */
.cf-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.cf-modal[hidden]{display:none}
.cf-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.cf-modal__panel{position:relative;z-index:1;max-width:420px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:2.5rem 2rem;text-align:center;box-shadow:0 24px 64px -12px rgba(0,0,0,.6)}
.cf-modal__close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;transition:all .15s}
.cf-modal__close:hover{color:var(--text);border-color:var(--accent)}
.cf-modal__eyebrow{font-family:var(--mono);font-size:.555rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
.cf-modal__title{font-family:var(--serif);font-size:1.75rem;font-style:italic;font-weight:600;letter-spacing:-.02em;margin-bottom:.875rem;line-height:1.15}
.cf-modal__body{font-size:.875rem;line-height:1.7;color:var(--muted);margin-bottom:1.75rem}
.cf-modal__cta{width:100%;justify-content:center}

/* CLIENTS — INFINITE MARQUEE */
.clients-marquee{background:#000;padding:5.5rem 0;border-bottom:1px solid var(--rule)}
.clients-marquee__header{max-width:1440px;margin-left:auto;margin-right:auto;padding:0 1.5rem;margin-bottom:2.5rem;text-align:center}
@media(min-width:768px){.clients-marquee__header{padding:0 2.5rem}}
@media(min-width:1280px){.clients-marquee__header{padding:0 4rem}}
.clients-track-wrap{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)
}
.clients-track{display:flex;align-items:center;width:max-content;animation:clientsScroll 52s linear infinite}
.clients-track:hover{animation-play-state:paused}
@keyframes clientsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clients-track img{height:144px;width:auto;flex-shrink:0;opacity:.85;filter:grayscale(1) brightness(2.2);transition:opacity .25s;margin-right:1.25rem}
.clients-track img:hover{opacity:1}
@media(min-width:768px){.clients-track img{height:156px}}
@media(min-width:1280px){.clients-track img{height:164px}}

/* BUTTONS — ROUNDED / PILL */
.btn-primary{display:inline-flex;align-items:center;gap:.75rem;padding:.875rem 1.75rem;border-radius:var(--radius-pill);font-family:var(--sans);font-weight:700;font-size:.575rem;letter-spacing:.18em;text-transform:uppercase;color:#000;background:var(--accent);text-decoration:none;transition:background .15s,transform .15s;flex-shrink:0}
.btn-primary:hover{background:#c8e048;transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:.75rem;padding:.875rem 1.75rem;border-radius:var(--radius-pill);font-family:var(--sans);font-weight:700;font-size:.575rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--rule);transition:all .15s}
.btn-ghost:hover{color:var(--text);border-color:rgba(234,234,229,.3);background:rgba(234,234,229,.04)}

/* FOOTER */
.footer{max-width:1440px;margin-left:auto;margin-right:auto;padding:2.5rem 1.5rem;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){.footer{flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem 2.5rem}}
@media(min-width:1280px){.footer{padding:2.5rem 4rem}}
.footer__logo{height:30px;display:flex;align-items:center}
.footer__logo svg{height:100%;width:auto}
.footer__nav{display:flex;gap:2rem}
.footer__nav a{font-family:var(--mono);font-size:.555rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s}
.footer__nav a:hover{color:var(--accent)}
.footer__copy{font-family:var(--mono);font-size:.44rem;letter-spacing:.05em;color:rgba(234,234,229,.2);white-space:nowrap;flex-shrink:0}
/* ============================================================
   A11Y — SKIP LINK
   Fica fora da tela até receber foco por teclado (Tab), aí desliza
   pra dentro. Não usa display:none porque isso o tiraria da ordem
   de foco e ele deixaria de existir pra quem navega por teclado.
   ============================================================ */
.skip-link{
  position:fixed;top:0;left:-9999px;z-index:300;
  background:var(--accent);color:#000;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:0 0 var(--radius-btn) 0;
  font-family:var(--sans);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase
}
.skip-link:focus{left:0}

/* Os cards de especialidade viraram <a> (linkam pras subpáginas) —
   herdam o visual do .st-cell, só precisam perder o estilo de link. */
.st-cell{display:block;text-decoration:none;color:inherit}
.st-cell:focus-visible,.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.office-addr a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);transition:color .15s,border-color .15s}
.office-addr a:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   SUBPÁGINAS DE ESPECIALIDADE (Corporativo / Varejo / Grandes Formatos / Saúde)
   Mesma linguagem visual da home, sem o vídeo: o hero vira um split
   texto + foto do projeto-vitrine da categoria.
   ============================================================ */
.subhero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);padding:calc(104px + 2.5rem) 1.5rem 3.5rem}
@media(min-width:768px){.subhero{padding:calc(104px + 3.5rem) 2.5rem 4.5rem}}
@media(min-width:1280px){.subhero{padding:calc(104px + 4.5rem) 7.5rem 5.5rem}}
/* brilho verde difuso atrás do texto — dá o mesmo "peso" visual que o
   vídeo dá no hero da home, sem custo de banda */
.subhero::before{
  content:'';position:absolute;top:-30%;left:-10%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(178,205,60,.10),transparent);
  pointer-events:none
}
.subhero__inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;display:grid;gap:2.5rem}
@media(min-width:1024px){.subhero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:4rem;align-items:center}}
.subhero__eyebrow{font-family:var(--mono);font-size:.575rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1.5rem}
.subhero__title{font-family:var(--serif);font-size:clamp(2.25rem,6vw,4.75rem);font-weight:600;font-style:italic;letter-spacing:-.03em;line-height:1;margin-bottom:1.75rem;text-wrap:balance}
.subhero__title em{font-style:normal;color:var(--accent)}
.subhero__lead{font-size:1rem;line-height:1.8;color:var(--muted);max-width:54ch;margin-bottom:2rem}
.subhero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.subhero__media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:4/3}
.subhero__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.85)}

/* BREADCRUMB (o marcador visual do BreadcrumbList que vai no JSON-LD) */
.breadcrumb{margin-bottom:1.75rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .15s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb li+li::before{content:'/';margin:0 .6rem;color:var(--border)}
.breadcrumb [aria-current="page"]{color:var(--accent)}

/* INTRO DE SEÇÃO (parágrafo abaixo do header da seção) */
.section-lead{font-size:1rem;line-height:1.85;color:var(--muted);max-width:64ch;margin-bottom:3rem}

/* O QUE ENTREGAMOS — grid de sub-serviços */
.deliver-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-btn);overflow:hidden}
@media(min-width:640px){.deliver-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.deliver-grid{grid-template-columns:repeat(3,1fr)}}
.dcard{background:var(--bg);padding:2rem 1.75rem;transition:background .25s}
.dcard:hover{background:var(--accent-dim)}
.dcard__idx{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:1.75rem;font-variant-numeric:tabular-nums}
.dcard__title{font-family:var(--serif);font-size:1.1875rem;font-style:italic;font-weight:600;letter-spacing:-.02em;margin-bottom:.875rem;line-height:1.2}
.dcard__body{font-size:.8125rem;line-height:1.75;color:var(--muted)}

/* COMO FUNCIONA — passos numerados */
.process{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.process{grid-template-columns:repeat(4,1fr);gap:2rem}}
.pstep{position:relative;padding-top:2rem;border-top:1px solid var(--rule)}
.pstep::before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pstep__n{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:.875rem;font-variant-numeric:tabular-nums}
.pstep__t{font-family:var(--serif);font-size:1.125rem;font-style:italic;font-weight:600;letter-spacing:-.02em;margin-bottom:.75rem}
.pstep__b{font-size:.8125rem;line-height:1.75;color:var(--muted)}

/* PROJETOS RELACIONADOS — grid simples (o sticky stacking fica só na home) */
/* colunas fixas (e não auto-fit): Varejo e Saúde têm 1 projeto só publicado,
   e com auto-fit esse card único esticaria pra largura toda virando um bloco
   gigante de 4:3. Com coluna fixa ele ocupa 1/3 e parece proposital. */
.proj-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.proj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pgcard{position:relative;display:block;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--surface);text-decoration:none;color:inherit}
.pgcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.6);transition:transform .6s var(--ease),filter .4s var(--ease)}
.pgcard:hover img{transform:scale(1.05);filter:saturate(1) brightness(.78)}
.pgcard__body{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8) 100%)}
.pgcard__t{font-family:var(--serif);font-size:1.375rem;font-style:italic;font-weight:600;letter-spacing:-.02em;margin-bottom:.375rem;transition:color .2s}
.pgcard:hover .pgcard__t{color:var(--accent)}
.pgcard__m{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* FAQ — <details>/<summary> nativo, sem JS */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:1.0625rem;font-style:italic;font-weight:600;letter-spacing:-.01em;line-height:1.35;
  transition:color .15s
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.faq-item summary::after{content:'+';flex-shrink:0;color:var(--accent);font-style:normal;font-size:1.25rem;line-height:1.15}
.faq-item[open] summary::after{content:'−'}
.faq-item__a{padding:0 0 1.75rem;font-size:.9375rem;line-height:1.85;color:var(--muted);max-width:74ch}
.faq-item__a p+p{margin-top:1rem}

/* OUTRAS ESPECIALIDADES — links cruzados entre as subpáginas */
.specs-links{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.specs-links{grid-template-columns:repeat(3,1fr)}}
.slink{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem;border:1px solid var(--rule);border-radius:var(--radius-btn);text-decoration:none;color:inherit;transition:background .25s,border-color .25s}
.slink:hover{background:var(--accent-dim);border-color:rgba(178,205,60,.35)}
.slink__t{font-family:var(--serif);font-size:1.125rem;font-style:italic;font-weight:600;letter-spacing:-.02em}
.slink__a{color:var(--accent);transition:transform .25s}
.slink:hover .slink__a{transform:translateX(3px)}

/* ============================================================
   PÁGINA DE CASE (headless) — /case/?slug=...
   Renderizada por case.js a partir da API do WordPress (trio-cases).
   Reaproveita .subhero (topo) e adiciona galeria + escopo.
   ============================================================ */

/* estado de carregamento / erro */
.case-state{min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:8rem 1.5rem;color:var(--muted)}
.case-state .btn-ghost{margin-top:.5rem}
[hidden]{display:none!important}

/* GALERIA — "Projeto entregue" */
/* .case-gallery é um .section — herda o padding lateral de 120px do resto do site */
.cg-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.cg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cg-item{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:var(--surface)}
.cg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.9);transition:transform .6s var(--ease),filter .4s var(--ease)}
.cg-item:hover img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.cg-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.25rem;font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--text);background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}

/* ESCOPO DO PROJETO — 4 blocos */
.case-escopo .escopo-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:640px){.case-escopo .escopo-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.case-escopo .escopo-grid{grid-template-columns:repeat(4,1fr);gap:2rem}}
.escopo-col{padding-top:1.5rem;border-top:1px solid var(--rule)}
.escopo-col__label{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1.25rem}
.escopo-col__sub{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.125rem;letter-spacing:-.02em;line-height:1.25;color:var(--text);margin-bottom:.875rem}
.escopo-col__txt{font-size:.8125rem;line-height:1.75;color:var(--muted)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}