/* Acácio · 2026
   Claro. A marca desce, se funde e vira a silhueta do empreendimento;
   as linhas azuis continuam sendo desenhadas enquanto a página rola. */
:root{
  --papel:#F5F2EC; --areia:#E7DFD2; --areia-2:#EFE9DE;
  --azul:#0B2234; --azul-2:#13344C; --noite:#061521;
  --ouro:#B8924A; --ouro-claro:#D2B06A;
  --texto:#2A3C4D; --fraco:#73838F; --linha:rgba(11,34,52,.14);
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --gut:clamp(20px,5vw,80px);
  --max:1360px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--display);font-weight:400;font-size:clamp(15px,1vw,16.5px);line-height:1.8;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--azul);color:var(--papel)}

h1,h2,h3{margin:0;font-weight:200;line-height:1.02;letter-spacing:-.025em;color:var(--azul);text-wrap:balance}
h1{font-size:clamp(3rem,10vw,9rem)}
h2{font-size:clamp(2.4rem,6.4vw,5.6rem);max-width:11em}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:400;letter-spacing:-.005em}
.fina{font-weight:100}
.ital{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
.ouro{color:var(--ouro)}
p{margin:0 0 1.2em;max-width:60ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.6;font-weight:300;color:var(--azul-2)}
.rot{font-size:.62rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--ouro);
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.6rem}
.rot::after{content:"";flex:1;height:1px;background:var(--linha)}
.nota{font-size:.75rem;line-height:1.65;color:var(--fraco);max-width:56ch;border-left:1px solid var(--linha);padding-left:1rem}

/* ───────── cabeçalho ───────── */
.topo{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(14px,1.8vw,20px) var(--gut);
  padding-top:calc(clamp(14px,1.8vw,20px) + env(safe-area-inset-top,0px));
  transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
.topo.solido{background:rgba(245,242,236,.88);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom-color:var(--linha)}
.topo .marca{display:flex;align-items:center;opacity:0;transform:translateY(-6px);transition:opacity .6s,transform .6s}
.topo.solido .marca{opacity:1;transform:none}
.topo .marca img{width:auto;display:none}
.topo .marca .simbolo{display:block;height:34px}
@media(min-width:721px){.topo .marca .simbolo{display:none}.topo .marca .assin{display:block;height:46px}}
.menu{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2rem);
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--azul)}
.menu a{opacity:.62;transition:opacity .3s}
.menu a:hover,.menu a:focus-visible{opacity:1}
@media(max-width:860px){.menu a:not(.cta){display:none}}
.menu .cta{opacity:1;border:1px solid var(--azul);padding:.65rem 1.1rem;transition:background .35s,color .35s}
.menu .cta:hover{background:var(--azul);color:var(--papel)}

/* ───────── abertura: a fusão ───────── */
.fusao{position:relative;height:290svh}
.fusao .palco{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:var(--papel)}
.fusao svg.cena{position:absolute;inset:0;width:100%;height:100%}
.fusao .dizer{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(40px,8vh,96px);
  max-width:var(--max);margin-inline:auto;pointer-events:none}
.fusao .dizer .env{max-width:min(100%,44ch);margin-inline:0}
.fusao h1{font-size:clamp(2.6rem,6.2vw,5.8rem)}
.fusao .dizer .in{opacity:0;transform:translateY(22px)}
.fusao .pista{position:absolute;left:50%;bottom:clamp(18px,3vh,32px);transform:translateX(-50%);
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fraco);display:flex;align-items:center;gap:.7rem}
.fusao .pista i{display:block;width:1px;height:30px;background:linear-gradient(180deg,var(--ouro),transparent)}

/* ───────── estrutura ───────── */
.faixa{position:relative;padding-block:clamp(84px,14vh,190px)}
.faixa.areia{background:var(--areia)}
.faixa.escura{background:var(--azul);color:#CFD8E0}
.faixa.escura h1,.faixa.escura h2,.faixa.escura h3{color:var(--papel)}
.faixa.escura .lead{color:var(--areia)}
.faixa.escura .rot{color:var(--ouro-claro)}
.faixa.escura .rot::after{background:rgba(255,255,255,.18)}
.faixa.escura .nota{color:#8FA0AE;border-left-color:rgba(255,255,255,.18)}
.env{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.duas{display:grid;gap:clamp(32px,4vw,72px)}
@media(min-width:900px){.duas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.duas.l40{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media(max-width:899px){.duas.l40{grid-template-columns:1fr}}

/* linhas de contorno ao fundo */
.contorno{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.contorno svg{position:absolute;width:140%;height:auto;left:-20%;opacity:.5}
.faixa>.env{position:relative;z-index:1}

/* ───────── mídia ───────── */
.painel{position:relative;overflow:hidden;background:var(--azul)}
.painel video,.painel img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.painel.r169{aspect-ratio:16/9}
.painel.r45{aspect-ratio:4/5}
.painel.r11{aspect-ratio:1/1}
.painel:hover video,.painel:hover img{transform:scale(1.04)}
.painel figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.4rem 1rem;
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(6,21,33,.75),transparent)}
.sangra{width:100vw;margin-left:50%;transform:translateX(-50%)}

/* ───────── capítulo com título gigante sobre a mídia ───────── */
.capitulo{position:relative;min-height:min(104svh,980px);display:flex;align-items:flex-end;overflow:hidden;
  padding:0 var(--gut) clamp(48px,8vh,110px)}
.capitulo .fundo{position:absolute;inset:0}
.capitulo .fundo video,.capitulo .fundo img{width:100%;height:100%;object-fit:cover}
.capitulo .veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,21,33,.45) 0%,rgba(6,21,33,.1) 40%,rgba(6,21,33,.88) 100%)}
.capitulo .env{position:relative;z-index:2;width:100%;padding-inline:0}
.capitulo h2{color:#fff}
.capitulo .lead{color:rgba(255,255,255,.88)}
.capitulo .rot{color:var(--ouro-claro)}
.capitulo .rot::after{background:rgba(255,255,255,.3)}

/* ───────── dono ───────── */
.retrato{position:relative;aspect-ratio:4/5;background:var(--areia);overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--linha)}
.retrato img{width:100%;height:100%;object-fit:cover}
.retrato .vazio{text-align:center;padding:2rem;max-width:30ch}
.retrato .vazio b{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ouro);margin-bottom:.9rem;font-weight:500}
.retrato .vazio span{font-size:.85rem;color:var(--fraco);line-height:1.6}
.assina{margin-top:1.8rem;font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--azul)}
.assina small{display:block;font-family:var(--display);font-style:normal;font-size:.58rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--fraco);margin-top:.5rem}

/* ───────── números ───────── */
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linha);margin-top:clamp(32px,5vh,56px)}
@media(min-width:760px){.nums{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nums div{background:var(--papel);padding:1.6rem 1rem 1.6rem 0;min-width:0}
.faixa.areia .nums div{background:var(--areia)}
.faixa.escura .nums{background:rgba(255,255,255,.16)}
.faixa.escura .nums div{background:var(--azul)}
.nums b{display:block;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:100;color:var(--azul);line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.faixa.escura .nums b{color:var(--papel)}
.nums span{display:block;margin-top:.7rem;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fraco)}
.faixa.escura .nums span{color:#8FA0AE}

/* ───────── passos ───────── */
.passos{list-style:none;margin:clamp(32px,5vh,56px) 0 0;padding:0}
.passos li{border-top:1px solid var(--linha);padding:clamp(20px,2.4vw,34px) 0;
  display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1.2rem;align-items:start;
  transition:padding-left .5s cubic-bezier(.2,.7,.3,1),background .5s}
.passos li:last-child{border-bottom:1px solid var(--linha)}
.passos li:hover{padding-left:1.2rem;background:linear-gradient(90deg,rgba(184,146,74,.08),transparent 60%)}
.passos .n{font-size:.62rem;letter-spacing:.2em;font-weight:500;color:var(--ouro);padding-top:.5rem;font-variant-numeric:tabular-nums}
.passos p{margin:.5rem 0 0;font-size:.95rem;color:var(--fraco);max-width:52ch}

/* ───────── vitrine com preview no cursor ───────── */
.vitrine{margin-top:clamp(32px,5vh,56px);position:relative}
.vitrine ul{list-style:none;margin:0;padding:0}
.vitrine li{border-top:1px solid var(--linha);position:relative}
.vitrine li:last-child{border-bottom:1px solid var(--linha)}
.vitrine a{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:clamp(16px,1.9vw,26px) 0;transition:padding-left .55s cubic-bezier(.2,.7,.3,1),color .4s;cursor:default}
.vitrine a:hover{padding-left:1.4rem;color:var(--ouro)}
.vitrine .t{font-size:clamp(1.25rem,2.6vw,2.2rem);font-weight:200;letter-spacing:-.02em;color:var(--azul);transition:color .4s}
.vitrine a:hover .t{color:var(--ouro)}
.vitrine .c{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fraco);white-space:nowrap}
.espia{position:fixed;top:0;left:0;width:clamp(240px,22vw,340px);aspect-ratio:4/3;
  pointer-events:none;z-index:70;opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.3,1);overflow:hidden;
  box-shadow:0 30px 70px rgba(11,34,52,.28)}
.espia.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.espia img{width:100%;height:100%;object-fit:cover}
@media(hover:none){.espia{display:none}.vitrine a:hover{padding-left:0}}

/* ───────── mosaico ───────── */
.mosaico{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(32px,5vh,56px)}
@media(min-width:860px){.mosaico.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.itens{list-style:none;margin:clamp(24px,3vh,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 1.6rem}
.itens li{font-size:.84rem;color:var(--fraco);padding:.6rem 0;border-bottom:1px solid var(--linha)}
.faixa.escura .itens li{border-bottom-color:rgba(255,255,255,.14);color:#9FB0BE}

/* ───────── blog ───────── */
.posts{margin-top:clamp(32px,5vh,56px)}
.post{display:grid;gap:1.6rem;padding:clamp(22px,2.6vw,36px) 0;border-top:1px solid var(--linha);
  transition:padding-left .55s cubic-bezier(.2,.7,.3,1)}
.post:last-child{border-bottom:1px solid var(--linha)}
.post:hover{padding-left:1.2rem}
@media(min-width:760px){.post{grid-template-columns:clamp(180px,22vw,300px) minmax(0,1fr);align-items:center}}
.post .capa{overflow:hidden;aspect-ratio:3/2}
.post .capa img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.post:hover .capa img{transform:scale(1.06)}
.post .meta{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro);margin-bottom:.8rem}
.post h3{margin-bottom:.6rem;font-weight:300;font-size:clamp(1.15rem,2vw,1.6rem)}
.post p{font-size:.9rem;color:var(--fraco);margin:0}
.post-corpo{max-width:66ch;margin-inline:auto}
.post-corpo h2{font-size:clamp(1.5rem,2.8vw,2.3rem);margin:2.4em 0 .7em}
.post-corpo h2:first-child{margin-top:0}
.post-corpo ul{padding-left:1.1rem;margin:0 0 1.2em}
.post-corpo li{margin-bottom:.5em}
.post-corpo strong{color:var(--azul);font-weight:500}

.botao{display:inline-flex;align-items:center;gap:1rem;margin-top:clamp(28px,4vh,48px);
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--azul);
  border:1px solid var(--azul);padding:1.05rem 1.7rem;transition:background .4s,color .4s,gap .4s}
.botao:hover{background:var(--azul);color:var(--papel);gap:1.6rem}
.faixa.escura .botao{color:var(--papel);border-color:rgba(255,255,255,.5)}
.faixa.escura .botao:hover{background:var(--papel);color:var(--azul)}
.botao .seta{width:20px;height:1px;background:currentColor}

/* ───────── citação ───────── */
.citacao{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.18;color:var(--azul);max-width:11em}

/* ───────── rodapé ───────── */
.rodape{background:var(--azul);color:#9FB0BE;padding:clamp(70px,10vh,130px) var(--gut) calc(clamp(36px,5vh,64px) + env(safe-area-inset-bottom,0px))}
.rodape .env{padding-inline:0;display:grid;gap:clamp(32px,4vw,64px)}
@media(min-width:900px){.rodape .env{grid-template-columns:1.3fr 1fr 1fr}}
.rodape h3{color:var(--papel);font-size:1rem;font-weight:400;margin-bottom:1.1rem}
.rodape p,.rodape a{font-size:.88rem;line-height:1.95;color:#9FB0BE}
.rodape a:hover{color:var(--ouro-claro)}
.rodape .fim{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(28px,4vw,44px);margin-top:1rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;justify-content:space-between;
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase}
.rodape .marca-fim{height:clamp(54px,6vw,78px);width:auto}

/* ───────── entrada ───────── */
.js .sobe{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.js .sobe.vista{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .sobe{opacity:1;transform:none}
  .fusao{height:auto}.fusao .palco{position:static;height:auto;min-height:88svh}
  .fusao .dizer .in{opacity:1;transform:none}
  *{animation:none!important}
}

/* vitrine e listas sobre fundo escuro */
.faixa.escura .vitrine li{border-top-color:rgba(255,255,255,.16)}
.faixa.escura .vitrine li:last-child{border-bottom-color:rgba(255,255,255,.16)}
.faixa.escura .vitrine .t{color:var(--papel)}
.faixa.escura .vitrine a:hover .t,.faixa.escura .vitrine a:hover{color:var(--ouro-claro)}
.faixa.escura .vitrine .c{color:#8FA0AE}
.faixa.escura .passos li{border-top-color:rgba(255,255,255,.16)}
.faixa.escura .passos li:last-child{border-bottom-color:rgba(255,255,255,.16)}
.faixa.escura .passos p{color:#9FB0BE}
.faixa.escura .post{border-top-color:rgba(255,255,255,.16)}
.faixa.escura .post:last-child{border-bottom-color:rgba(255,255,255,.16)}

@media(max-width:759px){
  .fusao{height:260svh}
  .fusao .dizer{bottom:clamp(56px,10vh,110px)}
  .fusao .dizer::before{content:"";position:absolute;inset:-28px -24px -40px -24px;z-index:-1;
    background:linear-gradient(180deg,rgba(245,242,236,0),rgba(245,242,236,.92) 24%,rgba(245,242,236,.96))}
  .fusao .dizer .env{max-width:none}
}