:root{
  --pedra:#EEE9E2; --papel:#F7F3EE; --tinta:#231C17; --suave:#6C6057;
  --terra:#A96946; --terra-esc:#8B5337; --linha:#DCD2C6;
  --noite:#1E1814; --claro:#F3EEE6; --claro-suave:#BFB3A6;
  --disp:'Cormorant Garamond',Georgia,serif;
  --cap:'Marcellus',Georgia,serif;
  --corpo:'Geist',system-ui,sans-serif;
  --lado:clamp(20px,5vw,80px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--pedra);color:var(--tinta);font-family:var(--corpo);font-weight:350;font-size:17px;line-height:1.7;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:inherit;font-size:inherit}
::selection{background:var(--terra);color:#fff}

/* tipografia */
.rotulo{font-family:var(--cap);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra)}
.titulo{font-family:var(--disp);font-weight:500;font-size:clamp(38px,5.2vw,76px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
.titulo em{font-style:italic;color:var(--terra)}
.titulo.medio{font-size:clamp(32px,3.8vw,56px)}
.titulo.menor{font-size:clamp(26px,2.6vw,38px);line-height:1.15}
.corpo{font-size:clamp(16px,1.2vw,18.5px);color:#4A403A;max-width:62ch}
.corpo p+p{margin-top:1em}
.corpo strong{font-weight:500;color:var(--tinta)}
.destaque{font-family:var(--disp);font-style:italic;font-size:clamp(24px,2.4vw,34px);line-height:1.3;color:var(--tinta);max-width:30ch;text-wrap:balance}

/* topo */
.topo{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px var(--lado);transition:background .4s,box-shadow .4s,padding .4s}
.topo::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:rgba(238,233,226,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linha)}
.topo.solido::before{opacity:1}
.topo.solido{padding-top:11px;padding-bottom:11px}
.marca{position:relative;z-index:2}
.marca{display:block;width:clamp(150px,15vw,178px);flex:none}
.marca img{width:100%;height:auto}
.topo nav{display:flex;align-items:center;gap:clamp(10px,1.05vw,18px)}
.topo nav a{position:relative;padding:7px 0;font-family:var(--cap);font-size:11.75px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta);white-space:nowrap}
.topo nav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--terra);
  transform:scaleX(0);transform-origin:left;transition:transform .3s}
.topo nav a:hover::after,.topo nav a[aria-current]::after{transform:scaleX(1)}
.topo nav a[aria-current]{color:var(--terra)}
.topo nav a .longo,.topo nav a.so-menu{display:none}
/* o Fazer denúncia fica visível no topo em qualquer tamanho de tela */
.acoes{display:flex;align-items:center;gap:10px;flex:none;position:relative;z-index:2}
/* preenchido de propósito: só com contorno ele sumia em cima do vídeo claro do início */
.denuncia-topo{display:inline-flex;align-items:center;font-family:var(--cap);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:#fff;background:var(--terra);border:1px solid var(--terra);border-radius:100px;padding:9px 16px;
  box-shadow:0 2px 14px rgba(35,28,23,.22);transition:background .25s,border-color .25s}
.denuncia-topo:hover{background:var(--terra-esc);border-color:var(--terra-esc)}
.denuncia-topo .curto{display:none}
.abre-menu{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;position:relative;color:var(--tinta)}
.abre-menu span,.abre-menu span::before,.abre-menu span::after{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;content:'';transition:transform .3s,top .3s}
.abre-menu span{top:20px}.abre-menu span::before{top:-7px;left:0;right:0}.abre-menu span::after{top:7px;left:0;right:0}
@media(max-width:1280px){
  .abre-menu{display:block}
  .topo nav{position:fixed;inset:0;background:var(--pedra);flex-direction:column;justify-content:center;align-items:flex-start;gap:0;
    padding:86px var(--lado) 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .topo nav a{width:100%;max-width:560px;margin:0 auto;padding:17px 0;font-size:clamp(14px,2.4vw,17px);letter-spacing:.16em;
    border-bottom:1px solid var(--linha)}
  .topo nav a::after{display:none}
  .topo nav a .curto{display:none}
  .topo nav a .longo{display:inline}
  .topo nav a.so-menu{display:block;color:var(--terra);border-bottom:0;margin-top:6px}
  body.menu-aberto .topo nav{opacity:1;visibility:visible}
  body.menu-aberto{overflow:hidden}
  body.menu-aberto .abre-menu span{background:transparent}
  body.menu-aberto .abre-menu span::before{top:0;transform:rotate(45deg)}
  body.menu-aberto .abre-menu span::after{top:0;transform:rotate(-45deg)}
}
@media(max-width:520px){
  .denuncia-topo{font-size:10.5px;padding:8px 13px;letter-spacing:.08em}
  .denuncia-topo .longo{display:none}
  .denuncia-topo .curto{display:inline}
  .marca{width:clamp(124px,34vw,160px)}
  .topo{gap:10px}
}

/* botões */
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.botao{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;text-decoration:none;font-size:15px;font-weight:450;
  border:1px solid var(--tinta);color:var(--tinta);background:transparent;cursor:pointer;font-family:var(--corpo);transition:background .3s,color .3s,border-color .3s}
.botao:hover{background:var(--tinta);color:var(--pedra)}
.botao.cheio{background:var(--terra);border-color:var(--terra);color:#fff}
.botao.cheio:hover{background:var(--terra-esc);border-color:var(--terra-esc)}
.link-seta{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-size:15px;color:var(--terra);text-decoration:none;border-bottom:1px solid transparent}
.link-seta:hover{border-color:var(--terra)}
.escuro .botao{border-color:var(--claro);color:var(--claro)}
.escuro .botao:hover{background:var(--claro);color:var(--noite)}
.escuro .botao.cheio{border-color:var(--terra);color:#fff}

/* blocos */
.bloco{padding:clamp(80px,12vh,150px) var(--lado)}
.caixa{max-width:1240px;margin:0 auto}
.estreita{max-width:820px;margin:0 auto}
.papel{background:var(--papel)}
.escuro{background:var(--noite);color:var(--claro)}
.escuro .corpo{color:var(--claro-suave)}
.escuro .corpo strong,.escuro .destaque{color:var(--claro)}
.escuro .rotulo{color:#D19A77}
.escuro .titulo em{color:#D19A77}
.dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,7vw,110px);align-items:start}
@media(max-width:900px){.dupla{grid-template-columns:1fr}}
.titulo+.corpo,.rotulo+.titulo{margin-top:18px}
.titulo+.corpo{margin-top:26px}
.linha-fina{height:1px;background:var(--linha);border:0;margin:0}

/* abertura de página interna */
.abertura{padding:clamp(150px,24vh,230px) var(--lado) clamp(70px,10vh,120px)}
.abertura .titulo{max-width:18ch}
.abertura .corpo{margin-top:26px}

/* cartões */
.cartoes{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:clamp(40px,6vh,64px)}
.cartoes.tres{grid-template-columns:repeat(3,1fr)}
.cartoes.dois{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.cartoes.tres{grid-template-columns:1fr}}
@media(max-width:700px){.cartoes.dois{grid-template-columns:1fr}}
.cartao{background:var(--pedra);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column}
.papel .cartao{background:var(--papel)}
.cartao .num{font-family:var(--cap);font-size:13px;letter-spacing:.2em;color:var(--terra)}
.cartao h3{font-family:var(--disp);font-weight:500;font-size:clamp(26px,2.3vw,32px);line-height:1.15;margin:14px 0 12px}
.cartao p{color:var(--suave);font-size:16px}
.cartao .link-seta{margin-top:auto;padding-top:22px}
a.cartao{text-decoration:none;transition:background .3s}
a.cartao:hover{background:var(--papel)}
.papel a.cartao:hover{background:var(--pedra)}

/* listas */
.sinais{list-style:none;margin-top:30px}
.sinais li{font-family:var(--disp);font-size:clamp(22px,2.1vw,30px);line-height:1.3;padding:14px 0;border-top:1px solid var(--linha)}
.escuro .sinais li{border-color:#3A302A}
.sinais li:last-child{border-bottom:1px solid var(--linha)}
.escuro .sinais li:last-child{border-color:#3A302A}
.pontos{list-style:none;margin-top:22px;display:grid;gap:10px}
.pontos li{padding-left:22px;position:relative;color:#4A403A}
.pontos li::before{content:'';position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--terra)}
.escuro .pontos li{color:var(--claro-suave)}
.pontos.colunas{grid-template-columns:repeat(2,1fr);column-gap:40px}
@media(max-width:700px){.pontos.colunas{grid-template-columns:1fr}}

/* citação */
.citacao{font-family:var(--disp);font-style:italic;font-size:clamp(30px,3.6vw,54px);line-height:1.2;text-align:center;max-width:24ch;margin:0 auto;text-wrap:balance}
.citacao+.rotulo{display:block;text-align:center;margin-top:24px}

/* formulários */
.form{display:grid;gap:18px;margin-top:34px}
.form .par{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form .par{grid-template-columns:1fr}}
.form label{display:grid;gap:7px;font-size:14px;font-weight:450;color:var(--tinta)}
.form label small{font-weight:350;color:var(--suave);font-size:13px}
.form input,.form textarea,.form select{font:inherit;font-size:16px;color:var(--tinta);background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:13px 15px;width:100%}
.papel .form input,.papel .form textarea{background:var(--pedra)}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:transparent}
.form .isca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .aviso{font-size:14px;color:var(--suave)}
.form .retorno{font-size:15px;min-height:1.4em}
.form .retorno.ok{color:#4E6B45}.form .retorno.erro{color:#A33C2B}
.escuro .form label{color:var(--claro)}
.escuro .form input,.escuro .form textarea{background:#2A221D;border-color:#3A302A;color:var(--claro)}

/* rodapé */
.rodape{background:var(--noite);color:var(--claro-suave);padding:clamp(60px,9vh,100px) var(--lado) 34px}
.rodape .grade{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.rodape .grade{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rodape .grade{grid-template-columns:1fr}}
.rodape img{width:200px}
.rodape h4{font-family:var(--cap);font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#D19A77;margin-bottom:14px}
.rodape ul{list-style:none;display:grid;gap:8px;font-size:15px}
.rodape a{text-decoration:none}
.rodape a:hover{color:var(--claro)}
.rodape .frase{font-family:var(--disp);font-style:italic;font-size:21px;line-height:1.35;color:var(--claro);margin-top:22px;max-width:26ch}
.rodape .base{max-width:1240px;margin:56px auto 0;padding-top:24px;border-top:1px solid #3A302A;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.rodape .denuncia{color:var(--claro);border:1px solid #4A3E36;padding:8px 14px;border-radius:100px}
.rodape .denuncia:hover{border-color:var(--claro)}

/* aparecer */
.surge{opacity:0;transform:translateY(20px);transition:opacity 1s,transform 1s cubic-bezier(.16,1,.3,1)}
.surge.viva{opacity:1;transform:none}
.surge.d1{transition-delay:.1s}.surge.d2{transition-delay:.2s}.surge.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.surge{opacity:1;transform:none;transition:none}}

/* aviso da versão de aprovação */
.aprovacao{font-size:13px;background:#F4E4D6;color:#6B3F28;border-radius:10px;padding:10px 14px}

/* marcas do ecossistema */
.logo-marca{display:block;width:clamp(220px,24vw,320px);height:auto}
.logo-marca.pequeno{width:clamp(170px,16vw,240px)}
.rodape .marcas{max-width:1240px;margin:48px auto 0;padding-top:30px;border-top:1px solid #3A302A;display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.rodape .marcas span{font-family:var(--cap);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#D19A77}
.rodape .marcas img{width:auto;height:44px;opacity:.85;transition:opacity .3s}
.rodape .marcas a:hover img{opacity:1}
.rodape .marcas+.base{margin-top:30px}

/* fotos da Observador House */
.foto-larga{margin:0;height:clamp(300px,58vh,640px);overflow:hidden}
.foto-larga img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.galeria{columns:3;column-gap:14px;margin-top:clamp(36px,5vh,56px)}
@media(max-width:820px){.galeria{columns:2;column-gap:10px}}
.galeria img{width:100%;height:auto;margin-bottom:14px;break-inside:avoid;border-radius:4px}
@media(max-width:820px){.galeria img{margin-bottom:10px}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.trio img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.foto-bloco{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;margin-bottom:26px}

/* movimento suave sobre as fotos reais: aproxima devagar conforme a rolagem (sem alterar a foto) */
.foto-larga img{will-change:transform;transform-origin:50% 60%}
@media(prefers-reduced-motion:reduce){.foto-larga img{transform:none!important}}

/* vídeo que anda com a rolagem enquanto a faixa atravessa a tela */
.video-rolagem{margin:0;position:relative;height:clamp(320px,64vh,720px);overflow:hidden;background:#3E4A2E}
.video-rolagem img,.video-rolagem video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.video-rolagem video{opacity:0;transition:opacity .6s}
.video-rolagem.pronta video{opacity:1}

/* topo de página com vídeo que anda com a rolagem */
.heroi-video{position:relative;height:190svh;background:var(--noite)}
.heroi-video .fixo{position:sticky;top:0;height:100svh;overflow:hidden}
.heroi-video .poster,.heroi-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.heroi-video video{opacity:0;transition:opacity .6s}
.heroi-video.pronta video{opacity:1}
.heroi-video .veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,24,20,.72) 0%,rgba(30,24,20,.5) 38%,rgba(30,24,20,0) 70%)}
.heroi-video .texto{position:absolute;left:var(--lado);right:var(--lado);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:80px;color:var(--claro)}
.heroi-video .texto>*{max-width:620px}
.heroi-video .rotulo{color:#E7B08D}
.heroi-video .titulo em{color:#E7B08D}
.heroi-video .corpo{color:#EDE4DA}
.heroi-video .botao{border-color:var(--claro);color:var(--claro)}
.heroi-video .botao:hover{background:var(--claro);color:var(--noite)}
.heroi-video .botao.cheio{border-color:var(--terra);color:#fff}
@media(max-width:820px){
  .heroi-video .fixo{background:var(--noite)}
  .heroi-video .poster,.heroi-video video{bottom:auto;height:60svh;object-position:58% 78%}
  .heroi-video .veu{background:linear-gradient(180deg,rgba(30,24,20,0) 0%,rgba(30,24,20,0) 38%,rgba(30,24,20,.85) 54%,var(--noite) 62%)}
  .heroi-video .texto{justify-content:flex-end;padding-bottom:8vh}
}

/* imagem ao lado do título na abertura */
.abertura-imagem{align-items:center}
.imagem-abertura{margin:0;justify-self:end;width:100%;max-width:560px}
.imagem-abertura img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 78%;border-radius:6px;box-shadow:0 40px 80px -40px rgba(35,28,23,.45)}
@media(max-width:900px){.imagem-abertura{justify-self:stretch;max-width:none;margin-top:10px}.imagem-abertura img{aspect-ratio:4/3;object-position:50% 72%}}

/* ---- capa do livro (início e página do livro) */
.capa-livro{aspect-ratio:2/3;max-width:360px;width:100%;justify-self:center;background:var(--noite);color:var(--claro);border-radius:4px;
  box-shadow:0 30px 60px -20px rgba(35,28,23,.45);padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
a.capa-livro:hover{transform:translateY(-6px);box-shadow:0 40px 70px -22px rgba(35,28,23,.55)}
.capa-livro .rotulo{color:#D19A77;font-size:11px}
.capa-livro strong{font-family:var(--disp);font-weight:500;font-size:clamp(34px,3.4vw,46px);line-height:1.05}
.capa-livro small{font-size:12px;color:var(--claro-suave);letter-spacing:.1em;text-transform:uppercase}
.capa-livro .capa-autores{font-family:var(--disp);font-style:normal;font-size:17px;line-height:1.35;color:#D19A77;margin-top:-40%}
.autores{font-family:var(--disp);font-style:italic;font-size:clamp(20px,1.8vw,24px);color:var(--suave);margin-top:10px}
.dupla.capa-lado{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center}
.dupla.capa-lado .capa-livro{max-width:300px}
@media(max-width:900px){.dupla.capa-lado{grid-template-columns:1fr}.dupla.capa-lado .capa-livro{max-width:230px;justify-self:start}}

/* ---- trecho em destaque dentro de um texto */
.realce{font-style:italic;color:var(--terra)}
.escuro .realce{color:#D19A77}

/* ---- relógio do Ponto de Virada (início e Comunidade) */
.contagem{border:1px solid #3A302A;border-radius:18px;padding:clamp(26px,3vw,42px);background:#241D18}
.contagem .quando{font-family:var(--disp);font-size:clamp(24px,2.2vw,30px);color:var(--claro);margin-top:10px}
.relogio{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.relogio div{background:var(--noite);border:1px solid #3A302A;border-radius:12px;padding:16px 6px;text-align:center}
.relogio strong{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--claro);font-variant-numeric:tabular-nums}
.relogio span{display:block;margin-top:8px;font-family:var(--cap);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#D19A77}
.contagem .nota{margin-top:16px;font-size:14px;color:var(--claro-suave)}
.contagem.agora .relogio{display:none}

/* ---- calendário dos próximos encontros */
.aviso-agenda{margin-top:clamp(34px,5vh,52px);border:1px solid var(--linha);border-left:3px solid var(--terra);
  background:var(--pedra);padding:clamp(26px,3vw,40px)}
.papel .aviso-agenda{background:var(--papel)}
.aviso-agenda .botoes{margin-top:26px}
.calendario{list-style:none;margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--linha)}
.calendario li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,40px);
  padding:22px 0;border-bottom:1px solid var(--linha)}
.calendario .data{display:grid;justify-items:center;align-content:center;gap:2px;border:1px solid var(--linha);border-radius:12px;padding:12px 6px}
.papel .calendario .data{background:var(--pedra)}
.calendario .data strong{font-family:var(--disp);font-weight:500;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.calendario .data em{font-family:var(--cap);font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra)}
.calendario .data i{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--suave)}
.calendario .sobre .num{font-family:var(--cap);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.calendario .sobre h3{font-family:var(--disp);font-weight:500;font-size:clamp(23px,2.1vw,29px);line-height:1.15;margin-top:6px}
.calendario .sobre p{font-size:15px;color:var(--suave);margin-top:4px}
.calendario .botao{white-space:nowrap}
@media(max-width:760px){
  .calendario li{grid-template-columns:72px minmax(0,1fr);row-gap:16px}
  .calendario .data strong{font-size:27px}
  .calendario .botao{grid-column:1/-1;justify-self:start}
}
.nota-agenda{margin-top:28px;font-size:15px;color:var(--suave)}
.nota-agenda a{color:var(--terra)}