/* ==========================================================================
   MS Construcoes Inteligentes
   Tokens conforme "MS - Manual da Marca" (handoff de design, 2026).
   Paleta de marca travada: nao inverte com prefers-color-scheme.
   ========================================================================== */

:root{
  /* Cores da marca, secao 4 do manual */
  --espresso:#2B2620;
  --couro:#A9743B;
  --argila:#9E4A2E;
  --musgo:#55604A;
  --creme:#F0EAE0;

  /* Texto de apoio, definido no manual */
  --sobre-claro:#4a443b;
  --sobre-escuro:rgba(240,234,224,.75);

  /* Couro #A9743B em texto de 11 a 14 px da 3.7:1 sobre Espresso e 3.3:1
     sobre Creme, abaixo do minimo AA de 4.5:1. Para texto pequeno usamos
     um tom claro derivado do proprio Couro sobre fundo escuro (4.98:1) e a
     Argila da marca sobre fundo claro (5.00:1). O Couro original segue
     intacto em fios, molduras e tipografia de display. */
  --couro-texto:#C08A4C;

  /* Derivados para fios e superficies. Sempre a partir dos cinco acima. */
  --fio-escuro:rgba(240,234,224,.16);
  --fio-claro:rgba(43,38,32,.16);
  --elev-escuro:#332D26;
  --elev-claro:#E5DDD0;

  /* Tipografia, secao 5 do manual */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Escala de 8 px */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* Grid: 12 colunas, largura maxima 1280, gutter 24 */
  --max:1280px;
  --gutter:24px;

  /* Cantos retos: a marca e estrutural */
  --raio:2px;

  --ease:cubic-bezier(.16,1,.3,1);

  /* Camadas. Escala documentada, nada de z-index avulso. */
  --z-seq:1;
  --z-conteudo:2;
  --z-nav:40;
  --z-flutuante:50;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html{
  /* Nunca scroll-behavior:smooth aqui. O ScrollTrigger rola a pagina
     programaticamente ao medir secoes pinadas; suavizar torna essas
     rolagens assincronas e desloca todos os triggers. Ancora e suavizada
     em JS, no clique. */
  -webkit-text-size-adjust:100%;
}
html,body{overflow-x:clip}      /* clip, nunca hidden: hidden cria um scroll
                                   container e quebra a leitura de posicao
                                   do ScrollTrigger */

body{
  margin:0;
  background:var(--espresso);
  color:var(--creme);
  font-family:var(--texto);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}

a{color:var(--couro);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.22em}

:focus-visible{
  outline:2px solid var(--couro);
  outline-offset:3px;
}

/* ---------- utilidades de grade ---------- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sec{padding-block:var(--s7)}
@media (min-width:900px){ .sec{padding-block:var(--s8)} }

.claro{background:var(--creme);color:var(--espresso)}
.claro a{color:var(--argila)}

/* ---------- tipografia ---------- */

/* O manual pede Cormorant 500/600 nos titulos e .12em de tracking no hero.
   Medido em cobertura de tinta, o 600 so adiciona 15% de traco sobre o 500 e
   segue fino demais para leitura confortavel; o 700 adiciona 107%. Como o
   tracking largo tambem afina a mancha, ele desce para .04em. Duas alteracoes
   deliberadas sobre o manual, feitas por legibilidade. */
.h1,.h2,.h3{
  font-family:var(--display);
  font-weight:700;
  margin:0;
  text-wrap:balance;
}

.h1{
  font-size:clamp(36px,5.8vw,68px);
  line-height:1.14;
  letter-spacing:.04em;
}
/* segunda linha do headline: mesma frase, escala menor */
.h1-menor{
  display:block;
  /* em puro encolheria demais no mobile, abaixo do corpo de 17px.
     O clamp segura um piso legivel sem inchar no desktop. */
  font-size:clamp(19px,.46em,32px);
  font-weight:600;
  line-height:1.26;
  letter-spacing:.04em;
  color:var(--creme);
  opacity:.92;
  margin-top:.42em;
}
.h2{
  font-size:clamp(29px,4vw,46px);
  line-height:1.22;
  letter-spacing:.03em;
}
.h3{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(21px,2.2vw,28px);
  line-height:1.3;
  letter-spacing:.02em;
}

.eyebrow{
  font-family:var(--texto);
  font-weight:600;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--couro-texto);
  margin:0 0 var(--s3);
}
.claro .eyebrow{color:var(--argila)}

.slogan{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(21px,2.6vw,32px);
  /* italico com descendente (g, p, y) precisa de folga ou o rabo corta */
  line-height:1.2;
  padding-bottom:.12em;
  color:var(--couro);
  margin:0;
}

.lead{
  font-size:clamp(17px,1.5vw,19px);
  line-height:1.65;
  max-width:62ch;
  color:var(--sobre-escuro);
  margin:0;
}
.claro .lead{color:var(--sobre-claro)}

.corpo{max-width:65ch;color:var(--sobre-escuro);margin:0}
.claro .corpo{color:var(--sobre-claro)}

.nota{
  font-size:12.5px;
  line-height:1.55;
  color:var(--sobre-escuro);
  opacity:.8;
  max-width:70ch;
  margin:0;
}
.claro .nota{color:var(--sobre-claro)}

/* ---------- botoes, secao 6 do manual ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;                 /* alvo de toque acima do minimo de 44 */
  padding:0 var(--s4);
  border-radius:var(--raio);
  border:1px solid transparent;
  font-family:var(--texto);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;              /* rotulo de CTA nunca quebra em duas linhas */
  cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .12s var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}

/* Argila #9E4A2E com Creme #F0EAE0: contraste 6.6:1, passa AA */
.btn-primario{background:var(--argila);color:var(--creme);border-color:var(--argila)}
.btn-primario:hover{background:#8a3f27;border-color:#8a3f27}

/* contorno 1px Couro, texto Espresso sobre claro / Creme sobre escuro */
.btn-secundario{border-color:var(--couro);color:var(--creme);background:transparent}
.btn-secundario:hover{background:var(--couro);color:var(--espresso);border-color:var(--couro)}
.claro .btn-secundario{color:var(--espresso)}
.claro .btn-secundario:hover{color:var(--creme);background:var(--argila);border-color:var(--argila)}

.acoes{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- revelacao ao entrar na viewport ---------- */

.rev{opacity:0;transform:translateY(22px)}
.js-on .rev{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.dentro{opacity:1;transform:none}
/* sem JS o conteudo tem que aparecer inteiro */
html:not(.js-on) .rev{opacity:1;transform:none}

/* ==========================================================================
   Navegacao
   ========================================================================== */

.nav{
  position:fixed;inset:0 0 auto 0;
  z-index:var(--z-nav);
  height:78px;                      /* teto de 80 px do desktop */
  display:flex;align-items:center;
  background:transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solida{
  background:rgba(43,38,32,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--fio-escuro);
}
.nav .wrap{display:flex;align-items:center;gap:var(--s4);width:100%}

/* O lockup em SVG e largo: preso a 38px de altura, o nome caia para ~10px e
   ficava ilegivel. O selo vira SVG isolado, em escala confortavel, e o nome
   passa a ser texto HTML de verdade, na mesma Cormorant do lockup oficial. */
.marca{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-height:44px}
.marca-selo{height:44px;width:auto;flex:0 0 auto}
.marca-nome{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  line-height:1.14;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--creme);
  padding-left:14px;
  border-left:1px solid var(--fio-escuro);
  white-space:nowrap;
}
.marca:hover{text-decoration:none}
@media (max-width:520px){
  .marca{gap:10px}
  .marca-selo{height:38px}
  .marca-nome{font-size:12.5px;letter-spacing:.1em;padding-left:10px}
}
/* telas muito estreitas ficam so com o selo */
@media (max-width:359px){ .marca-nome{display:none} }

.nav-links{
  display:none;
  margin-left:auto;
  align-items:center;
  gap:var(--s4);
  list-style:none;padding:0;margin-block:0;
}
.nav-links a{
  color:var(--creme);
  font-size:13px;font-weight:500;letter-spacing:.06em;
  white-space:nowrap;
  opacity:.85;
  transition:opacity .25s var(--ease),color .25s var(--ease);
}
.nav-links a:hover{opacity:1;color:var(--couro-texto);text-decoration:none}

/* Abaixo de 620px o trio logo + CTA + hamburguer nao cabe e o hamburguer
   sai da tela (o overflow-x:clip do html esconde o estouro em vez de gerar
   barra, entao o botao simplesmente some). Nesse ponto o CTA do nav sai: a
   conversao continua coberta pelo botao do hero e pelo WhatsApp flutuante. */
.nav .btn{display:none;margin-left:auto;height:44px;min-height:44px;padding:0 var(--s3);font-size:12px}
@media (min-width:620px){ .nav .btn{display:inline-flex} }
/* Com seis itens o conjunto marca + links + CTA precisa de ~1190px. Em
   1024 o botao era empurrado para fora da tela. Ate 1199 quem resolve e o
   hamburguer. */
@media (min-width:1200px){
  .nav-links{display:flex}
  .nav .btn{margin-left:0}
}

/* menu mobile */
.menu-btn{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:none;border:1px solid var(--fio-escuro);border-radius:var(--raio);
  color:var(--creme);cursor:pointer;
}
.menu-btn svg{width:20px;height:20px}
@media (min-width:1200px){ .menu-btn{display:none} }

.menu{
  position:fixed;inset:78px 0 0 0;
  z-index:var(--z-nav);
  background:var(--espresso);
  padding:var(--s5) var(--gutter);
  display:flex;flex-direction:column;gap:var(--s2);
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.menu[data-aberto="true"]{opacity:1;transform:none;visibility:visible}
.menu a{
  font-family:var(--display);font-size:28px;font-weight:500;
  color:var(--creme);padding-block:var(--s1);
  border-bottom:1px solid var(--fio-escuro);
}
.menu a:hover{color:var(--couro-texto);text-decoration:none}
@media (min-width:1200px){ .menu{display:none} }

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:100dvh;               /* nunca 100vh: a barra do Safari iOS pula */
  display:flex;align-items:flex-end;
  padding-top:78px;
  overflow:hidden;
}
.hero-midia{position:absolute;inset:0;z-index:0}
.hero-midia video,
.hero-midia img{width:100%;height:100%;object-fit:cover}

/* scrim do manual: Espresso a 80% ate transparente, antes de qualquer texto */
.hero-midia::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(43,38,32,.92) 0%,rgba(43,38,32,.62) 38%,rgba(43,38,32,.18) 72%,rgba(43,38,32,.42) 100%),
    linear-gradient(to right,rgba(43,38,32,.80) 0%,rgba(43,38,32,.35) 46%,transparent 78%);
}

.hero .wrap{position:relative;z-index:var(--z-conteudo);padding-bottom:var(--s7)}
.hero-copy{max-width:660px}
.hero .h1{margin-bottom:var(--s3)}
.hero .lead{margin-bottom:var(--s5);max-width:52ch}

@media (min-width:900px){
  .hero{align-items:center}
  .hero .wrap{padding-bottom:0;padding-top:var(--s5)}   /* teto de pt-24 */
}

/* ==========================================================================
   2. Prova imediata. Regua horizontal, sem cards.
   ========================================================================== */

.provas{
  display:grid;gap:var(--s5);
  grid-template-columns:1fr;
  border-top:1px solid var(--fio-escuro);
  padding-top:var(--s5);
}
@media (min-width:760px){ .provas{grid-template-columns:repeat(3,1fr);gap:var(--s4)} }

.prova-num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,4.6vw,54px);line-height:1;
  color:var(--couro);
  margin:0 0 var(--s2);
}
.prova-tit{font-size:15px;font-weight:600;margin:0 0 6px;letter-spacing:.01em}
.prova-txt{font-size:14px;line-height:1.55;color:var(--sobre-escuro);margin:0;max-width:34ch}

/* ==========================================================================
   3. O que e steel frame. Unico split imagem/texto da pagina.
   ========================================================================== */

.split{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr;gap:var(--s7)}
  .split-midia{order:2}
}
.split-midia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio)}
.split .h2{margin-bottom:var(--s3)}
.split .corpo + .corpo{margin-top:var(--s3)}

.destaques{
  list-style:none;padding:0;margin:var(--s5) 0 0;
  display:grid;gap:var(--s3);
}
.destaques li{padding-left:var(--s3);border-left:2px solid var(--couro)}
.destaques strong{display:block;font-size:15px;font-weight:600;color:var(--creme);margin-bottom:2px}
.destaques span{font-size:14px;line-height:1.55;color:var(--sobre-escuro)}

/* ==========================================================================
   4. Da planta a chave. Canvas pinado com frame sequence.
   ========================================================================== */

.timelapse{position:relative;background:var(--espresso)}

.tl-palco{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.tl-fundo{position:absolute;inset:0;z-index:var(--z-seq)}
.tl-fundo canvas,
.tl-fundo img,
.tl-fundo video{width:100%;height:100%;object-fit:cover}
/* Scrim medido, nao chutado: os frames finais tem pixel 255 (ceu, parede
   clara, luz acesa) exatamente onde a copy fica. Vertical sozinho deixava
   o texto em ~1.5:1. Com a camada horizontal a esquerda o pior caso vai
   para ~8.5:1, acima de AAA. */
.tl-fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(43,38,32,.92) 0%,rgba(43,38,32,.55) 42%,rgba(43,38,32,.38) 100%),
    linear-gradient(to right,rgba(43,38,32,.82) 0%,rgba(43,38,32,.45) 44%,transparent 76%);
}
.tl-conteudo{
  position:relative;z-index:var(--z-conteudo);
  width:100%;
}

.tl-abertura{max-width:620px}
.tl-abertura .h2{margin-bottom:var(--s3)}

/* As 4 fases resolvem no fim da timeline */
.tl-fases{
  display:grid;gap:var(--s3);
  grid-template-columns:1fr;
  margin-top:var(--s5);
}
/* 2x2, nao 1x4: com o texto atual, quatro colunas estreitas empilhariam
   dez linhas cada uma em cima da foto. */
@media (min-width:760px){ .tl-fases{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5)} }
@media (min-width:1180px){ .tl-fases{max-width:1020px} }

.fase{
  border-top:1px solid var(--couro);
  padding-top:var(--s2);
}
.fase b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:19px;letter-spacing:.02em;color:var(--creme);margin-bottom:2px;
}
.fase span{font-size:14.5px;line-height:1.55;color:var(--sobre-escuro);display:block;max-width:46ch}

/* Estados dirigidos pelo scroll. Sem JS ou com movimento reduzido tudo
   aparece de uma vez (regras no fim do arquivo). */
.js-on .tl-scrub .tl-abertura,
.js-on .tl-scrub .tl-fases{will-change:opacity,transform}

/* fallback de toque: bloco 16:9 com a copy embaixo, nunca full-bleed
   (16:9 em viewport retrato com cover cortaria a casa para fora da tela) */
.tl-toque{display:none}
.tl-toque video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--raio)}
.tl-toque .tl-fases{margin-top:var(--s5)}

/* ==========================================================================
   6. Steel frame x alvenaria
   ========================================================================== */

/* Metade em italico dentro do titulo. Italico do MESMO tipo, nunca outra
   familia. So o peso 500 tem italico no projeto, entao o corte sai um pouco
   mais leve que o romano 700 do resto: e o mesmo contraste da referencia. */
#comparativo .h2 em{
  font-style:italic;
  font-weight:500;
  /* Argila, nao o tom claro do Couro: esta secao e sempre de fundo Creme, e
     o tom claro daria 2.5:1 sobre ele. O seletor tem id, entao venceria
     qualquer regra de .claro escrita depois. */
  color:var(--argila);
  /* "que" e "m2" descem abaixo da linha de base: sem folga o rabo do q corta */
  line-height:1.24;
  padding-bottom:.06em;
}

/* Tabela larga rola dentro do proprio container, nunca empurra a pagina.
   Preserva a semantica de tabela, que o leitor de tela precisa para associar
   cada valor ao fator e a coluna. */
.tabela-rolagem{
  margin-top:var(--s6);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;

  /* Sombra nas bordas indicando que ha mais tabela para o lado. A tecnica usa
     background-attachment: as camadas "local" acompanham o conteudo e cobrem
     a sombra quando nao ha mais o que rolar, entao a dica some sozinha nas
     pontas, sem JavaScript. */
  background:
    linear-gradient(to right,  var(--creme) 40%, rgba(240,234,224,0)) left center,
    linear-gradient(to left,   var(--creme) 40%, rgba(240,234,224,0)) right center,
    radial-gradient(farthest-side at 0   50%, rgba(43,38,32,.16), rgba(43,38,32,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(43,38,32,.16), rgba(43,38,32,0)) right center;
  background-repeat:no-repeat;
  background-size:48px 100%, 48px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
.tabela-rolagem:focus-visible{outline:2px solid var(--argila);outline-offset:4px}

.tabela-comp{
  width:100%;
  min-width:600px;
  border-collapse:collapse;
  font-size:15px;
  text-align:left;
}

.tabela-comp th,
.tabela-comp td{
  padding:16px var(--s3);
  vertical-align:top;
}

/* Fio so entre linhas, nunca em cima e embaixo de cada uma. */
.tabela-comp tbody tr{border-bottom:1px solid var(--fio-claro)}
.tabela-comp tbody tr:last-child{border-bottom:0}

.tabela-comp thead th{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sobre-claro);
  padding-block:12px;
  white-space:nowrap;
}
.tabela-comp tbody th{
  font-weight:600;
  color:var(--espresso);
  width:32%;
}
.tabela-comp td{color:var(--sobre-claro)}

/* Coluna do steel frame: cabecalho em Espresso e corpo levemente tingido,
   para o olho achar a resposta sem ler os rotulos. */
.tabela-comp .col-destaque{background:rgba(43,38,32,.05)}
.tabela-comp thead .col-destaque{
  background:var(--espresso);
  color:var(--creme);
  border-radius:var(--raio) var(--raio) 0 0;
}
.tabela-comp tbody .col-destaque{
  color:var(--espresso);
  font-weight:500;
}
.tabela-comp tbody tr:last-child .col-destaque{border-radius:0 0 var(--raio) var(--raio)}

.visto{
  color:var(--argila);
  font-weight:700;
  margin-right:8px;
}

/* ==========================================================================
   6. Financiamento. Stepper numerado vertical.
   ========================================================================== */

.passos{list-style:none;padding:0;margin:var(--s6) 0 0;counter-reset:passo}
.passo{
  counter-increment:passo;
  display:grid;gap:var(--s2) var(--s4);
  grid-template-columns:auto 1fr;
  padding-block:var(--s4);
  border-top:1px solid var(--fio-claro);
}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  font-family:var(--display);font-weight:500;font-size:34px;line-height:1;
  color:var(--couro);
}
.passo-corpo .h3{margin-bottom:var(--s1)}
.passo-corpo p{margin:0;font-size:15.5px;line-height:1.6;color:var(--sobre-claro);max-width:62ch}

.traducao{
  margin-top:var(--s6);
  padding:var(--s5);
  background:var(--elev-claro);
  border-left:3px solid var(--argila);
  border-radius:var(--raio);
}
.traducao p{
  margin:0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.4vw,28px);line-height:1.35;
  color:var(--espresso);max-width:56ch;
}

/* ==========================================================================
   7. Obras. Before/after arrastavel + grade assimetrica.
   ========================================================================== */

.ba{
  position:relative;
  margin-top:var(--s6);
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--raio);
  background:var(--elev-claro);
  touch-action:pan-y;             /* arraste horizontal nao sequestra o scroll */
  user-select:none;
}
.ba img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.ba-topo{clip-path:inset(0 0 0 var(--pos,50%))}

.ba-alca{
  position:absolute;top:0;bottom:0;
  left:var(--pos,50%);
  width:2px;background:var(--creme);
  transform:translateX(-1px);
  pointer-events:none;
}
.ba-alca::after{
  content:"";
  position:absolute;top:50%;left:50%;
  width:52px;height:52px;
  transform:translate(-50%,-50%);
  border:2px solid var(--creme);border-radius:50%;
  background:rgba(43,38,32,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.ba-input{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;padding:0;
  opacity:0;cursor:ew-resize;
  appearance:none;-webkit-appearance:none;
}
.ba-input::-webkit-slider-thumb{appearance:none;width:52px;height:52px}
.ba-input::-moz-range-thumb{width:52px;height:52px;border:0;opacity:0}
.ba-input:focus-visible + .ba-alca::after{outline:2px solid var(--couro);outline-offset:3px}

.ba-rotulos{
  display:flex;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s2);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sobre-claro);
}

.ba-legenda{margin-top:var(--s3);font-size:13.5px;color:var(--sobre-claro)}

/* grade assimetrica */
.obras{
  display:grid;gap:var(--s2);
  grid-template-columns:1fr;
  margin-top:var(--s6);
}
@media (min-width:760px){
  .obras{grid-template-columns:repeat(3,1fr);grid-auto-rows:220px}
  .obra-a{grid-column:span 2;grid-row:span 2}
  .obra-d{grid-column:span 2}
}
.obras figure{margin:0;overflow:hidden;border-radius:var(--raio);background:var(--elev-claro)}
.obras img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media (min-width:760px){ .obras figure{height:100%} }
.obras figure:hover img{transform:scale(1.04)}

.obras-pe{
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  margin-top:var(--s5);
}

/* ==========================================================================
   8. A familia
   ========================================================================== */

.familia-cab{max-width:760px}
.manifesto{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(26px,3.6vw,42px);line-height:1.28;
  padding-bottom:.1em;
  color:var(--creme);
  margin:0 0 var(--s4);
  max-width:20ch;
}

.socios{
  display:grid;gap:0;
  margin-top:var(--s7);
  border-top:1px solid var(--fio-escuro);
}
@media (min-width:820px){ .socios{grid-template-columns:repeat(3,1fr)} }

.socio{
  padding:var(--s4) 0;
  border-bottom:1px solid var(--fio-escuro);
}
@media (min-width:820px){
  .socio{padding:var(--s5) var(--s4) var(--s5) 0;border-bottom:0}
  .socio + .socio{border-left:1px solid var(--fio-escuro);padding-left:var(--s4)}
}
.socio-nome{
  font-family:var(--display);font-weight:700;font-size:23px;
  letter-spacing:.02em;margin:0 0 4px;color:var(--creme);
}
.socio-fn{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--couro-texto);margin:0 0 var(--s3);
}
.socio-ct{margin:0;font-size:14px;line-height:1.7}
.socio-ct a{color:var(--sobre-escuro);word-break:break-word}
.socio-ct a:hover{color:var(--couro-texto)}

.registro{
  margin-top:var(--s5);
  font-size:12.5px;letter-spacing:.08em;
  color:var(--sobre-escuro);
}

/* ==========================================================================
   9. Contato final
   ========================================================================== */

.fechamento{
  position:relative;
  background:var(--elev-escuro);
  border-top:1px solid var(--fio-escuro);
  text-align:center;
}
.fechamento .wrap{max-width:800px}
.fechamento .slogan{margin-bottom:var(--s3)}
.fechamento .h2{margin-bottom:var(--s3)}
.fechamento .lead{margin-inline:auto;margin-bottom:var(--s5);text-align:center}
.fechamento .acoes{justify-content:center}

/* ---------- rodape ---------- */

.rodape{
  background:var(--espresso);
  border-top:1px solid var(--fio-escuro);
  padding-block:var(--s6) var(--s5);
  font-size:13.5px;
}
.rodape-topo{
  display:grid;gap:var(--s5);
  align-items:start;
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--fio-escuro);
}
@media (min-width:760px){ .rodape-topo{grid-template-columns:auto 1fr;gap:var(--s6)} }
@media (min-width:1040px){ .rodape-topo{grid-template-columns:auto 1fr auto;gap:var(--s7)} }
.rodape svg{height:158px;width:auto}
.rodape-links{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  list-style:none;padding:0;margin:0;
}
.rodape-contatos{
  display:grid;gap:var(--s4);
  grid-template-columns:1fr;
}
@media (min-width:560px){ .rodape-contatos{grid-template-columns:repeat(2,1fr);gap:var(--s5)} }

.rc-grupo p{margin:0;line-height:1.7}
.rc-grupo p + p{margin-top:2px}
.rc-rotulo{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--couro-texto);
  margin-bottom:6px !important;
}
.rc-grupo a{color:var(--sobre-escuro);word-break:break-word}
.rc-grupo a:hover{color:var(--couro-texto)}
.rc-nome{color:var(--sobre-escuro);opacity:.7}

.rodape-links a{color:var(--sobre-escuro)}
.rodape-links a:hover{color:var(--couro-texto)}
.rodape-base{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  justify-content:space-between;
  margin-top:var(--s4);
  color:var(--sobre-escuro);font-size:12.5px;
}
.rodape-base p{margin:0}

/* ==========================================================================
   5. Por que escolher steel frame
   ========================================================================== */

/* Banda compacta de indicadores. Numero menor e sem paragrafo, de proposito:
   a secao de provas la em cima ja usa numero grande com texto, e duas faixas
   iguais leriam como a mesma coisa duas vezes. */
.indicadores{
  display:grid;gap:0;
  grid-template-columns:repeat(2,1fr);
  margin-top:var(--s6);
  border-top:1px solid var(--fio-escuro);
}
@media (min-width:640px){ .indicadores{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .indicadores{grid-template-columns:repeat(6,1fr)} }

.ind{
  padding:var(--s4) var(--s3) var(--s4) 0;
  border-bottom:1px solid var(--fio-escuro);
}
@media (min-width:640px){
  .ind{border-bottom:0;border-right:1px solid var(--fio-escuro);padding-left:var(--s3)}
  .ind:first-child{padding-left:0}
  .ind:last-child{border-right:0}
}
.ind b{
  display:block;
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,3.4vw,40px);line-height:1;
  color:var(--couro-texto);
  margin-bottom:6px;
}
.ind span{font-size:13px;line-height:1.4;color:var(--sobre-escuro);display:block;max-width:18ch}

/* Acordeao dos beneficios. Cinco titulos empilhados, texto so quando pedido.
   O <details> nativo abre sem JavaScript, ja e navegavel por teclado e ja e
   anunciado como expansivel pelo leitor de tela: reimplementar isso com div
   e aria na mao so acrescentaria maneiras de errar. */
.acordeao{
  margin-top:var(--s6);
  border-top:1px solid var(--fio-escuro);
}

.acord{border-bottom:1px solid var(--fio-escuro)}

.acord summary{
  display:flex;align-items:center;gap:var(--s3);
  padding-block:var(--s4);
  min-height:44px;
  cursor:pointer;
  list-style:none;                 /* tira o triangulo padrao */
  transition:color .25s var(--ease);
}
.acord summary::-webkit-details-marker{display:none}
.acord summary::marker{content:""}
.acord summary:hover .acord-tit{color:var(--couro-texto)}
.acord summary:focus-visible{
  outline:2px solid var(--couro-texto);
  outline-offset:2px;
}

.acord-tit{
  flex:1 1 auto;
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.4vw,29px);line-height:1.2;letter-spacing:.02em;
  color:var(--creme);
  transition:color .25s var(--ease);
}

/* Sinal de mais que vira menos. Duas barras, sem SVG desenhado a mao. */
.acord-sinal{
  position:relative;
  flex:0 0 auto;
  width:20px;height:20px;
}
.acord-sinal::before,
.acord-sinal::after{
  content:"";position:absolute;top:50%;left:0;
  width:20px;height:1.5px;
  background:var(--couro-texto);
  transform:translateY(-50%);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.acord-sinal::after{transform:translateY(-50%) rotate(90deg)}
.acord[open] .acord-sinal::after{transform:translateY(-50%) rotate(0deg);opacity:0}

.acord-corpo{padding-bottom:var(--s4)}
.acord-corpo p{
  margin:0;
  font-size:15.5px;line-height:1.65;
  color:var(--sobre-escuro);
  max-width:70ch;
}

/* O conteudo entra suave. O <details> so existe no DOM depois de aberto,
   entao a animacao roda na abertura e nada trava no fechamento. */
@media (prefers-reduced-motion:no-preference){
  .acord[open] .acord-corpo{animation:acordEntra .32s var(--ease)}
}
@keyframes acordEntra{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   Formulario de orcamento
   ========================================================================== */

.contato-cab{max-width:640px;margin-inline:auto;text-align:center}
.contato-cab .slogan{margin-bottom:var(--s2)}
.contato-cab .lead{margin-inline:auto;text-align:center}
.contato-email{
  margin:var(--s4) 0 0;
  font-size:14.5px;
  color:var(--sobre-escuro);
}
.contato-email a{color:var(--couro-texto);word-break:break-word}

.form{
  display:grid;gap:var(--s4);
  grid-template-columns:1fr;
  max-width:760px;
  margin:var(--s7) auto 0;
  text-align:left;
}
@media (min-width:680px){
  .form{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
  .campo-largo{grid-column:1 / -1}
}

.campo{display:flex;flex-direction:column;gap:var(--s1);min-width:0}

/* Rotulo SEMPRE acima do campo. Nada de placeholder fazendo as vezes de
   rotulo: some no momento em que o usuario digita. */
.campo label,
.campo legend,
.amb label{
  font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--creme);
  padding:0;
}

.form input[type=text],
.form input[type=number],
.form select,
.form textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  background:var(--elev-escuro);
  border:1px solid rgba(240,234,224,.45);   /* 3:1 minimo para borda de campo */
  border-radius:var(--raio);
  color:var(--creme);
  font-family:var(--texto);
  font-size:16px;                 /* abaixo de 16px o iOS da zoom ao focar */
  line-height:1.4;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.form textarea{min-height:96px;resize:vertical}
.form input:hover,.form select:hover,.form textarea:hover{border-color:rgba(240,234,224,.66)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--couro-texto);
  outline-offset:1px;
  border-color:var(--couro-texto);
}

/* seta propria do select, ja que o appearance foi zerado */
.form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--couro-texto) 50%),
                   linear-gradient(135deg,var(--couro-texto) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.form select option{background:var(--espresso);color:var(--creme)}

.com-sufixo{position:relative;display:flex;align-items:center}
.com-sufixo input{padding-right:48px}
.com-sufixo span{
  position:absolute;right:14px;
  font-size:14px;color:var(--sobre-escuro);pointer-events:none;
}

.ajuda{margin:0;font-size:12.5px;line-height:1.45;color:var(--sobre-escuro)}

/* Erro SEMPRE abaixo do campo, e so ocupa espaco quando existe. */
.erro{margin:0;font-size:12.5px;line-height:1.45;color:#F0A88A;display:none}
.erro:not(:empty){display:block}
.campo[data-invalido="true"] input,
.campo[data-invalido="true"] select{border-color:#F0A88A}

fieldset.campo{border:0;margin:0;padding:0}
fieldset.campo legend{margin-bottom:var(--s2)}

.ambientes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.amb{display:flex;flex-direction:column;gap:6px;min-width:0}
.amb label{font-size:12.5px;font-weight:500;color:var(--sobre-escuro)}

.marcador{
  display:flex;align-items:center;gap:12px;
  margin-top:var(--s3);
  min-height:44px;
  cursor:pointer;
}
.marcador input{
  width:22px;height:22px;flex:0 0 auto;margin:0;
  accent-color:var(--argila);
  cursor:pointer;
}
.marcador span{font-size:14.5px;line-height:1.4;color:var(--sobre-escuro)}

/* Isca de robo. Fora da tela, nao display:none: robo que le CSS pula campo
   escondido, mas preenche o que esta apenas deslocado. */
.isca{
  position:absolute;left:-9999px;
  width:1px;height:1px;overflow:hidden;
}

.form-pe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.form-pe .btn{min-width:220px}
.form-aviso{margin:0;font-size:14px;line-height:1.5;flex:1 1 240px}
.form-aviso[data-estado="ok"]{color:var(--couro-texto)}
.form-aviso[data-estado="erro"]{color:#F0A88A}

/* Estado de envio: skeleton nao serve para botao, entao o proprio rotulo
   troca e o formulario fica inerte. */
.form[data-enviando="true"]{opacity:.65;pointer-events:none}

/* ==========================================================================
   Pagina de FAQ
   ========================================================================== */

.faq-topo{
  background:var(--espresso);
  border-bottom:1px solid var(--fio-escuro);
}
.faq-topo .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:78px;
}
.faq-topo .btn{height:44px;min-height:44px;padding:0 var(--s3);font-size:12px}
/* Abaixo de 560px a marca com nome mais o botao nao cabem, e o botao saia da
   tela. O selo sozinho ja identifica e continua levando para a home. */
@media (max-width:560px){ .faq-topo .marca-nome{display:none} }

.faq-capa{
  background:var(--espresso);
  padding-block:var(--s6) var(--s7);
}
.faq-capa .wrap{max-width:820px}
.faq-capa .h1{font-size:clamp(32px,4.6vw,54px);margin-bottom:var(--s3)}
/* Italico do mesmo tipo. Couro claro porque o fundo aqui e Espresso. */
.faq-capa .h1 em{
  font-style:italic;font-weight:500;color:var(--couro-texto);
  line-height:1.2;padding-bottom:.05em;
}

.faq-corpo{max-width:820px}
.faq-grupo + .faq-grupo{margin-top:var(--s7)}
.faq-grupo-tit{
  color:var(--argila);
  margin-bottom:var(--s3);
}
.faq-nota{margin-top:var(--s7)}

/* O acordeao nasceu sobre fundo escuro. Aqui ele vive sobre Creme, entao os
   fios e o texto trocam de lado. */
.claro .acordeao{border-top-color:var(--fio-claro)}
.claro .acord{border-bottom-color:var(--fio-claro)}
.claro .acord-tit{color:var(--espresso)}
.claro .acord summary:hover .acord-tit{color:var(--argila)}
.claro .acord summary:focus-visible{outline-color:var(--argila)}
.claro .acord-sinal::before,
.claro .acord-sinal::after{background:var(--argila)}
.claro .acord-corpo p{color:var(--sobre-claro)}
.claro .acord-corpo b{color:var(--espresso);font-weight:600}
/* Pergunta e mais curta que titulo de secao: nao precisa do mesmo corpo. */
.faq-corpo .acord-tit{font-size:clamp(18px,1.9vw,22px);line-height:1.32}
.faq-corpo .acord summary{padding-block:var(--s3)}

.faq-selo{
  display:inline-block;
  margin-top:var(--s2) !important;
  font-size:13px;font-weight:600;
  color:#3f4736;
  background:rgba(85,96,74,.14);
  border:1px solid rgba(85,96,74,.34);
  border-radius:var(--raio);
  padding:6px 12px;
}

/* ---------- chamada para a FAQ, no fim da landing ---------- */

.faq-chamada{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s5);
  padding:var(--s5);
  border:1px solid var(--fio-escuro);
  border-radius:var(--raio);
  background:var(--elev-escuro);
}
.faq-chamada-txt{flex:1 1 320px;min-width:0}
.faq-chamada .h3{margin-bottom:6px}
.faq-chamada p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sobre-escuro);max-width:56ch}
.faq-chamada .btn{flex:0 0 auto}
/* Em tela estreita o padding de 48px deixava so 231px uteis e o botao, que
   nao quebra linha, saia da caixa. Padding menor e botao ocupando a largura. */
@media (max-width:620px){
  .faq-chamada{padding:var(--s4)}
  .faq-chamada .btn{width:100%}
}

/* ==========================================================================
   Pagina de obrigado
   ========================================================================== */

.obrigado{
  min-height:100dvh;
  display:flex;align-items:center;
  padding-block:var(--s6);
}
.obrigado .wrap{max-width:700px}
.obrigado-selo{height:76px;width:auto;margin-bottom:var(--s4)}
.obrigado .h1{font-size:clamp(32px,4.2vw,50px);margin-bottom:var(--s3)}
.obrigado .lead{margin-bottom:var(--s5)}

.proximos{
  list-style:none;padding:0;margin:0;
  counter-reset:passo;
  border-top:1px solid var(--fio-escuro);
}
.proximos li{
  counter-increment:passo;
  display:grid;grid-template-columns:auto 1fr;gap:2px var(--s3);
  padding-block:14px;
  border-bottom:1px solid var(--fio-escuro);
}
.proximos li::before{
  content:counter(passo,decimal-leading-zero);
  grid-row:span 2;
  font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;
  color:var(--couro-texto);
}
.proximos b{font-size:15.5px;font-weight:600;color:var(--creme)}
.proximos span{font-size:14px;line-height:1.55;color:var(--sobre-escuro)}

.obrigado-email{
  margin:var(--s4) 0 var(--s4);
  font-size:14.5px;color:var(--sobre-escuro);
}
.obrigado-email a{color:var(--couro-texto);word-break:break-word}
.obrigado-slogan{margin-top:var(--s5)}

/* ==========================================================================
   Fallbacks. Ordem importa: estas regras vem por ultimo de proposito, para
   que nenhuma regra base sobrescreva o display que elas definem.
   ========================================================================== */

/* --- toque: nao entrega a sequencia de frames para o celular --- */
@media (hover:none),(pointer:coarse),(max-width:899px){
  .tl-scrub{display:none}
  .tl-toque{display:block}
  .timelapse .tl-palco{min-height:0}
}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .tl-toque{display:none}
  .tl-scrub{display:block}
}

/* --- movimento reduzido: sem pin, sem scrub, tudo visivel --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rev,.js-on .rev{opacity:1 !important;transform:none !important}
  .tl-abertura,.tl-fases,.fase{opacity:1 !important;transform:none !important}
  .obras figure:hover img{transform:none}
}

/* --- transparencia reduzida: troca o blur por preenchimento solido --- */
@media (prefers-reduced-transparency:reduce){
  .nav.solida{background:var(--espresso);backdrop-filter:none;-webkit-backdrop-filter:none}
  .ba-alca::after{background:rgba(43,38,32,.85);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* --- impressao --- */
@media print{
  .nav,.menu,.tl-scrub{display:none}
  body{background:#fff;color:#000}
}

/* --- acessivel apenas para leitor de tela --- */
.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.pular{
  position:absolute;top:-100px;left:var(--gutter);
  z-index:calc(var(--z-nav) + 1);
  background:var(--argila);color:var(--creme);
  padding:12px 20px;border-radius:var(--raio);
  font-size:13px;font-weight:600;
  transition:top .2s var(--ease);
}
.pular:focus{top:14px;text-decoration:none}