/*
Theme Name: Matheus Bandeira Arquitetura
Theme URI: https://matheusbandeira.arq.br
Author: Roger — Tholz TI
Description: Tema exclusivo do escritório Matheus Bandeira Arquitetura. Base clara, breu em momentos calculados, grade de prancha e a linha de luz como assinatura.
Version: 1.1.8
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: matheusbandeira
*/

/* ==========================================================
   matheusbandeira.arq.br — v2
   Galeria clara, breu em três momentos, um fio de prancha
   e uma linha de luz que acende como LED.
   ========================================================== */

:root{
  --osso:#EFECE5;        /* base clara — reboco à luz do dia */
  --cal:#F7F5F0;         /* superfície elevada */
  --breu:#131316;        /* fundo escuro profundo */
  --carvao:#1C1C20;      /* superfície no escuro */
  --tinta:#1A191C;
  --cinza:#5F5A52;
  --nevoa:#ECE9E2;       /* texto sobre breu */
  --nevoa-2:#959087;
  --bronze:#8F5B36;      /* madeira, em microdose */
  --luz:#EFD6A0;         /* o LED */
  --fio:rgba(26,25,28,.14);
  --fio-e:rgba(236,233,226,.15);

  --clash:'Clash Display','Archivo',-apple-system,sans-serif;
  --suica:'Switzer',-apple-system,'Segoe UI',Roboto,sans-serif;
  --serifa:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --folha:1440px;
  --margem:clamp(1.4rem,5vw,5.5rem);
  --raio:16px;
  --curva:cubic-bezier(.16,1,.3,1);
  --curva-2:cubic-bezier(.7,0,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{
  margin:0;background:var(--osso);color:var(--tinta);
  font-family:var(--suica);font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
.js-anim body{animation:aparece .9s var(--curva) both}
@keyframes aparece{from{opacity:0}to{opacity:1}}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--luz);color:var(--breu)}

/* ---------------- tipografia ---------------- */
.display{
  font-family:var(--clash);font-weight:500;letter-spacing:-.02em;line-height:.98;
  text-wrap:balance;margin:0;
}
.display em{
  font-family:var(--serifa);font-style:italic;font-weight:400;
  font-size:1.12em;line-height:.9;letter-spacing:-.02em;
}
/* o itálico inclina à direita: folga para a máscara não cortar a última haste */
.display em .pal{padding-right:.08em;margin-right:-.08em}
.d-xl{font-size:clamp(2.9rem,8.4vw,7.2rem);letter-spacing:-.03em;line-height:.95}
.d-l{font-size:clamp(2.1rem,4.8vw,4.2rem);letter-spacing:-.025em}
.d-m{font-size:clamp(1.6rem,3vw,2.6rem)}
.etiqueta{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--cinza);margin:0 0 1.6rem;
}
.secao--escura .etiqueta,.capa .etiqueta{color:var(--nevoa-2)}
.lead{
  font-size:clamp(1.1rem,1rem + .55vw,1.4rem);line-height:1.55;
  font-weight:400;color:var(--cinza);max-width:44ch;
}
.secao--escura .lead{color:var(--nevoa-2)}
p{margin:0 0 1.2rem;max-width:58ch}
p:last-child{margin-bottom:0}
.texto p{color:var(--cinza)}
.secao--escura .texto p{color:var(--nevoa-2)}

/* ---------------- estrutura ---------------- */
.folha{max-width:var(--folha);margin:0 auto;padding-inline:var(--margem)}
.secao{padding-block:clamp(5.5rem,12vw,11rem);position:relative}
.secao--escura{background:var(--breu);color:var(--nevoa)}
.secao--escura h2,.secao--escura h3{color:var(--nevoa)}

/* cabeçalho das páginas internas */
.cab{padding-top:clamp(8.5rem,18vh,12rem)}
@media(max-width:899px){
  .cab{padding-top:4.8rem;padding-bottom:3.6rem}
  .cab .lead{margin-top:1.4rem!important}
}
.secao--clara + .secao--clara .folha > .grade{border-top:1px solid var(--fio);padding-top:clamp(3rem,6vw,5rem)}

/* grade de prancha: etiqueta | fio | conteúdo */
.grade{display:grid;gap:2rem}
@media(min-width:900px){
  .grade{grid-template-columns:10rem 1fr;gap:0}
  .grade > .etiqueta{position:sticky;top:8.5rem;align-self:start;margin:.5rem 1.6rem 0 0}
  .grade__corpo{border-left:1px solid var(--fio);padding-left:clamp(2.2rem,4.5vw,6rem);min-width:0}
  .secao--escura .grade__corpo{border-left-color:var(--fio-e)}
}

@media(max-width:899px){
  .grade > .etiqueta{border-top:1px solid var(--fio);padding-top:1.3rem;margin-bottom:.4rem}
  .secao--escura .grade > .etiqueta,.capa .grade > .etiqueta{border-top-color:var(--fio-e)}
  .secao--clara + .secao--clara .folha > .grade{border-top:0;padding-top:0}
}

/* fatos em linhas de fio */
.fatos{list-style:none;margin:3rem 0 0;padding:0;border-top:1px solid var(--fio)}
.secao--escura .fatos{border-top-color:var(--fio-e)}
.fatos li{
  display:grid;gap:.3rem 2rem;padding-block:1.15rem;
  border-bottom:1px solid var(--fio);font-size:.98rem;
}
.secao--escura .fatos li{border-bottom-color:var(--fio-e)}
@media(min-width:720px){.fatos li{grid-template-columns:11rem 1fr;align-items:baseline}}
.fatos b{
  font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cinza);
}
.secao--escura .fatos b{color:var(--nevoa-2)}
.fatos span{color:var(--tinta)}
.secao--escura .fatos span{color:var(--nevoa)}

/* ---------------- assinatura: a linha de luz ---------------- */
.luz{
  position:relative;height:1px;width:100%;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--luz) 8%,var(--luz) 92%,transparent);
  box-shadow:0 0 26px 1px rgba(239,214,160,.4);
}
.luz::after{
  content:"";position:absolute;top:-3px;left:-8%;width:96px;height:7px;border-radius:99px;
  background:radial-gradient(closest-side,rgba(239,214,160,.95),transparent 70%);
  filter:blur(1px);opacity:0;
}
.js-anim .luz{transform:scaleX(0);transition:transform 1.7s var(--curva)}
.js-anim .luz.vis{transform:scaleX(1)}
.js-anim .luz.vis::after{animation:percorre 2.3s var(--curva-2) .25s 1 both}
@keyframes percorre{
  0%{left:-8%;opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{left:103%;opacity:0}
}
.secao--escura > .luz{position:absolute;top:0;left:0}

/* ---------------- cabeçalho ---------------- */
.topo{
  position:fixed;inset:0 0 auto;z-index:60;border-bottom:1px solid transparent;
  transition:background .5s var(--curva),backdrop-filter .5s ease,border-color .5s ease;
}
.topo.solido{background:rgba(19,19,22,.78);backdrop-filter:blur(18px) saturate(1.15);border-bottom-color:var(--fio-e)}
.topo__int{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.15rem;transition:padding .5s var(--curva)}
.topo.solido .topo__int{padding-block:.85rem}
.marca{display:block;text-decoration:none;line-height:0}
.marca img{height:clamp(23px,3vw,30px);width:auto;display:block;transition:opacity .4s ease}
.marca:hover img{opacity:.72}
.menu{display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.6rem);list-style:none;margin:0;padding:0}
.menu a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nevoa);text-decoration:none;padding-block:.45rem;position:relative;display:block;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--luz);
  box-shadow:0 0 8px rgba(239,214,160,.8);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--curva);
}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu a[aria-current="page"]{color:var(--luz)}
.hamb{display:none;background:none;border:0;color:var(--nevoa);padding:.55rem;cursor:pointer}
.hamb span{display:block;width:23px;height:1.5px;background:currentColor;margin:5.5px 0;transition:transform .4s var(--curva),opacity .25s}
.topo.aberto .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topo.aberto .hamb span:nth-child(2){opacity:0}
.topo.aberto .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:899px){
  .topo nav{display:contents}
  .hamb{display:block}
  .menu{
    position:fixed;inset:0;flex-direction:column;justify-content:center;background:var(--breu);
    gap:2.4rem;opacity:0;visibility:hidden;transition:opacity .45s var(--curva),visibility .45s;
  }
  .menu a{font-size:1.1rem;letter-spacing:.24em;transform:translateY(16px);transition:transform .65s var(--curva)}
  .topo.aberto .menu{opacity:1;visibility:visible}
  .topo.aberto .menu a{transform:none}
  .topo.aberto{background:var(--breu)}
}

/* ---------------- botões ---------------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1.1rem 1.9rem;border:1px solid currentColor;background:none;color:inherit;
  border-radius:999px;transition:color .5s var(--curva),border-color .5s var(--curva);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(102%);transition:transform .55s var(--curva);border-radius:999px;
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none}
.btn--linha::before{background:var(--tinta)}
.btn--linha:hover,.btn--linha:focus-visible{color:var(--osso)}
.capa .btn--linha::before,.secao--escura .btn--linha::before,.rodape .btn--linha::before{background:var(--nevoa)}
.capa .btn--linha:hover,.capa .btn--linha:focus-visible,
.secao--escura .btn--linha:hover,.secao--escura .btn--linha:focus-visible,
.rodape .btn--linha:hover,.rodape .btn--linha:focus-visible{color:var(--breu)}
.btn--luz{background:var(--luz);border-color:var(--luz);color:var(--breu)}
.btn--luz::before{background:var(--breu);transform:translateY(-102%)}
.btn--luz:hover,.btn--luz:focus-visible{color:var(--luz)}
.acoes{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.8rem}

/* chip de disponibilidade */
.chip{
  display:inline-flex;align-items:center;gap:.65rem;margin:0 0 2rem;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nevoa);padding:.6rem 1.15rem;border:1px solid rgba(236,233,226,.26);
  border-radius:999px;backdrop-filter:blur(8px);background:rgba(19,19,22,.25);
}
.chip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--luz);
  box-shadow:0 0 10px 1px rgba(239,214,160,.9);
}
.js-anim .chip::before{animation:pulsa 2.6s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------- capa ---------------- */
.capa{position:relative;min-height:min(92svh,880px);display:flex;align-items:flex-end;background:var(--breu);overflow:hidden}
.capa__moldura{position:absolute;inset:-9% 0 -9%;will-change:transform}
.capa__img{width:100%;height:100%;object-fit:cover;transition:opacity 1.9s ease,transform 13s var(--curva)}
.js-anim .capa__img{opacity:0;transform:scale(1.045)}
.js-anim .capa__img.vis{opacity:1;transform:scale(1)}
.capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,17,.66) 0%,rgba(15,15,17,.12) 42%,rgba(15,15,17,.9) 100%);
}
.capa__int{position:relative;z-index:2;width:100%;padding-block:clamp(7rem,16vh,10rem) clamp(3.4rem,8vh,5.5rem);color:var(--nevoa)}
.capa h1{color:var(--nevoa);max-width:14ch}
.capa .lead{color:rgba(236,233,226,.82);margin-top:2rem}
.capa__luz{position:absolute;left:0;right:0;bottom:0;z-index:3}

/* ---------------- revelações ---------------- */
.rev{transition:opacity 1.15s var(--curva),transform 1.15s var(--curva)}
.js-anim .rev{opacity:0;transform:translateY(32px)}
.js-anim .rev.vis{opacity:1;transform:none}
.rev[data-atraso="1"]{transition-delay:.14s}
.rev[data-atraso="2"]{transition-delay:.28s}
.rev[data-atraso="3"]{transition-delay:.42s}

.quadro{position:relative;overflow:hidden;border-radius:var(--raio);background:var(--carvao);transition:clip-path 1.3s var(--curva)}
.js-anim .quadro{clip-path:inset(0 0 100% 0)}
.js-anim .quadro.vis{clip-path:inset(0 0 0 0)}
.quadro img{width:100%;height:100%;object-fit:cover;transition:transform 1.7s var(--curva)}
.js-anim .quadro img{transform:scale(1.05)}
.js-anim .quadro.vis img{transform:scale(1)}

.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.pal__i{display:inline-block;transform:translateY(118%);transition:transform 1.05s var(--curva)}
.mascara.vis .pal__i{transform:none}

/* ---------------- obras ---------------- */
.obras{display:grid;gap:clamp(1.4rem,2.6vw,2.4rem)}
@media(min-width:840px){.obras{grid-template-columns:repeat(2,1fr)}.obra--larga{grid-column:1/-1}}
.obra{position:relative;display:block;text-decoration:none;color:var(--nevoa);border-radius:var(--raio);overflow:hidden}
.obra .quadro{aspect-ratio:3/2;border-radius:var(--raio)}
.obra--larga .quadro{aspect-ratio:16/9}
.obra:hover .quadro img,.obra:focus-visible .quadro img{transform:scale(1.035)}
.obra__leg{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.4rem,3vw,2.3rem);
  background:linear-gradient(180deg,transparent,rgba(13,13,15,.92));
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  transition:transform .95s var(--curva) .25s,opacity .95s var(--curva) .25s;
}
.js-anim .obra__leg{transform:translateY(8px);opacity:0}
.js-anim .obra__leg.vis{transform:none;opacity:1}
.obra__leg .etiqueta{margin:0;color:var(--luz)}
.obra__leg h3{
  margin:.4rem 0 0;font-family:var(--clash);font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.9rem);letter-spacing:-.02em;line-height:1.02;
}
.obra__seta{
  flex:none;width:2.8rem;height:2.8rem;border:1px solid rgba(236,233,226,.4);border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:1rem;opacity:.7;
  transition:transform .6s var(--curva),background .5s ease,color .5s ease,border-color .5s ease,opacity .5s ease;
}
.obra:hover .obra__seta{transform:translate(3px,-3px);background:var(--luz);border-color:var(--luz);color:var(--breu);opacity:1}

/* ---------------- antes e depois ---------------- */
.comp{
  position:relative;width:100%;aspect-ratio:6/5;max-height:82svh;overflow:hidden;
  background:var(--carvao);touch-action:pan-y;user-select:none;cursor:ew-resize;
  border-radius:var(--raio);transition:clip-path 1.3s var(--curva);
}
.js-anim .comp{clip-path:inset(0 0 100% 0)}
.js-anim .comp.vis{clip-path:inset(0 0 0 0)}
.comp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.comp__depois{clip-path:inset(0 0 0 var(--corte,50%))}
.comp__pega{position:absolute;top:0;bottom:0;left:var(--corte,50%);width:1.5px;background:var(--luz);box-shadow:0 0 24px rgba(239,214,160,.75);pointer-events:none;z-index:3}
.comp__botao{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:58px;height:58px;border-radius:50%;background:var(--luz);color:var(--breu);
  display:grid;place-items:center;font-family:var(--mono);font-size:.82rem;letter-spacing:-.08em;
  box-shadow:0 10px 34px rgba(10,10,12,.45);
}
.comp__tag{
  position:absolute;top:1.15rem;z-index:2;padding:.5rem .95rem;border-radius:999px;
  background:rgba(13,13,15,.62);backdrop-filter:blur(10px);color:var(--nevoa);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;
}
.comp__tag--a{left:1.15rem}
.comp__tag--d{right:1.15rem}
.comp__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.comp__range:focus-visible ~ .comp__pega{outline:2px solid var(--luz);outline-offset:8px}

/* ---------------- método / princípios ---------------- */
.etapas{display:grid;border-top:1px solid var(--fio)}
.secao--escura .etapas{border-top-color:var(--fio-e)}
.etapa{display:grid;gap:.55rem 2.2rem;padding-block:clamp(1.8rem,3vw,2.6rem);border-bottom:1px solid var(--fio)}
.secao--escura .etapa{border-bottom-color:var(--fio-e)}
@media(min-width:560px) and (max-width:919px){
  .etapa{grid-template-columns:3.6rem 1fr;align-items:baseline}
  .etapa p{grid-column:2}
}
@media(min-width:920px){.etapa{grid-template-columns:4.5rem 17rem 1fr;align-items:baseline}}
.etapa__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;color:var(--bronze)}
.secao--escura .etapa__n{color:var(--luz)}
.etapa h3{margin:0;font-family:var(--clash);font-weight:500;font-size:1.3rem;letter-spacing:-.015em}
.etapa p{margin:0;color:var(--cinza);max-width:52ch}
.secao--escura .etapa p{color:var(--nevoa-2)}

/* ---------------- projetos ---------------- */
.galeria{display:grid;gap:clamp(1rem,2vw,1.7rem)}
.galeria--par{grid-template-columns:1fr}
@media(min-width:780px){.galeria--par{grid-template-columns:1fr 1fr}}
.galeria .quadro{aspect-ratio:3/2}
.projeto + .projeto{margin-top:clamp(5rem,10vw,9rem);border-top:1px solid var(--fio);padding-top:clamp(4rem,8vw,7rem)}
.projeto__cab{display:grid;gap:1.8rem;margin-bottom:2.8rem}
@media(min-width:980px){.projeto__cab{grid-template-columns:1.1fr .9fr;align-items:end;gap:4rem}}

/* ---------------- retrato ---------------- */
.bio{display:grid;gap:clamp(2rem,4vw,3rem)}
@media(min-width:880px){.bio{grid-template-columns:15rem 1fr;gap:clamp(2.6rem,5vw,4.5rem);align-items:start}}
.retrato{margin:0;max-width:15rem}
.retrato .quadro{aspect-ratio:4/5;border-radius:var(--raio)}
.retrato figcaption{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bronze);line-height:2;
}
.retrato figcaption span{display:block;color:var(--cinza)}
.secao--escura .retrato figcaption span{color:var(--nevoa-2)}

/* ---------------- contato ---------------- */
.contatos{list-style:none;margin:0;padding:0;border-top:1px solid var(--fio-e)}
.contatos li{border-bottom:1px solid var(--fio-e)}
.secao--clara .contatos,.secao--clara .contatos li{border-color:var(--fio)}
.contatos a{text-decoration:none;display:grid;gap:.45rem;padding-block:1.7rem;transition:padding-left .55s var(--curva)}
.contatos a:hover,.contatos a:focus-visible{padding-left:1.1rem}
.contatos span{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--nevoa-2)}
.secao--clara .contatos span{color:var(--cinza)}
.contatos strong{
  font-family:var(--clash);font-weight:500;font-size:clamp(1.2rem,2.4vw,1.7rem);
  letter-spacing:-.015em;transition:color .4s ease;
}
.contatos a:hover strong,.contatos a:focus-visible strong{color:var(--luz)}
.secao--clara .contatos a:hover strong{color:var(--bronze)}

/* ---------------- chamada ---------------- */
.chamada{display:grid;gap:2.6rem}
@media(min-width:980px){.chamada{grid-template-columns:1.25fr .95fr;align-items:end}}

/* ---------------- rodapé ---------------- */
.rodape{background:var(--breu);color:var(--nevoa-2);padding-block:clamp(4rem,8vw,6rem) 0;border-top:1px solid var(--fio-e)}
.rodape__int{display:grid;gap:3rem;padding-bottom:clamp(3rem,6vw,4.5rem)}
@media(min-width:880px){.rodape__int{grid-template-columns:1.6fr 1fr 1fr}}
.rodape h4{font-family:var(--mono);font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;color:var(--nevoa);margin:0 0 1.3rem;font-weight:500}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.rodape a{text-decoration:none;transition:color .35s ease}
.rodape a:hover,.rodape a:focus-visible{color:var(--luz)}
.rodape__marca{height:40px;width:auto;display:block;margin-bottom:1.5rem}
.rodape__base{
  padding-block:1.7rem;border-top:1px solid var(--fio-e);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------------- flutuantes ---------------- */
.zap{
  position:fixed;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);z-index:70;
  width:56px;height:56px;border-radius:50%;background:var(--luz);color:var(--breu);
  display:grid;place-items:center;box-shadow:0 12px 40px rgba(10,10,12,.4);
  transition:transform .7s var(--curva),opacity .5s ease,box-shadow .4s ease;
}
.js-anim .zap{transform:translateY(90px);opacity:0}
.js-anim .zap.vis{transform:none;opacity:1}
.zap:hover,.zap:focus-visible{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 48px rgba(10,10,12,.5)}
.zap svg{width:26px;height:26px}

.cortina{position:fixed;inset:0;z-index:200;background:var(--breu);transform:translateY(100%);pointer-events:none}
.cortina.entra{transform:translateY(0);transition:transform .6s var(--curva-2)}

/* ---------------- acessibilidade ---------------- */
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.secao--escura :focus-visible,.topo :focus-visible,.capa :focus-visible,.rodape :focus-visible{outline-color:var(--luz)}
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--luz);color:var(--breu);padding:1rem 1.4rem;font-family:var(--mono);font-size:.75rem}
.pular:focus{left:0}

@media(max-width:520px){
  .acoes{flex-direction:column;align-items:stretch}
  .btn{justify-content:center;text-align:center}
  .capa{min-height:min(96svh,880px)}
  .capa__int{padding-bottom:3rem}
  .capa .lead{margin-top:1.6rem}
  .d-xl{font-size:clamp(2.7rem,13vw,3.6rem)}
  .d-l{font-size:clamp(1.9rem,9vw,2.6rem)}
  .obra__seta{display:none}
  .comp__botao{width:50px;height:50px}
  .fatos li{padding-block:1rem}
  .contatos a:hover,.contatos a:focus-visible{padding-left:.5rem}
  .rodape__base{flex-direction:column;gap:.5rem}
}

/* ---------------- destravamento automático ----------------
   Nada no site depende de JavaScript para aparecer. Se o observador
   de rolagem não disparar (navegador, extensão, emulação), estas
   animações CSS completam a revelação sozinhas. Em navegador saudável,
   os elementos já estão visíveis quando elas chegam — efeito nulo. */
@keyframes mb-abre{to{clip-path:inset(0 0 0 0)}}
@keyframes mb-mostra{to{opacity:1;transform:none}}
.js-anim .quadro,.js-anim .comp{animation:mb-abre 1s var(--curva) 1.4s forwards}
.js-anim .quadro img{animation:mb-mostra 1.2s var(--curva) 1.4s forwards}
.js-anim .capa__img,.js-anim .rev,.js-anim .obra__leg,.js-anim .zap,.js-anim .luz{animation:mb-mostra .9s var(--curva) 1.9s forwards}
.js-anim .pal__i{animation:mb-mostra .7s var(--curva) 2.1s forwards}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js-anim .rev,.js-anim .capa__img,.js-anim .obra__leg,.js-anim .zap{opacity:1;transform:none}
  .js-anim .luz{transform:scaleX(1)}
  .js-anim .quadro,.js-anim .comp{clip-path:none}
  .js-anim .quadro img{transform:none}
  .pal__i{transform:none}
  .cortina{display:none}
}