/* ==========================================================================
Casa+ · site público · sistema visual (F11)
Direção de arte: docs/DIRECAO_DE_ARTE.md (conceito C, "Livro de obra", com os enxertos de A e B).
As páginas das frentes F12, F13 e F14 usam só os papéis (bloco "Papéis") e os componentes
daqui. Nenhuma frente redefine token ou componente comum: se faltar, pede à F11.
Fontes servidas localmente (CSP font-src 'self'). O site não troca para tema escuro.
Sumário: 1 tokens · 2 base · 3 tipografia · 4 capítulos e grade · 5 revelação · 6 componentes
C01 a C30, C36 a C38 · 7 folha (painel que sobe) · 8 maquete de reserva · 9 Início.
========================================================================== */
/* ==========================================================================
Contrato do casco (site.js). Como uma página do site usa o casco (F12, F13, F14):
Pular para o conteúdo
...
- data-pagina: inicio, monte-sua-casa, obras, depoimentos, como-trabalhamos, compra-segura, sobre,
privacidade, indicar, pesquisa, parceiro, avaliar, 404, estudo, cidade, modelo. Marca o menu,
escolhe a mensagem pronta do WhatsApp e o balão do chat.
- Capítulo escuro, ou foto, sob o cabeçalho: data-topo="escuro" (o cabeçalho fica transparente).
- Página sem foto no topo: o primeiro capítulo usa a classe capitulo--abre.
- Botão ou link com data-acao="agendar" abre o agendamento; data-acao="contato" abre a folha
de contato; data-acao="chat" abre o chat; data-acao="preferencias-medicao" reabre o aviso.
- Trecho que depende da Casa+: data-pend="N" (N da lista da seção 12 do copy); data-some some
na visão cliente; dentro dele, [data-reserva] é o texto de agora e [data-confirmado] o futuro.
Módulos de outras frentes, chamados por import dinâmico (se faltarem, nada quebra):
./chat.js (F03) export function abrirChat({ pagina, assunto }); o casco também dispara
o evento window 'cm:abrir-chat' com o mesmo detalhe.
./agendar.js (F14) export function abrirAgendamento({ origem }); sem ele, o link segue para
{BASE}/sobre#agendar.
./simulador-palco.js (F12) export function montarSimulador(el, { modo: 'palco' }) no palco da
Início, pedido quando o palco se aproxima e só com data-simulador="ligado".
Página com barra fixa de ação embaixo (celular): define --altura-barra-acao (com a área segura)
no body; flutuante, balão, folha de contato e aviso de medição passam a morar acima dela.
========================================================================== */
/* ---------- 1. Tokens ---------- */
@font-face {
font-family: 'Fraunces';
src: url('fontes/fraunces-roman.woff2') format('woff2-variations'), url('fontes/fraunces-roman.woff2') format('woff2');
font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Fraunces';
src: url('fontes/fraunces-italic.woff2') format('woff2-variations'), url('fontes/fraunces-italic.woff2') format('woff2');
font-weight: 300 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Archivo';
src: url('fontes/archivo.woff2') format('woff2-variations'), url('fontes/archivo.woff2') format('woff2');
font-weight: 400 700; font-stretch: 62% 100%; font-style: normal; font-display: swap;
}
/* Fontes de reserva com as medidas da Fraunces e da Archivo, para o título não ganhar nem perder
linha quando a fonte chega (CLS). Medidas tiradas dos próprios arquivos: Fraunces em wght 360,
opsz 144, SOFT 50 (--fv-display), itálico em wght 360, opsz 144, Archivo em wght 400 e 600, wdth 100,
com a largura média ponderada pelas letras dos títulos (Fraunces) e do corpo (Archivo) das páginas
do site. Iowan Old Style (macOS e iOS), Palatino (Windows; medida pela Palatino do macOS, mesmo
desenho), Georgia; Arial para a Archivo. Onde nenhuma existe (Android), vale a pilha de sempre.
A reserva da Fraunces só serve ao corte de título (opsz 144, bem mais estreito): fica em
--fonte-titulo (H1, H2 e as regras com --fv-display ou --fv-enfase fixos). Com opsz 32 (--fv-leitura,
H3, textos e a citação, que muda de corte por variante) a Fraunces tem quase a largura da Georgia, e
--fonte-display segue sem ajuste. Regra nova com --fv-display usa --fonte-titulo. */
@font-face { font-family: 'Fraunces reserva I'; src: local('Iowan Old Style'), local('IowanOldStyle-Roman'); font-weight: 300 500; font-style: normal; size-adjust: 83.77%; ascent-override: 116.75%; descent-override: 30.44%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces reserva I'; src: local('Iowan Old Style Italic'), local('IowanOldStyle-Italic'); font-weight: 300 500; font-style: italic; size-adjust: 92.03%; ascent-override: 106.27%; descent-override: 27.71%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces reserva P'; src: local('Palatino Linotype'), local('Palatino'), local('Palatino-Roman'); font-weight: 300 500; font-style: normal; size-adjust: 84.24%; ascent-override: 116.09%; descent-override: 30.27%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces reserva P'; src: local('Palatino Linotype Italic'), local('Palatino Italic'), local('Palatino-Italic'); font-weight: 300 500; font-style: italic; size-adjust: 89.02%; ascent-override: 109.86%; descent-override: 28.64%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces reserva G'; src: local('Georgia'); font-weight: 300 500; font-style: normal; size-adjust: 84.74%; ascent-override: 115.41%; descent-override: 30.09%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces reserva G'; src: local('Georgia Italic'), local('Georgia-Italic'); font-weight: 300 500; font-style: italic; size-adjust: 79.26%; ascent-override: 123.39%; descent-override: 32.17%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo reserva'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-style: normal; size-adjust: 98.43%; ascent-override: 89.20%; descent-override: 21.33%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo reserva'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; font-style: normal; size-adjust: 95.58%; ascent-override: 91.86%; descent-override: 21.97%; line-gap-override: 0%; }
:root {
color-scheme: light;
/* Paleta bruta, derivada do logo */
--brasa-400: #F7920F;
--brasa-500: #EE7D00;
--brasa-700: #A15300;
--madeira-900: #3A1805;
--madeira-700: #5F280A;
--cedro: #8C4A22;
--mel: #C98A4B;
--imbuia: #24140B;
--imbuia-2: #2F1B0F;
--carvao: #1B1917;
--cru: #F4ECDF;
--linho: #FAF6EF;
--linho-2: #F1E8DA;
--areia: #E8DAC5;
--tinta: #2A211B;
--tinta-2: #5C4A3C;
--tinta-3: #75624F;
--creme: #F4ECDF;
--creme-2: #CDBBA5;
--erva: #4E5A2A;
--tijolo: #B4322A;
/* Papéis (as telas usam só estes) */
--fundo: var(--cru);
--fundo-respiro: var(--areia);
--fundo-escuro: var(--imbuia);
--fundo-noite: var(--carvao);
--superficie: var(--linho);
--superficie-2: var(--linho-2);
--superficie-escura: var(--imbuia-2);
--texto: var(--tinta);
--texto-2: var(--tinta-2);
--texto-3: var(--tinta-3);
--texto-inverso: var(--creme);
--texto-inverso-2: var(--creme-2);
--enfase-escuro: var(--mel);
--acento: var(--brasa-500);
--acento-tinta: var(--carvao);
--acento-texto: var(--brasa-700);
--marca: var(--madeira-700);
--traco: var(--cedro);
--conferido: var(--erva);
--erro: var(--tijolo);
--foco: var(--brasa-400);
--linha: rgba(42, 33, 27, .14);
--linha-forte: rgba(42, 33, 27, .34);
--linha-inversa: rgba(244, 236, 223, .16);
--linha-inversa-forte: rgba(244, 236, 223, .34);
/* tábua no tamanho do original (1000 x 319): ampliar para 1200 x 800 borraria a veia (DIRECAO 8.1) */
--tabua: url('https://static.wixstatic.com/media/67e044_89018a59145e452c90aeb7c737b59b17.jpg/v1/fill/w_1000,h_319,al_c,q_70,enc_auto/tabua.jpg');
--veu-foto: linear-gradient(180deg, rgba(238,125,0,.05) 0%, rgba(238,125,0,0) 35%, rgba(36,20,11,.16) 100%);
/* véu funcional do herói: escurece atrás do bloco de texto (lado esquerdo e base), não é enfeite */
--veu-heroi:
linear-gradient(90deg, rgba(27,25,23,.64) 0%, rgba(27,25,23,.42) 40%, rgba(27,25,23,0) 66%),
linear-gradient(180deg, rgba(27,25,23,.50) 0%, rgba(27,25,23,.18) 24%, rgba(27,25,23,.16) 42%, rgba(27,25,23,.85) 100%);
--grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
/* Tipografia */
--fonte-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
--fonte-titulo: 'Fraunces', 'Fraunces reserva I', 'Fraunces reserva P', 'Fraunces reserva G', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; /* só com --fv-display ou --fv-enfase (opsz 144) */
--fonte-texto: 'Archivo', 'Archivo reserva', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fv-display: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
--fv-leitura: 'opsz' 32, 'SOFT' 30, 'WONK' 0;
--fv-enfase: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
--p-display: 360;
--p-display-forte: 440;
--p-texto: 400;
--p-texto-medio: 500;
--p-texto-forte: 600;
--largura-rotulo: 72%;
--t-mega: clamp(4rem, 1.5rem + 11vw, 11rem);
--t-h1: clamp(2.5rem, 1.2rem + 6vw, 7.25rem);
--t-h2: clamp(2.125rem, 1.3rem + 3.6vw, 5rem);
--t-h3: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
--t-citacao: clamp(1.5rem, 1rem + 2.2vw, 3.125rem);
--t-numero: clamp(3rem, 1.9rem + 4.8vw, 6.75rem);
--t-valor: clamp(1.75rem, 1.25rem + 2.2vw, 3.25rem);
--t-lead: clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
--t-corpo: 1.0625rem;
--t-pequeno: .9375rem;
--t-legenda: .8125rem;
--t-rotulo: .75rem;
--a-mega: .86; --a-h1: .94; --a-h2: 1; --a-h3: 1.12; --a-citacao: 1.2; --a-lead: 1.5; --a-corpo: 1.6;
--l-mega: -.045em; --l-h1: -.035em; --l-h2: -.028em; --l-h3: -.012em; --l-rotulo: .14em;
/* Espaço (base 4) */
--e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
--e-6: 32px; --e-7: 40px; --e-8: 64px; --e-9: 104px; --e-10: 168px;
--secao: clamp(88px, 3.5rem + 7vw, 168px);
--secao-curta: clamp(56px, 2.5rem + 3.5vw, 104px);
--margem: clamp(16px, 4.2vw, 64px);
--calha: clamp(12px, 1.6vw, 24px);
--largura-max: 1360px;
--largura-sangria: 1680px;
--medida: 64ch;
--topo: 64px;
--topo-celular: 56px;
--faixa-demo: 32px;
--barra-celular: 64px;
--altura-barra-acao: 0px; /* página com barra fixa de ação embaixo (celular) põe aqui a altura dela, com a área segura */
--alvo: 48px;
/* Raio */
--r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-redondo: 50%;
/* Sombra */
--sombra-papel: 0 1px 0 rgba(42,33,27,.05), 0 14px 34px -16px rgba(42,33,27,.28);
--sombra-folha: 0 28px 64px -24px rgba(36,20,11,.50), 0 2px 6px rgba(36,20,11,.12);
--sombra-amostra: 0 22px 36px -22px rgba(0,0,0,.55);
--sombra-flutuante: 0 10px 24px -8px rgba(27,25,23,.45);
--gravado: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.35);
/* Movimento */
--curva-assenta: cubic-bezier(.16, 1, .3, 1);
--curva-cortina: cubic-bezier(.76, 0, .18, 1);
--curva-encaixe: cubic-bezier(.2, .7, .1, 1);
--curva-carimbo: cubic-bezier(.34, 1.56, .64, 1);
--curva-saida: cubic-bezier(.4, 0, 1, 1);
--d-micro: 120ms;
--d-curta: 200ms;
--d-media: 420ms;
--d-longa: 900ms;
--d-cena: 1400ms;
--d-foto: 2400ms;
--d-montagem: 3000ms;
--defasagem: 80ms;
/* Camadas */
--z-base: 1; --z-topo: 40; --z-barra: 50; --z-flutuante: 60; --z-folha: 70;
--z-chat: 80; --z-aviso: 90; --z-demo: 100;
}
/* a textura só é pedida depois da foto do herói: site.js marca html.tabua-pronta. Sem JS, carrega normal. */
html.js:not(.tabua-pronta) { --tabua: none; }
@media (prefers-reduced-motion: reduce) {
:root {
--d-micro: 0ms; --d-curta: 0ms; --d-media: 0ms; --d-longa: 0ms;
--d-cena: 0ms; --d-foto: 0ms; --d-montagem: 0ms; --defasagem: 0ms;
}
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0ms !important;
animation-delay: 0ms !important;
}
}
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); color: var(--texto); font: var(--p-texto) var(--t-corpo)/var(--a-corpo) var(--fonte-texto); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--topo) + var(--faixa-demo) + 16px); }
/* rolagem suave só para quem não pediu menos movimento (regra fora da mídia ganharia da de 'reduce') */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fundo); color: var(--texto); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; text-rendering: optimizeLegibility; font-kerning: normal; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(ul[class], ol[class], .topo__menu ul, .menu-celular ul, .rodape ul) { list-style: none; margin: 0; padding: 0; }
:where(figure, blockquote, p, dl, dd) { margin: 0; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--r-1); }
::selection { background: var(--brasa-500); color: var(--carvao); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pular { position: fixed; left: 16px; top: -80px; z-index: calc(var(--z-demo) + 1); padding: 12px 18px; background: var(--carvao); color: var(--creme); border-radius: var(--r-2); font-weight: 600; text-decoration: none; transition: top var(--d-curta); }
.pular:focus { top: 12px; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.nowrap, .junto { white-space: nowrap; }
/* ---------- 3. Tipografia ---------- */
.t-h1, .t-h2, .t-h3, .site h1, .site h2, .site h3 { font-family: var(--fonte-display); font-weight: var(--p-display); font-variation-settings: var(--fv-display); margin: 0; text-wrap: balance; }
.t-h1, .site h1 { font-family: var(--fonte-titulo); font-size: var(--t-h1); line-height: var(--a-h1); letter-spacing: var(--l-h1); }
.t-h2, .site h2 { font-family: var(--fonte-titulo); font-size: var(--t-h2); line-height: var(--a-h2); letter-spacing: var(--l-h2); }
.t-h3, .site h3 { font-size: var(--t-h3); line-height: var(--a-h3); letter-spacing: var(--l-h3); font-weight: var(--p-display-forte); font-variation-settings: var(--fv-leitura); }
.site h1 em, .site h2 em, .site h3 em, .enfase { font-style: italic; font-variation-settings: var(--fv-enfase); color: var(--marca); }
.escuro h1 em, .escuro h2 em, .escuro h3 em, .escuro .enfase { color: var(--enfase-escuro); }
.acento-titulo { padding-top: .12em; }
.lead { font-size: var(--t-lead); line-height: var(--a-lead); color: var(--texto-2); max-width: 52ch; }
.escuro .lead { color: var(--texto-inverso-2); }
.corpo { max-width: var(--medida); color: var(--texto-2); }
.corpo + .corpo { margin-top: 1em; }
.escuro .corpo { color: var(--texto-inverso-2); }
.rotulo { font-family: var(--fonte-texto); font-weight: var(--p-texto-forte); font-stretch: var(--largura-rotulo); font-size: var(--t-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; line-height: 1.4; }
.sobretitulo { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--e-5); color: var(--acento-texto); font-family: var(--fonte-texto); font-weight: var(--p-texto-forte); font-stretch: var(--largura-rotulo); font-size: var(--t-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; line-height: 1.4; }
.sobretitulo::before { content: ''; width: 24px; border-top: 1.5px solid currentColor; }
.escuro .sobretitulo { color: var(--enfase-escuro); }
.letra-pequena { font-size: var(--t-legenda); line-height: 1.5; color: var(--texto-3); }
.escuro .letra-pequena { color: var(--texto-inverso-2); }
.medida { max-width: var(--medida); }
.site p { text-wrap-style: pretty; }
/* aspas curvas penduradas (citações) */
.aspas::before { content: '\201C'; color: var(--acento); }
.aspas::after { content: '\201D'; color: var(--acento); }
/* anotação a lápis: Fraunces itálico com seta desenhada, no máximo uma por tela (DIRECAO 5) */
.lapis { display: inline-flex; align-items: flex-end; gap: 8px; font-family: var(--fonte-titulo); font-style: italic; font-weight: 400; font-variation-settings: var(--fv-enfase); font-size: 16px; line-height: 1.2; color: var(--traco); }
.lapis svg { width: 64px; height: 30px; flex: none; }
.lapis path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- 4. Capítulos e grade ---------- */
.caixa { width: min(100% - 2 * var(--margem), var(--largura-max)); margin-inline: auto; }
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--calha); }
@media (min-width: 768px) { .grade { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.capitulo { position: relative; padding-block: var(--secao); background: var(--fundo); isolation: isolate; }
.capitulo--curto { padding-block: var(--secao-curta); }
.capitulo--linho { background: var(--superficie); }
.capitulo--respiro { background: var(--fundo-respiro); }
.capitulo--escuro, .capitulo--noite { color: var(--texto-inverso); }
.capitulo--escuro { background: var(--fundo-escuro); }
.capitulo--noite { background: var(--fundo-noite); }
/* imbuia sempre com a tábua por baixo: a veia da madeira se percebe a um braço de distância, sem competir com o texto.
Mistura normal: sobre um fundo tão escuro, overlay e soft-light apagam a veia. */
.capitulo--escuro::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tabua) 0 0 / 1000px auto repeat; opacity: .10; }
@media (max-width: 767.98px) { .capitulo--escuro::before { opacity: .07; } }
/* abertura de capítulo: título à esquerda e apoio à direita, alinhados pela base (7/5) */
.abertura { display: grid; gap: var(--e-5); margin-bottom: clamp(40px, 5vw, 80px); }
@media (min-width: 1024px) {
.abertura { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: end; }
.abertura > :first-child { grid-column: 1 / span 7; }
.abertura > :last-child:not(:first-child) { grid-column: 9 / span 4; }
}
/* ---------- 5. Revelação (uma vez só; tudo legível sem JS e com movimento reduzido) ---------- */
/* ==========================================================================
6. Componentes comuns
========================================================================== */
/* ---------- C01 · Faixa de demonstração ---------- */
[data-casco="topo"] { min-height: var(--faixa-demo); }
.sem-demo [data-casco="topo"] { min-height: 0; }
.faixa-demo { position: fixed; inset: 0 0 auto 0; z-index: var(--z-demo); height: var(--faixa-demo); background: var(--carvao); color: var(--creme-2); font: var(--p-texto-medio) 12px/1 var(--fonte-texto); }
.faixa-demo__caixa { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faixa-demo p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.faixa-demo__longo { display: none; }
/* celular estreito: o domínio oficial aparece inteiro, sem reticências (a faixa existe contra golpe) */
@media (max-width: 479.98px) { .faixa-demo p { font-stretch: 72%; letter-spacing: 0; } .faixa-demo__revisao { padding: 0 4px; } .faixa-demo__caixa { gap: 8px; } }
.faixa-demo__revisao { flex: none; display: inline-flex; align-items: center; gap: .3em; min-height: 24px; padding: 0 10px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--creme); font: var(--p-texto-forte) 12px/1 var(--fonte-texto); text-decoration: underline; text-decoration-color: rgba(244,236,223,.4); text-underline-offset: 3px; }
.faixa-demo__revisao:hover { text-decoration-color: var(--acento); }
.faixa-demo__revisao[aria-pressed="true"] { background: var(--brasa-500); color: var(--carvao); text-decoration: none; }
.faixa-demo__revisao .longo { display: none; }
@media (min-width: 768px) { .faixa-demo__longo, .faixa-demo__revisao .longo { display: inline; } .faixa-demo__curto, .faixa-demo__revisao .curto { display: none; } }
/* ---------- C02 · Etiqueta de revisão (só na visão revisão) ---------- */
[data-pend][data-some] { display: none; }
.revisao [data-pend][data-some] { display: revert; }
.revisao [data-pend][data-some].bloco { display: block; }
.revisao [data-pend] { position: relative; outline: 1.5px dashed var(--acento); outline-offset: 4px; border-radius: var(--r-1); }
.revisao .tipo__foto[data-pend] { position: absolute; }
.revisao [data-pend]::after { content: attr(data-pend); position: absolute; top: -14px; right: -14px; z-index: 5; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--brasa-500); color: var(--carvao); font: var(--p-texto-forte) 11px/1 var(--fonte-texto); font-style: normal; letter-spacing: 0; text-transform: none; }
.revisao [data-pend] [data-reserva] { display: none; }
.revisao [data-pend] [data-confirmado] { display: inline; }
[data-confirmado] { display: none; }
.pendente-balao { position: absolute; z-index: var(--z-aviso); max-width: 320px; padding: 12px 14px; background: var(--carvao); color: var(--creme); border-radius: var(--r-2); box-shadow: var(--sombra-flutuante); font: 400 14px/1.45 var(--fonte-texto); }
.pendente-balao b { display: block; margin-bottom: 4px; color: var(--brasa-400); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-stretch: var(--largura-rotulo); }
/* ---------- C03 · Cabeçalho e menu ---------- */
.topo { position: fixed; left: 0; right: 0; top: var(--faixa-demo); z-index: var(--z-topo); height: var(--topo-celular); color: var(--creme); transition: background-color var(--d-curta), color var(--d-curta), box-shadow var(--d-curta); }
.sem-demo .topo { top: 0; }
.topo[data-estado="sobre-foto"][data-rolou] { background: var(--imbuia); box-shadow: 0 1px 0 var(--linha-inversa); }
.topo[data-estado="solido"] { background: var(--cru); color: var(--texto); box-shadow: 0 1px 0 var(--linha); }
.topo__caixa { height: 100%; display: flex; align-items: center; gap: 24px; }
.topo__marca { flex: none; display: block; position: relative; height: 34px; }
.topo__marca img { height: 34px; width: auto; transition: opacity var(--d-curta); }
.topo__marca .logo-claro { position: absolute; left: 0; top: 0; opacity: 0; }
.topo[data-estado="solido"] .logo-claro { opacity: 1; }
.topo[data-estado="solido"] .logo-escuro { opacity: 0; }
/* topo de página clara (capitulo--abre), antes de rolar: texto escuro e logo claro; o menu aberto, abaixo, ganha */
.topo[data-estado="claro"] { color: var(--texto); }
.topo[data-estado="claro"] .logo-claro { opacity: 1; }
.topo[data-estado="claro"] .logo-escuro { opacity: 0; }
.topo__menu { display: none; margin-left: auto; }
.topo__menu ul { display: flex; gap: clamp(16px, 1.7vw, 30px); }
.topo__menu a { position: relative; display: block; padding: 8px 0; font: var(--p-texto-medio) 15px/1.2 var(--fonte-texto); text-decoration: none; color: inherit; opacity: .92; transition: opacity var(--d-micro); white-space: nowrap; }
.topo__menu a:hover { opacity: 1; }
.topo__menu a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px solid var(--acento); }
.topo__acoes { display: none; align-items: center; gap: 20px; }
.topo__cliente { font: 400 13px/1 var(--fonte-texto); text-decoration: none; color: inherit; opacity: .78; white-space: nowrap; }
.topo__cliente:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.topo[data-estado="sobre-foto"] .botao--carvao { background: rgba(27,25,23,.72); box-shadow: inset 0 0 0 1px var(--linha-inversa-forte); }
.topo__abrir { margin-left: auto; position: relative; width: var(--alvo); height: var(--alvo); margin-right: -12px; border: 0; background: transparent; color: inherit; }
.topo__abrir i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform var(--d-media) var(--curva-assenta), top var(--d-media) var(--curva-assenta); }
.topo__abrir i:nth-child(1) { top: 19px; }
.topo__abrir i:nth-child(2) { top: 28px; }
@media (min-width: 1180px) {
.topo { height: var(--topo); }
.topo__marca, .topo__marca img { height: 40px; }
.topo__menu, .topo__acoes { display: flex; }
.topo__abrir { display: none; }
}
/* menu do celular: folha que desce do topo, sobre imbuia com tábua */
.menu-celular { position: fixed; inset: 0; z-index: calc(var(--z-topo) + 1); display: flex; flex-direction: column; padding: calc(var(--faixa-demo) + var(--topo-celular) + 16px) var(--margem) calc(24px + env(safe-area-inset-bottom)); background: var(--imbuia); color: var(--creme); overflow-y: auto; overscroll-behavior: contain; isolation: isolate; }
.menu-celular::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tabua) 0 0 / 1000px auto; opacity: .06; mix-blend-mode: soft-light; }
.menu-celular[data-aberto] { animation: desce var(--d-media) var(--curva-assenta) both; }
.menu-celular ul { display: grid; gap: 2px; }
.menu-celular li { animation: sobe var(--d-media) var(--curva-assenta) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
.menu-celular li a { display: block; padding: 6px 0; font: 360 34px/1.15 var(--fonte-titulo); font-variation-settings: var(--fv-display); letter-spacing: -.02em; text-decoration: none; color: var(--creme); }
.menu-celular li a[aria-current="page"] { font-style: italic; font-variation-settings: var(--fv-enfase); color: var(--mel); }
.menu-celular__pe { margin-top: auto; padding-top: 32px; display: grid; gap: 18px; }
.menu-celular__pe .botao { width: 100%; justify-content: space-between; }
.menu-celular__endereco { font-size: 15px; line-height: 1.55; color: var(--creme-2); }
.menu-celular__cliente { color: var(--creme); font-size: 15px; }
.menu-aberto .topo { color: var(--creme); background: transparent; box-shadow: none; z-index: calc(var(--z-topo) + 2); }
.menu-aberto .topo .logo-claro { opacity: 0; }
.menu-aberto .topo .logo-escuro { opacity: 1; }
.menu-aberto .topo__abrir i:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
.menu-aberto .topo__abrir i:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }
.menu-aberto { overflow: hidden; }
@keyframes desce { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* páginas sem foto no topo: o primeiro capítulo desconta o cabeçalho */
.capitulo--abre { padding-top: calc(var(--secao-curta) + var(--topo-celular)); }
@media (min-width: 1180px) { .capitulo--abre { padding-top: calc(var(--secao-curta) + var(--topo)); } }
/* ---------- C04 · Botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--texto); font: var(--p-texto-forte) 16px/1.15 var(--fonte-texto); text-decoration: none; text-align: left; white-space: nowrap; transition: background-color var(--d-micro), color var(--d-micro), box-shadow var(--d-micro), transform var(--d-micro); -webkit-tap-highlight-color: transparent; }
.botao svg { width: 16px; height: 16px; flex: none; transition: transform var(--d-curta) var(--curva-assenta); }
.botao svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.botao:hover .seta { transform: translateX(4px); }
.botao:hover .seta-fora { transform: translate(2px, -2px); }
.botao:active { transform: translateY(1px); }
.botao--principal { background: var(--acento); color: var(--acento-tinta); }
.botao--principal:hover { background: var(--brasa-400); }
.botao--secundario { box-shadow: inset 0 0 0 1.5px var(--linha-forte); color: var(--texto); }
.botao--secundario:hover { background: var(--superficie-2); box-shadow: inset 0 0 0 1.5px var(--texto); }
.escuro .botao--secundario, .botao--secundario.sobre-escuro { box-shadow: inset 0 0 0 1.5px var(--linha-inversa-forte); color: var(--texto-inverso); }
.escuro .botao--secundario:hover, .botao--secundario.sobre-escuro:hover { background: rgba(244,236,223,.08); box-shadow: inset 0 0 0 1.5px var(--creme); }
.botao--carvao { min-height: 40px; padding: 0 18px; background: var(--carvao); color: var(--creme); font-size: 15px; }
.botao--carvao:hover { background: var(--madeira-700); }
.botao--texto { min-height: 44px; padding: 0; gap: 8px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--linha-forte); }
.escuro .botao--texto { text-decoration-color: var(--linha-inversa-forte); }
.botao--texto:hover { text-decoration-color: var(--acento); }
.botao[aria-busy="true"] svg { animation: gira 900ms linear infinite; }
.botao[aria-disabled="true"], .botao:disabled { opacity: .45; cursor: default; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (min-width: 600px) { .botao:not(.botao--carvao):not(.botao--texto) { min-height: 52px; } }
@media (max-width: 599px) {
.botoes--empilham { flex-direction: column; align-items: stretch; }
.botoes--empilham .botao:not(.botao--texto) { width: 100%; justify-content: space-between; }
}
/* ---------- C05 · Link de prova ---------- */
.prova { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: var(--p-texto-forte) 14px/1.3 var(--fonte-texto); color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--linha-forte); }
.prova:hover { text-decoration-color: var(--acento); text-decoration-thickness: 2px; }
.escuro .prova { text-decoration-color: var(--linha-inversa-forte); }
.prova svg { width: 12px; height: 12px; flex: none; }
.prova svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prova-data { display: block; font: var(--p-texto-forte) var(--t-rotulo)/1.4 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
@media (max-width: 767px) { .prova { min-height: var(--alvo); } }
/* ---------- C06 · Legenda de foto ---------- */
.legenda { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha); }
.legenda__familia { font: 400 var(--t-pequeno)/1.3 var(--fonte-display); font-variation-settings: var(--fv-leitura); color: var(--texto); }
.legenda__cidade { font: var(--p-texto-forte) var(--t-rotulo)/1.3 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--texto-3); }
.escuro .legenda { border-top-color: var(--linha-inversa); }
.escuro .legenda__familia { color: var(--texto-inverso); }
.escuro .legenda__cidade { color: var(--texto-inverso-2); }
.legenda--sobre-foto { position: absolute; right: var(--margem); bottom: 20px; z-index: 2; margin: 0; padding: 0; border: 0; color: var(--creme-2); text-shadow: 0 1px 10px rgba(20,12,6,.6); }
.legenda--sobre-foto .legenda__familia, .legenda--sobre-foto .legenda__cidade { color: var(--creme-2); }
/* ---------- C07 · Foto de obra ---------- */
.foto { position: relative; overflow: hidden; background: var(--areia); outline: 1px solid rgba(42,33,27,.10); outline-offset: -1px; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.05) brightness(.99) sepia(.08); }
.foto::after { content: ''; position: absolute; inset: 0; background: var(--veu-foto); mix-blend-mode: multiply; }
.foto--grao::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--grao); opacity: .06; mix-blend-mode: overlay; }
.foto--erro img { visibility: hidden; }
.foto--erro::before { content: 'Foto indisponível agora'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-3); font-size: 14px; }
a .foto img, .foto--clicavel img { transition: transform var(--d-longa) var(--curva-assenta); }
a:hover .foto img, .foto--clicavel:hover img { transform: scale(1.03); }
a:hover .legenda__familia { text-decoration: underline; text-underline-offset: 3px; }
.p-16x9 { aspect-ratio: 16 / 9; } .p-21x9 { aspect-ratio: 21 / 9; } .p-4x5 { aspect-ratio: 4 / 5; }
.p-3x2 { aspect-ratio: 3 / 2; } .p-4x3 { aspect-ratio: 4 / 3; } .p-1x1 { aspect-ratio: 1 / 1; }
/* marcas de corte: quatro cantos em L, 14 px, 1,5 px, 8 px para fora (no máximo duas fotos por página) */
.corte { position: relative; }
.corte::before { content: ''; position: absolute; inset: -8px; z-index: 2; --c: var(--acento);
background:
linear-gradient(var(--c), var(--c)) left top / 14px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) left top / 1.5px 14px no-repeat,
linear-gradient(var(--c), var(--c)) right top / 14px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) right top / 1.5px 14px no-repeat,
linear-gradient(var(--c), var(--c)) left bottom / 14px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 1.5px 14px no-repeat,
linear-gradient(var(--c), var(--c)) right bottom / 14px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 1.5px 14px no-repeat; }
/* ---------- C08 · Régua de fatos ---------- */
.regua-fatos { background: var(--fundo); padding-block: 0 var(--e-6); }
.regua-fatos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--texto); border-bottom: 1.5px solid var(--texto); }
.regua-fatos__item { display: flex; flex-direction: column; gap: 6px; padding: 22px 14px 18px 0; min-width: 0; }
.regua-fatos__item:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--linha); }
.regua-fatos__item:nth-child(n+3) { border-top: 1px solid var(--linha); }
.regua-fatos__numero { font: 330 max(48px, var(--t-numero))/.9 var(--fonte-titulo); font-variation-settings: var(--fv-display); letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--texto); }
.regua-fatos__frase { font: var(--p-texto-medio) 15px/1.4 var(--fonte-texto); color: var(--texto-2); max-width: 24ch; text-wrap: balance; }
.regua-fatos__item .prova { margin-top: auto; align-self: flex-start; }
.regua-fatos__pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-top: 12px; }
@media (min-width: 1024px) {
.regua-fatos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.regua-fatos__item { padding: 30px 24px 24px; border-top: 0 !important; }
.regua-fatos__item:first-child { padding-left: 0; }
.regua-fatos__item + .regua-fatos__item { border-left: 1px solid var(--linha); }
.regua-fatos__numero { font-size: clamp(3rem, 1.2rem + 4.2vw, 6rem); }
}
/* ---------- C09 · Ficha pública ---------- */
.ficha { position: relative; background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--sombra-papel); padding: 34px clamp(18px, 3vw, 44px) clamp(20px, 2.6vw, 32px); }
.ficha::before { content: ''; position: absolute; left: clamp(18px, 3vw, 44px); right: clamp(18px, 3vw, 44px); top: 12px; height: 0; border-top: 2px dashed var(--traco); opacity: .55; }
.ficha__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 110px 16px 0; border-bottom: 1.5px solid var(--texto); }
/* razão social como cabeçalho de documento, numa linha só (o título da seção fica no H2 ao lado) */
.ficha__titulo, .site .ficha__titulo { font: var(--p-texto-forte) 13px/1.3 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; margin: 0; max-width: none; }
.ficha__linhas { margin: 0; }
.ficha__linha { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px dashed var(--linha-forte); }
.ficha__rotulo { font: var(--p-texto-forte) var(--t-rotulo)/1.4 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--texto-3); padding-top: 3px; }
.ficha__dado { margin: 0; min-width: 0; }
.ficha__dado strong { display: block; font: var(--p-texto-forte) 16px/1.4 var(--fonte-texto); color: var(--texto); }
.ficha__dado > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.ficha__acao { margin: 0; }
.ficha__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--conferido); font-weight: 600; }
.ficha__ok svg { width: 14px; height: 14px; }
.ficha__ok path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ficha__pe { margin-top: 14px; }
/* colunas fixas: o dado começa no mesmo x em todas as linhas, qualquer que seja o link.
Pela largura da própria ficha (ela ocupa 7 de 12 colunas no desktop): estreita, o link desce para baixo do dado. */
.ficha { container-type: inline-size; }
.ficha__acao .prova { white-space: nowrap; }
@container (min-width: 440px) {
.ficha__linha { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 2px 20px; align-items: baseline; }
.ficha__acao { grid-column: 2; }
}
@container (min-width: 640px) {
.ficha__linha { grid-template-columns: 9.5rem minmax(0, 1fr) 13.5rem; gap: 6px 20px; }
.ficha__acao { grid-column: auto; justify-self: end; text-align: right; }
}
/* carimbo "conferido" */
.carimbo { position: absolute; right: clamp(8px, 2vw, 28px); top: -26px; width: 84px; height: 84px; color: var(--conferido); transform: rotate(-4deg); }
.carimbo svg { width: 100%; height: 100%; overflow: visible; }
.carimbo circle, .carimbo path { fill: none; stroke: currentColor; }
.carimbo text { fill: currentColor; font: 600 10px var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 768px) { .carimbo { width: 112px; height: 112px; top: -34px; } }
.ficha--identidade .ficha__titulo, .site .ficha--identidade .ficha__titulo { font: var(--p-display-forte) 28px/1.15 var(--fonte-display); font-variation-settings: var(--fv-leitura); letter-spacing: -.012em; text-transform: none; max-width: 22ch; }
/* ---------- C10 · Amostra de parede ---------- */
.amostra { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-1); overflow: hidden; isolation: isolate; box-shadow: var(--sombra-amostra), 0 0 0 1px rgba(0,0,0,.25); background: #6B3A1C; transform: perspective(1100px) rotateX(0deg) translateY(0); transition: transform var(--d-longa) var(--curva-assenta), box-shadow var(--d-longa) var(--curva-assenta); }
.amostra::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(120deg, rgba(255,240,220,.18), rgba(255,240,220,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.28)); }
a:hover > .amostra, a:focus-visible > .amostra, .amostra--interativa:hover, .amostra--interativa:focus-visible, .tipo:hover .amostra { transform: perspective(1100px) rotateX(4deg) translateY(-8px); box-shadow: 0 34px 44px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.25); }
.amostra__tabuas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0 24.4%, rgba(28,12,4,.55) 24.4% 25%, rgba(0,0,0,0) 25% 49.4%, rgba(28,12,4,.55) 49.4% 50%, rgba(0,0,0,0) 50% 74.4%, rgba(28,12,4,.55) 74.4% 75%, rgba(0,0,0,0) 75%), var(--tabua) 0 0 / auto 100% repeat-x; filter: saturate(1.06) contrast(1.04); }
.amostra__reboco { position: absolute; inset: 0; background-color: #D9CBB4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.35), transparent 60%); }
.amostra__tijolos { position: absolute; inset: 0; background-color: #BFAA8C; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='30'%3E%3Crect width='76' height='30' fill='%23C2AE92'/%3E%3Crect x='1.5' y='1.5' width='73' height='12' rx='1.2' fill='%23984A27'/%3E%3Crect x='-36.5' y='16.5' width='73' height='12' rx='1.2' fill='%23874020'/%3E%3Crect x='39.5' y='16.5' width='73' height='12' rx='1.2' fill='%23A65A31'/%3E%3C/svg%3E"); background-size: auto, 76px 30px; }
.amostra--mista .amostra__reboco { right: 46%; z-index: 1; box-shadow: 6px 0 14px -4px rgba(0,0,0,.45); }
.amostra--mista .amostra__junta { position: absolute; top: 0; bottom: 0; left: 54%; width: 12px; margin-left: -6px; z-index: 2; background: linear-gradient(90deg, #3a1f0e, #7a4424 40%, #4a2712); box-shadow: 0 0 10px rgba(0,0,0,.4); }
.amostra--alvenaria .amostra__reboco { z-index: 1; clip-path: polygon(46% 0, 100% 0, 100% 100%, 70% 100%, 66% 90%, 69% 78%, 63% 66%, 66% 55%, 59% 44%, 61% 31%, 54% 21%, 50% 10%); filter: drop-shadow(-3px 0 0 rgba(0,0,0,.25)); }
.amostra__etiqueta { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: grid; gap: 1px; padding: 7px 10px 6px; background: var(--linho); color: var(--texto); border-radius: var(--r-1); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 20px -14px rgba(0,0,0,.6); }
.amostra__etiqueta small { font: var(--p-texto-forte) 10px/1.3 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); }
.amostra__etiqueta b { font: 400 16px/1.2 var(--fonte-display); font-variation-settings: var(--fv-leitura); }
.amostra[aria-pressed="true"], .amostra--selecionada { outline: 2px solid var(--acento); outline-offset: 4px; }
/* ---------- C11 · Mosaico de obras (tríptico desencontrado) ---------- */
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--calha); align-items: start; }
.mosaico > :first-child { grid-column: 1 / -1; }
.mosaico > :not(:first-child) .foto { aspect-ratio: 1 / 1; }
@media (min-width: 768px) {
.mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mosaico > :nth-child(1) { grid-column: 1 / span 5; }
.mosaico > :nth-child(2) { grid-column: 6 / span 4; margin-top: 96px; }
.mosaico > :nth-child(3) { grid-column: 10 / span 3; margin-top: 40px; }
.mosaico > :nth-child(2) .foto { aspect-ratio: 3 / 2; }
.mosaico > :nth-child(3) .foto { aspect-ratio: 4 / 5; }
}
/* ---------- C12 · Atlas das cidades ---------- */
.atlas { font: 360 22px/1.45 var(--fonte-titulo); font-variation-settings: var(--fv-display); letter-spacing: -.012em; color: var(--texto); text-wrap: pretty; }
.atlas__cidade { white-space: nowrap; }
.atlas__mais { color: var(--acento); margin: 0 .28em; font-weight: 400; }
.atlas__sede { color: var(--marca); }
.atlas__sede sup { margin-left: .3em; vertical-align: .9em; font: var(--p-texto-forte) var(--t-rotulo)/1 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--acento-texto); }
button.atlas__cidade { border: 0; padding: 0; background: none; font: inherit; color: inherit; }
button.atlas__cidade:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
button.atlas__cidade[aria-pressed="true"] { font-style: italic; font-variation-settings: var(--fv-enfase); color: var(--marca); }
@media (min-width: 1024px) { .atlas { font-size: clamp(1.75rem, 1rem + 1.3vw, 2.5rem); line-height: 1.32; } }
/* ---------- C13 · Mapa de rotas ---------- */
.mapa-rotas { position: relative; }
.mapa-rotas svg { width: 100%; height: auto; overflow: visible; }
.mapa-rotas .costa, .mapa-rotas .lagoa { fill: none; stroke: var(--traco); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .4; }
.mapa-rotas .lagoa { fill: rgba(140,74,34,.06); }
.mapa-rotas .rota { fill: none; stroke: var(--traco); stroke-width: 1.2; stroke-linecap: round; }
.mapa-rotas .pt { fill: var(--marca); }
.mapa-rotas .sede { fill: var(--acento); }
.mapa-rotas .anel { fill: none; stroke: var(--acento); stroke-width: 1.2; }
.mapa-rotas text { font: var(--p-texto-forte) 11px var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: .04em; fill: var(--texto-2); }
.mapa-rotas .nome-sede { font: 400 20px var(--fonte-titulo); font-variation-settings: var(--fv-display); fill: var(--marca); letter-spacing: -.01em; }
.mapa-rotas .mar { font: italic 400 14px var(--fonte-titulo); font-variation-settings: var(--fv-enfase); fill: var(--texto-3); }
.mapa-rotas .cidade-alvo:hover .pt, .mapa-rotas .cidade-alvo:focus-visible .pt { fill: var(--acento); }
.mapa-rotas__dica { position: absolute; z-index: 3; padding: 6px 10px; background: var(--carvao); color: var(--creme); border-radius: var(--r-1); font-size: 13px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
@media (max-width: 767px) { .mapa-rotas { height: 420px; } .mapa-rotas svg { height: 100%; } }
/* ---------- C14 · Índice de obras (página Obras, desktop) ---------- */
.indice { display: none; }
@media (min-width: 1024px) {
.indice { display: grid; grid-template-columns: 5fr 7fr; gap: var(--calha) calc(var(--calha) * 3); align-items: start; }
.indice__foto { position: sticky; top: calc(var(--topo) + var(--faixa-demo) + 24px); }
.indice__foto .foto { aspect-ratio: 4 / 5; }
.indice__foto img { transition: opacity 260ms linear; }
.indice__numero { position: absolute; left: 20px; bottom: 12px; z-index: 2; font: italic 400 96px/1 var(--fonte-titulo); font-variation-settings: var(--fv-enfase); color: var(--creme); text-shadow: 0 2px 20px rgba(20,12,6,.4); }
.indice__lista { border-top: 1.5px solid var(--texto); }
.indice__linha { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 16px; min-height: 64px; width: 100%; padding: 8px 0 8px 12px; border: 0; border-bottom: 1px solid var(--linha); background: none; text-align: left; position: relative; }
.indice__linha::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; border-left: 3px solid var(--acento); opacity: 0; transition: opacity var(--d-micro); }
.indice__linha[aria-current="true"]::before, .indice__linha:hover::before, .indice__linha:focus-visible::before { opacity: 1; }
.indice__linha b { font: 400 28px/1.1 var(--fonte-display); font-variation-settings: var(--fv-leitura); letter-spacing: -.012em; }
.indice__linha[aria-current="true"] b, .indice__linha:hover b { font-style: italic; font-variation-settings: var(--fv-enfase); }
.indice__linha .rotulo { color: var(--texto-3); }
}
/* ---------- C15 · Cartão de obra ---------- */
.cartao-obra { display: flex; flex-direction: column; min-width: 0; }
.cartao-obra .foto { aspect-ratio: 4 / 3; }
.cartao-obra__campos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.cartao-obra__campos .rotulo { color: var(--texto-3); }
.cartao-obra .botao--texto { align-self: flex-start; margin-top: 6px; }
.cartao-obra:focus-within { outline: 2px solid var(--foco); outline-offset: 6px; border-radius: var(--r-1); }
.cartao-obra a:focus-visible { outline: none; }
.grade-obras { display: grid; gap: 40px var(--calha); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grade-obras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade-obras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- C16 · Citação grande ---------- */
.citacao { max-width: 22em; }
.citacao__texto { font: 360 var(--t-citacao)/var(--a-citacao) var(--fonte-display); font-variation-settings: var(--fv-display); letter-spacing: -.018em; color: var(--texto); text-wrap: pretty; }
.citacao__texto p::before { content: '\201C'; display: inline-block; color: var(--acento); }
.citacao__texto p::after { content: '\201D'; color: var(--acento); }
.citacao--leitura .citacao__texto { font-variation-settings: var(--fv-leitura); }
.citacao__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; font-size: 14px; }
.citacao__nome { font-weight: 600; }
.citacao__canal { color: var(--texto-3); }
.escuro .citacao__texto { color: var(--texto-inverso); }
.escuro .citacao__canal { color: var(--texto-inverso-2); }
.citacao--media .citacao__texto { font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem); line-height: 1.3; font-variation-settings: var(--fv-leitura); }
.citacao--pequena .citacao__texto { font-size: 20px; line-height: 1.35; font-variation-settings: var(--fv-leitura); }
.citacao--caixa-alta .citacao__texto { font-size: 17px; letter-spacing: .03em; }
@media (min-width: 768px) {
.citacao:not(.citacao--media):not(.citacao--pequena) .citacao__texto p::before { margin-left: -.42em; width: .42em; }
}
/* ---------- C17 · Cartão de depoimento ---------- */
.depoimento { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-1); min-width: 0; }
.estrelas { display: inline-flex; gap: 2px; color: var(--acento); }
.estrelas svg { width: 15px; height: 15px; fill: currentColor; }
.depoimento__texto { font: 400 19px/1.45 var(--fonte-display); font-variation-settings: var(--fv-leitura); color: var(--texto); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.depoimento--aberto .depoimento__texto { -webkit-line-clamp: unset; display: block; }
.depoimento__pe { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px dashed var(--linha-forte); font-size: 14px; }
.depoimento__quem { font-weight: 600; }
.depoimento__canal { color: var(--texto-3); font-size: 13px; }
.depoimento__acoes { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.depoimento__acoes .botao--texto { min-height: 36px; font-size: 14px; }
.etiqueta-honesta { align-self: flex-start; padding: 3px 8px; border: 1px solid var(--linha-forte); border-radius: var(--r-1); font: var(--p-texto-forte) var(--t-rotulo)/1.3 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
@media (max-width: 767px) { .depoimento__texto { -webkit-line-clamp: 5; } }
/* ---------- C18 · Cartão da crítica ---------- */
.depoimento--critica { background: transparent; border: 1.5px dashed var(--acento-texto); }
.depoimento--critica .depoimento__tipo { color: var(--acento-texto); }
.depoimento__resposta { margin-top: 6px; padding-left: 14px; border-left: 3px solid var(--marca); font-size: 15px; color: var(--texto-2); }
/* ---------- C19 · Placar e histograma ---------- */
.placar__nota { font: 330 var(--t-mega)/var(--a-mega) var(--fonte-titulo); font-variation-settings: var(--fv-display); letter-spacing: var(--l-mega); }
.placar__total { margin-top: 10px; font-size: 16px; }
.placar__barras { display: grid; gap: 8px; margin-top: 22px; max-width: 420px; }
.placar__barras li { display: grid; grid-template-columns: 34px 1fr 30px; gap: 12px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.placar__trilho { height: 8px; background: var(--linha); border-radius: var(--r-1); overflow: hidden; }
.escuro .placar__trilho { background: var(--linha-inversa); }
.placar__trilho i { display: block; height: 100%; background: var(--acento); }
.placar__barras b { text-align: right; font-weight: 600; }
/* ---------- C20 · Barômetro de temas ---------- */
.barometro { display: grid; gap: 6px; }
.barometro__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--linha); background: none; text-align: left; }
.barometro__tema { font-weight: 600; }
.barometro__conta { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 14px; }
.barometro__trilho { grid-column: 1 / -1; height: 6px; background: var(--linha); border-radius: var(--r-1); overflow: hidden; }
.barometro__trilho i { display: block; height: 100%; background: var(--marca); }
.barometro__linha[aria-pressed="true"] .barometro__trilho i { background: var(--acento); }
.barometro__exemplo { grid-column: 1 / -1; font: italic 400 16px/1.4 var(--fonte-titulo); font-variation-settings: var(--fv-enfase); color: var(--texto-2); }
/* ---------- C21 · Plaquinha da equipe (só com autorização registrada) ---------- */
.plaquinha { display: grid; gap: 14px; }
.plaquinha__placa { position: relative; aspect-ratio: 4 / 1; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; border-radius: var(--r-1); background: linear-gradient(180deg, rgba(255,210,160,.06), rgba(36,20,11,.3)), var(--tabua) 0 0 / auto 220% repeat-x; box-shadow: var(--gravado), 0 18px 30px -22px rgba(0,0,0,.7); }
.plaquinha__nome { font: var(--p-display-forte) clamp(28px, 2.4vw, 40px)/1 var(--fonte-titulo); font-variation-settings: var(--fv-display); color: var(--creme); text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.08); }
.plaquinha__funcao { margin-top: 6px; font: var(--p-texto-forte) var(--t-rotulo)/1.2 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--creme-2); }
@media (min-width: 768px) { .plaquinha__placa { aspect-ratio: 3 / 1; } }
.nome-citado { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* ---------- C22 · Etapas (Como trabalhamos) ---------- */
.etapas { display: grid; gap: var(--e-8); }
.etapas__indice { display: none; }
.etapa { display: grid; gap: 12px; padding-bottom: var(--e-8); border-bottom: 1px solid var(--linha); }
.etapa__numero { font: 330 64px/1 var(--fonte-titulo); font-variation-settings: var(--fv-display); color: var(--marca); letter-spacing: -.03em; }
.etapa--corrente .etapa__numero { color: var(--acento-texto); }
.etapa__citacao { padding: 16px 20px; background: var(--superficie); border-left: 3px solid var(--acento); border-radius: 0 var(--r-1) var(--r-1) 0; font: italic 400 17px/1.45 var(--fonte-titulo); font-variation-settings: var(--fv-enfase); }
.etapa__citacao cite { display: block; margin-top: 8px; font: normal 400 13px/1.3 var(--fonte-texto); color: var(--texto-3); }
.fica-com-voce { display: grid; grid-template-columns: 1fr; gap: 4px 20px; padding: 12px 0; border-top: 1px dashed var(--linha-forte); border-bottom: 1px dashed var(--linha-forte); }
.fica-com-voce dt { font: var(--p-texto-forte) var(--t-rotulo)/1.4 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--texto-3); }
.fica-com-voce dd { margin: 0; }
.etapa__destaque:empty { display: none; }
@media (min-width: 768px) { .fica-com-voce { grid-template-columns: 180px 1fr; } }
@media (min-width: 1024px) {
.etapas { grid-template-columns: 4fr 8fr; gap: var(--calha) calc(var(--calha) * 3); align-items: start; }
.etapas__indice { display: block; position: sticky; top: calc(var(--topo) + var(--faixa-demo) + 32px); padding-left: 22px; }
.etapas__indice::before, .etapas__indice::after { content: ''; position: absolute; left: 0; top: 6px; width: 2px; background: var(--linha); bottom: 6px; }
.etapas__indice::after { background: var(--acento); bottom: auto; height: calc(var(--progresso, 0) * (100% - 12px)); transition: height var(--d-media) var(--curva-assenta); }
.etapas__indice a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 0; text-decoration: none; color: var(--texto-2); font-size: 15px; }
.etapas__indice a[aria-current="step"] { color: var(--texto); font-weight: 600; }
}
/* ---------- C23 · Acordeão e perguntas ---------- */
.acordeao { border-top: 1px solid var(--linha-forte); }
.acordeao details { border-bottom: 1px solid var(--linha-forte); interpolate-size: allow-keywords; }
.acordeao summary { position: relative; display: block; padding: 20px 48px 20px 0; list-style: none; font: var(--p-display-forte) 20px/1.3 var(--fonte-display); font-variation-settings: var(--fv-leitura); }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::before, .acordeao summary::after { content: ''; position: absolute; right: 10px; top: 50%; width: 16px; margin-top: -1px; border-top: 1.5px solid currentColor; transition: transform var(--d-curta) var(--curva-assenta); }
.acordeao summary::after { transform: rotate(90deg); }
.acordeao details[open] summary::after { transform: rotate(0deg); }
.acordeao details[open] summary::before { transform: rotate(180deg); }
.acordeao details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--d-media) var(--curva-assenta), content-visibility var(--d-media) allow-discrete; }
.acordeao details[open]::details-content { block-size: auto; }
.acordeao__resposta { padding: 0 0 24px; max-width: var(--medida); color: var(--texto-2); }
.acordeao__resposta p + p { margin-top: .8em; }
.acordeao__resposta .botoes { margin-top: 16px; }
/* ---------- C24 · Filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.abas-texto { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.abas-texto::-webkit-scrollbar { display: none; }
.abas-texto button { flex: none; min-height: var(--alvo); padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; font: var(--p-texto-medio) 16px/1 var(--fonte-texto); color: var(--texto-2); scroll-snap-align: start; }
.abas-texto button:hover { color: var(--texto); }
.abas-texto button[aria-pressed="true"], .abas-texto button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); }
.filtros__contador { margin-left: auto; color: var(--texto-3); }
@media (max-width: 767px) {
.abas-texto { margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); scroll-padding-inline: var(--margem); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
}
/* ---------- C25 · Campos de formulário ---------- */
.campo { display: grid; gap: 6px; }
.campo__rotulo { font: var(--p-texto-forte) 15px/1.3 var(--fonte-texto); }
.campo__ajuda { font-size: 14px; color: var(--texto-2); }
.campo__entrada, .campo select, .campo textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); font-size: 16px; line-height: 1.4; transition: border-color var(--d-micro), box-shadow var(--d-micro); }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A211B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.campo__entrada:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 3px rgba(247,146,15,.45); }
.campo--erro .campo__entrada, .campo--erro select, .campo--erro textarea { border-color: var(--erro); }
.campo__erro { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--erro); }
.campo__erro::before { content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--erro); color: #fff; font-weight: 700; font-size: 12px; line-height: 1; }
.marcar { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; }
.marcar input { width: 24px; height: 24px; margin: 0; accent-color: var(--carvao); }
.form-sucesso { padding: 20px; background: var(--superficie); border-left: 3px solid var(--conferido); border-radius: 0 var(--r-2) var(--r-2) 0; }
/* ---------- C26 · Trena (régua de marcos; a trena de metragem é do simulador, F12) ---------- */
.trena { position: relative; overflow-x: auto; scrollbar-width: none; padding: 30px 0 8px; }
.trena::-webkit-scrollbar { display: none; }
.trena__fita { position: relative; min-width: 760px; height: 56px; border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,.06) 0 33%, transparent 33%), var(--brasa-500); border-top: 1px solid #C96800; border-bottom: 1px solid #C96800; }
.trena__fita::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--carvao) 0 1px, transparent 1px 10px) top left / 100% 12px no-repeat, repeating-linear-gradient(90deg, var(--carvao) 0 1px, transparent 1px 50px) top left / 100% 20px no-repeat, repeating-linear-gradient(90deg, var(--carvao) 0 1.5px, transparent 1.5px 100px) top left / 100% 30px no-repeat; opacity: .85; }
.trena__marcos { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 4%; }
.trena__pino { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -40px; border-radius: 50%; background: var(--carvao); color: var(--brasa-400); font: 500 14px/1 var(--fonte-display); box-shadow: 0 0 0 3px var(--fundo); }
.trena__pino::after { content: ''; position: absolute; top: 30px; left: 50%; height: 64px; border-left: 2px solid var(--carvao); }
.trena__pino--aberto { background: var(--fundo); color: var(--texto); box-shadow: 0 0 0 1.5px var(--carvao); }
.marcos-cartoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 0; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 1.5px solid var(--texto); }
.marcos-cartoes li { padding: 18px 20px 6px 0; margin-right: 20px; border-right: 1px dashed var(--linha-forte); scroll-snap-align: start; }
.marcos-cartoes li:last-child { border-right: 0; }
/* ---------- C27 · Botão flutuante único, folha de contato e balão de convite ---------- */
.flutuante { position: fixed; right: 16px; bottom: calc(16px + max(var(--altura-barra-acao), env(safe-area-inset-bottom))); z-index: var(--z-flutuante); display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-2); background: var(--carvao); color: var(--creme); box-shadow: var(--sombra-flutuante); font: var(--p-texto-forte) 15px/1 var(--fonte-texto); transition: transform var(--d-media) var(--curva-assenta), opacity var(--d-media) var(--curva-assenta); }
.flutuante__mais { font: 400 24px/1 var(--fonte-display); color: var(--acento); margin-top: -2px; }
.flutuante:hover { background: var(--madeira-700); }
.flutuante[data-oculto] { transform: translateY(12px); opacity: 0; visibility: hidden; transition: transform var(--d-media) var(--curva-assenta), opacity var(--d-media) var(--curva-assenta), visibility 0s linear var(--d-media); }
.acima-da-barra .flutuante { bottom: calc(var(--barra-celular) + 16px + env(safe-area-inset-bottom)); }
.folha-contato { position: fixed; z-index: var(--z-folha); right: 16px; bottom: calc(76px + max(var(--altura-barra-acao), env(safe-area-inset-bottom))); width: min(380px, calc(100vw - 32px)); padding: 8px 0; background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--sombra-folha); animation: sobe var(--d-media) var(--curva-assenta) both; }
.folha-contato__titulo { padding: 12px 20px 8px; }
.folha-contato a, .folha-contato button.folha-contato__opcao { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 2px 16px; width: 100%; min-height: 64px; padding: 10px 20px; border: 0; border-top: 1px solid var(--linha); background: none; text-align: left; text-decoration: none; color: var(--texto); }
.folha-contato a:hover, .folha-contato button.folha-contato__opcao:hover { background: var(--superficie-2); }
.folha-contato b { font: var(--p-texto-forte) 16px/1.25 var(--fonte-texto); }
.folha-contato small { grid-column: 1; font-size: 14px; color: var(--texto-2); }
.folha-contato svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; }
.folha-contato svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.folha-contato__fechar { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: none; color: var(--texto-2); }
.balao-convite { position: fixed; z-index: var(--z-flutuante); right: 16px; bottom: calc(76px + max(var(--altura-barra-acao), env(safe-area-inset-bottom))); width: min(320px, calc(100vw - 32px)); padding: 16px 76px 16px 18px; background: var(--linho); border-radius: var(--r-2); box-shadow: var(--sombra-papel), 0 0 0 1px var(--linha); font: 400 16px/1.45 var(--fonte-texto); animation: sobe var(--d-media) var(--curva-assenta) both; }
.balao-convite button.balao-convite__abrir { border: 0; padding: 0; background: none; text-align: left; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.balao-convite__fechar { position: absolute; top: 4px; right: 4px; width: auto; min-width: 48px; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--texto-2); font-size: 13px; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
.balao-convite[hidden] { display: none; }
/* folha aberta (texto integral, comparação): o botão flutuante some por trás do fundo escurecido */
body:has(.folha-fundo) .flutuante, body:has(.folha-fundo) .balao-convite { visibility: hidden; }
/* menu do celular aberto: o flutuante não cobre o pé do menu ("Área do cliente") */
.menu-aberto .flutuante, .menu-aberto .balao-convite, .menu-aberto .folha-contato { visibility: hidden; }
@media (max-width: 599px) {
.folha-contato { left: 0; right: 0; bottom: var(--altura-barra-acao); width: 100%; border-radius: var(--r-3) var(--r-3) 0 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* ---------- C28 · Aviso de cookies ---------- */
.aviso-cookies { position: fixed; z-index: var(--z-aviso); left: 0; right: 0; bottom: 0; padding: 18px var(--margem) calc(18px + env(safe-area-inset-bottom)); background: var(--superficie); box-shadow: 0 -1px 0 var(--linha), var(--sombra-folha); animation: sobe var(--d-media) var(--curva-assenta) both; }
.aviso-cookies__titulo, .site .aviso-cookies__titulo { font: 400 20px/1.2 var(--fonte-display); font-variation-settings: var(--fv-leitura); margin: 0 0 6px; }
.aviso-cookies p { font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.aviso-cookies .botoes { margin-top: 14px; }
.aviso-cookies .botoes .botao { flex: 1 1 0; min-height: 48px; }
.aviso-cookies__link { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--texto-2); }
/* folha aberta (obra, texto integral, agendamento): o aviso espera atrás do fundo escurecido e volta ao fechar */
body:has(.folha-fundo) .aviso-cookies { z-index: calc(var(--z-folha) - 1); }
/* desktop: canto inferior direito, sobre a parte escura da foto, longe do texto e dos botões do herói */
@media (min-width: 768px) {
.aviso-cookies { left: auto; right: 16px; bottom: calc(16px + var(--altura-barra-acao)); width: 360px; padding: 22px 22px 18px; border-radius: var(--r-3); box-shadow: var(--sombra-folha), 0 0 0 1px var(--linha); }
}
/* celular: faixa baixa (cerca de 200 px), sem cobrir o título do herói */
@media (max-width: 767.98px) {
.aviso-cookies { bottom: var(--altura-barra-acao); max-height: calc(100svh - var(--altura-barra-acao) - var(--faixa-demo) - var(--topo-celular)); overflow-y: auto; padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom)); }
.aviso-cookies__titulo, .site .aviso-cookies__titulo { font-size: 17px; margin-bottom: 2px; }
.aviso-cookies p { font-size: 14px; line-height: 1.4; }
.aviso-cookies .botoes { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aviso-cookies .botoes .botao { min-height: 44px; padding: 0 12px; justify-content: center; white-space: normal; text-align: center; }
.aviso-cookies__link { margin-top: 6px; }
}
/* ---------- C29 · Rodapé ---------- */
.rodape { position: relative; isolation: isolate; background: var(--imbuia); color: var(--texto-inverso-2); padding: 0 0 calc(96px + env(safe-area-inset-bottom)); font-size: 15px; line-height: 1.6; }
.rodape::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tabua) 0 0 / 1000px auto; opacity: .05; mix-blend-mode: soft-light; }
.rodape a { color: var(--texto-inverso); text-decoration-color: var(--linha-inversa-forte); text-underline-offset: 3px; }
.rodape a:hover { text-decoration-color: var(--acento); }
.rodape__grade { display: grid; gap: 28px; padding-top: var(--e-8); border-top: 1px solid var(--linha-inversa); }
.rodape__marca img { height: 64px; width: auto; }
.rodape__assinatura { margin-top: 18px; font: italic 400 22px/1.2 var(--fonte-titulo); font-variation-settings: var(--fv-enfase); color: var(--texto-inverso); }
.rodape__frase { margin-top: 6px; max-width: 34ch; }
.rodape__bloco h2, .rodape__bloco summary { margin: 0 0 10px; font: var(--p-texto-forte) var(--t-rotulo)/1.4 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--enfase-escuro); }
.rodape__bloco ul { display: grid; gap: 4px; }
.rodape__bloco details summary { display: flex; justify-content: space-between; align-items: center; min-height: var(--alvo); margin: 0; list-style: none; border-top: 1px solid var(--linha-inversa); }
.rodape__bloco details summary::-webkit-details-marker { display: none; }
.rodape__bloco details summary::after { content: '+'; font: 400 22px/1 var(--fonte-display); color: var(--acento); }
.rodape__bloco details[open] summary::after { content: '\2212'; }
.rodape__bloco details > div { padding-bottom: 14px; }
.rodape__protecao { margin-top: 12px; color: var(--texto-inverso); font-size: 15px; }
.rodape__cnpj { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; }
.rodape__barras { height: 40px; width: auto; color: var(--creme-2); opacity: .85; }
.rodape__expediente { margin-top: 10px; font-size: 13px; color: var(--texto-inverso-2); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; }
.rodape__links button { border: 0; padding: 0; background: none; color: var(--texto-inverso); text-decoration: underline; text-decoration-color: var(--linha-inversa-forte); text-underline-offset: 3px; font-size: 15px; }
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: var(--e-7); padding-top: 18px; border-top: 1px solid var(--linha-inversa); font-size: 13px; }
@media (min-width: 768px) {
.rodape__grade { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; }
.rodape__bloco details { display: contents; }
.rodape__bloco details summary { border: 0; min-height: 0; margin: 0 0 10px; }
.rodape__bloco details summary::after, .rodape__bloco details[open] summary::after { content: none; }
.rodape__bloco details > div { display: block !important; padding: 0; }
}
/* ---------- C30 · Fecho tipográfico ---------- */
.fecho { position: relative; isolation: isolate; overflow: hidden; background: var(--imbuia); color: var(--creme); padding: var(--secao-curta) 0 var(--e-8); }
.fecho::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tabua) 0 0 / 1000px auto; opacity: .05; mix-blend-mode: soft-light; }
.fecho__linha { font: 330 56px/var(--a-mega) var(--fonte-titulo); font-variation-settings: var(--fv-display); letter-spacing: var(--l-mega); margin: 0; }
.fecho__linha em { font-style: italic; font-variation-settings: var(--fv-enfase); color: var(--enfase-escuro); }
.fecho__linha > span { display: block; white-space: nowrap; }
.fecho__quebra { display: block; }
@media (min-width: 768px) { .fecho__linha { font-size: clamp(4rem, 1rem + 8.4vw, 9.5rem); } .fecho__quebra { display: inline; } .fecho__linha > span + span { padding-left: .9em; } }
/* ---------- C36 · Cartão de escolha ---------- */
.escolha { position: relative; display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 2px 14px; min-height: 64px; width: 100%; padding: 12px 16px; border: 1.5px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie); color: var(--texto); text-align: left; transition: border-color var(--d-micro), background-color var(--d-micro); }
.escolha:hover { border-color: var(--texto); }
.escolha b { font: var(--p-texto-forte) 16px/1.3 var(--fonte-texto); }
.escolha small { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--texto-2); }
.escolha::after { content: ''; grid-row: 1 / span 2; grid-column: 2; width: 20px; height: 20px; border: 1.5px solid var(--linha-forte); border-radius: 50%; }
.escolha--multipla::after { border-radius: var(--r-1); }
.escolha[aria-pressed="true"], .escolha[aria-checked="true"] { border: 2px solid var(--carvao); background: var(--linho-2); padding: 11.5px 15.5px; }
.escolha[aria-pressed="true"]::after, .escolha[aria-checked="true"]::after { border-color: var(--carvao); background: var(--carvao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23F4ECDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat; }
.escolha[aria-disabled="true"] { opacity: .55; cursor: default; }
/* ---------- C37 · Comparação de três CNPJs ---------- */
.compara-cnpj { display: grid; gap: 14px; align-items: center; }
.compara-cnpj__ficha { padding: 16px 18px; background: var(--superficie); border-radius: var(--r-2); box-shadow: var(--sombra-papel); }
.compara-cnpj__campo { margin-top: 10px; height: 28px; border-bottom: 1.5px dashed var(--linha-forte); font: var(--p-texto-forte) 16px/28px var(--fonte-texto); font-variant-numeric: tabular-nums; }
.compara-cnpj__igual { justify-self: center; font: 360 40px/1 var(--fonte-display); color: var(--marca); transform: rotate(90deg); }
@media (min-width: 768px) { .compara-cnpj { grid-template-columns: 1fr auto 1fr auto 1fr; } .compara-cnpj__igual { transform: none; } }
/* ---------- C38 · Mapa incorporado sob demanda ---------- */
.mapa-google { position: relative; height: 360px; border-radius: var(--r-3); overflow: hidden; background: var(--areia); }
.mapa-google svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-google .botao { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--superficie); }
.mapa-google iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) { .mapa-google { height: 440px; } }
/* ==========================================================================
7. Folha: painel que sobe (textos completos, comparação, detalhes)
========================================================================== */
.folha-fundo { position: fixed; inset: 0; z-index: var(--z-folha); display: flex; align-items: flex-end; justify-content: center; background: rgba(27,25,23,.5); animation: aparece var(--d-media) var(--curva-assenta) both; }
.folha { position: relative; width: 100%; max-height: min(88svh, 900px); overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--margem) calc(28px + env(safe-area-inset-bottom)); background: var(--superficie); border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--sombra-folha); animation: sobe var(--d-media) var(--curva-assenta) both; }
.folha__titulo, .site .folha__titulo { margin: 0 48px 18px 0; font: var(--p-display-forte) 26px/1.15 var(--fonte-display); font-variation-settings: var(--fv-leitura); letter-spacing: -.012em; }
.folha__fechar { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: var(--alvo); height: var(--alvo); border: 0; border-radius: var(--r-2); background: none; color: var(--texto); }
.folha__fechar svg { width: 20px; height: 20px; }
.folha__fechar path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.folha__corpo { color: var(--texto-2); }
@media (min-width: 768px) {
.folha-fundo { align-items: center; padding: 24px; }
.folha { max-width: 760px; border-radius: var(--r-3); padding: 36px 40px 32px; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.folha-texto-integral { font: 400 20px/1.5 var(--fonte-display); font-variation-settings: var(--fv-leitura); color: var(--texto); }
/* tabela da comparação dos três tipos */
.comparacao { width: 100%; border-collapse: collapse; font-size: 15px; }
.comparacao th, .comparacao td { padding: 14px 12px 14px 0; border-bottom: 1px dashed var(--linha-forte); text-align: left; vertical-align: top; }
.comparacao thead th { position: sticky; top: -28px; background: var(--superficie); font: var(--p-display-forte) 19px/1.2 var(--fonte-display); font-variation-settings: var(--fv-leitura); border-bottom: 1.5px solid var(--texto); }
.comparacao tbody th { font: var(--p-texto-forte) var(--t-rotulo)/1.4 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--texto-3); width: 18%; }
.comparacao-celular { display: grid; gap: 28px; }
.comparacao-celular h4 { margin: 0 0 8px; font: var(--p-display-forte) 22px/1.2 var(--fonte-display); }
.comparacao-celular dl { margin: 0; display: grid; gap: 10px; }
.comparacao-celular dt { font: var(--p-texto-forte) var(--t-rotulo)/1.4 var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: var(--l-rotulo); text-transform: uppercase; color: var(--texto-3); }
.comparacao-celular dd { margin: 0; }
@media (max-width: 767px) { .comparacao { display: none; } }
@media (min-width: 768px) { .comparacao-celular { display: none; } }
/* ==========================================================================
8. Maquete de reserva do palco (Início). Desenho axonométrico estático, gerado uma vez a
partir de medidas em metros, em três variantes (2, 3 e 4 quartos, a casa cresce para os
fundos); muda de material e remonta paredes e telhado a cada troca. Sem cotas (palco
compacto, DIRECAO 11.1). Quando o montarSimulador da F12 carrega, ele toma o lugar deste desenho.
========================================================================== */
.palco { position: relative; background: var(--linho); color: var(--texto); border-radius: var(--r-3); padding: 18px 18px 14px; }
.palco__desenho { position: relative; min-height: 220px; }
.maquete-svg { width: 100%; height: auto; overflow: visible; }
.maquete-svg path, .maquete-svg ellipse, .maquete-svg circle { vector-effect: non-scaling-stroke; }
.m-chao { fill: var(--areia); }
.m-grade { stroke: rgba(42,33,27,.07); stroke-width: .7; }
.m-grade-5 { stroke: rgba(42,33,27,.16); }
.m-sombra-chao { fill: rgba(36,20,11,.14); mix-blend-mode: multiply; }
.m-laje { fill: #CFC2AC; stroke: rgba(42,33,27,.7); stroke-width: .8; }
.m-laje.f-zp { fill: #DDD2BF; }
.m-parede, .m-oitao, .m-bloco, .m-telha, .m-testeira, .m-deck, .m-pilar, .m-caixilho, .m-porta { stroke: rgba(42,33,27,.72); stroke-width: .9; stroke-linejoin: round; transition: fill 600ms var(--curva-encaixe), opacity 600ms; }
/* madeira: tábua em três tons de mel a cedro */
.m-parede.t-luz, .m-oitao.t-luz { fill: #C08450; }
.m-parede.t-meia, .m-oitao.t-meia { fill: #A7683A; }
.m-parede.t-sombra, .m-oitao.t-sombra { fill: #874E27; }
.m-tabua { stroke: rgba(58,24,5,.42); stroke-width: .6; }
.m-tb { transition: opacity 600ms; }
.m-bloco { opacity: 0; }
.m-junta { stroke: #4A2712; stroke-width: 2.2; opacity: 0; transition: opacity 600ms; }
/* reboco (alvenaria e o bloco molhado da mista) */
.m-bloco.t-luz { fill: #EDE4D5; } .m-bloco.t-meia { fill: #DED2BF; } .m-bloco.t-sombra { fill: #C9BBA4; }
[data-linha="alvenaria"] .m-parede.t-luz, [data-linha="alvenaria"] .m-oitao.t-luz { fill: #EDE4D5; }
[data-linha="alvenaria"] .m-parede.t-meia, [data-linha="alvenaria"] .m-oitao.t-meia { fill: #DED2BF; }
[data-linha="alvenaria"] .m-parede.t-sombra, [data-linha="alvenaria"] .m-oitao.t-sombra { fill: #C9BBA4; }
[data-linha="alvenaria"] .m-tb { opacity: 0; }
[data-linha="mista"] .m-bloco, [data-linha="mista"] .m-junta { opacity: 1; }
.m-telha.t-luz { fill: #A35C33; } .m-telha.t-meia { fill: #8C4A22; } .m-telha.t-sombra { fill: #6E3718; }
.m-fiada { stroke: rgba(36,20,11,.34); stroke-width: .5; }
.m-fiada-v { stroke: rgba(36,20,11,.14); }
.m-cumeeira { stroke: #4A2410; stroke-width: 2; stroke-linecap: round; }
.m-testeira { fill: #5F280A; }
.m-caixilho { fill: #5F280A; }
.m-vidro { fill: rgba(250,246,239,.62); stroke: none; }
.m-montante { stroke: #5F280A; stroke-width: 1.2; }
.m-porta { fill: #6B3514; }
.m-deck { fill: #B07A48; } .m-deck.f-zp { fill: #C08B57; }
.m-deck-junta { stroke: rgba(58,24,5,.3); stroke-width: .5; }
.m-pilar.t-luz { fill: #B27744; } .m-pilar.t-meia { fill: #93592C; } .m-pilar.t-sombra { fill: #74431F; }
.m-ripa { stroke: #6B3514; stroke-width: 1.3; }
.m-corrimao { stroke: #5F280A; stroke-width: 2.2; stroke-linecap: round; }
.m-pessoa { fill: var(--tinta-2); }
.m-pessoa-sombra { fill: rgba(36,20,11,.16); }
.m-norte circle { fill: none; stroke: var(--traco); stroke-width: 1; }
.m-norte path { fill: var(--traco); }
.m-norte text { font: 600 10px var(--fonte-texto); font-stretch: var(--largura-rotulo); letter-spacing: .08em; fill: var(--texto-3); }
/* montagem: a casa sobe do chão na primeira vez que o palco entra na tela (DIRECAO 12.5) */
.maquete-svg.montar > g { animation: m-aparece 400ms var(--curva-assenta) both; }
.maquete-svg.montar .m-terreno { animation-delay: 0ms; }
.maquete-svg.montar .m-laje-g { animation: m-laje 400ms var(--curva-encaixe) 400ms both; }
.maquete-svg.montar .m-sombra { animation-duration: 800ms; animation-delay: 1000ms; }
.maquete-svg.montar .m-paredes { transform-box: fill-box; transform-origin: 50% 100%; animation: m-paredes 800ms var(--curva-encaixe) 800ms both; }
.maquete-svg.montar .m-esquadrias { animation-duration: 300ms; animation-delay: 1600ms; }
.maquete-svg.montar .m-telhado { animation: m-telhado 600ms var(--curva-encaixe) 1900ms both; }
.maquete-svg.montar .m-varanda, .maquete-svg.montar .m-varanda-telhado { animation: m-varanda 500ms var(--curva-encaixe) 2300ms both; }
.maquete-svg.montar .m-cena { animation-duration: 400ms; animation-delay: 2400ms; }
/* a cada troca (tipo ou quartos): montagem curta só de paredes e telhado; só transform e opacity */
.maquete-svg.remontar .m-paredes { transform-box: fill-box; transform-origin: 50% 100%; animation: m-paredes 420ms var(--curva-encaixe) both; }
.maquete-svg.remontar .m-esquadrias { animation: m-aparece 200ms var(--curva-assenta) 300ms both; }
.maquete-svg.remontar .m-telhado, .maquete-svg.remontar .m-varanda-telhado { animation: m-telhado 360ms var(--curva-encaixe) 180ms both; }
@keyframes m-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-laje { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes m-paredes { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes m-telhado { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes m-varanda { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.palco__legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--texto-3); }
.palco__nota-mista { color: var(--acento-texto); }
.palco__controles { display: grid; gap: 14px; margin-top: 16px; }
.palco__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.palco__grupo > span { min-width: 88px; }
.mini-amostra { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 4px; border: 1.5px solid var(--linha-forte); border-radius: var(--r-2); background: var(--superficie); font: var(--p-texto-forte) 14px/1 var(--fonte-texto); color: var(--texto); }
.mini-amostra .amostra { width: 36px; aspect-ratio: 1; border-radius: var(--r-1); box-shadow: none; transform: none !important; }
.mini-amostra .amostra::after { display: none; }
.mini-amostra[aria-pressed="true"] { border: 2px solid var(--carvao); background: var(--linho-2); }
.quartos-seg { display: inline-flex; border: 1.5px solid var(--linha-forte); border-radius: var(--r-2); overflow: hidden; }
.quartos-seg button { min-width: 48px; min-height: 44px; border: 0; background: var(--superficie); font: var(--p-texto-forte) 15px/1 var(--fonte-texto); font-variant-numeric: tabular-nums; }
.quartos-seg button + button { border-left: 1.5px solid var(--linha-forte); }
.quartos-seg button[aria-pressed="true"] { background: var(--carvao); color: var(--creme); }
.escuro .palco__rotulo { color: var(--texto-3); }
/* ==========================================================================
9. Início (index.html)
========================================================================== */
/* 1 · Herói: foto de Sandra e Maciel ao entardecer, sangrada */
.heroi { position: relative; isolation: isolate; background: var(--imbuia); color: var(--creme); }
.heroi__palco { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: max(480px, 60svh); padding-top: calc(var(--topo-celular) + 24px); }
.heroi__foto { position: absolute; inset: 0; z-index: -1; background: var(--imbuia); }
/* calor estático (não anima em rolagem) enquanto a foto não é refeita com balanço de branco mais quente (DIRECAO 8.7) */
.heroi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 62%; filter: saturate(.8) sepia(.22) contrast(1.06) brightness(.97); }
.heroi__foto::after { background: var(--veu-heroi); mix-blend-mode: normal; z-index: 1; }
.heroi__texto { padding-bottom: 20px; }
.heroi .sobretitulo { color: var(--creme); margin-bottom: 18px; }
@media (max-width: 599.98px) { .heroi .sobretitulo { letter-spacing: .08em; } }
.heroi h1 { color: var(--creme); max-width: 11.5em; font-size: clamp(2.625rem, 1.2rem + 6vw, 6.5rem); text-shadow: none; }
.heroi h1 em { color: var(--acento); }
.heroi__linha { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; padding-bottom: .06em; }
.heroi__linha > span { display: inline-block; }
.heroi .legenda--sobre-foto { position: static; justify-content: flex-start; margin: 14px 0 0; }
.heroi__base { background: var(--imbuia); padding: 22px 0 36px; }
.heroi__lead { font-size: var(--t-lead); line-height: var(--a-lead); color: var(--creme-2); max-width: 44ch; }
.heroi__base .botoes { margin-top: 24px; }
.heroi__micro { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--creme-2); max-width: 44ch; }
@media (min-width: 1024px) {
/* altura que respeita o original (1600 x 739) e H1 que cabe abaixo do céu */
.heroi { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(640px, 52vw, min(92svh, 980px)); }
.heroi h1 { font-size: clamp(2.75rem, 1rem + 5vw, 5.75rem); max-width: 10.5em; }
.heroi__palco { position: static; min-height: 0; padding-top: calc(var(--topo) + 48px); }
.heroi__foto { position: absolute; }
.heroi__texto { padding-bottom: 0; }
.heroi__base { background: transparent; padding: 26px 0 clamp(36px, 4vw, 56px); }
.heroi__base .caixa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
.heroi__base .caixa > * { grid-column: 1 / span 7; }
.heroi .legenda--sobre-foto { position: absolute; right: var(--margem); bottom: clamp(36px, 4vw, 56px); margin: 0; justify-content: flex-end; }
}
@media (min-width: 1440px) { .heroi .legenda--sobre-foto { right: calc((100vw - var(--largura-max)) / 2); } }
/* 2 · Régua de fatos colada no herói */
.inicio-regua { padding-top: 0; }
/* 3 · Obras */
.inicio-obras { padding-top: var(--secao-curta); }
.inicio-obras .atlas { margin-top: clamp(56px, 7vw, 104px); padding-top: 28px; border-top: 1px solid var(--linha); }
.inicio-obras__pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-top: 32px; }
/* 4 · Chamada do simulador */
.inicio-sim__grade { display: grid; gap: 40px; align-items: center; }
.inicio-sim .marcadores { display: grid; gap: 10px; margin: 28px 0 32px; }
.marcadores li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.marcadores li::before { content: '+'; flex: none; font: 600 16px/1 var(--fonte-display); color: var(--acento); width: 10px; }
.escuro .marcadores li { color: var(--creme); }
@media (min-width: 1024px) {
.inicio-sim__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
.inicio-sim__texto { grid-column: 1 / span 5; }
.inicio-sim__palco { grid-column: 6 / span 7; }
}
/* 5 · Quem já construiu */
.inicio-quem h2 { max-width: 13em; }
.inicio-quem__destaque { display: grid; gap: clamp(40px, 5vw, 72px) var(--calha); }
.inicio-quem .citacao--grande { max-width: min(100%, 860px); }
.inicio-quem__menores { display: grid; gap: 36px; margin-top: 48px; }
.inicio-quem__numeros { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1.5px solid var(--linha-forte); border-bottom: 1px solid var(--linha); }
.inicio-quem__numeros li { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; }
.inicio-quem__numeros li + li { border-top: 1px solid var(--linha); }
.inicio-quem__numeros strong { font: 330 var(--t-h2)/.95 var(--fonte-titulo); font-variation-settings: var(--fv-display); letter-spacing: -.03em; white-space: nowrap; }
.inicio-quem__numeros li > span { color: var(--texto-2); max-width: 22ch; }
.inicio-quem__consulta { margin-top: 10px; }
.inicio-quem h3 { margin-top: clamp(56px, 6vw, 96px); max-width: 16em; }
.inicio-quem__cartoes { display: grid; scroll-padding-inline: var(--margem); grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--calha); margin: 28px calc(var(--margem) * -1) 0; padding: 4px var(--margem) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.inicio-quem__cartoes::-webkit-scrollbar { display: none; }
.inicio-quem__cartoes > * { scroll-snap-align: start; }
.inicio-quem__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
@media (min-width: 768px) {
.inicio-quem__menores { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
.inicio-quem__menores > :nth-child(1) { grid-column: 3 / span 5; }
.inicio-quem__menores > :nth-child(2) { grid-column: 8 / span 5; }
.inicio-quem__cartoes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; padding: 0; overflow: visible; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.inicio-quem__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inicio-quem__numeros li { flex-direction: column; gap: 8px; padding: 22px 20px 18px 0; }
.inicio-quem__numeros li + li { border-top: 0; border-left: 1px solid var(--linha); padding-left: 20px; }
}
@media (min-width: 1024px) {
/* título e citação nas colunas 1 a 8; os números nas 10 a 12, da altura do título à base da citação */
.inicio-quem__destaque { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.inicio-quem__abre { grid-column: 1 / span 8; grid-row: 1; }
.inicio-quem .citacao--grande { grid-column: 1 / span 8; grid-row: 2; }
.inicio-quem__prova { grid-column: 10 / span 3; grid-row: 1 / span 2; align-self: end; }
.inicio-quem__numeros li { flex-direction: column; gap: 4px; padding: 16px 0 14px; }
.inicio-quem__numeros strong { font-size: clamp(2.25rem, 1rem + 2.2vw, 3.25rem); }
.inicio-quem__menores > :nth-child(1) { grid-column: 5 / span 4; }
.inicio-quem__menores > :nth-child(2) { grid-column: 9 / span 4; }
}
/* 6 · Três tipos de casa */
.tipos { display: grid; scroll-padding-inline: var(--margem); grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--calha); margin: 0 calc(var(--margem) * -1); padding: 8px var(--margem) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tipos::-webkit-scrollbar { display: none; }
.tipo { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; padding-top: 18px; border-top: 1px solid var(--linha-inversa); }
.tipo__numero { color: var(--enfase-escuro); margin-bottom: 18px; }
.tipo__pecas { position: relative; margin-bottom: 64px; }
.tipo__foto { position: absolute; right: 0; bottom: -52px; width: 42%; z-index: 4; }
.tipo__foto .foto { aspect-ratio: 1 / 1; box-shadow: 0 18px 30px -18px rgba(0,0,0,.8); outline: 4px solid var(--imbuia); }
.tipo__foto .legenda { margin-top: 6px; padding-top: 0; border: 0; display: block; }
.tipo__foto .legenda__familia { font-size: 13px; color: var(--creme); display: block; }
.tipo__foto .legenda__cidade { font-size: 11px; color: var(--creme-2); display: block; }
.tipo h3 { color: var(--creme); margin-top: 14px; }
.tipo__frase { margin: 10px 0 18px; font: italic 360 19px/1.4 var(--fonte-titulo); font-variation-settings: var(--fv-enfase); color: var(--enfase-escuro); max-width: 26ch; }
.tipo .botao--texto { margin-top: auto; align-self: flex-start; color: var(--creme); }
.inicio-tipos__pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linha-inversa); }
@media (min-width: 900px) {
.tipos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}
/* 7 · Faixa de prova */
.inicio-prova__grade { display: grid; gap: 56px; align-items: start; }
.inicio-prova h2 { font-size: var(--t-h3); line-height: var(--a-h3); max-width: 14em; }
.inicio-prova__fecho { margin-top: 22px; max-width: 40ch; color: var(--texto-2); }
.inicio-prova__fecho + .botao--texto { margin-top: 10px; }
.inicio-prova .lapis { margin-top: 28px; }
@media (min-width: 1024px) {
.inicio-prova__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
.inicio-prova__texto { grid-column: 1 / span 4; position: sticky; top: calc(var(--topo) + var(--faixa-demo) + 40px); }
.inicio-prova .ficha { grid-column: 6 / span 7; }
}
/* 8 · Como funciona */
.passos4 { display: grid; gap: 36px; margin-top: clamp(40px, 5vw, 72px); position: relative; }
.passo4 { position: relative; padding-left: 64px; }
.passo4__numero { position: absolute; left: 0; top: -6px; font: 330 56px/1 var(--fonte-titulo); font-variation-settings: var(--fv-display); color: var(--marca); letter-spacing: -.04em; }
.passos4::before { content: ''; position: absolute; left: 18px; top: 62px; bottom: 24px; border-left: 1.5px dashed var(--traco); opacity: .6; }
.passo4 h3 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); }
.passo4 p { margin-top: 10px; color: var(--texto-2); max-width: 34ch; }
.passo4 q { display: block; margin-top: 12px; font: italic 400 17px/1.45 var(--fonte-titulo); font-variation-settings: var(--fv-enfase); color: var(--texto); quotes: '\201C' '\201D'; }
.passo4 q::before, .passo4 q::after { color: var(--acento); }
.inicio-como .botao--secundario { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 1024px) {
.passos4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(var(--calha) * 2); }
.passos4::before { left: 0; right: 0; top: 48px; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--traco); }
.passo4 { padding: 0; }
.passo4__numero { position: relative; top: 0; display: inline-block; padding-right: 14px; background: var(--areia); font-size: 96px; line-height: 1; }
.passo4 h3 { margin-top: 18px; }
}
/* 9 · Convite ao showroom */
.inicio-showroom__grade { display: grid; gap: 48px; align-items: center; }
.inicio-showroom__foto { position: relative; }
.inicio-showroom__foto .foto { aspect-ratio: 4 / 5; }
.carimbo-papel { position: absolute; top: 18px; right: -8px; z-index: 3; display: grid; gap: 2px; padding: 10px 14px 9px; background: var(--linho); color: var(--texto); border-radius: var(--r-1); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 14px 26px -16px rgba(0,0,0,.6); transform: rotate(2deg); }
.carimbo-papel b { font: var(--p-texto-forte) 15px/1.3 var(--fonte-texto); }
.carimbo-papel > span:last-child { font-size: 13px; color: var(--texto-2); }
.inicio-showroom h2 { max-width: 9em; }
.inicio-showroom .corpo { margin-top: 22px; }
.inicio-showroom__vozes { display: grid; gap: 22px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linha); }
.inicio-showroom__dados { display: grid; gap: 14px; margin-top: 28px; }
.inicio-showroom__dados dt { color: var(--texto-3); }
.inicio-showroom__dados dd { margin: 2px 0 0; font-size: 16px; }
.inicio-showroom .botoes { margin-top: 28px; }
.inicio-showroom__micro { margin-top: 14px; font-size: 14px; color: var(--texto-2); }
@media (min-width: 1024px) {
.inicio-showroom__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
.inicio-showroom__foto { grid-column: 1 / span 6; }
.inicio-showroom__texto { grid-column: 8 / span 5; }
.inicio-showroom__dados { grid-template-columns: 1fr 1fr; }
}
/* ---------- estados iniciais da revelação: só com movimento permitido; sem JS, o