/* ==========================================================================
   Brenda Frigo Arquitetura & Interiores — site
   Estilos compartilhados entre o site (index.html) e o design system do site
   (marca/site/). Tudo parte do DS v1.0 da marca: cores, Bellastra + Poppins,
   ícones de linha 1,2 px e a curva única de movimento.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
@font-face{ font-family:'BF Bellastra'; src:url('fonts/Bellastra-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'BF Bellastra'; src:url('fonts/Bellastra-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
/* nome próprio para não colidir com uma Poppins instalada no computador */
@font-face{ font-family:'BF Poppins'; src:url('fonts/Poppins-ExtraLight.woff2') format('woff2'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'BF Poppins'; src:url('fonts/Poppins-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'BF Poppins'; src:url('fonts/Poppins-LightItalic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:'BF Poppins'; src:url('fonts/Poppins-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'BF Poppins'; src:url('fonts/Poppins-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'BF Poppins'; src:url('fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ------------------------------------------------------------------ tokens */
:root{
  /* marca (DS v1.0) */
  --cafe:#763b13;          /* ação primária, títulos de destaque */
  --cafe-escuro:#4a2409;
  --terra:#b07b52;         /* terra clara */
  --areia:#eae4d8;
  --areia-clara:#f5f1e9;
  --traco:#ddd3c2;
  --branco:#ffffff;
  --sucesso:#5f7a52;
  --atencao:#a4442f;
  /* texto */
  --texto:#2b1a10;
  --texto-2:#5c4b3e;
  --texto-3:#7a6a5c;
  --rotulo:#a2917f;
  /* modo noite do site — o café escuro aprofundado, nunca preto puro */
  --noite:#1d130c;
  --noite-2:#26190f;
  --noite-linha:rgba(234,228,216,.10);
  --noite-texto:rgba(234,228,216,.72);
  --vidro:rgba(234,228,216,.07);
  --vidro-borda:rgba(234,228,216,.16);

  --f-display:'BF Bellastra', 'Times New Roman', serif;
  --f-ui:'BF Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-controle:4px;   /* botões, campos, chips */
  --r-card:6px;       /* cards e imagens */
  --r-painel:14px;    /* menu flutuante, painéis de vidro */

  --largura:1320px;
  --margem:clamp(20px,5vw,56px);
  --secao:clamp(88px,11vw,152px);

  /* movimento (DS §09): curva única e três durações */
  --curva:cubic-bezier(.16,1,.3,1);
  --rapido:200ms;
  --padrao:320ms;
  --amplo:800ms;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--noite); color:var(--texto);
  font-family:var(--f-ui); font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--cafe); color:var(--areia); }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pular{ position:fixed; left:12px; top:-60px; z-index:200; padding:10px 16px; background:var(--areia); color:var(--cafe); border-radius:var(--r-controle); font-size:14px; font-weight:500; text-decoration:none; transition:top var(--padrao) var(--curva); }
.pular:focus{ top:12px; }

.icone{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:square; }

.contem{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--margem); }
.secao{ position:relative; padding-block:var(--secao); }
.secao--noite{ background:var(--noite); color:var(--areia); }
.secao--areia{ background:var(--areia); }
.secao--clara{ background:var(--areia-clara); }
section[id]{ scroll-margin-top:72px; }

/* linhas verticais de grade — a prancheta por trás das seções escuras */
.linhas{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.linhas .contem{ height:100%; display:grid; grid-template-columns:repeat(4,1fr); }
.linhas i{ border-left:1px solid var(--noite-linha); }
.linhas i:last-child{ border-right:1px solid var(--noite-linha); }
.secao--areia .linhas i,.secao--clara .linhas i{ border-color:rgba(118,59,19,.07); }
@media (max-width:760px){ .linhas .contem{ grid-template-columns:repeat(2,1fr); } .linhas i:nth-child(n+3){ display:none; } }
.secao > .contem{ position:relative; z-index:1; }

/* ------------------------------------------------------------------ tipografia */
.rotulo{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; line-height:1.4;
  color:var(--rotulo);
}
.rotulo::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.7; }
.secao--noite .rotulo,.hero .rotulo{ color:var(--terra); }

.titulo{
  font-weight:300; font-size:clamp(34px,4.7vw,66px); line-height:1.08; letter-spacing:-.02em;
  color:var(--texto); text-wrap:balance;
}
.secao--noite .titulo{ color:var(--areia); }
/* Bellastra: um destaque por seção, nunca em caixa alta, nunca abaixo de 32 px */
.serifa{
  font-family:var(--f-display); font-style:italic; font-weight:400; letter-spacing:0;
  font-size:1.12em; line-height:.9; color:var(--cafe);
}
.secao--noite .serifa,.hero .serifa{ color:var(--terra); }
.lead{ font-size:clamp(16px,1.35vw,19px); line-height:1.75; color:var(--texto-2); max-width:52ch; }
.secao--noite .lead{ color:var(--noite-texto); }
.dado{ font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* cabeçalho de seção: rótulo + título à esquerda, apoio à direita */
.cabeca{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:end; gap:28px clamp(32px,6vw,96px); margin-bottom:clamp(44px,6vw,80px); }
.cabeca .rotulo{ margin-bottom:22px; }
.cabeca__apoio{ display:grid; gap:24px; justify-items:start; }
@media (max-width:900px){ .cabeca{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ botões
   DS §05: rótulo em caixa alta 0,14em; uma única ação primária por tela.
   Microinteração muda espaçamento e traço, nunca a cor do texto de corpo. */
.btn{
  --bg:var(--cafe); --fg:var(--areia); --bd:var(--cafe);
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:52px; padding:0 26px 0 30px;
  border:1px solid var(--bd); border-radius:var(--r-controle); background:var(--bg); color:var(--fg);
  font-family:var(--f-ui); font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:gap var(--padrao) var(--curva), background var(--padrao) ease, border-color var(--padrao) ease, color var(--padrao) ease, transform var(--rapido) ease;
}
.btn .icone{ width:18px; height:18px; transition:transform var(--padrao) var(--curva); }
.btn:hover{ gap:20px; }
.btn:active{ transform:translateY(1px); }
.btn--primario:hover{ --bg:var(--cafe-escuro); --bd:var(--cafe-escuro); }
.btn--claro{ --bg:var(--areia); --fg:var(--cafe); --bd:var(--areia); }
.btn--claro:hover{ --bg:var(--branco); --bd:var(--branco); }
.btn--contorno{ --bg:transparent; --fg:var(--cafe); --bd:rgba(118,59,19,.35); }
.btn--contorno:hover{ --bd:var(--cafe); }
.btn--vidro{ --bg:rgba(234,228,216,.08); --fg:var(--areia); --bd:rgba(234,228,216,.28); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.btn--vidro:hover{ --bg:rgba(234,228,216,.16); --bd:rgba(234,228,216,.5); }
.btn--pequeno{ min-height:42px; padding:0 18px 0 20px; font-size:11.5px; gap:10px; }
.btn--pequeno:hover{ gap:14px; }
.btn--whats{ --bg:#25d366; --fg:#fff; --bd:#25d366; }
.btn--whats:hover{ --bg:#1fbd5a; --bd:#1fbd5a; }
.btn--whats svg{ width:18px; height:18px; fill:currentColor; }
.btn--bloco{ width:100%; }

.link{
  display:inline-flex; align-items:center; gap:10px; padding-bottom:6px;
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--cafe); border-bottom:1px solid rgba(118,59,19,.3);
  transition:gap var(--padrao) var(--curva), border-color var(--padrao) ease;
}
.link .icone{ width:16px; height:16px; }
.link:hover{ gap:16px; border-color:currentColor; }
.secao--noite .link{ color:var(--areia); border-color:rgba(234,228,216,.3); }

.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 16px;
  border:1px solid var(--traco); border-radius:var(--r-controle); background:transparent;
  font-size:13px; font-weight:400; color:var(--texto-2); cursor:pointer;
  transition:border-color var(--rapido) ease, background var(--rapido) ease, color var(--rapido) ease;
}
.chip:hover{ border-color:var(--terra); }
.chip[aria-pressed="true"]{ background:var(--cafe); border-color:var(--cafe); color:var(--areia); }
.secao--noite .chip{ border-color:var(--vidro-borda); color:var(--noite-texto); }
.secao--noite .chip:hover{ border-color:rgba(234,228,216,.45); color:var(--areia); }
.secao--noite .chip[aria-pressed="true"]{ background:var(--areia); border-color:var(--areia); color:var(--cafe); }

/* ------------------------------------------------------------------ header
   Largo sobre o hero; ao rolar, encolhe para uma barra flutuante de vidro
   com cantos arredondados. Volta ao estado inicial no topo. */
.topo{ position:fixed; top:0; left:0; right:0; z-index:80; padding-top:0; transition:padding-top var(--padrao) var(--curva), transform var(--padrao) var(--curva); }
.topo.flutua{ padding-top:12px; }
.topo__interno{ max-width:var(--largura); margin-inline:auto; padding-inline:var(--margem); transition:max-width var(--padrao) var(--curva), padding-inline var(--padrao) var(--curva); }
.topo.flutua .topo__interno{ max-width:1100px; padding-inline:16px; }
.topo__caixa{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 0; border:1px solid transparent; border-radius:0; background:transparent;
  transition:padding var(--padrao) var(--curva), background var(--padrao) ease, border-color var(--padrao) ease,
             border-radius var(--padrao) var(--curva), box-shadow var(--padrao) ease;
}
/* sobre seção escura: vidro café; sobre seção clara: vidro areia */
.topo.flutua .topo__caixa{
  padding:9px 9px 9px 24px; border-radius:var(--r-painel);
  border-color:rgba(234,228,216,.14); background:rgba(29,19,12,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 4px 14px rgba(0,0,0,.10), 0 20px 44px rgba(0,0,0,.18);
}
.topo.flutua.claro .topo__caixa{
  border-color:rgba(118,59,19,.12); background:rgba(245,241,233,.8);
  box-shadow:0 4px 14px rgba(43,26,16,.06), 0 20px 44px rgba(43,26,16,.10);
}
.topo__marca{ position:relative; display:inline-flex; flex:none; }
.topo__logo{ height:40px; width:auto; transition:opacity var(--padrao) ease, height var(--padrao) var(--curva); }
.topo.flutua .topo__logo{ height:34px; }
.topo__logo--claro{ position:absolute; top:0; left:0; }
.topo__logo--escuro{ opacity:0; }
.topo.claro .topo__logo--claro{ opacity:0; }
.topo.claro .topo__logo--escuro{ opacity:1; }
.topo__nav{ display:flex; align-items:center; gap:clamp(18px,2.3vw,34px); margin-inline:auto; }
.topo__nav a{
  position:relative; padding:6px 0; text-decoration:none;
  font-size:13.5px; font-weight:400; letter-spacing:.01em; white-space:nowrap;
  color:rgba(234,228,216,.8); transition:color var(--padrao) ease;
}
/* item ativo: traço de 2 px (DS §06), nunca preenchimento */
.topo__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--padrao) var(--curva); }
.topo__nav a:hover,.topo__nav a[aria-current="true"]{ color:var(--areia); }
.topo__nav a:hover::after,.topo__nav a[aria-current="true"]::after{ transform:scaleX(1); }
.topo.claro .topo__nav a{ color:var(--texto-3); }
.topo.claro .topo__nav a:hover,.topo.claro .topo__nav a[aria-current="true"]{ color:var(--cafe); }
.topo__acoes{ display:flex; align-items:center; gap:10px; }
.topo:not(.claro) .topo__cta{ --bg:var(--areia); --fg:var(--cafe); --bd:var(--areia); }
.topo:not(.claro) .topo__cta:hover{ --bg:var(--branco); --bd:var(--branco); }
.topo__menu{
  display:none; width:44px; height:44px; place-items:center; flex:none;
  border:1px solid rgba(234,228,216,.35); border-radius:var(--r-controle); background:transparent; cursor:pointer;
  transition:border-color var(--padrao) ease;
}
.topo.claro .topo__menu{ border-color:rgba(118,59,19,.25); }
.topo__menu span{ position:relative; width:18px; height:8px; }
.topo__menu span::before,.topo__menu span::after{
  content:""; position:absolute; left:0; right:0; height:1.2px; background:var(--areia);
  transition:transform var(--padrao) var(--curva), top var(--padrao) var(--curva), background var(--padrao) ease;
}
.topo__menu span::before{ top:0; } .topo__menu span::after{ top:7px; }
.topo.claro .topo__menu span::before,.topo.claro .topo__menu span::after{ background:var(--cafe); }
@media (max-width:1060px){
  .topo__nav{ display:none; }
  .topo__menu{ display:grid; }
}
@media (max-width:560px){
  .topo__cta{ display:none; }
  .topo__logo{ height:32px; }
  .topo.flutua .topo__logo{ height:30px; }
  .topo.flutua .topo__interno{ padding-inline:10px; }
  .topo.flutua .topo__caixa{ padding:7px 7px 7px 16px; }
}

/* menu móvel: tela cheia em café noite, links numerados entrando em cascata */
.gaveta{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  padding:22px var(--margem) calc(28px + env(safe-area-inset-bottom));
  background:var(--noite); color:var(--areia);
  opacity:0; visibility:hidden; transition:opacity var(--padrao) ease, visibility 0s linear var(--padrao);
}
.gaveta.aberta{ opacity:1; visibility:visible; transition:opacity var(--padrao) ease; }
.gaveta__topo{ display:flex; align-items:center; justify-content:space-between; }
.gaveta__topo img{ height:32px; width:auto; }
.gaveta__fechar{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--vidro-borda); border-radius:var(--r-controle); background:transparent; cursor:pointer; }
.gaveta__links{ margin-block:auto; display:grid; gap:4px; }
.gaveta__links a{
  display:flex; align-items:baseline; gap:18px; padding:10px 0; border-bottom:1px solid var(--noite-linha);
  font-size:clamp(26px,7.4vw,40px); font-weight:300; letter-spacing:-.01em; text-decoration:none;
  opacity:0; transform:translateY(18px);
  transition:opacity var(--amplo) var(--curva), transform var(--amplo) var(--curva);
}
.gaveta__links a small{ font-size:11px; letter-spacing:.2em; color:var(--terra); font-weight:500; }
.gaveta.aberta .gaveta__links a{ opacity:1; transform:none; }
.gaveta.aberta .gaveta__links a:nth-child(2){ transition-delay:60ms; }
.gaveta.aberta .gaveta__links a:nth-child(3){ transition-delay:120ms; }
.gaveta.aberta .gaveta__links a:nth-child(4){ transition-delay:180ms; }
.gaveta.aberta .gaveta__links a:nth-child(5){ transition-delay:240ms; }
.gaveta.aberta .gaveta__links a:nth-child(6){ transition-delay:300ms; }
.gaveta__rodape{ display:grid; gap:14px; }
.gaveta__redes{ display:flex; gap:10px; font-size:13px; color:var(--noite-texto); flex-wrap:wrap; }

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; min-height:100svh; min-height:max(640px,100svh); display:flex; align-items:flex-end; overflow:hidden; background:var(--noite); color:var(--areia); isolation:isolate; }
.hero__img{ position:absolute; inset:0; z-index:-2; }
.hero__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(1.08); transition:transform 2.4s var(--curva); }
.carregado .hero__img img{ transform:scale(1); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(29,19,12,.55) 0%, rgba(29,19,12,0) 26%),
    linear-gradient(0deg, var(--noite) 0%, rgba(29,19,12,.88) 22%, rgba(29,19,12,.25) 58%, rgba(29,19,12,.05) 100%),
    linear-gradient(90deg, rgba(29,19,12,.55) 0%, rgba(29,19,12,0) 60%);
}
.hero .linhas{ z-index:-1; }
.hero__conteudo{ position:relative; width:100%; padding-top:140px; padding-bottom:clamp(40px,6vw,72px); }
.hero__grade{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:40px; }
.hero h1{ font-weight:300; font-size:clamp(42px,6.4vw,100px); line-height:1.02; letter-spacing:-.025em; max-width:13ch; margin-top:26px; }
.hero h1 .serifa{ display:inline-block; padding-right:.06em; }
.hero__texto{ margin-top:26px; max-width:46ch; font-size:clamp(16px,1.3vw,18.5px); color:var(--noite-texto); }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero__destaque{
  display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:center; width:320px;
  padding:12px 18px 12px 12px; border:1px solid var(--vidro-borda); border-radius:var(--r-painel);
  background:rgba(29,19,12,.35); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  text-decoration:none; transition:border-color var(--padrao) ease, background var(--padrao) ease;
}
.hero__destaque:hover{ border-color:rgba(234,228,216,.4); background:rgba(29,19,12,.5); }
.hero__destaque img{ width:88px; height:88px; object-fit:cover; border-radius:calc(var(--r-painel) - 6px); }
.hero__destaque small{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); font-weight:500; }
.hero__destaque strong{ display:block; margin-top:4px; font-size:16px; font-weight:400; }
.hero__destaque span{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12.5px; color:var(--noite-texto); }
.hero__destaque .icone{ width:15px; height:15px; }
.hero__rodape{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:clamp(40px,6vw,72px); padding-top:22px; border-top:1px solid var(--noite-linha); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,228,216,.55); }
.rolar{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.rolar i{ position:relative; width:1px; height:34px; background:rgba(234,228,216,.2); overflow:hidden; }
.rolar i::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--areia); animation:rolar 2.2s var(--curva) infinite; }
@keyframes rolar{ to{ top:100%; } }
@media (max-width:900px){
  .hero__grade{ grid-template-columns:1fr; }
  .hero__destaque{ display:none; }
}
@media (max-width:560px){
  .hero__acoes .btn{ flex:1 1 100%; }
  .hero__rodape span:first-child{ display:none; }
}

/* ------------------------------------------------------------------ manifesto + números */
.manifesto{ padding-top:clamp(40px,6vw,80px); }
.manifesto__grade{ display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,1fr); gap:28px clamp(32px,6vw,96px); }
.manifesto__grade > .rotulo{ align-self:start; margin-top:.9em; }
.manifesto__frase{ font-weight:300; font-size:clamp(24px,3.2vw,44px); line-height:1.32; letter-spacing:-.012em; color:var(--areia); text-wrap:pretty; }
/* palavras acendem conforme a rolagem */
.manifesto__frase .p{ color:rgba(234,228,216,.2); transition:color .5s ease; }
.manifesto__frase .p.acesa{ color:var(--areia); }
.manifesto__frase .p.cor.acesa{ color:var(--terra); }
.manifesto__assina{ display:flex; align-items:center; gap:16px; margin-top:40px; font-size:13px; color:var(--noite-texto); }
.manifesto__assina img{ height:34px; width:auto; }
@media (max-width:900px){ .manifesto__grade{ grid-template-columns:1fr; } }

.numeros{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(64px,8vw,112px);
  border:1px solid var(--vidro-borda); border-radius:var(--r-painel); background:var(--vidro);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); overflow:hidden;
}
.numeros > div{ padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,34px); border-left:1px solid var(--noite-linha); }
.numeros > div:first-child{ border-left:0; }
.numeros strong{ display:block; font-size:clamp(40px,4.6vw,64px); line-height:1; color:var(--areia); }
.numeros strong sup{ font-size:.45em; vertical-align:top; position:relative; top:.25em; margin-left:2px; color:var(--terra); }
.numeros p{ margin-top:14px; font-size:13.5px; line-height:1.55; color:var(--noite-texto); max-width:22ch; }
@media (max-width:900px){
  .numeros{ grid-template-columns:repeat(2,1fr); }
  .numeros > div:nth-child(3){ border-left:0; }
  .numeros > div:nth-child(n+3){ border-top:1px solid var(--noite-linha); }
}

/* ------------------------------------------------------------------ projetos
   Faixa de painéis que expandem (desktop); rolagem lateral com snap (móvel). */
.filtros{ display:flex; flex-wrap:wrap; gap:8px; }
.faixa{ display:flex; gap:10px; height:clamp(520px,72vh,740px); }
.painel{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:var(--r-card);
  background:var(--noite-2); cursor:pointer; isolation:isolate;
  transition:flex-grow var(--amplo) var(--curva), opacity var(--padrao) ease;
}
.painel.ativo{ flex-grow:4.2; cursor:default; }
.painel[hidden]{ display:none; }
.painel__img{ position:absolute; inset:0; z-index:-2; }
.painel__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 900ms var(--curva); }
.painel.ativo .painel__img img{ transform:scale(1); }
.painel::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(29,19,12,.86) 0%, rgba(29,19,12,.1) 55%, rgba(29,19,12,.25) 100%); transition:opacity var(--amplo) var(--curva); }
.painel.ativo::before{ opacity:.75; }
.painel__num{ position:absolute; top:22px; left:22px; font-size:12px; font-weight:500; letter-spacing:.18em; color:var(--areia); }
.painel__vertical{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-size:15px; font-weight:400; letter-spacing:.02em; color:var(--areia); white-space:nowrap;
  transition:opacity var(--padrao) ease;
}
.painel.ativo .painel__vertical{ opacity:0; }
.painel__info{
  position:absolute; left:16px; right:16px; bottom:16px; max-width:460px;
  padding:clamp(20px,2vw,28px); border:1px solid var(--vidro-borda); border-radius:var(--r-painel);
  background:rgba(29,19,12,.42); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  color:var(--areia); opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity var(--padrao) ease, transform var(--amplo) var(--curva);
}
.painel.ativo .painel__info{ opacity:1; transform:none; pointer-events:auto; transition-delay:.18s; }
.painel__meta{ font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); }
.painel__info h3{ margin-top:8px; font-size:clamp(22px,2vw,28px); font-weight:400; line-height:1.2; letter-spacing:-.01em; }
.painel__info p{ margin-top:10px; font-size:14px; line-height:1.65; color:var(--noite-texto); }
.painel__info .btn{ margin-top:18px; }
@media (hover:hover) and (min-width:761px){ .painel:not(.ativo):hover{ flex-grow:1.35; } }
@media (max-width:760px){
  .faixa{ height:auto; gap:12px; margin-inline:calc(var(--margem) * -1); padding-inline:var(--margem); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .faixa::-webkit-scrollbar{ display:none; }
  .painel,.painel.ativo{ flex:0 0 84%; aspect-ratio:3/4.3; scroll-snap-align:center; cursor:pointer; }
  .painel__vertical{ display:none; }
  .painel__img img{ transform:none; }
  .painel__info{ opacity:1; transform:none; pointer-events:auto; left:12px; right:12px; bottom:12px; }
  .painel__info p{ display:none; }
}
.faixa__nav{ display:none; }
@media (max-width:760px){
  .faixa__nav{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
  .faixa__nav button{ width:8px; height:8px; padding:0; border:0; border-radius:4px; background:rgba(234,228,216,.25); cursor:pointer; transition:width var(--padrao) var(--curva), background var(--padrao) ease; }
  .faixa__nav button[aria-current="true"]{ width:26px; background:var(--areia); }
}

/* ficha do projeto (dialog) */
.ficha{
  width:min(1240px, calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; margin:auto;
  border:1px solid var(--vidro-borda); border-radius:var(--r-painel); background:var(--noite); color:var(--areia); overflow:hidden;
}
.ficha::backdrop{ background:rgba(15,10,6,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ficha[open]{ animation:fichaEntra var(--amplo) var(--curva); }
@keyframes fichaEntra{ from{ opacity:0; transform:translateY(24px) scale(.985); } }
.ficha__grade{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); height:min(820px, calc(100dvh - 34px)); }
.ficha__midia{ position:relative; background:var(--noite-2); min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.ficha__foto{ position:relative; min-height:0; overflow:hidden; }
.ficha__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity var(--padrao) ease; }
.ficha__miniaturas{ display:flex; gap:8px; padding:12px; }
.ficha__miniaturas button{ width:76px; height:58px; padding:0; border:1px solid transparent; border-radius:var(--r-controle); overflow:hidden; background:none; cursor:pointer; opacity:.55; transition:opacity var(--rapido) ease, border-color var(--rapido) ease; }
.ficha__miniaturas button[aria-current="true"]{ opacity:1; border-color:var(--areia); }
.ficha__miniaturas img{ width:100%; height:100%; object-fit:cover; }
.ficha__texto{ display:flex; flex-direction:column; gap:22px; padding:clamp(28px,3.4vw,52px); overflow-y:auto; }
.ficha__texto h3{ font-size:clamp(28px,3vw,42px); font-weight:300; line-height:1.1; letter-spacing:-.015em; }
.ficha__texto > p{ font-size:15.5px; line-height:1.75; color:var(--noite-texto); }
.ficha__dados{ display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--noite-linha); }
.ficha__dados div{ padding:16px 0; }
.ficha__dados dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); font-weight:500; }
.ficha__dados dd{ margin-top:4px; font-size:15px; font-weight:400; }
.ficha__servicos{ display:flex; flex-wrap:wrap; gap:6px; }
.ficha__servicos li{ padding:6px 12px; border:1px solid var(--vidro-borda); border-radius:var(--r-controle); font-size:12.5px; color:var(--noite-texto); }
.ficha__acoes{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }
.ficha__fechar{
  position:absolute; top:14px; right:14px; z-index:2; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--vidro-borda); border-radius:var(--r-controle); background:rgba(29,19,12,.55); color:var(--areia); cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background var(--rapido) ease;
}
.ficha__fechar:hover{ background:rgba(29,19,12,.85); }
@media (max-width:860px){
  .ficha{ width:100%; max-height:100dvh; height:100dvh; border-radius:0; border:0; }
  .ficha{ overflow-y:auto; overscroll-behavior:contain; }
  .ficha__grade{ grid-template-columns:1fr; grid-template-rows:auto auto; height:auto; min-height:100dvh; align-content:start; }
  .ficha__midia{ grid-template-rows:auto auto; }
  .ficha__foto{ aspect-ratio:4/3.4; min-height:auto; }
  .ficha__texto{ overflow:visible; }
  .ficha__dados{ grid-template-columns:repeat(3,1fr); }
}

/* ------------------------------------------------------------------ sobre */
.sobre__grade{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); align-items:center; gap:clamp(48px,8vw,128px); }
.sobre__fotos{ position:relative; padding-bottom:clamp(40px,6vw,72px); padding-right:clamp(40px,6vw,80px); }
/* o arco vem do símbolo da marca */
.arco{ border-radius:999px 999px var(--r-card) var(--r-card); overflow:hidden; }
.sobre__retrato{ aspect-ratio:3/4; }
.sobre__retrato img,.sobre__detalhe img{ width:100%; height:100%; object-fit:cover; }
.sobre__retrato img{ object-position:50% 20%; }
.sobre__detalhe{
  position:absolute; right:0; bottom:0; width:42%; aspect-ratio:3/4; overflow:hidden;
  border:8px solid var(--areia); border-radius:var(--r-card); box-shadow:0 30px 60px rgba(43,26,16,.18);
}
.sobre__detalhe img{ object-position:50% 25%; }
.marca-dagua{ position:absolute; z-index:0; pointer-events:none; opacity:.09; will-change:transform; }
.sobre .marca-dagua{ width:clamp(280px,34vw,520px); left:-6%; top:6%; }
.sobre__texto{ position:relative; z-index:1; }
.sobre__texto .titulo{ margin-top:22px; }
.sobre__texto .lead + .lead{ margin-top:18px; }
.sobre__texto .titulo + .lead{ margin-top:30px; }
.valores{ display:grid; gap:0; margin-top:40px; border-top:1px solid rgba(118,59,19,.14); }
.valores li{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:18px 0; border-bottom:1px solid rgba(118,59,19,.14); }
.valores .icone{ margin-top:3px; color:var(--cafe); }
.valores strong{ display:block; font-size:15.5px; font-weight:500; color:var(--texto); }
.valores span{ display:block; margin-top:2px; font-size:14.5px; line-height:1.6; color:var(--texto-3); }
.assinatura{ display:flex; align-items:center; gap:18px; margin-top:36px; }
.assinatura img{ height:48px; width:auto; }
.assinatura p{ font-size:13px; line-height:1.55; color:var(--texto-3); }
.assinatura strong{ display:block; font-size:15px; font-weight:500; color:var(--texto); }
@media (max-width:900px){ .sobre__grade{ grid-template-columns:1fr; } .sobre__fotos{ max-width:520px; } }

/* ------------------------------------------------------------------ processo / serviços */
.processo__grade{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(40px,7vw,112px); align-items:start; }
.processo__fixo{ position:sticky; top:96px; }
.processo__fixo .titulo{ margin-top:14px; }
.processo__fixo .lead{ margin-top:14px; }
/* a vitrine nunca passa da altura da tela: título, texto e foto cabem juntos */
.processo__vitrine{ position:relative; margin-top:24px; aspect-ratio:4/3; max-height:max(240px, calc(100svh - 470px)); width:100%; border-radius:var(--r-card); overflow:hidden; background:var(--areia); }
.processo__vitrine img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity var(--amplo) var(--curva), transform 1.2s var(--curva); }
.processo__vitrine img.ativa{ opacity:1; transform:scale(1); }
.processo__legenda{
  position:absolute; left:14px; bottom:14px; padding:8px 14px; border-radius:var(--r-controle);
  background:rgba(245,241,233,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--cafe);
}
.etapas{ counter-reset:etapa; border-top:1px solid var(--traco); }
.etapa{
  position:relative; display:grid; grid-template-columns:64px 1fr; gap:4px 20px;
  padding:30px 0 30px 0; border-bottom:1px solid var(--traco);
  transition:padding var(--padrao) var(--curva);
}
.etapa::before{ content:""; position:absolute; left:0; top:-1px; width:100%; height:2px; background:var(--cafe); transform:scaleX(0); transform-origin:left; transition:transform var(--amplo) var(--curva); }
.etapa.ativa::before{ transform:scaleX(1); }
.etapa__num{ grid-row:span 3; font-size:13px; font-weight:500; letter-spacing:.14em; color:var(--rotulo); padding-top:6px; transition:color var(--padrao) ease; }
.etapa.ativa .etapa__num{ color:var(--cafe); }
.etapa h3{ display:flex; align-items:center; gap:14px; font-size:clamp(20px,1.8vw,25px); font-weight:400; line-height:1.3; letter-spacing:-.01em; color:var(--texto); }
.etapa h3 .icone{ color:var(--cafe); width:24px; height:24px; }
.etapa p{ font-size:15.5px; line-height:1.7; color:var(--texto-2); max-width:56ch; }
.etapa small{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; letter-spacing:.06em; color:var(--texto-3); }
.etapa small::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--terra); }
.etapa__miniatura{ display:none; }
@media (max-width:900px){
  .processo__grade{ grid-template-columns:1fr; }
  .processo__fixo{ position:static; }
  .processo__vitrine{ display:none; }
  .etapa{ grid-template-columns:44px 1fr; }
  .etapa__miniatura{ display:block; grid-column:2; margin-top:14px; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden; }
  .etapa__miniatura img{ width:100%; height:100%; object-fit:cover; }
}

/* ------------------------------------------------------------------ antes e depois */
.comparar{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden; user-select:none; touch-action:pan-y;
  background:var(--noite-2); --pos:50%;
}
.comparar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.comparar__antes{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.comparar__linha{ position:absolute; top:0; bottom:0; left:var(--pos); width:1px; background:var(--areia); transform:translateX(-.5px); pointer-events:none; }
.comparar__alca{
  position:absolute; top:50%; left:var(--pos); width:58px; height:58px; transform:translate(-50%,-50%);
  display:grid; place-items:center; border-radius:50%; border:1px solid rgba(234,228,216,.6);
  background:rgba(29,19,12,.35); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--areia); pointer-events:none;
  transition:transform var(--padrao) var(--curva);
}
.comparar:active .comparar__alca{ transform:translate(-50%,-50%) scale(.92); }
.comparar__alca svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.2; }
.comparar input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.comparar__tag{
  position:absolute; top:16px; padding:8px 14px; border-radius:var(--r-controle);
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; pointer-events:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.comparar__tag--antes{ left:16px; background:rgba(245,241,233,.8); color:var(--cafe); }
.comparar__tag--depois{ right:16px; background:rgba(29,19,12,.5); color:var(--areia); }
.render__rodape{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(36px,4vw,56px); }
.render__rodape div{ padding-top:20px; border-top:1px solid var(--noite-linha); }
.render__rodape strong{ display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:500; color:var(--areia); }
.render__rodape .icone{ color:var(--terra); }
.render__rodape p{ margin-top:8px; font-size:14.5px; line-height:1.65; color:var(--noite-texto); }
@media (max-width:760px){ .comparar{ aspect-ratio:4/3.6; } .render__rodape{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ depoimentos */
.depo__trilho{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * 20px) / 3); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.depo__trilho::-webkit-scrollbar{ display:none; }
.depo{
  scroll-snap-align:start; display:flex; flex-direction:column; gap:26px; padding:clamp(26px,2.6vw,38px);
  border:1px solid var(--traco); border-radius:var(--r-card); background:var(--branco);
  transition:box-shadow var(--padrao) ease, transform var(--padrao) var(--curva), border-color var(--padrao) ease;
}
.depo:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 24px 50px rgba(43,26,16,.10); }
.depo__aspas{ width:34px; height:auto; color:var(--terra); }
.depo blockquote{ font-size:16.5px; line-height:1.72; color:var(--texto-2); }
.depo footer{ margin-top:auto; display:flex; align-items:center; gap:14px; padding-top:22px; border-top:1px solid var(--traco); }
.depo footer .depo__inicial{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--areia); color:var(--cafe); font-weight:500; font-size:15px; }
.depo footer strong{ display:block; font-size:15px; font-weight:500; color:var(--texto); }
.depo footer span{ display:block; font-size:13px; color:var(--texto-3); }
.depo__controles{ display:flex; gap:8px; }
.seta{
  width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(118,59,19,.3); border-radius:var(--r-controle);
  background:transparent; color:var(--cafe); cursor:pointer; transition:background var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease;
}
.seta:hover:not(:disabled){ background:var(--cafe); border-color:var(--cafe); color:var(--areia); }
.seta:disabled{ opacity:.3; cursor:default; }
.seta .icone{ width:20px; height:20px; }
@media (max-width:1000px){ .depo__trilho{ grid-auto-columns:calc((100% - 20px) / 2); } }
@media (max-width:640px){ .depo__trilho{ grid-auto-columns:88%; margin-inline:calc(var(--margem) * -1); padding-inline:var(--margem); scroll-padding-inline:var(--margem); } }

/* ------------------------------------------------------------------ dúvidas */
.duvidas__grade{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(40px,7vw,112px); align-items:start; }
.duvidas__grade .titulo{ margin-top:22px; }
.duvidas__grade .lead{ margin-top:24px; }
.duvidas__grade .btn{ margin-top:34px; }
.faq{ border-top:1px solid var(--traco); }
.faq__item{ border-bottom:1px solid var(--traco); }
.faq__pergunta{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:24px; padding:26px 0;
  border:0; background:none; text-align:left; cursor:pointer;
  font-size:clamp(17px,1.4vw,20px); font-weight:400; line-height:1.4; color:var(--texto);
  transition:color var(--rapido) ease;
}
.faq__pergunta:hover{ color:var(--cafe); }
.faq__mais{ position:relative; width:18px; height:18px; flex:none; color:var(--cafe); }
.faq__mais::before,.faq__mais::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:1.2px; background:currentColor; transition:transform var(--padrao) var(--curva); }
.faq__mais::after{ transform:rotate(90deg); }
.faq__item.aberto .faq__mais::after{ transform:rotate(0); }
.faq__resposta{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--padrao) var(--curva); }
.faq__item.aberto .faq__resposta{ grid-template-rows:1fr; }
.faq__resposta > div{ overflow:hidden; }
.faq__resposta p{ padding:0 48px 28px 0; font-size:15.5px; line-height:1.75; color:var(--texto-2); }
@media (max-width:900px){ .duvidas__grade{ grid-template-columns:1fr; } .faq__resposta p{ padding-right:0; } }

/* ------------------------------------------------------------------ contato */
.contato{ overflow:hidden; isolation:isolate; }
.contato__fundo{ position:absolute; inset:0; z-index:-1; }
.contato__fundo img{ width:100%; height:100%; object-fit:cover; opacity:.22; filter:saturate(.8); }
.contato__fundo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--noite) 0%, rgba(29,19,12,.78) 55%, rgba(29,19,12,.9) 100%); }
.contato__grade{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,7vw,112px); align-items:start; }
.contato__grade .titulo{ margin-top:22px; }
.contato__grade .lead{ margin-top:24px; }
.canais{ display:grid; margin-top:40px; border-top:1px solid var(--noite-linha); }
.canais a{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--noite-linha); text-decoration:none; transition:padding var(--padrao) var(--curva); }
.canais a:hover{ padding-left:8px; }
.canais .canais__ico{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--vidro-borda); border-radius:var(--r-controle); color:var(--terra); }
.canais .canais__ico svg{ width:19px; height:19px; }
.canais small{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); font-weight:500; }
.canais span{ display:block; font-size:16px; color:var(--areia); overflow-wrap:break-word; }
.canais .icone{ width:18px; height:18px; color:var(--noite-texto); }
@media (max-width:480px){ .canais a{ grid-template-columns:44px 1fr; } .canais a > .icone{ display:none; } .canais span{ font-size:15px; } }

.form{
  padding:clamp(26px,3.2vw,48px); border:1px solid var(--vidro-borda); border-radius:var(--r-painel);
  background:rgba(245,241,233,.97); color:var(--texto);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}
.form__titulo{ font-size:clamp(22px,2vw,28px); font-weight:300; line-height:1.25; letter-spacing:-.01em; }
.form__apoio{ margin-top:8px; font-size:14px; color:var(--texto-3); line-height:1.6; }
.form__campos{ display:grid; grid-template-columns:1fr 1fr; gap:26px 22px; margin-top:30px; }
.campo{ display:grid; gap:6px; }
.campo--cheio{ grid-column:1 / -1; }
/* DS §08: no site, campo com traço inferior e rótulo sempre visível */
.campo label,.campo legend{ padding:0; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-3); }
.campo input,.campo select,.campo textarea{
  width:100%; padding:10px 0 12px; border:0; border-bottom:1px solid var(--traco); border-radius:0; background:transparent;
  font:inherit; font-size:16px; font-weight:300; color:var(--texto); outline:0;
  transition:border-color var(--rapido) ease;
}
.campo textarea{ resize:vertical; min-height:92px; line-height:1.6; }
.campo select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23763b13' stroke-width='1.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center; background-size:18px; padding-right:28px; cursor:pointer; }
.campo input::placeholder,.campo textarea::placeholder{ color:#b5a796; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--cafe); }
.campo--erro input{ border-color:var(--atencao); }
.campo__erro{ display:none; font-size:12.5px; color:var(--atencao); }
.campo--erro .campo__erro{ display:block; }
fieldset.campo{ border:0; margin:0; padding:0; min-width:0; }
.opcoes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.opcoes label{ position:relative; }
.opcoes input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opcoes span{
  display:inline-flex; align-items:center; min-height:38px; padding:0 15px; border:1px solid var(--traco); border-radius:var(--r-controle);
  font-size:13.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--texto-2); cursor:pointer;
  transition:border-color var(--rapido) ease, background var(--rapido) ease, color var(--rapido) ease;
}
.opcoes input:hover + span{ border-color:var(--terra); }
.opcoes input:checked + span{ background:var(--cafe); border-color:var(--cafe); color:var(--areia); }
.opcoes input:focus-visible + span{ outline:2px solid var(--terra); outline-offset:2px; }
.form__rodape{ display:grid; gap:14px; margin-top:32px; }
.form__nota{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--texto-3); }
.form__nota .icone{ width:16px; height:16px; color:var(--sucesso); }
@media (max-width:980px){ .contato__grade{ grid-template-columns:1fr; } }
@media (max-width:560px){ .form__campos{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ rodapé */
.rodape{ position:relative; background:var(--cafe-escuro); color:var(--areia); padding-top:clamp(72px,9vw,120px); overflow:hidden; }
.rodape__grade{ display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.7fr)); gap:40px clamp(28px,4vw,64px); }
.rodape__marca img{ height:118px; width:auto; }
.rodape__marca p{ margin-top:26px; max-width:32ch; font-size:14.5px; line-height:1.7; color:rgba(234,228,216,.7); }
.rodape h4{ font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--terra); }
.rodape ul{ display:grid; gap:10px; margin-top:20px; }
.rodape li a,.rodape li{ font-size:14.5px; color:rgba(234,228,216,.82); text-decoration:none; transition:color var(--rapido) ease; }
.rodape li a:hover{ color:var(--areia); }
.rodape__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:clamp(56px,7vw,96px); padding-block:26px; border-top:1px solid rgba(234,228,216,.14); font-size:12.5px; color:rgba(234,228,216,.6); }
.rodape__base a{ color:inherit; }
.rodape__icone{ position:absolute; right:-4%; bottom:-18%; width:clamp(260px,34vw,560px); opacity:.06; pointer-events:none; }
@media (max-width:900px){ .rodape__grade{ grid-template-columns:repeat(3,1fr); } .rodape__marca{ grid-column:1 / -1; } }
@media (max-width:560px){ .rodape__grade{ grid-template-columns:1fr 1fr; } .rodape__grade > div:last-child{ grid-column:1 / -1; } .rodape__marca img{ height:96px; } }

/* WhatsApp flutuante — aparece depois do hero */
.flutuante{
  position:fixed; right:clamp(14px,2.4vw,28px); bottom:calc(clamp(14px,2.4vw,28px) + env(safe-area-inset-bottom)); z-index:70;
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 20px 0 16px; border-radius:var(--r-painel);
  background:#25d366; color:#fff; text-decoration:none; font-size:14px; font-weight:500;
  box-shadow:0 12px 30px rgba(20,90,50,.35);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity var(--padrao) ease, transform var(--padrao) var(--curva), background var(--rapido) ease;
}
.flutuante.visivel{ opacity:1; transform:none; pointer-events:auto; }
.flutuante:hover{ background:#1fbd5a; }
.flutuante svg{ width:24px; height:24px; fill:currentColor; }
@media (max-width:560px){ .flutuante{ width:54px; padding:0; justify-content:center; } .flutuante span{ display:none; } }

/* ------------------------------------------------------------------ revelação (DS §09)
   Tudo entra de baixo para cima; cascata de 60 ms. Só age com JS ativo. */
.js [data-revela]{ opacity:0; transform:translateY(28px); transition:opacity var(--amplo) var(--curva), transform var(--amplo) var(--curva); transition-delay:calc(var(--i, 0) * 60ms); }
.js [data-revela].visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .js [data-revela]{ opacity:1; transform:none; }
  .manifesto__frase .p{ color:var(--areia); }
}
.manifesto__frase em{ font-style:normal; }
.gaveta[hidden]{ display:none; }