:root{
  --fundo:#FFFFFF;
  --fundo-2:#F3F1ED;
  --papel:#101012;
  --meio:#75716B;
  --tenue:rgba(16,16,18,.15);
  --vivo:#E8360F;
  --vivo-t:#C42A08;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --marg:clamp(20px,4.4vw,64px);
  --col:clamp(20px,3.4vw,52px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--papel);
  font-family:var(--serif);font-weight:300;font-size:clamp(16.5px,1.02vw,18.5px);line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;padding-bottom:96px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em}
b,strong{font-weight:500}
::selection{background:var(--vivo);color:#fff}

/* ---------- topo ---------- */
.topo{position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:22px var(--marg);mix-blend-mode:normal}
.topo.solido{position:sticky;background:linear-gradient(to bottom,var(--fundo) 64%,rgba(255,255,255,0))}
.topo.clara,.topo.clara .lang{color:#fff}
.topo.clara .marca span{color:rgba(255,255,255,.62)}
.topo.clara .lang{color:rgba(255,255,255,.72)}
.topo.clara .lang:hover{color:#fff}
.marca{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.marca span{color:var(--meio)}
.lang{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--meio);transition:.2s}
.lang:hover{color:var(--vivo-t)}

/* ---------- pílula fixa ---------- */
.pilula{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:stretch;background:var(--papel);color:#fff;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden}
.pilula button,.pilula a{background:none;border:0;color:#fff;font:inherit;letter-spacing:inherit;
  text-transform:inherit;padding:14px 24px;cursor:pointer;transition:.18s;display:block}
.pilula .sep{width:1px;background:rgba(255,255,255,.26);margin:9px 0}
.pilula button:hover,.pilula a:hover{background:var(--vivo);color:#fff}

/* ---------- menu em tela cheia ---------- */
.tela{position:fixed;inset:0;z-index:80;background:var(--fundo);display:none;
  padding:clamp(70px,10vh,130px) var(--marg) 130px;overflow-y:auto}
.tela.on{display:block}
.tela ul{list-style:none;margin:0;padding:0}
.tela li{border-top:1px solid var(--tenue)}
.tela li a{display:flex;align-items:baseline;gap:20px;padding:clamp(14px,2.4vw,26px) 0;
  font-size:clamp(30px,6.4vw,84px);line-height:1;font-weight:200;letter-spacing:-.02em;transition:.2s}
.tela li a .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--meio);
  align-self:flex-start;padding-top:.7em}
.tela li a:hover{color:var(--c,var(--vivo-t))}
.tela .pe{margin-top:clamp(34px,6vw,64px);display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meio)}
.tela .pe a:hover{color:var(--vivo-t)}

/* ---------- estrutura ---------- */
.rail{display:grid;grid-template-columns:minmax(140px,21%) minmax(0,54%);
  gap:var(--col);padding:0 var(--marg)}
.rail>.dir{grid-column:2}
.faixa{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(48px,7vw,104px)}
.faixa-m{padding-top:clamp(30px,4.4vw,64px);padding-bottom:clamp(30px,4.4vw,64px)}
.bleed{width:100%}
.bleed img{width:100%}
.bleed.foto{height:min(76svh,720px);overflow:hidden}
.bleed.foto img{height:100%;object-fit:cover;object-position:center 42%}
.banda{padding:0 var(--marg);display:flex;justify-content:center}
.banda img{width:auto;max-width:100%;max-height:84svh}
.rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--meio);display:block}
.rotulo+.rotulo{margin-top:5px}
.rotulo.viva{color:var(--vivo-t)}
h1,h2,h3{margin:0;font-weight:300;line-height:1.02;letter-spacing:-.02em;color:var(--vivo)}
h1{font-size:clamp(38px,6.6vw,104px)}
h1.menor{font-size:clamp(30px,4.2vw,62px);line-height:1.06}
h2{font-size:clamp(26px,3.6vw,52px);line-height:1.06}
h3{font-size:clamp(19px,1.7vw,24px);line-height:1.2;letter-spacing:-.01em}
.declara{font-size:clamp(21px,2.5vw,38px);line-height:1.24;font-weight:200;letter-spacing:-.015em}
.corpo{font-size:clamp(15.5px,.96vw,17px);line-height:1.62;color:#2C2A26}
.corpo b{color:var(--papel)}
.meio{color:var(--meio)}
.filete{border-top:1px solid var(--tenue);padding-top:16px}

/* ---------- blocos de texto em duas colunas ---------- */
.blocos{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,38px)}
.bloco h3{color:var(--papel);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:10px;font-weight:400}
.bloco h3 em{color:var(--vivo-t);font-style:normal}

/* ---------- obras ---------- */
.tira{padding:0 var(--marg)}
.obras{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,6vw,110px) var(--col);
  align-items:end}
.obra-item{grid-column:span 6}
.obra-item.larga{grid-column:1/8}
.obra-item.estreita{grid-column:8/13}
.obra-item.solta{grid-column:3/11}
.obra-item.baixa{grid-column:2/9}
.obra-fig{overflow:hidden;background:var(--fundo-2)}
.obra-fig img{width:100%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.obra-item a:hover .obra-fig img{transform:scale(1.025)}
.cap{margin-top:16px;display:flex;gap:18px;align-items:baseline;justify-content:space-between}
.cap-t{font-size:clamp(18px,1.6vw,26px);font-weight:300;letter-spacing:-.01em;
  color:var(--c,var(--papel));transition:.2s}
.obra-item a:hover .cap-t{opacity:.75}
.cap-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--meio);
  white-space:nowrap;text-transform:uppercase}

/* ---------- ficha ---------- */
dl.ficha{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.85}
dl.ficha dt{color:var(--meio);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:18px}
dl.ficha dt:first-child{margin-top:0}
dl.ficha dd{margin:3px 0 0;color:var(--papel)}
.nota{margin-top:32px;padding-top:18px;border-top:1px solid var(--tenue);font-style:italic;
  color:#4B4842;font-size:17px;line-height:1.5}
.navobra{display:flex;justify-content:space-between;gap:20px;padding-top:22px;
  border-top:1px solid var(--tenue);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meio);margin:clamp(48px,7vw,96px) var(--marg) 0}
.navobra a:hover{color:var(--vivo-t)}

/* ---------- botões ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:14px 26px;border-radius:999px;border:1px solid var(--tenue);
  color:var(--papel);transition:.2s}
.btn:hover{background:var(--vivo);border-color:var(--vivo);color:#fff}
.seta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vivo-t);display:inline-block;transition:.2s}
.seta:hover{opacity:.7}

/* ---------- abertura ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-veu{position:absolute;inset:0;background:linear-gradient(to bottom,
  rgba(8,8,10,.42) 0%,rgba(8,8,10,0) 26%,rgba(8,8,10,.22) 56%,rgba(8,8,10,.86) 100%)}
.hero .rail{position:relative;width:100%;padding-bottom:clamp(34px,5vw,64px);color:#fff;
  grid-template-columns:minmax(140px,21%) minmax(0,62%);align-items:end}
.hero h1{color:#FFFFFF;text-shadow:0 2px 44px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:#FFC531}
.hero .cred{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.74);text-transform:uppercase}

/* ---------- pesquisa ---------- */
.sec{padding-top:clamp(44px,6vw,88px)}
.sec .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--vivo-t);display:block;
  margin-bottom:10px}
.lista{list-style:none;margin:0;padding:0;counter-reset:o}
.lista li{counter-increment:o;padding:20px 0;border-top:1px solid var(--tenue);
  display:grid;grid-template-columns:52px 1fr;gap:14px}
.lista li::before{content:counter(o,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;color:var(--vivo-t);padding-top:5px}
.fases,.dialogos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col);margin-top:28px}
.fase,.dialogo{border-top:1px solid var(--tenue);padding-top:20px}
.fase .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--vivo-t)}
.fase h3{margin:14px 0 10px;color:var(--papel)}
.fase p,.dialogo p{font-size:15.5px;line-height:1.55;color:#3A3833;margin:0}
.dialogo .quem{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vivo-t);margin-bottom:12px}
.dialogo p{font-style:italic;color:#3A3833}
ol.refs{list-style:none;margin:22px 0 0;padding:0;columns:2;column-gap:var(--col);
  font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--meio)}
ol.refs li{break-inside:avoid;margin-bottom:14px}
ol.refs i{color:#3A3833}

/* ---------- processos ---------- */
.processos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(32px,4.4vw,70px) var(--col);
  align-items:start}
.proc{grid-column:span 2;margin:0}
.proc.w2{grid-column:span 3}
.proc figcaption{margin-top:14px;font-size:15px;line-height:1.5;color:#3A3833}
.proc .data{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--vivo-t);
  text-transform:uppercase;display:block;margin-bottom:6px}

/* ---------- sobre / contato ---------- */
.traj{list-style:none;margin:0;padding:0}
.traj li{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:18px 0;
  border-top:1px solid var(--tenue)}
.traj .ano{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--vivo-t);padding-top:4px}
.email-gd{font-size:clamp(24px,3.4vw,52px);font-weight:200;letter-spacing:-.02em;color:var(--vivo);
  display:inline-block;transition:.2s}
.email-gd:hover{opacity:.7}
address{font-style:normal;font-family:var(--mono);font-size:12px;line-height:2;color:var(--meio)}

/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--tenue);margin-top:clamp(50px,7vw,100px);
  padding:clamp(34px,4.4vw,58px) var(--marg);display:flex;flex-wrap:wrap;gap:22px;
  justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--meio)}
footer a:hover{color:var(--vivo-t)}
footer .rf{display:flex;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:200;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;width:auto}
.lb-x{position:absolute;top:20px;right:24px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:var(--meio);text-transform:uppercase}
.zoom{cursor:zoom-in}

@media (max-width:1080px){
  .rail,.hero .rail{grid-template-columns:1fr;gap:16px}
  .rail>.dir{grid-column:1}
  .fases,.dialogos{grid-template-columns:1fr;gap:26px}
  ol.refs{columns:1}
  .obra-item,.obra-item.larga,.obra-item.estreita,.obra-item.solta,.obra-item.baixa{grid-column:span 6}
  .processos{grid-template-columns:repeat(4,1fr)}
  .proc,.proc.w2{grid-column:span 2}
}
@media (max-width:660px){
  .obras{grid-template-columns:1fr}
  .obra-item,.obra-item.larga,.obra-item.estreita,.obra-item.solta,.obra-item.baixa{grid-column:1/-1}
  .processos{grid-template-columns:1fr}
  .proc,.proc.w2{grid-column:1/-1}
  .cap{flex-direction:column;gap:5px}
  .traj li{grid-template-columns:1fr;gap:5px}
  .lista li{grid-template-columns:34px 1fr}
  .pilula{bottom:16px}
  body{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}