/* Daros Interiores · a ideia geral do tema Intrio (só inspiração: ver CONCEITO no index.html),
   com a paleta da Daros: o creme e o "D" dourado do avatar, a madeira e o fendi do feed.
   Uma fonte só sem serifa (Outfit) e títulos em caixa alta; o Cormorant ficou só no rodapé,
   que é o de antes. Cores medidas: ver o comentário PALETA no topo do index.html. */
:root{
  --creme:#F7F2EF; --areia:#E9E1DC; --fendi:#A39B92; --madeira:#6F4B2E; --madeira-2:#5A3C24;
  --ouro:#CCB58B; --ouro-claro:#E2D1AE; --ouro-escuro:#AF9972; --ouro-texto:#6E5A38;
  --texto:#33251D; --texto-2:rgba(51,37,29,.76); --texto-3:rgba(51,37,29,.56); --linha:rgba(51,37,29,.14);
  --escuro:#23201D; --escuro-2:#2B211B; --logo:#484745;
  --sans:'Outfit',system-ui,sans-serif; --serif:'Cormorant Garamond',Georgia,serif;
  --lado:clamp(18px,5.5vw,88px); --topo:76px; --previa:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden vence o display das classes (seção escondida, como no Make Bella) */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) - 1px)}
body{background:var(--creme);color:var(--texto-2);font-family:var(--sans);font-size:17px;font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
b,strong{font-weight:500}
h1,h2,h3{font-family:var(--sans);font-weight:400;color:var(--texto);text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}
h2 em{font-style:normal;color:var(--madeira)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
svg{flex:none}

/* ─── faixa de prévia ─── */
.previa{position:relative;z-index:21;display:flex;flex-wrap:wrap;gap:.3em 1.4em;align-items:center;justify-content:center;
  padding:8px var(--lado);background:var(--escuro);color:rgba(255,255,255,.82);font-size:12.5px;font-weight:400;text-align:center}
.previa b{color:#fff;font-weight:600}
.previa a{color:var(--ouro);font-weight:600;text-underline-offset:3px}
.previa .conferir{border-color:var(--ouro);color:var(--ouro)}

/* o que falta confirmar: a pauta da reunião, visível na tela */
.conferir{display:inline-block;padding:0 .6em;border:1px dashed var(--ouro-escuro);border-radius:999px;
  font-family:var(--sans);font-size:.66em;font-style:normal;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ouro-texto);line-height:1.8;vertical-align:.14em;white-space:nowrap}
.rodape-site .conferir,.capa .conferir{border-color:var(--ouro);color:var(--ouro)}

/* ─── o logo: o monograma dourado e "DAROS" em caixa alta espaçada, como no avatar ─── */
.logo{display:inline-flex;align-items:center;gap:.3em;text-decoration:none;line-height:1}
.logo b{font-family:var(--sans);font-weight:300;font-size:.5em;letter-spacing:.34em;text-transform:uppercase;color:var(--logo);margin-right:-.34em}
.logo-d{flex:none;width:1em;height:1em}

/* ─── topo: transparente sobre a capa, escuro depois dela ───
   sticky com margem negativa: fica no fluxo, e a capa sobe por baixo dele. */
.topo{position:sticky;top:0;z-index:20;height:var(--topo);margin-bottom:calc(-1 * var(--topo));display:flex;align-items:center;gap:2.2rem;
  padding:0 var(--lado);color:#fff;transition:background .35s,box-shadow .35s}
.topo.rolou{background:rgba(43,33,27,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topo .logo{font-size:40px;margin-right:auto}
.topo .logo b{color:#fff}
.topo nav{display:flex;gap:1.8rem;font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.topo nav a{text-decoration:none;color:rgba(255,255,255,.86);padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.topo nav a:hover{color:#fff;border-bottom-color:var(--ouro)}
.bt-topo{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 20px;border-radius:3px;background:var(--madeira);color:#fff;transition:background .2s}
.bt-topo:hover{background:var(--madeira-2)}
.bt-topo svg{width:17px;height:17px}

/* ─── botões: retos, em caixa alta, como no tema ─── */
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 28px;border-radius:3px;
  text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.bt svg{width:19px;height:19px}
.bt-madeira{background:var(--madeira);color:#fff;border:1px solid var(--madeira)}
.bt-madeira:hover{background:var(--madeira-2);border-color:var(--madeira-2)}
.bt-vazado{border:1px solid rgba(255,255,255,.6);color:#fff}
.bt-vazado:hover{background:#fff;color:var(--texto)}

.sobre-rotulo{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--madeira)}
.bloco{padding:clamp(72px,9vw,130px) var(--lado)}

/* ─── capa: o home office em tela cheia, escurecido, e as duas palavras enormes ─── */
.capa{position:relative;min-height:calc(100svh - var(--previa));display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--topo) + clamp(24px,5vh,56px)) var(--lado) clamp(28px,5vh,56px);color:#fff;overflow:hidden;background:var(--escuro-2)}
.capa-midia{position:absolute;inset:0}
.capa-foto,.capa-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
.capa-midia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,22,17,.62) 0%,rgba(30,22,17,.28) 38%,rgba(30,22,17,.4) 62%,rgba(30,22,17,.82) 100%)}
/* as duas fotos se alternam: 14 s por volta, uns 6 s cada uma e o esmaecido entre elas.
   Com "reduzir movimento", fica só a primeira. Com vídeo (PROMPTS.md), as fotos somem enquanto ele toca. */
.capa-fotos{position:absolute;inset:0;transition:opacity 1.2s ease}
.capa.tocando .capa-fotos{opacity:0;transition:none}
/* com vídeo (.com-video), a capa é só o vídeo: o poster antes de tocar, o último quadro depois */
.capa.com-video .capa-fotos{display:none}
.capa-foto-2{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .capa-foto-2{animation:troca-foto 14s ease-in-out infinite}
}
@keyframes troca-foto{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.capa-conteudo{position:relative;display:flex;flex-direction:column}
.capa-sobre{font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.capa h1{margin-top:clamp(14px,3vh,34px);font-size:clamp(36px,9.4vw,136px);font-weight:400;line-height:.92;letter-spacing:-.03em;color:#fff}
.capa .linha{display:block}
.capa .l2{text-align:right}
.capa-pe{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-top:clamp(18px,4vh,40px)}
.lead{max-width:24em;font-size:clamp(17px,1.35vw,20px);color:rgba(255,255,255,.88)}
.selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,4vh,40px);padding-top:clamp(16px,3vh,24px);border-top:1px solid rgba(255,255,255,.2)}
.selos > span{display:inline-flex;align-items:center;gap:.55em;font-size:14px;font-weight:400;color:rgba(255,255,255,.9);margin-right:1.2em}
.ponto{width:8px;height:8px;border-radius:50%;background:#3FB27A;box-shadow:0 0 0 4px rgba(63,178,122,.22)}
.ponto.fechado{background:#D0874F;box-shadow:0 0 0 4px rgba(208,135,79,.22)}
.estrela{color:var(--ouro)}

/* o texto se escreve: completo até o script começar, e só então as letras somem */
.capa.escrevendo .l{visibility:hidden}
.capa.escrevendo .l.on{visibility:visible}
.capa .l.cursor{box-shadow:.05em 0 0 var(--ouro);animation:pisca .8s steps(1) infinite}
@keyframes pisca{50%{box-shadow:none}}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ─── a Daros: a fachada, o título e o texto em três colunas, e os números embaixo ─── */
.sobre{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:start}
.sobre-foto{margin:0;aspect-ratio:1;overflow:hidden;background:var(--areia)}
.sobre-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.sobre-texto h2{margin-top:.6em;font-size:clamp(34px,3.6vw,56px)}
.sobre-lado{padding-top:2.2em}
.sobre-lado p{font-size:16.5px}
.quem{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid var(--linha)}
.quem-foto{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--areia)}
.quem-foto svg{width:32px;height:32px}
.quem b{display:block;color:var(--texto);font-size:16px}
.quem span{font-size:14px}
.numeros{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,64px);margin-top:clamp(20px,3vw,40px)}
.numeros div{padding-top:22px;border-top:1px solid var(--linha)}
.numeros dt{display:flex;align-items:baseline;gap:.15em;font-size:clamp(48px,4.6vw,72px);font-weight:300;line-height:1;color:var(--texto);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.numeros dt small{font-size:.4em;color:var(--ouro-escuro)}
.numeros dd{margin-top:10px;font-size:15.5px;max-width:16em}

/* ─── cabeçalho de seção: o título de um lado, o texto do outro ─── */
.cab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px clamp(28px,5vw,96px);align-items:end;margin-bottom:clamp(36px,4.4vw,64px)}
.cab h2{margin-top:.6em;font-size:clamp(34px,3.6vw,56px);max-width:13em}
.cab-lado p{font-size:16.5px;max-width:28em}
.cab-lado a{color:var(--madeira);font-weight:400;text-underline-offset:3px}
.cab-centro{display:block;text-align:center}
.cab-centro h2{margin-left:auto;margin-right:auto}

/* ─── ambientes: a foto em tela cheia, clara, com um véu creme no alto para o título escuro.
   Embaixo, a planta pequena (o mapa, com o cômodo da foto em dourado), o nome no painel de
   madeira e a faixa creme com um traço por ambiente. A foto nova entra devagar, de mais perto.
   A altura desconta o topo fixo: pelo menu, a seção para logo abaixo dele e cabe inteira. ─── */
.ambientes{position:relative;min-height:calc(100svh - var(--topo));display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--escuro-2)}
.amb-fotos{position:absolute;inset:0}
.amb-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.2s ease,transform 7s linear}
.amb-fotos img.ativa{opacity:1;transform:none}
.amb-fotos::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,242,239,.86) 0%,rgba(247,242,239,.5) 22%,rgba(247,242,239,0) 42%)}
.amb-texto{position:relative;padding:clamp(24px,5vh,56px) var(--lado) 0}
.amb-texto h2{margin-top:.5em;font-size:clamp(34px,3.6vw,56px);max-width:15em}
.amb-baixo{position:relative;margin-top:40px}
.amb-pe{display:flex;margin:0 var(--lado)}
.amb-mapa{flex:none;display:flex;align-items:center;width:clamp(104px,11vw,168px);padding:clamp(12px,1.3vw,20px);background:var(--creme)}
.amb-mapa svg{display:block;width:100%;height:auto}
.amb-mapa polygon{fill:transparent;stroke:var(--texto);stroke-opacity:.45;stroke-width:1px;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .4s}
.amb-mapa polygon:hover{fill:rgba(204,181,139,.35)}
.amb-mapa polygon.ativo{fill:var(--ouro)}
.amb-nome{display:flex;flex-direction:column;justify-content:center;min-width:clamp(230px,24vw,360px);padding:clamp(18px,2vw,30px) clamp(20px,2.4vw,36px);
  background:rgba(90,60,36,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.amb-item h3{font-size:clamp(26px,2.8vw,44px);color:#fff}
.amb-item a{display:inline-flex;align-items:center;gap:.5em;margin-top:12px;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro-claro);text-decoration:none}
.amb-item a svg{width:17px;height:17px;transition:transform .25s}
.amb-item a:hover svg{transform:translateX(4px)}
/* a margem negativa põe o primeiro e o último traço nas pontas da linha */
.amb-trilha{position:relative;display:flex;justify-content:space-between;margin-top:clamp(20px,3vh,32px);padding:6px var(--lado);background:var(--creme)}
.amb-trilha::before{content:"";position:absolute;left:var(--lado);right:var(--lado);top:50%;height:1px;background:var(--linha)}
.amb-trilha button{position:relative;width:32px;height:32px;margin:0 -15px;border:0;background:none;cursor:pointer}
.amb-trilha button::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:12px;transform:translate(-50%,-50%);background:var(--fendi);transition:background .3s,height .3s}
.amb-trilha button:hover::before{background:var(--madeira)}
.amb-trilha button[aria-current="true"]::before{width:3px;height:18px;background:var(--ouro-escuro)}
.amb-trilha button:focus-visible{outline:2px solid var(--madeira);outline-offset:-4px}

/* ─── avaliações: a foto em parallax, escurecida, e a frase grande ─── */
.avaliacoes{position:relative;overflow:hidden;color:#fff;background:var(--escuro-2)}
.avaliacoes-foto{position:absolute;inset:0}
/* parallax: a foto é 40% mais alta que a seção e anda ±14% da própria altura enquanto a seção
   passa pela tela; nas pontas do movimento ainda sobra foto em cima e embaixo, sem faixa vazia */
.avaliacoes-foto img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;will-change:transform}
/* a versão do computador já vem escura (luz de noite): a camada pesa menos nela */
.avaliacoes-foto::after{content:"";position:absolute;inset:0;background:rgba(30,22,17,.7)}
@media (min-aspect-ratio:1/1){.avaliacoes-foto::after{background:rgba(30,22,17,.52)}}
.avaliacoes-conteudo{position:relative;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:32px clamp(28px,5vw,96px);
  padding:clamp(80px,11vw,150px) var(--lado)}
.avaliacoes .sobre-rotulo{color:#fff;font-size:14px;letter-spacing:.08em;line-height:1.6}
.avaliacoes .nota{margin-top:14px;font-size:15px;color:rgba(255,255,255,.72)}
.avaliacoes .nota b{font-size:22px;font-weight:400;color:#fff}
.vozes{display:grid}
.voz{margin:0;transition:opacity .8s,visibility .8s}
.js .voz{grid-area:1 / 1}
.js .voz:not(.ativa){opacity:0;visibility:hidden}
.estrelas{font-size:17px;letter-spacing:.2em;color:var(--ouro)}
.voz blockquote{margin-top:18px;font-size:clamp(26px,3.1vw,48px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-wrap:balance}
.voz figcaption{margin-top:22px;font-size:15px;color:rgba(255,255,255,.76)}
.vozes-pe{display:flex;align-items:center;gap:28px;margin-top:34px}
.pontos-voz{display:flex;gap:8px}
.pontos-voz button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.35);transition:background .2s}
.pontos-voz button[aria-current="true"]{background:#fff}
.ler-todas{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro-claro);text-underline-offset:4px}

/* ─── projetos: cartões largos, o nome em cima e as etiquetas embaixo ─── */
.carrossel{position:relative;margin:0 calc(-1 * var(--lado))}
.trilho{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;padding:0 var(--lado);scrollbar-width:none;outline:none}
.trilho::-webkit-scrollbar{display:none}
.trilho:focus-visible{outline:2px solid var(--madeira);outline-offset:4px}
.trilho figure{position:relative;flex:0 0 auto;width:clamp(290px,38vw,580px);aspect-ratio:4/3;margin:0;overflow:hidden;background:var(--areia)}
.trilho img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.trilho figure:hover img{transform:scale(1.04)}
.trilho figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,22,17,.62) 0%,rgba(30,22,17,0) 42%,rgba(30,22,17,0) 70%,rgba(30,22,17,.5) 100%)}
/* duas linhas: o nome no alto e as etiquetas no pé (align-content: space-between) */
.trilho figcaption{position:absolute;z-index:1;inset:0;display:flex;flex-wrap:wrap;align-content:space-between;gap:6px;padding:clamp(18px,2vw,28px)}
/* o nome ocupa a linha inteira (senão as etiquetas sobem para o lado dele); o recuo à direita
   é que segura a largura do texto */
.trilho figcaption b{flex:0 0 100%;padding-right:32%;font-size:clamp(24px,2.3vw,36px);font-weight:400;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.trilho figcaption span{padding:5px 11px;background:rgba(30,22,17,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;font-weight:400;color:#fff}
.pontos{display:flex;justify-content:center;gap:8px;margin-top:28px}
.pontos button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(51,37,29,.22);transition:background .2s}
.pontos button[aria-current="true"]{background:var(--madeira)}

/* ─── como trabalhamos: ícones redondos em madeira, ligados por setas ─── */
.processo{background:var(--areia)}
.passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,56px);text-align:center}
.passos li{position:relative}
.passos li:not(:last-child)::after{content:"";position:absolute;top:38px;right:calc(-1 * clamp(24px,3vw,56px) / 2 - 14px);width:28px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 6h26M21 1l5 5-5 5' fill='none' stroke='%2333251D' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
.passo-icone{display:grid;place-items:center;width:76px;height:76px;margin:0 auto;border-radius:50%;background:var(--madeira)}
.passo-icone svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.passos b{display:block;margin-top:24px;font-size:18px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--texto)}
.passos p{margin:10px auto 0;font-size:15.5px;max-width:17em}
.motivos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(40px,5vw,64px)}
.motivos li{padding:8px 16px;border:1px solid rgba(111,75,46,.35);font-size:14px;font-weight:400;color:var(--madeira)}

/* ─── rodapé: o showroom e o contato juntos, no escuro. A foto da entrada com o botão redondo da
   rota de um lado, os dados do outro e a linha final embaixo. Cabe inteiro numa tela, descontado
   o topo fixo: a foto só acompanha a altura dos dados, que vão em três colunas quando cabem.
   Sem logo: o do topo fica sempre à vista. ─── */
.rodape-site{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--escuro);color:#F7F2EF}
.rs-foto{position:relative;min-height:260px;overflow:hidden;background:var(--escuro-2)}
.rs-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.rs-foto::after{content:"";position:absolute;inset:0;background:rgba(30,22,17,.3)}
.rota{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
  background:var(--madeira);color:#fff;text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  transition:transform .3s,background .2s}
.rota:hover{transform:scale(1.06);background:var(--madeira-2)}
.rota::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(255,255,255,.55);animation:onda 2.4s ease-out infinite}
@keyframes onda{from{transform:scale(.9);opacity:1}to{transform:scale(1.25);opacity:0}}
.rs-dados{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,5vh,56px) var(--lado)}
.rs-dados .sobre-rotulo{color:var(--ouro)}
.rs-dados h2{margin-top:.3em;font-size:clamp(30px,3vw,46px);color:#F7F2EF}
.rs-dados h2 em{color:var(--ouro)}
.status-linha{display:inline-flex;align-items:center;gap:.6em;margin-top:12px;font-weight:400;color:rgba(247,242,239,.9)}
.dados{align-self:stretch;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 clamp(20px,3vw,48px);margin-top:16px}
.dados div{padding:11px 0;border-top:1px solid rgba(247,242,239,.14)}
.dados dt{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro)}
.dados dd{margin-top:4px;font-size:15.5px;line-height:1.5;color:#F7F2EF}
.dados a{text-decoration:none;border-bottom:1px solid rgba(204,181,139,.5)}
.dados a:hover{border-bottom-color:var(--ouro)}
.bt-ouro{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;margin-top:20px;padding:0 28px;border-radius:999px;
  background:var(--ouro);color:var(--escuro);border:1.5px solid var(--ouro);text-decoration:none;font-weight:600;font-size:17px;transition:background .2s,border-color .2s}
.bt-ouro:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
.bt-ouro svg{width:20px;height:20px}
.rodape{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding:14px max(var(--lado),88px) 16px var(--lado);
  border-top:1px solid rgba(247,242,239,.12);font-size:13px;color:rgba(247,242,239,.55)}
.assinatura{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ouro)}

/* ─── dúvidas: o rótulo, o título e o convite ao WhatsApp de um lado; as perguntas numeradas do
   outro, com o + num círculo que vira madeira quando a resposta abre ─── */
.duvidas{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(28px,6vw,112px);align-items:start}
.duvidas-lado h2{margin-top:.6em;font-size:clamp(34px,3.6vw,56px)}
.duvidas-lado > p:not(.sobre-rotulo){margin-top:1.2em;font-size:16.5px;max-width:24em}
.duvidas-lado .bt{margin-top:28px}
.faq{counter-reset:faq;border-top:1px solid var(--linha)}
.faq details{counter-increment:faq;border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:14px;padding:clamp(14px,2.2vh,20px) 0;
  font-size:18px;font-weight:400;line-height:1.35;color:var(--texto);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:counter(faq,decimal-leading-zero);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ouro-escuro)}
.faq summary::after{content:"";width:34px;height:34px;border:1px solid var(--linha);border-radius:50%;
  background:linear-gradient(currentColor,currentColor) center/12px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 12px no-repeat;
  transition:transform .3s,background-color .3s,border-color .3s,color .3s}
.faq summary:hover,.faq details[open] summary{color:var(--madeira)}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--madeira);border-color:var(--madeira);color:#fff}
.faq summary:focus-visible{outline:2px solid var(--madeira);outline-offset:4px}
.faq p{padding:0 48px 22px 58px}
.faq p a{color:var(--madeira);font-weight:400;text-underline-offset:3px}

/* ─── revelação na rolagem (a escada do playbook §2) ───
   1. navegador moderno: animation-timeline: view(), sem JS;  2. antigo: o script põe .visivel;
   3. sem JS: tudo visível, porque o opacity:0 só vale sob .js. */
@keyframes sobe{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes da-esq{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes da-dir{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes paralaxe{from{transform:translateY(-14%)}to{transform:translateY(14%)}}
@keyframes capa-zoom{to{transform:translateY(25%) scale(1.25)}}
@media (prefers-reduced-motion:no-preference){
  .js .capa-sobre,.js .capa-pe,.js .selos{animation:sobe .9s cubic-bezier(.2,.7,.2,1) both}
  .js .capa-pe{animation-delay:.3s}
  .js .selos{animation-delay:.45s}
  @supports (animation-timeline: view()){
    .js .revela{animation:sobe linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
    .js .revela-esq{animation:da-esq linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .js .revela-dir{animation:da-dir linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    /* o parallax segue a seção inteira passando pela tela (sem suporte: o script faz o mesmo) */
    .avaliacoes{view-timeline:--aval block}
    .avaliacoes-foto img{animation:paralaxe linear both;animation-timeline:--aval;animation-range:cover}
    /* a capa, ao sair da tela, desce devagar e cresce (zoom): fotos e vídeo juntos */
    .capa{view-timeline:--capa block}
    .capa-midia{animation:capa-zoom linear both;animation-timeline:--capa;animation-range:exit}
  }
  @supports not (animation-timeline: view()){
    .js .revela,.js .revela-esq,.js .revela-dir{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
    .js .revela{transform:translateY(28px)}
    .js .revela-esq{transform:translateX(-48px)}
    .js .revela-dir{transform:translateX(48px)}
    .js .visivel{opacity:1;transform:none}
  }
}

/* ─── menu: abaixo de 1061px as seções do topo viram um ícone que abre uma lista ─── */
.abre-menu{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;color:#fff}
.abre-menu span{position:absolute;left:11px;right:11px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .3s,top .3s,opacity .2s}
.abre-menu span:nth-child(1){top:15px}
.abre-menu span:nth-child(2){top:21px}
.abre-menu span:nth-child(3){top:27px}
.menu-aberto .abre-menu span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-aberto .abre-menu span:nth-child(2){opacity:0}
.menu-aberto .abre-menu span:nth-child(3){top:21px;transform:rotate(-45deg)}
/* seta de voltar ao início, no computador e no celular: aparece fora da capa (o script da capa
   põe .fora-da-capa no body) */
.ao-topo{display:grid;place-items:center;position:fixed;right:clamp(16px,2vw,28px);bottom:calc(clamp(16px,2vw,28px) + env(safe-area-inset-bottom));z-index:30;
  width:48px;height:48px;border-radius:50%;background:var(--madeira);color:#fff;box-shadow:0 6px 18px rgba(30,22,17,.3);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.ao-topo:hover{background:var(--madeira-2)}
.ao-topo svg{width:22px;height:22px}
.fora-da-capa .ao-topo{opacity:1;visibility:visible;transform:none}

/* ─── uma seção por tela (o molde do Puramô!): cada seção vai do topo fixo até o fim da janela,
   com o conteúdo no meio, e a rolagem encaixa no começo de cada uma. min-height, e não height:
   numa janela baixa a seção cresce em vez de cortar texto. Os fundos alternam (claro, escuro,
   areia) para uma seção não emendar na outra. No computador quem leva de uma seção à outra é o
   script "Rolagem por seção" (descida suave, barra de rolagem livre): o encaixe mandatory do CSS
   prendia a página ao clicar na seta da barra. No celular e em janela baixa o encaixe é leve
   (proximity), porque ali algumas seções passam de uma tela. ─── */
:root{--tela:calc(100svh - var(--topo))}
html{scroll-snap-type:y proximity}
.capa,.tela{scroll-snap-align:start}
.tela{min-height:var(--tela)}
.projetos.tela,.processo.tela,.avaliacoes.tela{display:flex;flex-direction:column;justify-content:center}
.sobre.tela,.duvidas.tela{align-content:center}
.rodape-site.tela{grid-template-rows:1fr auto}
@media (min-width:1061px) and (min-height:560px){
  html{scroll-snap-type:none}
  .bloco.tela,.avaliacoes-conteudo{padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(28px,6vh,72px)}
  .cab{margin-bottom:clamp(18px,3.4vh,40px)}
  .cab h2,.sobre-texto h2,.duvidas-lado h2{font-size:clamp(30px,min(3.6vw,6.2vh),52px)}
  .trilho figure{width:auto;height:clamp(220px,calc(var(--tela) - 320px),440px)}
  .sobre-foto{aspect-ratio:auto;height:clamp(200px,calc(var(--tela) - 300px),440px)}
  .numeros{margin-top:clamp(16px,3vh,40px)}
  .numeros div{padding-top:clamp(12px,2.2vh,22px)}
  .numeros dt{font-size:clamp(40px,min(4.6vw,8vh),72px)}
  .passos b{margin-top:clamp(12px,2.4vh,24px)}
  .motivos{margin-top:clamp(20px,4vh,56px)}
}

/* ─── telas menores ─── */
@media (max-width:1060px){
  .topo{gap:14px}
  .abre-menu{display:block}
  .topo nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px var(--lado) 18px;
    background:rgba(43,33,27,.98);font-size:15px}
  .menu-aberto .topo nav{display:flex}
  .menu-aberto .topo{background:rgba(43,33,27,.98)}
  .topo nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .topo nav a:last-child{border-bottom:0}
  .sobre{grid-template-columns:1fr 1fr}
  .sobre-foto{grid-row:span 2}
  .sobre-lado{padding-top:0}
  .passos{grid-template-columns:1fr 1fr;row-gap:48px}
  .passos li::after{display:none}
}
@media (max-width:860px){
  .cab,.rodape-site,.duvidas,.avaliacoes-conteudo{grid-template-columns:1fr}
  .sobre{grid-template-columns:1fr}
  .sobre-foto{grid-row:auto;aspect-ratio:4/3}
}
@media (max-width:640px){
  :root{--topo:64px}
  body{font-size:16px}
  .previa-dica{display:none}
  .topo{gap:10px}
  .topo .logo{font-size:34px}
  .bt-topo{padding:11px 13px;font-size:11.5px;letter-spacing:.06em;white-space:nowrap}
  /* a capa cabe na tela: o "Ver projetos" sai, o orçamento fica (e está também no topo) */
  .capa .bt-vazado{display:none}
  .bt-topo svg{width:15px;height:15px}

  .capa{padding-bottom:22px}
  .capa-foto,.capa-video{object-position:50% 50%}
  .capa-sobre{font-size:11.5px;letter-spacing:.14em}
  .capa h1{font-size:10.4vw}
  .capa-pe{flex-direction:column;align-items:stretch;gap:18px}
  .lead{font-size:16.5px}
  .acoes .bt{flex:1 1 100%}
  .selos{flex-direction:column;gap:8px}

  .numeros{grid-template-columns:1fr;gap:0}
  .numeros div{display:grid;grid-template-columns:5.2em 1fr;align-items:center;gap:14px;padding:16px 0}
  .numeros dt{font-size:44px}
  .numeros dd{margin-top:0;font-size:14.5px}

  .amb-mapa{width:92px;padding:10px}
  .amb-nome{flex:1;min-width:0;padding:16px 18px}
  .amb-item h3{font-size:24px}
  .amb-item a{margin-top:8px;font-size:11.5px}
  .trilho figure{width:84vw}
  .avaliacoes-conteudo{padding-top:72px;padding-bottom:72px}
  .voz blockquote{font-size:25px}
  .vozes-pe{flex-direction:column;align-items:flex-start;gap:16px}
  .passos{grid-template-columns:1fr;row-gap:40px}
  .dados div{padding:8px 0}
  .dados dd{margin-top:2px;font-size:14.5px}
  .rs-dados .bt-ouro{margin-top:16px}
  .rs-foto{min-height:20svh}
  .rs-dados{padding:24px var(--lado)}
  .dados{grid-template-columns:1fr 1fr}
  .dados div:nth-child(-n+2){grid-column:1/-1}
  .rodape{justify-content:center;gap:2px 14px;padding:10px var(--lado) 12px;font-size:11.5px;text-align:center}
  .assinatura{font-size:16px}
  .rs-dados .bt-ouro{align-self:stretch}
  .rota{width:112px;height:112px;margin:-56px 0 0 -56px;font-size:11.5px}
  .faq summary{font-size:16.5px;padding:18px 0}
  .faq p{padding-right:0}

}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .amb-fotos img,.trilho img,.capa-fotos,.voz{transition:none}
  .rota::before{animation:none}
  .abre-menu span,.ao-topo,.topo{transition:none}
}