/* ══════════════════════════════════════════════════════════════════════════
   CAROLINA BERNARDI ARQUITETURA — SITE INSTITUCIONAL (one-page)
   Base criativa: Design System v2 — "Arquitetura da contenção"
   Copy: 06_OUTPUTS/copy-site-institucional (rascunho p/ validação da cliente)
   Construído por Studio Connecta · 2026
   ══════════════════════════════════════════════════════════════════════════ */

/* ░░ 00 · FONTES — self-hosted ░░ */
@font-face{font-family:'Jost';src:url('../fonts/Jost-Variable-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'Jost';src:url('../fonts/Jost-Variable-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:'Jost';src:url('../fonts/Jost-Italic-Variable-latin.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/JetBrainsMono-Variable-latin.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:swap}

/* ░░ 01 · TOKENS (Design System v2 — fonte única da verdade) ░░ */
:root{
  --preto:#000000;--grafite:#262626;--concreto:#8C8781;--taupe:#B3A793;
  --travertino:#E4DBCD;--branco:#FFFFFF;
  --acento:#2F4A45;--acento-hi:#8AB0A4;--papel:#EFEBE3;--tinta:#2B2A28;
  --tinta-04:rgba(43,42,40,.04);--tinta-06:rgba(43,42,40,.06);--tinta-08:rgba(43,42,40,.08);
  --tinta-12:rgba(43,42,40,.12);--tinta-22:rgba(43,42,40,.22);--tinta-45:rgba(43,42,40,.45);--tinta-70:rgba(43,42,40,.70);
  --branco-05:rgba(255,255,255,.05);--branco-10:rgba(255,255,255,.10);--branco-15:rgba(255,255,255,.15);
  --branco-40:rgba(255,255,255,.40);--branco-60:rgba(255,255,255,.60);--branco-80:rgba(255,255,255,.80);
  --acento-10:rgba(47,74,69,.10);--acento-24:rgba(47,74,69,.24);
  --font-display:'Jost','Century Gothic','Futura',system-ui,sans-serif;
  --font-text:'Jost','Century Gothic','Futura',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --d-fast:180ms;--d-base:300ms;--d-slow:600ms;--d-cine:1200ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-cine:cubic-bezier(.33,1,.68,1);
  --r-0:0px;--r-1:2px;--r-2:4px;--r-pill:999px;
  --e-1:0 1px 2px rgba(40,36,30,.06);--e-2:0 8px 24px -12px rgba(40,36,30,.28);
  --e-3:0 24px 48px -24px rgba(40,36,30,.38);--e-4:0 40px 80px -40px rgba(40,36,30,.45);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;
  --sp-12:48px;--sp-16:64px;--sp-24:96px;--sp-32:128px;
  --z-base:0;--z-raise:10;--z-sticky:20;--z-nav:40;--z-cursorui:55;
  --z-grain:90;--z-modal:100;--z-loader:120;--z-toast:1000;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grad-petroleo:linear-gradient(160deg,#2F4A45,#111A18 78%);
  --grad-flow:linear-gradient(90deg,#E4DBCD,#B3A793,#8AB0A4,#8C8781,#E4DBCD);
  --grad-papel:radial-gradient(120% 120% at 50% 0%,#F4F1EA 0%,#E7E1D6 100%);
}

/* ░░ 02 · RESET + BASE ░░ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html{overflow-x:clip}
body{font-family:var(--font-text);background:var(--branco);color:var(--tinta);
  font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--acento);color:var(--branco)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acento);outline-offset:4px;border-radius:var(--r-1)}
.surface-tinta a:focus-visible,.surface-tinta button:focus-visible,.surface-preto a:focus-visible,.surface-preto button:focus-visible{outline-color:var(--acento-hi)}
.skip-link{position:fixed;top:-100%;left:var(--sp-4);z-index:calc(var(--z-toast) + 1);
  background:var(--tinta);color:var(--branco);padding:var(--sp-3) var(--sp-6);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:top var(--d-base) var(--ease-out)}
.skip-link:focus{top:var(--sp-4)}
.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}

/* ░░ 03 · PAPÉIS DE TEXTO ░░ */
.t-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:.08em;text-transform:uppercase}
.t-h3{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.t-h4{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.3;letter-spacing:.04em}
.t-h6{font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.t-body-lg{font-size:19px;line-height:1.65;font-weight:300}
.t-body{font-size:16px;line-height:1.6;font-weight:300}
.t-body-sm{font-size:14px;line-height:1.55;font-weight:300}
.t-caption{font-size:13px;line-height:1.5;font-weight:300;color:var(--tinta-70)}
.t-label{font-family:var(--font-display);font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase}
.t-mono{font-family:var(--font-mono);font-size:12.5px;font-weight:400;letter-spacing:.02em}
.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--acento)}
.surface-tinta .eyebrow,.surface-preto .eyebrow{color:var(--acento-hi)}
/* headline editorial p/ frases longas de copy (Jost 250, caixa normal) */
.t-copyline{font-family:var(--font-display);font-weight:250;font-size:clamp(27px,3.3vw,46px);line-height:1.16;letter-spacing:.01em}
.t-copyline b,.t-copyline strong{font-weight:400;color:var(--acento)}
.surface-tinta .t-copyline b,.surface-preto .t-copyline b{color:var(--acento-hi)}

/* ░░ 04 · SUPERFÍCIES + LAYOUT ░░ */
.surface-branco{background:var(--branco);color:var(--tinta)}
.surface-papel{background:var(--papel);color:var(--tinta)}
.surface-wash{background:var(--grad-papel);color:var(--tinta)}
.surface-tinta{background:var(--grafite);color:var(--papel)}
.surface-preto{background:var(--preto);color:var(--papel)}
.mat{position:relative}
.mat::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.16;mix-blend-mode:soft-light;pointer-events:none}
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--sp-6)}
@media(min-width:768px){.container{padding-inline:var(--sp-12)}}
.sec{position:relative;padding-block:var(--sp-24)}
@media(min-width:768px){.sec{padding-block:var(--sp-32)}}
.sec + .sec{border-top:1px solid var(--tinta-08)}
.surface-tinta.sec + .sec,.sec + .surface-tinta.sec,.surface-preto.sec + .sec,.sec + .surface-preto.sec{border-top:none}
.sec-head{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-12)}
.sec-head .sec-rule{display:flex;align-items:baseline;gap:var(--sp-4);border-top:1px solid var(--tinta-22);padding-top:var(--sp-4)}
.surface-tinta .sec-head .sec-rule,.surface-preto .sec-head .sec-rule{border-top-color:var(--branco-15)}
.sec-intro{max-width:62ch;color:var(--tinta-70)}
.surface-tinta .sec-intro,.surface-preto .sec-intro{color:var(--branco-60)}
.grid-12{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media(min-width:768px){.grid-12{grid-template-columns:repeat(12,1fr)}}
.col-5,.col-6,.col-7{grid-column:1 / -1;min-width:0}
@media(min-width:768px){.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}}
.hairline{border:none;border-top:1px solid var(--tinta-12);margin-block:var(--sp-8)}
.surface-tinta .hairline{border-top-color:var(--branco-10)}
.plan-lines{position:absolute;inset:0;pointer-events:none}
.plan-lines i{position:absolute;top:0;bottom:0;width:1px;background:var(--tinta-08)}
.plan-lines i:nth-child(1){left:var(--sp-6)}
.plan-lines i:nth-child(2){right:var(--sp-6)}
.plan-lines i:nth-child(3){left:50%;background:var(--tinta-06);display:none}
@media(min-width:768px){
  .plan-lines i:nth-child(1){left:var(--sp-12)}
  .plan-lines i:nth-child(2){right:var(--sp-12)}
  .plan-lines i:nth-child(3){display:block}}
.surface-tinta .plan-lines i,.surface-preto .plan-lines i{background:var(--branco-05)}
/* precisa ficar acima da barra rolada (84px mobile / 92px desktop) */
section[id],footer[id]{scroll-margin-top:104px}
@media(min-width:768px){section[id],footer[id]{scroll-margin-top:112px}}

/* ░░ 05 · OVERLAYS — grain, progresso, toast, loader ░░ */
#grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;background-image:var(--grain);opacity:.05}
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:calc(var(--z-nav) + 2);background:transparent}
#progress span{display:block;height:100%;background:var(--acento);transform:scaleX(0);transform-origin:left center}
#toast{position:fixed;left:50%;bottom:var(--sp-8);z-index:var(--z-toast);transform:translate(-50%,16px);
  background:var(--tinta);color:var(--papel);padding:var(--sp-3) var(--sp-6);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r-1);box-shadow:var(--e-3);display:flex;align-items:center;gap:var(--sp-2);
  opacity:0;pointer-events:none;transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out)}
#toast.is-on{opacity:1;transform:translate(-50%,0)}
#toast .tick{color:var(--acento-hi)}
#loader{position:fixed;inset:0;z-index:var(--z-loader);background:var(--tinta);color:var(--papel);
  display:flex;align-items:flex-end;justify-content:space-between;padding:var(--sp-8) var(--sp-6)}
@media(min-width:768px){#loader{padding:var(--sp-12)}}
#loader .loader-bar{display:flex;align-items:baseline;justify-content:space-between;width:100%;
  border-top:1px solid var(--branco-15);padding-top:var(--sp-6)}
/* ░░ 05b · LOADER — rajada de obras em tela cheia ░░ */
/* cortes secos: cada foto entra por cima da anterior (z-index), sem fade.
   O scrim fixo no pé garante a leitura do contador sobre qualquer foto —
   sobre o fundo grafite ele é invisível, então pode ficar sempre ligado. */
.loader-flash{position:absolute;inset:0;overflow:hidden}
.loader-flash img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.loader-flash::after{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,19,18,.18) 0%,transparent 26%,transparent 60%,rgba(20,19,18,.78) 100%)}
.loader-pe{position:relative;z-index:30;width:100%}
/* logomarca branca no pé esquerdo, no mesmo eixo horizontal e com o mesmo
   tamanho da logo do header em repouso (78/102px): quando o painel sobe, a
   preta do menu assume o eixo */
#loader .loader-bar{align-items:flex-end}
.loader-logo{display:block;height:78px;width:auto;color:var(--papel);flex:none}
@media(min-width:768px){.loader-logo{height:102px}}
#loader .loader-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--branco-60)}
#counter{font-family:var(--font-display);font-weight:200;font-size:clamp(56px,8vw,110px);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ░░ 06 · NAVBAR ░░ */
#site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  height:76px;padding-inline:var(--sp-6);border-bottom:1px solid transparent;
  transition:background-color .5s ease,backdrop-filter .5s ease,border-color .5s ease,height .5s var(--ease-out),color .5s ease}
@media(min-width:768px){#site-header{padding-inline:var(--sp-12)}}
/* Barra rolada mais alta para a logomarca (lockup de 3 linhas) continuar legivel */
#site-header.is-scrolled{background:rgba(255,255,255,.78);color:var(--tinta);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--tinta-08);height:84px}
@media(min-width:768px){#site-header.is-scrolled{height:92px}}
.nav-logo{display:flex;align-items:center;min-width:0}
.nav-logo svg{height:34px;width:auto;color:currentColor;transition:height .5s var(--ease-out)}
#site-header.is-scrolled .nav-logo svg{height:42px}
@media(min-width:768px){#site-header.is-scrolled .nav-logo svg{height:50px}}
/* Logomarca 3x enquanto o usuario nao comeca o scroll (topo da dobra 1).
   So a altura muda entre os estados: alternar align-items/padding daria tranco,
   porque nenhum dos dois entra na lista de transition do #site-header. */
#site-header:not(.is-scrolled){height:132px}
#site-header:not(.is-scrolled) .nav-logo svg{height:78px}
@media(min-width:768px){
  #site-header:not(.is-scrolled){height:158px}
  #site-header:not(.is-scrolled) .nav-logo svg{height:102px}
}
/* 8 âncoras: só cabem ao lado da logomarca grande e do CTA a partir de 1460px —
   abaixo disso o menu hambúrguer assume (o overlay lista as mesmas 8) */
#site-nav{display:none;align-items:center;gap:var(--sp-4)}
@media(min-width:1460px){#site-nav{display:flex;gap:var(--sp-6)}}
#site-nav a{position:relative;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;opacity:.7;transition:opacity var(--d-fast) ease,color var(--d-fast) ease;padding-block:6px;white-space:nowrap}
#site-nav a:hover{opacity:1}
#site-nav a.nav-active{opacity:1}
#site-header.is-scrolled #site-nav a.nav-active{color:var(--acento)}
#site-nav a.nav-active::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor}
.nav-tools{display:flex;align-items:center;gap:var(--sp-3)}
.nav-cta{display:none;align-items:center;gap:var(--sp-2);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--tinta-22);border-radius:var(--r-pill);padding:11px 20px;min-height:40px;
  transition:border-color var(--d-fast) ease,background var(--d-fast) ease,color var(--d-fast) ease}
@media(min-width:640px){.nav-cta{display:inline-flex}}
.nav-cta:hover{background:var(--acento);border-color:var(--acento);color:var(--branco)}
#site-header.is-scrolled .nav-cta{border-color:var(--tinta-22)}
#site-header.is-scrolled .nav-cta:hover{border-color:var(--acento)}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--acento-hi)}
#menu-toggle{display:inline-flex;padding:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
@media(min-width:1460px){#menu-toggle{display:none}}
/* overflow-y: com 8 âncoras o overlay pode passar da altura em telas baixas */
#mobile-menu{position:fixed;inset:0;z-index:calc(var(--z-nav) + 1);background:var(--tinta);color:var(--papel);
  display:flex;flex-direction:column;justify-content:center;padding:var(--sp-12) var(--sp-8);
  overflow-y:auto;opacity:0;visibility:hidden}
#mobile-menu a{display:block;font-family:var(--font-display);font-weight:200;font-size:clamp(24px,6vw,40px);
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;line-height:1.75;white-space:nowrap}
#mobile-menu a span{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--acento-hi);margin-right:var(--sp-4)}
#mobile-close{position:absolute;top:var(--sp-6);right:var(--sp-6);padding:var(--sp-2);min-width:44px;min-height:44px}
/* logomarca do menu aberto: o JS sobrescreve top/left/height com a medida real
   da logo do header na abertura; estes valores são só o ponto de partida */
.menu-logo{position:absolute;top:27px;left:var(--sp-6);height:78px;width:auto;color:var(--papel)}

/* ░░ 07 · BOTÕES ░░ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-display);font-size:12.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  padding:0 var(--sp-8);height:52px;border-radius:var(--r-1);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none;
  transition:background var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .ico{width:16px;height:16px;flex:none}
.btn--primary{background:var(--tinta);color:var(--branco)}
.btn--primary:hover{background:var(--acento);box-shadow:var(--e-2)}
.btn--acento{background:var(--acento);color:var(--branco)}
.btn--acento:hover{background:#243B37;box-shadow:var(--e-2)}
.btn--secondary{border-color:var(--tinta-22);color:var(--tinta);background:transparent}
.btn--secondary:hover{border-color:var(--acento);color:var(--acento)}
.btn--light{background:var(--papel);color:var(--tinta)}
.btn--light:hover{background:var(--branco);box-shadow:var(--e-2)}
.btn--outline-light{border-color:var(--branco-40);color:var(--papel);background:transparent}
.btn--outline-light:hover{border-color:var(--acento-hi);color:var(--acento-hi)}
.btn--pill{border-radius:var(--r-pill)}
.btn--lg{height:64px;padding:0 var(--sp-12);font-size:13.5px}
.btn--link{height:auto;padding:0;letter-spacing:.18em;gap:var(--sp-2);min-height:44px}
.btn--link::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--acento);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--d-base) var(--ease-cine)}
.btn--link:hover::after{transform:scaleX(1)}
.surface-tinta .btn--link::after,.surface-preto .btn--link::after{background:var(--acento-hi)}
.btn.is-loading{pointer-events:none;color:transparent}
.btn.is-loading::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--branco-40);border-top-color:var(--branco);left:calc(50% - 9px);top:calc(50% - 9px);
  animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.btn--magnetic{will-change:transform}
@media(max-width:640px){
  .btn{white-space:normal;height:auto;min-height:52px;padding-block:13px;line-height:1.4;text-align:center;max-width:100%}
  .btn--lg{height:auto;min-height:60px;padding-inline:var(--sp-8)}
  .btn--link{text-align:left}
  .hero-ctas,.hero-ctas .btn{width:100%}
  .hero-ctas .btn--link{width:auto}
}
.btn-note{display:block;margin-top:var(--sp-3);font-size:12.5px;color:var(--tinta-70)}
.surface-tinta .btn-note,.surface-preto .btn-note{color:var(--branco-60)}

/* ░░ 08 · HERO DO SITE — fundo branco + lettering ░░ */
.hero-site{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--branco);color:var(--tinta)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;
  padding:150px var(--sp-6) var(--sp-16)}
@media(min-width:768px){.hero-inner{padding:180px var(--sp-12) 52px}}
/* flex-start + offset: com a lista de regioes a linha quebra em 2-4 linhas;
   o filete precisa acompanhar a primeira delas, nao o centro do bloco */
.hero-eyebrow{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-6);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--acento)}
.hero-eyebrow .rule{display:inline-block;width:46px;height:1px;background:var(--acento);
  flex:none;margin-top:.72em}
/* escala .t-h2 do DS. Sem nowrap: em 44px a 1a frase pede 1263px e o
   container tem 1184px — o overflow:hidden da mascara cortaria o final. */
.hero-title{font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:.08em;text-wrap:balance}
.hero-title .hl{display:block;overflow:hidden;color:var(--preto)}
.hero-title .hl--acento{color:var(--acento)}
.hero-title .hl > span{display:block;will-change:transform}
.hero-base{margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6);
  border-top:1px solid var(--tinta-12);padding-top:var(--sp-6)}
@media(min-width:900px){.hero-base{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--sp-12)}}
.hero-base .hero-sub{max-width:60ch;color:var(--tinta-70);font-size:16px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);flex:none}
.hero-scroll{position:absolute;left:50%;bottom:var(--sp-4);transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--tinta-70)} /* .45 dava 2,64:1 sobre o fundo branco novo */
.hero-scroll .arrow{display:inline-block;animation:scrollNudge 1.8s var(--ease-out) infinite}
@keyframes scrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ░░ 08b · DOBRA 2 — PLACA WIDESCREEN COM PIN (referência ODE) ░░ */
/* o pin congela a altura medida; se a barra do navegador some, sobra faixa —
   o fundo escuro na secao faz essa faixa desaparecer contra a foto */
.wide-sec{background:var(--grafite)}
.wide-stage{position:relative;height:100svh;overflow:hidden;background:var(--grafite)}
.wide-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);will-change:transform}
/* Texto so no rodape: o scrim volta a pesar embaixo e o miolo da foto fica limpo.
   A foto tem areas quase brancas (245) atras da legenda. */
.wide-stage .wide-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,18,.30) 0%,rgba(20,19,18,.20) 40%,rgba(20,19,18,.88) 100%)}
.wide-cap{position:absolute;inset-inline:0;bottom:0;z-index:2;color:var(--branco);
  padding:var(--sp-8) var(--sp-6) 104px; /* 104px libera o botao flutuante do WhatsApp no mobile */
  text-shadow:0 1px 3px rgba(20,19,18,.85),0 0 18px rgba(20,19,18,.6)}
@media(min-width:768px){.wide-cap{padding:var(--sp-12) var(--sp-12) var(--sp-16)}}
/* a margem fica no wrapper: dentro dele o overflow:hidden nao mascara a linha inteira */
.wide-cap > div{overflow:hidden}
.wide-cap > div.wl-eyebrow{margin-bottom:var(--sp-3)}
.wide-cap > div.wl-meta{margin-top:var(--sp-4)}
.wide-cap .wl{display:block;will-change:transform}
.wide-cap .wide-eyebrow{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--branco)}
/* escala .t-h3 do DS */
.wide-cap .wide-title{font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:.06em;max-width:18ch;margin:0}
.wide-cap .wide-meta{margin:0;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--branco)}

/* ░░ 08c · SEÇÃO 02 — O ESCRITÓRIO EM NÚMEROS (placa que segura + leitura que rola) ░░ */
/* A obra ocupa a altura inteira da dobra e congela ali (position:sticky) enquanto a
   coluna de leitura corre ao lado: headline, os dois números e o fecho. Sticky em vez
   do pin do ScrollTrigger — o pin congela a altura medida e, quando a barra do
   navegador móvel some, sobra faixa; sticky reflui sozinho e ainda funciona sem JS. */
/* vem logo depois do Mecanismo, também claro: o fio faz o corte que a cor não faz */
.bn{position:relative;padding-block:var(--sp-16);border-top:1px solid var(--tinta-08)}
@media(min-width:960px){.bn{padding-block:var(--sp-16) var(--sp-16)}}
.bn-wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--sp-6);
  display:grid;grid-template-columns:1fr;gap:var(--sp-12);align-items:start}
@media(min-width:768px){.bn-wrap{padding-inline:var(--sp-12)}}
@media(min-width:960px){.bn-wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--sp-16)}}
@media(min-width:1200px){.bn-wrap{gap:var(--sp-24)}}
/* topo do sticky = barra rolada (92px) + respiro; a placa nunca encosta na navbar */
.bn-media{--bn-top:112px}
.bn-frame{position:relative;overflow:hidden;border-radius:var(--r-1);
  box-shadow:var(--e-3);aspect-ratio:4/5;background:var(--grafite)}
.bn-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  will-change:transform}
@media(min-width:960px){
  .bn-media{position:sticky;top:var(--bn-top);height:calc(100svh - var(--bn-top) - var(--sp-8))}
  .bn-frame{aspect-ratio:auto;height:100%}
}
/* legenda da obra sobre a base da foto, como carimbo de prancha */
.bn-legenda{position:absolute;inset-inline:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);
  padding:var(--sp-16) var(--sp-6) var(--sp-6);color:var(--branco);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(20,19,18,0) 0%,rgba(20,19,18,.16) 45%,rgba(20,19,18,.80) 100%)}
.bn-legenda span{display:block;white-space:nowrap}
/* estreito demais para as duas pontas: a legenda vira duas linhas alinhadas à esquerda */
@media(max-width:600px){.bn-legenda{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}}
/* a coluna de leitura: cada bloco ocupa quase uma tela, e é esse comprimento
   que define por quanto tempo a foto fica congelada */
.bn-leitura{display:flex;flex-direction:column;gap:var(--sp-12)}
@media(min-width:960px){
  .bn-leitura{gap:0}
  .bn-bloco{min-height:58svh;display:flex;flex-direction:column;justify-content:center;
    padding-block:var(--sp-12)}
  /* a mesma altura da foto: a headline nasce centrada na placa, como na referência */
  .bn-bloco--intro{min-height:calc(100svh - var(--bn-top) - var(--sp-8));padding-top:0}
  .bn-bloco--fecho{min-height:0;padding-bottom:0}
}
.bn-bloco--intro{display:flex;flex-direction:column;gap:var(--sp-4);--bn-top:112px}
.bn-intro-rule{display:flex;align-items:baseline;gap:var(--sp-4);
  border-top:1px solid var(--tinta-22);padding-top:var(--sp-4)}
.bn-lead{max-width:46ch;color:var(--tinta-70)}
/* o número: mesmo corpo para os dois, para os algarismos dividirem a linha de base.
   Sem filete no topo: empilhado (≤959px) a regra .bn-bloco + .bn-bloco ainda
   separa os blocos, que ali ficam adjacentes. */
.bn-num{gap:var(--sp-6)}
.bn-fig{display:block;font-family:var(--font-display);font-weight:200;
  font-size:clamp(104px,14vw,208px);line-height:.82;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bn-lbl{margin-top:var(--sp-6);font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.2em;line-height:1.7;text-transform:uppercase;max-width:30ch}
.bn-ctx{margin-top:var(--sp-4);max-width:44ch;color:var(--tinta-70);font-size:15.5px}
.bn-bloco--fecho{border-top:1px solid var(--tinta-22);padding-top:var(--sp-8)}
.bn-bloco--fecho p{max-width:46ch}
@media(max-width:959px){
  .bn-bloco + .bn-bloco{border-top:1px solid var(--tinta-22);padding-top:var(--sp-8)}
}

/* ░░ 08d · SEÇÃO 01 — UMA ASSINATURA SÓ ░░ */
/* O lead corre em 7 colunas; o acordo entra ao lado, recuado atrás de um
   filete de acento — é a frase que o resto da página precisa sustentar. */
.uas-acordo{border-left:2px solid var(--acento);padding-left:var(--sp-6)}
.uas-acordo p{font-size:17px;line-height:1.6;color:var(--tinta);max-width:42ch}
@media(min-width:768px){.uas-acordo{margin-top:5px}} /* casa com a 1a linha do lead */

/* As três frentes: um fio único atravessa as três colunas e se desenha com o
   scroll. A continuidade que o texto afirma vira continuidade de desenho. */
.frentes{position:relative;margin-top:var(--sp-16);
  display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.frentes-fio{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--tinta-12)}
.frentes-fio i{display:block;width:100%;height:100%;background:var(--acento);
  transform:scaleY(0);transform-origin:top center}
.frente{position:relative;padding-left:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.frente::before{content:'';position:absolute;left:-4.5px;top:5px;
  width:8px;height:8px;border-radius:50%;background:var(--branco);border:1px solid var(--acento)}
.frente-idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--acento)}
.frente h3{font-family:var(--font-display);font-weight:350;
  font-size:clamp(19px,2vw,24px);letter-spacing:.03em}
.frente p{color:var(--tinta-70);font-size:15px;max-width:46ch}
@media(min-width:900px){
  .frentes{grid-template-columns:repeat(3,1fr);column-gap:var(--sp-12);margin-top:var(--sp-24)}
  .frentes-fio{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .frentes-fio i{transform:scaleX(0);transform-origin:left center}
  .frente{padding-left:0;padding-top:var(--sp-8)}
  .frente::before{left:0;top:-4.5px}
}
.uas-cta{margin-top:var(--sp-12)}

/* ░░ 08e · OBRAS EM DESTAQUE — placas alternadas (estrutura da ref. ODE) ░░ */
/* Alinhamento pelo pe: a legenda assenta na base da foto, nao no topo.
   A segunda placa espelha a primeira por grid-column explicito — com `order`
   a auto-alocacao do grid pode reposicionar o span de 7 colunas. */
.obra-placa{align-items:end}
.obra-placa + .obra-placa{margin-top:var(--sp-24)}
@media(min-width:768px){.obra-placa + .obra-placa{margin-top:var(--sp-32)}}
.obra-foto{position:relative;overflow:hidden}
/* height:auto e obrigatorio: o atributo height do <img> vira hint de CSS e
   ganharia do aspect-ratio, esticando a foto na altura intrinseca */
.obra-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media(min-width:768px){.obra-foto img{aspect-ratio:4/3}}
.obra-cap{display:flex;flex-direction:column;gap:var(--sp-4)}
@media(min-width:768px){.obra-cap{padding-left:var(--sp-8);padding-bottom:var(--sp-2)}}
.obra-nome{font-family:var(--font-display);font-weight:300;
  font-size:clamp(26px,3vw,38px);line-height:1.14;letter-spacing:.01em}
.obra-local{font-family:var(--font-mono);font-size:13px;color:var(--tinta-70);
  border-top:1px solid var(--tinta-12);padding-top:var(--sp-4)}
/* grid-row:1 nos dois: a foto vem antes no DOM e ocupa as colunas 6-12, entao
   a alocacao esparsa jogaria a legenda (colunas 1-5) para a linha de baixo */
@media(min-width:768px){
  .obra-placa--rev .obra-cap{grid-column:1 / span 5;grid-row:1;
    padding-left:0;padding-right:var(--sp-8);text-align:right}
  .obra-placa--rev .obra-foto{grid-column:6 / span 7;grid-row:1}
}

/* ░░ 09 · SELO GIRATÓRIO ░░ */
.selo{position:relative;width:132px;height:132px;display:grid;place-items:center}
.selo svg.selo-text{position:absolute;inset:0;animation:seloSpin 18s linear infinite}
.selo .selo-icon{width:44px;height:44px;color:var(--tinta)}
@keyframes seloSpin{to{transform:rotate(360deg)}}
.selo svg.selo-text text{font-family:var(--font-display);font-size:9.4px;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;fill:currentColor}

/* ░░ 12 · SOBRE — retrato + arco ░░ */
.sobre-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12);align-items:start}
@media(min-width:960px){.sobre-grid{grid-template-columns:5fr 7fr;gap:var(--sp-16)}}
.sobre-foto{position:relative}
.sobre-foto .reveal-wrap{position:relative;overflow:hidden;border-radius:var(--r-1);aspect-ratio:3/4;box-shadow:var(--e-3)}
.sobre-foto img{width:100%;height:100%;object-fit:cover}
.sobre-foto .selo{position:absolute;right:calc(-1 * var(--sp-6));bottom:calc(-1 * var(--sp-6));z-index:2;display:none}
@media(min-width:960px){.sobre-foto .selo{display:grid}}
.sobre-copy{display:flex;flex-direction:column;gap:var(--sp-6)}
.sobre-copy .lead{font-size:19px;line-height:1.65}
.sobre-copy p{color:var(--tinta-70);max-width:60ch}
/* A decisão que define o escritório entra como afirmação, não como parágrafo.
   Escopo em .sobre-copy porque `.sobre-copy p` (0,1,1) venceria a classe sozinha. */
.sobre-copy .sobre-decisao{font-family:var(--font-display);font-weight:300;
  font-size:clamp(20px,2.1vw,26px);line-height:1.26;letter-spacing:.01em;
  color:var(--tinta);max-width:24ch}
.sobre-copy .sobre-fecho{margin-top:var(--sp-2);
  border-top:1px solid var(--tinta-22);padding-top:var(--sp-6);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(18px,1.9vw,23px);line-height:1.32;letter-spacing:.02em;
  color:var(--acento);max-width:28ch}
/* onde e para quem: fecha a seção em largura cheia, fora da coluna do retrato */
.sobre-onde{margin-top:var(--sp-16);border-top:1px solid var(--tinta-22);
  padding-top:var(--sp-8);display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:960px){.sobre-onde{grid-template-columns:1fr 1fr;column-gap:var(--sp-16)}}
.sobre-onde p{color:var(--tinta-70);max-width:56ch}
.sobre-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-12)}

/* ░░ 13 · ETAPAS — timeline com fio que se desenha ░░ */
.etapas{position:relative;margin-top:var(--sp-8)}
.etapas .fio{position:absolute;left:7px;top:0;bottom:0;width:1px;background:var(--tinta-12)}
.etapas .fio i{display:block;width:100%;height:100%;background:var(--acento);transform:scaleY(0);transform-origin:top center}
.etapa{position:relative;display:grid;grid-template-columns:1fr;gap:var(--sp-3);
  padding:0 0 var(--sp-12) var(--sp-12)}
.etapa:last-child{padding-bottom:0}
.etapa::before{content:'';position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;
  background:var(--branco);border:1px solid var(--acento);transition:background var(--d-base) ease}
.etapa.is-on::before{background:var(--acento);box-shadow:0 0 0 6px var(--acento-10)}
.etapa .et-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4)}
.etapa .et-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--acento)}
.etapa h3{font-family:var(--font-display);font-weight:350;font-size:clamp(19px,2vw,24px);letter-spacing:.03em}
.etapa p{max-width:64ch;color:var(--tinta-70);font-size:15px}
@media(min-width:900px){
  .etapas .fio{left:calc(50% - .5px)}
  .etapa{grid-template-columns:1fr 1fr;column-gap:var(--sp-24);padding-left:0}
  .etapa::before{left:calc(50% - 7.5px)}
  .etapa .et-cell{grid-column:1;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3)}
  .etapa:nth-child(even) .et-cell{grid-column:2;text-align:left;align-items:flex-start}
  .etapa p{max-width:46ch}}

/* ░░ 13b · OBRA ASSINADA — leitura de progresso + número em escala ░░ */
/* O fio diz onde a linha chegou; a leitura diz em que etapa você está. Ela
   gruda no topo enquanto as seis etapas passam e solta ao fim do bloco. */
.etapas-wrap{position:relative}
.et-readout{display:none}
@media(min-width:768px){
  /* top casa com a altura do header rolado (92px daqui para cima): qualquer
     folga vira uma fresta por onde o texto da etapa passa visível */
  .et-readout{position:sticky;top:92px;z-index:var(--z-raise);
    display:flex;align-items:baseline;gap:var(--sp-4);
    margin-bottom:var(--sp-16);padding-block:var(--sp-4) var(--sp-3);
    border-bottom:1px solid var(--tinta-12);background:var(--branco);
    font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--acento)}
  .et-readout .rd-tot{color:var(--tinta-45)}
  .et-readout .rd-nome{margin-left:auto;font-family:var(--font-text);
    font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--tinta-70)}
}
/* o número deixa de ser rótulo e vira marca de página, na base do título */
.etapa .et-num{font-family:var(--font-display);font-weight:200;
  font-size:clamp(32px,3.8vw,50px);line-height:.9;letter-spacing:.02em;
  color:var(--acento);font-variant-numeric:tabular-nums;
  opacity:.4;transition:opacity var(--d-slow) var(--ease-out)}
.etapa.is-on .et-num{opacity:1}
.etapa .et-head{column-gap:var(--sp-6)}
/* empilhado, o numero fica sempre em linha propria: deixado no flex-wrap, ele
   cabia ao lado dos titulos curtos e quebrava nos longos */
@media(max-width:899px){
  .etapa .et-head{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
}

/* ░░ 13c · O SEU PAPEL — a divisão de responsabilidade ░░ */
/* O fio entre as colunas é o argumento da seção: de um lado as decisões, do
   outro a operação. Empilhado, o mesmo fio vira separador horizontal. */
/* empilhado, sem separador proprio: cada lista ja fecha com filete em cima e
   embaixo, e um terceiro fio criaria uma faixa vazia entre as duas */
.divisao{margin-top:var(--sp-16);display:grid;grid-template-columns:1fr;gap:var(--sp-16)}
@media(min-width:768px){
  .divisao{grid-template-columns:1fr 1fr;column-gap:var(--sp-16);margin-top:var(--sp-24)}
  .divisao > * + *{border-left:1px solid var(--tinta-22);padding-left:var(--sp-16)}
}
.div-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--acento)}
.div-sub{margin-top:var(--sp-2);color:var(--tinta-70);font-size:15px;max-width:36ch}
.div-lista{list-style:none;margin-top:var(--sp-8)}
.div-lista li{border-top:1px solid var(--tinta-12);padding-block:var(--sp-4);
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(17px,1.6vw,21px);line-height:1.3;letter-spacing:.01em}
.div-lista li:last-child{border-bottom:1px solid var(--tinta-12)}
.papel-fecho{margin-top:var(--sp-24);max-width:32ch;
  font-family:var(--font-display);font-weight:250;
  font-size:clamp(24px,2.8vw,36px);line-height:1.18;letter-spacing:.01em}
/* balance no <b>: sem ele a segunda frase quebra deixando "ela." sozinha */
.papel-fecho b{display:block;font-weight:400;color:var(--acento);text-wrap:balance}

/* ░░ 14 · PORTFÓLIO — catálogo + galeria ░░ */
.web-hero{position:relative;min-height:480px;display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--r-1);box-shadow:var(--e-3)}
.web-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.web-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,42,40,.30) 0%,rgba(43,42,40,.22) 32%,rgba(43,42,40,.82) 100%)}
.web-hero .scrim::after{content:'';position:absolute;inset:0;
  background:linear-gradient(76deg,rgba(43,42,40,.80) 0%,rgba(43,42,40,.44) 55%,transparent 78%)}
.web-hero .content .eyebrow{text-shadow:0 1px 3px rgba(20,19,18,.85)}
.web-hero .content{position:relative;z-index:2;width:100%;padding:var(--sp-8);color:var(--branco)}
@media(min-width:768px){.web-hero .content{padding:var(--sp-12)}}
.cat-list{list-style:none;border-top:1px solid var(--tinta-22);margin-top:var(--sp-8)}
.cat-row{position:relative;display:grid;grid-template-columns:4rem 1fr auto;align-items:baseline;gap:2vw;
  padding:1.5rem 0;border-bottom:1px solid var(--tinta-12);cursor:pointer;text-decoration:none;color:inherit}
.cat-no{color:var(--acento);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em}
.cat-name{font-family:var(--font-display);font-weight:300;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,3.2rem);line-height:1;color:var(--tinta);
  transition:letter-spacing .6s var(--ease-cine),color .5s ease,transform .6s var(--ease-cine)}
.cat-meta{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-45)}
.cat-thumb{display:none}
@media (hover:hover){
  .cat-row{transition:opacity .5s ease}
  .cat-list:hover .cat-row:not(:hover){opacity:.3}
  .cat-row:hover .cat-name{letter-spacing:.14em;color:var(--acento);transform:translateX(1.25rem)}}
@media (max-width:767px){
  .cat-row{grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center}
  .cat-meta{display:none}
  .cat-thumb{display:block;width:3.5rem;height:4.5rem;background-size:cover;background-position:center;border-radius:var(--r-1)}}
.cat-preview{position:fixed;top:0;left:0;z-index:var(--z-cursorui);pointer-events:none;
  width:clamp(200px,20vw,320px);aspect-ratio:4/5;background-size:cover;background-position:center;
  border-radius:var(--r-1);box-shadow:var(--e-4);filter:contrast(1.05);opacity:0;will-change:transform}
@media (max-width:767px){.cat-preview{display:none}}
.filtros{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-12) 0 var(--sp-8)}
.filtro{padding:10px 18px;min-height:40px;border:1px solid var(--tinta-22);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-70);
  transition:all var(--d-fast) ease}
.filtro:hover{border-color:var(--acento);color:var(--acento)}
.filtro[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--branco)}
.masonry{columns:1;column-gap:var(--sp-4)}
@media(min-width:640px){.masonry{columns:2}}
@media(min-width:1024px){.masonry{columns:3}}
.ph{position:relative;break-inside:avoid;margin-bottom:var(--sp-4);overflow:hidden;border-radius:var(--r-1);
  cursor:zoom-in;background:var(--papel)}
/* height:auto e obrigatorio: com width/height no <img> (anti-CLS), o atributo
   height viraria hint fixo e a foto esticaria na largura fluida */
.ph img{width:100%;height:auto;display:block;transition:transform var(--d-cine) var(--ease-cine)}
.ph:hover img{transform:scale(1.04)}
.ph .ph-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,42,40,0) 55%,rgba(43,42,40,.62) 100%);
  opacity:0;transition:opacity var(--d-base) ease}
.ph:hover .ph-veil,.ph:focus-within .ph-veil,.ph:focus .ph-veil{opacity:1}
.ph .ph-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  transform:translateY(8px);opacity:0;transition:all var(--d-base) var(--ease-out)}
.ph:hover .ph-meta,.ph:focus-within .ph-meta,.ph:focus .ph-meta{transform:none;opacity:1}
.ph .ph-name{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--branco);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;text-transform:uppercase}
.ph.is-hidden{display:none}
.lb{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(20,19,18,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--sp-6);
  opacity:0;visibility:hidden;transition:opacity var(--d-base) ease,visibility var(--d-base)}
.lb.is-open{opacity:1;visibility:visible}
.lb figure{position:relative;max-width:min(1100px,94vw);max-height:84svh;display:flex;flex-direction:column}
.lb img{max-width:100%;max-height:76svh;object-fit:contain;border-radius:var(--r-1)}
.lb .lb-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-4)}
.lb .lb-name{font-family:var(--font-mono);font-size:12px;color:var(--branco-80);letter-spacing:.08em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .lb-close{position:absolute;top:calc(-1 * var(--sp-2));right:calc(-1 * var(--sp-2));transform:translate(100%,-100%);
  padding:var(--sp-2);color:var(--branco-80);min-width:44px;min-height:44px}
@media(max-width:760px){.lb .lb-close{transform:none;top:calc(-1 * var(--sp-12));right:0}}
.lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--branco-15);color:var(--branco-80);
  transition:all var(--d-fast) ease}
.lb .lb-nav:hover{border-color:var(--acento-hi);color:var(--acento-hi)}
.lb .lb-prev{left:calc(-1 * var(--sp-16))}.lb .lb-next{right:calc(-1 * var(--sp-16))}
@media(max-width:1100px){.lb .lb-prev{left:var(--sp-2)}.lb .lb-next{right:var(--sp-2)}}

/* ░░ 15 · DEPOIMENTOS ░░ */
.depo-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-12)}
@media(min-width:960px){.depo-grid{grid-template-columns:repeat(3,1fr)}}
.depo{position:relative;border:1px dashed var(--tinta-22);border-radius:var(--r-1);padding:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-4);background:var(--branco)}
.depo .aspas{font-family:var(--font-display);font-weight:200;font-size:64px;line-height:.6;color:var(--acento-24)}
.depo h3{font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.depo p{font-size:14px;color:var(--tinta-70);font-style:italic}
.depo .ass{margin-top:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-45)}
.pendente{display:inline-block;font-family:var(--font-mono);font-style:normal;font-size:10.5px;letter-spacing:.08em;
  color:var(--concreto);border:1px dashed var(--tinta-22);border-radius:var(--r-1);padding:3px 8px;background:var(--tinta-04)}
.surface-tinta .pendente,.surface-preto .pendente{color:var(--branco-60);border-color:var(--branco-15);background:var(--branco-05)}

/* ░░ 16 · ASSINATURA (7.1 do DS) ░░ */
.blueprint-wrap{position:relative;border:1px solid var(--branco-15);border-radius:var(--r-1);
  background:var(--preto);overflow:hidden}
#asin-grid{position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 60px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 60px)}
#asin-svg{position:relative;display:block;width:100%;height:auto;will-change:transform}
#asin-svg text{font-family:var(--font-mono)}
#asin-tag{font-family:var(--font-display);text-transform:uppercase}
.bp-caption{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--branco-10);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--branco-40)}
.replay{position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:5;display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;min-height:40px;border:1px solid var(--branco-15);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--branco-60);
  transition:border-color var(--d-fast) ease,color var(--d-fast) ease}
.replay:hover{border-color:var(--acento-hi);color:var(--acento-hi)}
.replay .ico{width:12px;height:12px}

/* ░░ 17 · CONTATO — dobra inteira em branco ░░ */
.contato-demo{display:grid;grid-template-columns:1fr;gap:0;border-radius:var(--r-1);overflow:hidden;
  border:1px solid var(--tinta-08);box-shadow:var(--e-3)}
@media(min-width:900px){.contato-demo{grid-template-columns:1fr 1fr}}
/* o painel de apresentação era grafite; na dobra branca ele vira branco também,
   separado do formulário por um fio (embaixo empilhado, à direita no desktop) */
.contato-demo .info{background:var(--branco);color:var(--tinta);padding:var(--sp-12);
  display:flex;flex-direction:column;gap:var(--sp-8);justify-content:center;
  border-bottom:1px solid var(--tinta-08)}
@media(min-width:900px){.contato-demo .info{border-bottom:none;border-right:1px solid var(--tinta-08)}}
.contato-demo .formcol{background:var(--branco);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)}
@media(min-width:900px){.contato-demo .formcol{padding:var(--sp-12)}}
.info-list{display:flex;flex-direction:column;gap:var(--sp-3);font-weight:300;font-size:15px}
.info-list span{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.info-list .ico{width:16px;height:16px;color:var(--acento);stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.espera{display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-12)}
@media(min-width:900px){.espera{grid-template-columns:repeat(3,1fr)}}
.espera .item{border-top:1px solid var(--tinta-12);padding-top:var(--sp-4)}
.espera .item b{display:block;font-weight:400;font-family:var(--font-display);letter-spacing:.04em;font-size:16px;margin-bottom:var(--sp-2)}
.espera .item p{font-size:14px;color:var(--tinta-70)}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field label{font-family:var(--font-display);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-70)}
.field label .req{color:var(--acento)}
/* o asterisco marca o obrigatório; onde a maioria é obrigatória, o opcional
   também precisa se anunciar — senão o usuário assume que tudo trava o envio */
.field label .opc{color:var(--tinta-45);letter-spacing:.12em;font-size:10px}
.input,.textarea{width:100%;background:var(--branco);border:1px solid var(--tinta-22);border-radius:var(--r-1);
  padding:13px 16px;font-family:var(--font-text);font-size:15px;font-weight:300;color:var(--tinta);
  transition:border-color var(--d-fast) ease,box-shadow var(--d-fast) ease;appearance:none;min-height:48px}
.textarea{min-height:120px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--tinta-45)}
.input:hover,.textarea:hover{border-color:var(--tinta-45)}
.input:focus,.textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-10)}
.field.is-error .input,.field.is-error .textarea{border-color:#A43E3E;box-shadow:0 0 0 3px rgba(164,62,62,.08)}
.field .msg{display:none;align-items:center;gap:6px;font-size:12.5px;color:#A43E3E}
.field.is-error .msg{display:flex}
.form-ok{display:none;align-items:flex-start;gap:var(--sp-3);border:1px solid var(--acento-24);background:var(--acento-10);
  border-radius:var(--r-1);padding:var(--sp-4) var(--sp-6);font-size:14px;color:var(--tinta)}
.form-ok.is-on{display:flex}
.form-ok .ico{width:18px;height:18px;color:var(--acento);stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.faq{margin-top:var(--sp-12);border-top:1px solid var(--tinta-12)}
.faq details{border-bottom:1px solid var(--tinta-12)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-6) 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:350;font-size:17px;letter-spacing:.02em;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mais{flex:none;width:22px;height:22px;stroke:var(--acento);stroke-width:1.5;fill:none;stroke-linecap:round;
  transition:transform var(--d-base) var(--ease-out)}
.faq details[open] summary .mais{transform:rotate(45deg)}
.faq .resp{padding:0 0 var(--sp-6);max-width:70ch;color:var(--tinta-70);font-size:15px}

/* ░░ 17b · FAQ EM SEÇÃO PRÓPRIA (copy v2 §08) ░░ */
/* cabeça à esquerda, perguntas à direita: a assimetria dá ao acordeão a largura
   que ele precisa sem esticar a resposta além da medida legível */
.faq-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12)}
@media(min-width:960px){.faq-grid{grid-template-columns:5fr 7fr;column-gap:var(--sp-16);align-items:start}}
.faq-head .t-copyline{max-width:18ch;margin-top:var(--sp-4)}
#faq .faq{margin-top:0;border-top:1px solid var(--tinta-22)}
#faq .faq details{border-bottom-color:var(--tinta-22)}
#faq .faq summary{font-size:clamp(17px,1.7vw,21px);padding-block:var(--sp-6);align-items:flex-start}
#faq .faq .resp{max-width:62ch;font-size:15.5px}
/* acordeão animado: o JS controla max-height inline ao abrir/fechar; sem JS,
   o <details> abre nativo e estas transições simplesmente não disparam */
#faq .faq .resp{overflow:hidden;
  transition:max-height .55s var(--ease-cine),opacity .4s ease,transform .55s var(--ease-cine)}

/* ░░ 17c2 · INSTAGRAM — mosaico masonry: 3 colunas × 4 postagens ░░ */
/* três pilhas verticais; o JS reparte as 12 postagens em ziguezague (i%3) e
   aplica o ritmo de proporções 1:1 / 4:5 / 3:4 — as somas por coluna são
   iguais, então o mosaico varia por dentro mas fecha alinhado na base */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);align-items:start}
@media(min-width:640px){.ig-grid{gap:var(--sp-3)}}
.ig-grid:empty{display:none} /* sem feed, a dobra fica só com título e CTA */
.ig-col{display:grid;gap:var(--sp-2);align-content:start}
@media(min-width:640px){.ig-col{gap:var(--sp-3)}}
.ig-item{position:relative;display:block;aspect-ratio:1;overflow:hidden;
  border-radius:var(--r-1);background:var(--tinta-06)}
.ig-item--45{aspect-ratio:4/5}
.ig-item--34{aspect-ratio:3/4}
.ig-item img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-cine) var(--ease-cine)}
.ig-item:hover img{transform:scale(1.05)}
.ig-veil{position:absolute;inset:0;display:grid;place-items:center;color:var(--branco);
  background:rgba(43,42,40,.45);opacity:0;transition:opacity var(--d-base) ease}
.ig-item:hover .ig-veil,.ig-item:focus-visible .ig-veil{opacity:1}
.ig-veil .ico{width:22px;height:22px}

/* ░░ 17c · CONTATO — bloco do WhatsApp ░░ */
.zap-bloco{margin-top:var(--sp-16);border-top:1px solid var(--tinta-22);padding-top:var(--sp-8);
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:start}
@media(min-width:900px){.zap-bloco{grid-template-columns:1fr 1fr;column-gap:var(--sp-16)}}
.zap-msg{border-left:2px solid var(--acento);padding-left:var(--sp-6);
  color:var(--tinta-70);max-width:46ch}
.zap-msg em{font-style:italic}

/* ░░ 18 · FOOTER ░░ */
.footer{position:relative;overflow:hidden}
/* lockup completo em papel sobre o grafite; width:auto segue a proporção do viewBox.
   Sem headline ao lado, a logomarca é a única massa da coluna: cresce para
   sustentá-la, senão sobra vazio horizontal. */
.foot-logo{display:block;height:64px;width:auto;color:var(--papel)}
@media(min-width:768px){.foot-logo{height:96px}}
@media(min-width:1100px){.foot-logo{height:118px}}
/* sem headline no rodapé, a logomarca e as listas assentam no topo e o bloco
   encolhe: manter o respiro da versão antiga deixaria uma faixa vazia */
.footer .foot-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12);
  align-items:start;padding-block:var(--sp-16) var(--sp-12)}
@media(min-width:900px){.footer .foot-grid{grid-template-columns:3fr 7fr;padding-block:var(--sp-24) var(--sp-16)}}
/* colunas Site e Endereço coladas na borda oposta à logomarca, respeitando
   o mesmo padding do container; empilham abaixo de 600px */
.foot-cols{display:grid;grid-template-columns:auto;gap:var(--sp-8);align-content:start;justify-self:end}
@media(min-width:600px){.foot-cols{grid-template-columns:auto auto;column-gap:var(--sp-16)}}
@media(min-width:900px){.foot-cols{grid-template-columns:repeat(3,1fr);justify-self:stretch;column-gap:var(--sp-16)}}
.foot-col address{font-style:normal}
/* redes sob a logomarca: Instagram (link) e WhatsApp (abre o modal de captura) */
.foot-social{display:flex;gap:var(--sp-3);margin-top:var(--sp-8)}
.foot-social a,.foot-social button{display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--branco-15);border-radius:50%;color:var(--branco-80);
  transition:border-color var(--d-fast) ease,color var(--d-fast) ease}
.foot-social a:hover,.foot-social button:hover{border-color:var(--acento-hi);color:var(--acento-hi)}
.foot-social .ico{width:19px;height:19px}
.footer .cta-line{display:block;overflow:hidden}
.footer .cta-line > span{display:block}
.t-foot{font-family:var(--font-display);font-weight:200;font-size:clamp(36px,4.6vw,64px);line-height:1.06;letter-spacing:.10em;text-transform:uppercase;color:var(--papel)}
.cta-underline{position:relative;white-space:nowrap}
.cta-underline i{position:absolute;left:0;right:0;bottom:.02em;height:.06em;background:var(--acento-hi);
  transform:scaleX(0);transform-origin:left center}
.foot-col h3{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--branco-40);margin-bottom:var(--sp-4)}
.foot-col a,.foot-col span,.foot-col button{display:block;text-decoration:none;color:var(--branco-80);padding:4px 0;font-size:15px;font-weight:300;
  transition:color var(--d-fast) ease}
.foot-col button{appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;letter-spacing:inherit;text-transform:none;text-align:inherit}
.foot-col a:hover,.foot-col button:hover{color:var(--acento-hi)}
.foot-ghost{position:relative;pointer-events:none;user-select:none;line-height:.8;
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  font-size:clamp(64px,12.5vw,210px);text-align:left;color:var(--branco-05)}
/* folga embaixo = botão flutuante do WhatsApp (56px, a --sp-6 da borda) +
   --sp-6: sem ela o botão cobre o crédito no fim da página */
.foot-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);
  border-top:1px solid var(--branco-10);padding-block:var(--sp-6) calc(var(--sp-6) * 2 + 56px);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--branco-40)}
.foot-meta a{color:var(--branco-60);text-decoration:none;border-bottom:1px solid var(--branco-15);
  transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
.foot-meta a:hover{color:var(--acento-hi);border-color:var(--acento-hi)}
/* mobile: com o grid em coluna única, alinhar tudo pela linha de centro —
   logomarca, redes, coluna Site e a meta do rodapé */
@media(max-width:899px){
  .foot-logo{margin-inline:auto}
  .foot-social{justify-content:center}
  .foot-cols{justify-self:center;justify-items:center}
  .foot-col{text-align:center}
  .foot-meta{justify-content:center;text-align:center}
}

/* ░░ 19 · WHATSAPP FLUTUANTE ░░ */
.wa-float{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:var(--z-sticky);
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--acento);color:var(--branco);box-shadow:var(--e-3);text-decoration:none;
  transition:background var(--d-base) ease,transform var(--d-fast) var(--ease-out),box-shadow var(--d-base) ease;
  opacity:0;visibility:hidden}
.wa-float.is-on{opacity:1;visibility:visible}
.wa-float:hover{background:#243B37;box-shadow:var(--e-4)}
.wa-float:active{transform:scale(.94)}
.wa-float .ico{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ░░ 19b · MODAL DO WHATSAPP — captura antes da conversa ░░ */
/* overflow-y no fundo (e não só no painel): com o teclado do celular aberto a
   viewport encolhe e o painel precisa poder rolar dentro da tela que sobrou */
.wa-modal{position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(20,19,18,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--sp-4);overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity var(--d-base) var(--ease-out),visibility var(--d-base)}
.wa-modal.is-open{opacity:1;visibility:visible}
.wa-modal-painel{position:relative;width:100%;max-width:520px;
  background:var(--branco);border:1px solid var(--tinta-08);box-shadow:var(--e-4);
  padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);
  max-height:calc(100svh - var(--sp-8));overflow-y:auto;
  transform:translateY(18px) scale(.985);
  transition:transform var(--d-slow) var(--ease-expo)}
.wa-modal.is-open .wa-modal-painel{transform:none}
@media(min-width:640px){.wa-modal-painel{padding:var(--sp-12)}}
.wa-modal-painel .t-h4{margin-top:var(--sp-2)}
.wa-modal-fechar{position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2;
  display:grid;place-items:center;width:44px;height:44px;color:var(--tinta-45);
  transition:color var(--d-fast) ease}
.wa-modal-fechar:hover{color:var(--acento)}
/* o título precisa de espaço para não passar por baixo do X */
.wa-modal-painel > .eyebrow{padding-right:var(--sp-8)}
#wa-form{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}
#wa-form .textarea{min-height:96px}
#wa-form .btn{margin-top:var(--sp-2)}
@media(prefers-reduced-motion:reduce){
  .wa-modal-painel{transition:none;transform:none}}

/* ░░ 20 · REVEALS + REDUCED MOTION ░░ */
.ico{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.reveal-wrap{position:relative;overflow:hidden}
/* sem will-change permanente: os reveals sao one-shot e o GSAP ja promove camada durante o tween */
html.no-motion .gs-reveal,html.no-motion .clip-reveal{opacity:1 !important;transform:none !important;clip-path:none !important}
html.no-motion .clip-reveal img{transform:none !important}
/* Sem movimento: as fotos com zoom de entrada nao podem ficar presas nele */
html.no-motion .wide-stage img,html.no-motion .bn-frame img{transform:none !important}
html.qa-fixed .hero-site{min-height:720px;max-height:720px} /* QA headless: neutraliza 100svh */
html.qa-fixed .wide-stage{height:720px}
html.qa-fixed .bn-media{height:640px}
html.qa-fixed .bn-bloco{min-height:420px}
html.qa-fixed .bn-bloco--intro{min-height:520px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .selo svg.selo-text,.hero-scroll .arrow{animation:none !important}
  .wide-stage img,.bn-frame img{transform:none !important}
  #loader{display:none}}

/* ░░ 21 · PÁGINAS DE OBRA — hero de capa + galeria masonry ░░ */
/* A capa ocupa a dobra inteira e o nome da obra assenta no pé, sobre o escurecimento:
   a foto entrega o projeto antes de qualquer palavra. */
.obra-hero{position:relative;min-height:76svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--grafite)}
@media(min-width:768px){.obra-hero{min-height:84svh}}
.obra-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a barra flutua sobre a foto até rolar: texto claro + degradê próprio no topo,
   senão o menu escuro cai sobre área clara da imagem e some */
.obra-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:230px;z-index:1;
  background:linear-gradient(180deg,rgba(43,42,40,.58) 0%,rgba(43,42,40,0) 100%);pointer-events:none}
body.pg-obra #site-header:not(.is-scrolled){color:var(--branco)}
body.pg-obra #site-header:not(.is-scrolled) .nav-cta{border-color:var(--branco-40)}
body.pg-obra #site-header:not(.is-scrolled) .nav-cta:hover{background:var(--acento);border-color:var(--acento)}
.obra-hero .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,42,40,.30) 0%,rgba(43,42,40,.18) 38%,rgba(43,42,40,.88) 100%)}
.obra-hero .wrap{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;
  padding:0 var(--sp-6) var(--sp-16);color:var(--branco)}
@media(min-width:768px){.obra-hero .wrap{padding:0 var(--sp-12) var(--sp-24)}}
.obra-voltar{display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-8);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--branco-80);text-decoration:none;min-height:44px}
.obra-voltar:hover{color:var(--acento-hi)}
.obra-voltar .ico{width:15px;height:15px}
.obra-hero h1{font-family:var(--font-display);font-weight:250;
  font-size:clamp(38px,6.4vw,86px);line-height:1.02;letter-spacing:.01em;text-wrap:balance}
.obra-hero .obra-meta{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--branco-80)}
.obra-hero .obra-meta .pendente{color:var(--branco-60);border-color:var(--branco-15);background:var(--branco-05)}

.obra-galeria{padding-block:var(--sp-24)}
@media(min-width:768px){.obra-galeria{padding-block:var(--sp-32)}}
.obra-galeria .gal-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);border-bottom:1px solid var(--tinta-22);
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-12)}
.obra-nav{border-top:1px solid var(--tinta-22);margin-top:var(--sp-16);padding-top:var(--sp-8);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6)}

/* reveals sem GSAP: as páginas de obra não carregam a timeline da home */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ░░ 21b · PÁGINA DE OBRA — entrada da capa ░░ */
/* obra.js liga .hero-anim assim que roda (antes do primeiro paint): a capa
   assenta de 1.05 → 1 e o título sobe por trás da máscara. Sem JS não há
   classe, logo não há animação — a página nasce no estado final. */
.obra-hero h1{overflow:hidden}
.obra-hero h1 > span{display:block}
.pg-obra.hero-anim .obra-hero img{animation:obraCapa 1.8s var(--ease-cine) both}
.pg-obra.hero-anim .obra-hero h1 > span{animation:obraLinha 1.05s var(--ease-expo) .25s both}
.pg-obra.hero-anim .obra-voltar{animation:obraFade .8s var(--ease-out) .6s both}
.pg-obra.hero-anim .obra-hero .obra-meta{animation:obraFade .8s var(--ease-out) .75s both}
@keyframes obraCapa{from{transform:scale(1.05)}to{transform:none}}
@keyframes obraLinha{from{transform:translateY(112%)}to{transform:none}}
@keyframes obraFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* contador do lightbox (12 / 50) */
.lb .lb-count{font-family:var(--font-mono);font-size:12px;color:var(--branco-60);
  letter-spacing:.08em;flex:none;font-variant-numeric:tabular-nums}

/* ░░ 21c · MOSAICO DA OBRA — grid com row-span: cada foto na própria altura ░░ */
/* Grid em vez de columns: a ordem de leitura fica horizontal, e o span de
   linhas (obra.js calcula pela proporção width/height do <img>) deixa cada
   foto com a altura natural — vertical alta, horizontal baixa, sem corte.
   Horizontais viram destaque de ritmo: ph--wide (2/3) e ph--full (largura toda). */
.mosaico{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--sp-4);row-gap:0;
  grid-auto-rows:8px;grid-auto-flow:dense}
@media(min-width:640px){.mosaico{grid-template-columns:repeat(6,1fr)}}
.mosaico .ph{grid-column:span 1;margin-bottom:var(--sp-4)}
@media(min-width:640px){.mosaico .ph{grid-column:span 2}}
.mosaico .ph--wide{grid-column:span 2}
@media(min-width:640px){.mosaico .ph--wide{grid-column:span 4}}
.mosaico .ph--full{grid-column:1/-1}

/* ░░ 22 · DE PASSAGEM — três obras em tela cheia (ref. ODE "In Passing") ░░ */
/* A dobra fica presa (pin) por três telas. Cada obra é uma placa full-bleed:
   scrim leve, nome no pé à esquerda, contador no alto à direita. O movimento
   (fade + zoom-out) é do GSAP; aqui só o palco e a tipografia. */
.pas{background:var(--grafite)}
.pas-stage{position:relative;height:100svh;overflow:hidden;background:var(--grafite);color:var(--branco)}
.pas-slide{position:absolute;inset:0;margin:0}
.pas-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.pas-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,18,.40) 0%,rgba(20,19,18,.08) 38%,rgba(20,19,18,.78) 100%)}
.pas-cap{position:absolute;left:0;bottom:0;z-index:2;max-width:min(680px,92vw);
  padding:var(--sp-8) var(--sp-6) 104px; /* 104px libera o WhatsApp flutuante no mobile */
  text-shadow:0 1px 3px rgba(20,19,18,.85),0 0 18px rgba(20,19,18,.55)}
@media(min-width:768px){.pas-cap{padding:var(--sp-12) var(--sp-12) var(--sp-16)}}
.pas-nome{font-family:var(--font-display);font-weight:250;
  font-size:clamp(34px,4.8vw,66px);line-height:1.04;letter-spacing:.01em}
.pas-sub{margin-top:var(--sp-3);font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.06em;line-height:1.7;color:var(--branco-80);max-width:52ch}
.pas-link{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6);min-height:44px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--branco);text-decoration:none;border-bottom:1px solid var(--branco-40);
  transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
.pas-link:hover{color:var(--acento-hi);border-color:var(--acento-hi)}
.pas-link .ico{width:14px;height:14px}
/* carimbos fixos da dobra: rótulo à esquerda, contador à direita, abaixo da navbar */
.pas-tag,.pas-count{position:absolute;top:104px;z-index:3;margin:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--branco-80);text-shadow:0 1px 3px rgba(20,19,18,.85)}
@media(min-width:768px){.pas-tag,.pas-count{top:116px}}
.pas-tag{left:var(--sp-6)}
.pas-count{right:var(--sp-6);letter-spacing:.2em;font-variant-numeric:tabular-nums}
.pas-count .pas-tot{color:var(--branco-40);margin-left:var(--sp-2)}
@media(min-width:768px){.pas-tag{left:var(--sp-12)}.pas-count{right:var(--sp-12)}}
/* sem GSAP ou com reduced-motion: as três placas empilham em fluxo normal */
html.no-motion .pas-stage{height:auto}
html.no-motion .pas-slide{position:relative;inset:auto;height:78svh}
html.no-motion .pas-tag,html.no-motion .pas-count{display:none}