/* ============================================================
Cayman Móveis Planejados — sistema visual (v2 · 02/10/2026)
============================================================
O CONCEITO: A COTA
Cota é a linha de medida do desenho técnico |←— 3.427 mm —→|.
"Sob medida" é o que a Cayman vende, então a cota é a assinatura
do site. Ela aparece em três lugares e só neles:
1. no herói (desenha-se uma vez ao abrir a página);
2. no processo, separando "antes do contrato" de "depois";
3. na régua das etapas.
Se aparecer em mais lugares, vira enfeite e perde a força.
O resto é quieto: uma família de letra (Archivo), larga nos
títulos; paleta de material — grafite laca, pedra, nogueira;
foto grande, sem filtro, sem texto por cima.
⚠️ A versão anterior está em css/_site-antigo.css (pode apagar
quando esta for aprovada).
Partes:
1. tokens 5. herói e cota
2. base 6. seções
3. tipografia 7. formulário
4. botões e topo 8. rodapé, flutuante, landing, movimento
============================================================ */
/* ---------- 1. tokens ---------- */
:root {
/* material */
--grafite: #1E2225; /* laca grafite fosca — texto e superfícies escuras */
--grafite-2: #2A2F33; /* grafite um tom acima */
--pedra: #E8E6E1; /* fundo da página: pedra clara, neutra, não creme */
--pedra-2: #DCD9D2; /* faixa alternada */
--branco: #F7F6F3; /* cartão do formulário */
--nogueira: #8A5A36; /* madeira — SÓ cota, foco e item selecionado */
--nogueira-clara: #C69A72; /* a mesma madeira, legível sobre grafite */
--texto: var(--grafite);
--texto-2: #4A4F53; /* cinza frio, ~7:1 sobre a pedra (04/11: era #575C60) */
--linha: rgba(30, 34, 37, .16);
--linha-escura: rgba(232, 230, 225, .16);
--texto-escuro: #E8E6E1;
--texto-escuro-2: rgba(232, 230, 225, .8); /* 04/11: era .68 */
/* tipografia — uma família, a largura é o que muda */
--fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--larga: 118%; /* font-stretch dos títulos */
--estreita: 82%; /* font-stretch dos números de cota */
/* escala (razão ~1.25, fluida) */
--t-xs: .875rem; /* 04/11: era .8125 (13 px) — miúdo demais em cinza */
--t-s: .9375rem;
--t-m: 1.0625rem;
--t-l: clamp(1.15rem, 1rem + .5vw, 1.35rem);
--t-xl: clamp(1.6rem, min(1.2rem + 1.6vw, 5svh), 2.4rem);
--t-2xl: clamp(2.1rem, min(1.4rem + 2.8vw, 7svh), 3.6rem);
--t-3xl: clamp(2.6rem, min(1.5rem + 4.4vw, 8.4svh), 5.4rem);
/* espaço */
--gutter: clamp(1rem, 4vw, 3rem);
--secao: clamp(4.5rem, min(3rem + 7vw, 16svh), 9.5rem);
--largura: 1320px;
--raio: 3px;
--ease: cubic-bezier(.22, .7, .2, 1);
}
/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 84px; /* âncora não some atrás do topo */
}
body {
margin: 0;
background: var(--pedra);
color: var(--texto);
font-family: var(--fonte);
font-size: var(--t-m);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
dl { margin: 0; }
:focus-visible {
outline: 2px solid var(--nogueira);
outline-offset: 3px;
border-radius: 2px;
}
.container {
width: 100%;
max-width: var(--largura);
margin: 0 auto;
padding: 0 var(--gutter);
}
.pular {
position: absolute; left: var(--gutter); top: -60px; z-index: 100;
background: var(--grafite); color: var(--pedra);
padding: .7rem 1rem; text-decoration: none; font-size: var(--t-s);
}
.pular:focus { top: .7rem; }
/* ---------- 3. tipografia ---------- */
h1, h2, h3 {
margin: 0;
font-weight: 400;
font-stretch: var(--larga);
letter-spacing: -.022em;
line-height: 1.04;
text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 300; letter-spacing: -.035em; }
h2 { font-size: var(--t-2xl); font-weight: 300; letter-spacing: -.03em; }
h3 { font-size: var(--t-l); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.lead {
font-size: var(--t-l);
line-height: 1.55;
color: var(--texto-2);
max-width: 34em;
text-wrap: pretty;
}
.texto { color: var(--texto-2); max-width: 36em; text-wrap: pretty; }
.texto + .texto { margin-top: 1em; }
/* cabeçalho de seção: título à esquerda, apoio à direita */
.cabeca {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 1.5rem var(--gutter);
align-items: end;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.cabeca .lead { font-size: var(--t-m); padding-bottom: .35rem; }
@media (max-width: 860px) { .cabeca { grid-template-columns: 1fr; } }
/* ---------- ícones de traço (etapa 4, 05/10) ----------
Vista de desenho técnico: traço fino, canto vivo, sem preenchimento,
na cor da madeira. Aparecem em três lugares e só neles: fatos do herói,
ambientes e dados da loja. Mais que isso vira enfeite.
(Etapa 5: os controles da galeria — ampliar, fechar, setas — usam o
mesmo traço, por serem botões e não decoração.) */
.ic {
width: 28px; height: 28px; flex: none;
fill: none; stroke: var(--nogueira); stroke-width: 1.25;
stroke-linecap: square; stroke-linejoin: miter;
overflow: visible;
}
.escuro .ic { stroke: var(--nogueira-clara); }
/* ---------- 4. botões e topo ---------- */
.btn {
--fundo: var(--grafite);
--cor: var(--pedra);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
min-height: 52px;
padding: 0 1.6rem;
border: 1px solid var(--fundo);
border-radius: var(--raio);
background: var(--fundo);
color: var(--cor);
font: 500 var(--t-s)/1 var(--fonte);
letter-spacing: .005em;
text-decoration: none;
cursor: pointer;
transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { --fundo: var(--nogueira); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:disabled { opacity: .6; cursor: wait; }
/* contorno — a segunda opção, nunca compete com a primeira */
.btn-linha { --fundo: transparent; --cor: var(--grafite); border-color: var(--linha); }
.btn-linha:hover { --fundo: transparent; border-color: var(--grafite); }
/* sobre grafite */
.escuro .btn { --fundo: var(--pedra); --cor: var(--grafite); }
.escuro .btn:hover { --fundo: var(--nogueira-clara); }
.escuro .btn-linha { --fundo: transparent; --cor: var(--texto-escuro); border-color: var(--linha-escura); }
.escuro .btn-linha:hover { --fundo: transparent; border-color: var(--texto-escuro); }
/* o cartão branco dentro do escuro volta ao botão normal */
.escuro .form-cartao .btn { --fundo: var(--grafite); --cor: var(--pedra); }
.escuro .form-cartao .btn:hover { --fundo: var(--nogueira); }
.btn-bloco { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-sub {
font-weight: 500; font-size: var(--t-s);
text-decoration: underline; text-decoration-color: var(--linha);
text-underline-offset: .35em; text-decoration-thickness: 1px;
transition: text-decoration-color .2s;
}
.link-sub:hover { text-decoration-color: currentColor; }
/* topo — sempre sólido: o herói é dividido, não há foto atrás do menu */
.topo {
position: fixed; inset: 0 0 auto; z-index: 50;
background: rgba(232, 230, 225, .9);
backdrop-filter: saturate(1.2) blur(10px);
-webkit-backdrop-filter: saturate(1.2) blur(10px);
border-bottom: 1px solid transparent;
transition: border-color .3s, transform .45s var(--ease);
}
.topo.solido { border-bottom-color: var(--linha); }
.topo.escondido { transform: translateY(-100%); }
.topo-interno {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; height: 76px;
}
.marca { display: block; flex: none; }
.marca img { height: 40px; width: auto; }
.marca .logo-claro { display: none; }
.menu { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.menu-link {
position: relative;
font-size: var(--t-s);
color: var(--texto-2);
text-decoration: none;
padding: .4rem 0;
transition: color .2s;
}
.menu-link:hover { color: var(--texto); }
.menu-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease);
}
.menu-link:hover::after { transform: scaleX(1); }
.menu .btn { min-height: 44px; padding: 0 1.2rem; margin-left: .4rem; }
.hamburguer {
display: none;
width: 44px; height: 44px; margin-right: -10px;
background: none; border: 0; cursor: pointer; position: relative;
}
.hamburguer span {
position: absolute; left: 11px; right: 11px; height: 1.5px;
background: var(--grafite); transition: transform .3s var(--ease), opacity .2s;
}
.hamburguer span:nth-child(1) { top: 16px; }
.hamburguer span:nth-child(2) { top: 21.5px; }
.hamburguer span:nth-child(3) { top: 27px; }
body.menu-aberto .hamburguer span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-aberto .hamburguer span:nth-child(2) { opacity: 0; }
body.menu-aberto .hamburguer span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-painel {
position: fixed; inset: 76px 0 0; z-index: 49;
background: var(--pedra);
padding: 2rem var(--gutter);
display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
body.menu-aberto .menu-painel { opacity: 1; visibility: visible; transform: none; }
body.menu-aberto { overflow: hidden; }
body.menu-aberto .topo { transform: none; }
.menu-painel a:not(.btn) {
font-size: var(--t-xl); font-stretch: var(--larga); font-weight: 300;
letter-spacing: -.02em;
text-decoration: none; padding: .9rem 0; border-bottom: 1px solid var(--linha);
}
.menu-painel .btn { margin-top: 2rem; }
@media (max-width: 960px) {
.menu { display: none; }
.hamburguer { display: block; }
.marca img { height: 34px; }
.topo-interno { height: 64px; }
.menu-painel { inset: 64px 0 0; }
html { scroll-padding-top: 72px; }
}
/* ---------- 5. herói e cota ---------- */
/* 04/11 (etapa 17): a foto é o produto, então ela manda no herói.
Computador: coluna de texto à esquerda (11/24), foto à direita ocupando a
altura toda e encostando na borda da janela. Os fatos ficam embaixo, ainda
na primeira tela. Celular: foto primeiro, colada no topo. */
.heroi {
padding-top: calc(76px + clamp(1rem, 2vw, 1.75rem));
padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
min-height: min(100svh, 1000px);
display: flex; flex-direction: column;
container-type: inline-size; /* 100cqw = largura sem a barra de rolagem */
}
.heroi > .container { flex: 1; display: flex; flex-direction: column; }
.heroi-grade {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
gap: 1.5rem clamp(2rem, 4.5vw, 5rem);
align-items: stretch;
}
.sobretitulo {
font-size: var(--t-xs);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--nogueira);
margin-bottom: 1.4rem;
}
.heroi-titulo {
font-size: clamp(2.3rem, min(1rem + 2.1vw, 6.4svh), 3.4rem);
margin-bottom: clamp(1.2rem, 2.4svh, 1.8rem);
}
.heroi-texto {
align-self: center;
padding: clamp(1rem, 3svh, 2.5rem) 0;
}
.heroi-texto .lead { margin-bottom: clamp(1.5rem, 3.5svh, 2.4rem); color: var(--texto); opacity: .8; }
.heroi-texto .acoes { flex-direction: column; align-items: stretch; max-width: 25rem; }
.heroi-foto {
position: relative;
/* encosta na borda direita da janela, passando do container */
margin-right: calc((100cqw - min(100cqw, var(--largura))) / -2 - var(--gutter));
}
.heroi-foto .moldura {
height: 100%;
min-height: 420px;
overflow: hidden;
border-radius: var(--raio) 0 0 var(--raio);
background: var(--pedra-2);
}
.heroi-foto img { width: 100%; height: 100%; object-fit: cover; }
/* telas muito largas: a foto para no container, não estica até 2.560 px */
@media (min-width: 1700px) {
.heroi-foto { margin-right: 0; }
.heroi-foto .moldura { border-radius: var(--raio); }
}
/* A COTA. Linha + dois batentes + o número no meio, como no desenho.
O JS conta o número de 0 até data-mm uma única vez. */
.cota {
--cor-cota: var(--nogueira);
position: relative;
display: flex; align-items: center; justify-content: center;
height: 28px;
margin-top: .9rem;
color: var(--cor-cota);
}
.cota::before { /* a linha com os batentes */
content: ""; position: absolute; left: 0; right: 0; top: 50%;
height: 11px; transform: translateY(-50%);
border-left: 1px solid currentColor; border-right: 1px solid currentColor;
background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
transform-origin: center;
}
.cota-num {
position: relative;
padding: 0 .8rem;
background: var(--pedra);
font-size: var(--t-xs);
font-stretch: var(--estreita);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
white-space: nowrap;
}
.secao-alt .cota-num { background: var(--pedra-2); }
/* abertura: a foto se revela e a cota se desenha — o único movimento
automático da página. Sem JS, tudo já aparece no lugar. */
.js .heroi-foto .moldura { clip-path: inset(0 0 0 100%); }
.js .heroi-foto .cota::before { transform: translateY(-50%) scaleX(0); }
.js .heroi-foto .cota-num { opacity: 0; }
.js .heroi-texto > *, .js .heroi-titulo { opacity: 0; transform: translateY(14px); }
.abriu .heroi-foto .moldura { clip-path: inset(0); transition: clip-path 1.3s var(--ease) .15s; }
.abriu .heroi-foto img { animation: aproxima 2.4s var(--ease) .15s both; }
.abriu .heroi-foto .cota::before { transform: translateY(-50%) scaleX(1); transition: transform 1s var(--ease) 1.05s; }
.abriu .heroi-foto .cota-num { opacity: 1; transition: opacity .4s 1.5s; }
.abriu .heroi-texto > *, .abriu .heroi-titulo { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.abriu .heroi-texto > :nth-child(1) { transition-delay: .15s; }
.abriu .heroi-texto > :nth-child(2) { transition-delay: .25s; }
.abriu .heroi-texto > :nth-child(3) { transition-delay: .35s; }
.abriu .heroi-texto > :nth-child(4) { transition-delay: .45s; }
/* os quatro fatos entram um a um, depois do texto (etapa 5) */
.js .fatos li { opacity: 0; transform: translateY(12px); }
.abriu .fatos li { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); }
.abriu .fatos li:nth-child(1) { transition-delay: .55s; }
.abriu .fatos li:nth-child(2) { transition-delay: .65s; }
.abriu .fatos li:nth-child(3) { transition-delay: .75s; }
.abriu .fatos li:nth-child(4) { transition-delay: .85s; }
@keyframes aproxima { from { transform: scale(1.08); } to { transform: scale(1); } }
/* no herói os fatos sobem um pouco: a altura que sobra vai para a foto (04/11) */
.heroi .fatos { margin-top: clamp(1.75rem, 3.5svh, 2.75rem); }
/* fatos — linha de quatro, informação e não enfeite */
.fatos {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--linha);
}
.fatos li {
padding: 1.2rem 1.2rem 0 0;
font-size: var(--t-s);
color: var(--texto-2);
line-height: 1.4;
}
.fatos li + li { padding-left: 1.2rem; border-left: 1px solid var(--linha); }
.fatos .ic { display: block; margin-bottom: .75rem; }
.fatos strong {
display: block; color: var(--texto); font-weight: 500;
font-size: var(--t-m); margin-bottom: .15rem;
}
@media (max-width: 960px) {
.heroi { min-height: 0; padding-top: 64px; }
.heroi-grade { grid-template-columns: 1fr; gap: 0; }
.heroi-foto { order: -1; margin: 0 calc(var(--gutter) * -1); }
.heroi-foto .moldura { min-height: 0; aspect-ratio: 16 / 10; border-radius: 0; }
.heroi-texto { padding: 1.75rem 0 0; }
.heroi-texto .acoes { flex-direction: row; max-width: none; }
}
@media (max-width: 560px) {
.heroi-texto .acoes, .acoes-celular { flex-direction: column; align-items: stretch; }
.heroi-foto .moldura { aspect-ratio: 4 / 3; }
.sobretitulo { margin-bottom: 1rem; font-size: .75rem; letter-spacing: .07em; }
.heroi-foto .cota { margin-left: var(--gutter); margin-right: var(--gutter); }
.fatos { grid-template-columns: 1fr 1fr; }
.fatos li:nth-child(3) { padding-left: 0; border-left: 0; }
.fatos li:nth-child(n+3) { border-top: 1px solid var(--linha); margin-top: 1.2rem; }
}
/* ---------- 6. seções ---------- */
.secao { padding: var(--secao) 0; }
.secao-alt { background: var(--pedra-2); }
.escuro { background: var(--grafite); color: var(--texto-escuro); }
.escuro .lead, .escuro .texto { color: var(--texto-escuro-2); }
/* declaração — a frase que resume a empresa */
.declaracao {
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 2rem var(--gutter); align-items: end;
}
@media (max-width: 860px) { .declaracao { grid-template-columns: 1fr; } }
/* a foto é um botão que abre a galeria (etapa 5) — sem cara de botão */
button.foto {
position: relative; display: block; width: 100%;
padding: 0; border: 0; font: inherit; color: inherit;
cursor: zoom-in;
}
button.foto:focus-visible { outline: 2px solid var(--nogueira); outline-offset: 3px; }
.ampliar { /* os cantos de enquadramento: "abre maior" */
position: absolute; top: .75rem; right: .75rem;
display: grid; place-items: center; width: 40px; height: 40px;
border-radius: 50%; background: rgba(30, 34, 37, .55);
opacity: 0; transform: scale(.85);
transition: opacity .3s, transform .4s var(--ease);
}
.ampliar .ic { width: 18px; height: 18px; stroke: #fff; stroke-width: 1.5; }
button.foto:focus-visible .ampliar { opacity: 1; transform: none; }
@media (hover: none) { .ampliar { opacity: .9; transform: none; } }
/* projetos — grade de capas (etapa 18, 04/11; substitui as abas da etapa 16)
Cada cartão é um projeto: capa + nome + "Ver N fotos". Clicar em qualquer
ponto do cartão abre a galeria em tela cheia só daquele projeto.
Computador: 2 destaques em meia largura + 8 em quarto de largura (2 + 4 + 4).
Celular: destaques em largura total, os outros 2 por linha. */
.obras {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(1.75rem, 3vw, 2.5rem) clamp(.75rem, 1.5vw, 1.25rem);
}
.obra { grid-column: span 3; display: flex; flex-direction: column; cursor: pointer; }
.obra-destaque { grid-column: span 6; }
.obra-foto { position: relative; }
.obra-foto .foto {
aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--pedra-2);
}
.obra-destaque .obra-foto .foto { aspect-ratio: 16 / 10; }
.obra-foto img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s var(--ease);
}
.obra-foto img.dentro { display: none; } /* o armário aberto só aparece na galeria */
.obra:hover .obra-foto img { transform: scale(1.04); }
.obra:hover .ampliar, .obra-foto .foto:focus-visible .ampliar { opacity: 1; transform: none; }
.obra-foto .ampliar { z-index: 1; }
.obra-lado { padding-top: .9rem; display: flex; flex-direction: column; flex: 1; }
.obra-tipo { font-size: var(--t-xs); letter-spacing: .04em; color: var(--texto-2); }
.obra-lado h3 {
margin: .3rem 0 0; font-size: var(--t-l); font-stretch: var(--larga); line-height: 1.15;
}
.obra-destaque .obra-lado h3 { font-size: var(--t-xl); line-height: 1.05; }
.obra-desc { margin: .5rem 0 0; font-size: var(--t-s); color: var(--texto-2); }
.obra-conta {
display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .75rem;
font-size: var(--t-s); font-weight: 500; color: var(--nogueira);
}
.obra-conta .ic { width: 16px; height: 16px; }
.obra:hover .obra-conta { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .obra { grid-column: span 6; } .obra-destaque { grid-column: span 12; } }
@media (max-width: 860px) {
.obras { gap: 1.5rem .75rem; }
.obra-desc { display: none; }
.obra-destaque .obra-desc { display: block; }
.obra-foto .foto { aspect-ratio: 1; }
.obra-destaque .obra-foto .foto { aspect-ratio: 4 / 3; }
.obra-lado { padding-top: .6rem; }
.obra-lado h3 { font-size: var(--t-m); }
.obra-destaque .obra-lado h3 { font-size: var(--t-l); }
.obra-conta { padding-top: .4rem; font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) { .obra-foto img { transition: none; } }
/* convite depois dos projetos (etapa 18) */
.convite {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1.25rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem);
padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
background: var(--pedra-2); border-radius: var(--raio);
}
.convite > div:first-child { flex: 1 1 22rem; }
.convite-titulo { margin: 0; font-size: var(--t-xl); font-stretch: var(--larga); font-weight: 500; line-height: 1.1; }
.convite-texto { margin: .5rem 0 0; color: var(--texto-2); max-width: 46ch; }
.convite .acoes { margin: 0; }
@media (max-width: 560px) {
.convite .acoes { flex-direction: column; align-items: stretch; width: 100%; }
}
/* fatos dentro do bloco escuro (etapa 18: saíram do herói) */
.fatos-escuro { grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top-color: var(--linha-escura); }
.fatos-escuro li { color: var(--texto-escuro-2); }
.fatos-escuro li + li { border-left-color: var(--linha-escura); }
.fatos-escuro strong { color: var(--texto-escuro); }
@media (max-width: 560px) { .fatos-escuro li:nth-child(n+3) { border-top-color: var(--linha-escura); } }
/* a loja (31/10) — fachada grande, embaixo showroom e prédio; clicar abre a galeria */
.loja-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.loja-fotos figure { position: relative; margin: 0; }
.loja-fotos .loja-principal { grid-column: 1 / -1; }
.loja-fotos .foto {
aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--pedra-2);
}
.loja-fotos .loja-principal .foto { aspect-ratio: 16 / 10; }
.loja-fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.loja-fotos figure:hover img { transform: scale(1.03); }
.loja-fotos figure:hover .ampliar { opacity: 1; transform: none; }
.loja-fotos figure:not(.loja-principal) .ampliar { top: .4rem; right: .4rem; width: 32px; height: 32px; }
/* comercial (31/10) — mesmo esquema da loja, com 2 miniaturas */
.corp-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ambientes — o que se planeja */
.ambientes {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: clamp(3.5rem, 7vw, 6rem);
border-top: 1px solid var(--linha);
}
.ambiente { padding: 1.6rem 1.6rem 0 0; }
.ambiente + .ambiente { padding-left: 1.6rem; border-left: 1px solid var(--linha); }
.ambiente .ic { display: block; width: 40px; height: 40px; stroke-width: 1.1; margin-bottom: 1.1rem; }
.ambiente h3 { margin-bottom: .7rem; font-size: var(--t-m); }
.ambiente p { color: var(--texto-2); font-size: var(--t-s); }
@media (max-width: 960px) {
.ambientes { grid-template-columns: 1fr 1fr; }
.ambiente:nth-child(3) { padding-left: 0; border-left: 0; }
.ambiente:nth-child(n+3) { margin-top: 1.6rem; border-top: 1px solid var(--linha); }
}
@media (max-width: 560px) {
.ambientes { grid-template-columns: 1fr; }
.ambiente, .ambiente + .ambiente, .ambiente:nth-child(n+3) { padding: 1.4rem 0 0; border-left: 0; margin-top: 0; }
.ambiente + .ambiente { margin-top: 1.4rem; border-top: 1px solid var(--linha); }
}
/* processo — régua com seis marcas e duas cotas de fase */
/* as fases usam a MESMA grade de 6 colunas das etapas, para a cota
terminar exatamente onde termina a etapa 2 */
.fases {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem;
margin-bottom: 2.2rem;
}
.fase:first-child { grid-column: span 2; }
.fase:last-child { grid-column: span 4; }
.fase .cota { margin: 0 0 .7rem; }
.fase:last-child .cota { --cor-cota: var(--texto-2); }
.fase-nome { font-size: var(--t-s); font-weight: 500; }
.fase-nome span { color: var(--texto-2); font-weight: 400; }
/* a régua: uma linha contínua com uma marca no início de cada etapa */
.etapas {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1.75rem;
border-top: 1px solid var(--grafite);
}
.etapa {
position: relative;
padding-top: 1.6rem;
}
.etapa::before { /* a marca da régua */
content: ""; position: absolute; left: 0; top: -1px;
width: 1px; height: 16px; background: var(--grafite);
}
.etapa::after { /* meia marca no meio do vão, como na trena */
content: ""; position: absolute; right: -.875rem; top: -1px;
width: 1px; height: 7px; background: var(--grafite);
}
.etapa:last-child::after { display: none; }
.etapa-num {
font-size: var(--t-xs); font-stretch: var(--estreita); font-weight: 500;
font-variant-numeric: tabular-nums; letter-spacing: .04em;
color: var(--texto-2); margin-bottom: .9rem;
}
.etapa h3 { font-size: var(--t-m); margin-bottom: .6rem; }
.etapa p { font-size: var(--t-s); color: var(--texto-2); }
.etapa-fase {
display: none;
font-size: var(--t-xs); color: var(--nogueira); font-weight: 500;
margin-bottom: .3rem;
}
.etapa-destaque::before { background: var(--nogueira); width: 2px; }
.etapa-destaque .etapa-num { color: var(--nogueira); }
@media (max-width: 1080px) {
.fases { display: none; }
.etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; border-top: 0; }
.etapa { border-top: 1px solid var(--grafite); }
.etapa::after { display: none; }
.etapa-fase { display: block; }
}
@media (max-width: 560px) {
.etapas { grid-template-columns: 1fr; row-gap: 0; border-left: 1px solid var(--grafite); }
.etapa { border-top: 0; padding: 0 0 2.2rem 1.4rem; }
.etapa::before { top: .55rem; left: -1px; width: 14px; height: 1px; }
.etapa-destaque::before { height: 2px; width: 14px; }
.etapa:last-child { padding-bottom: 0; }
}
/* blocos de duas colunas: foto + texto */
.dupla {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.dupla-inverte > :first-child { order: 2; }
.dupla-foto-larga { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.dupla-foto-larga h2 { font-size: var(--t-xl); }
.dupla .foto { overflow: hidden; border-radius: var(--raio); }
.dupla .foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-alta { aspect-ratio: 4 / 5; max-height: 85svh; }
.foto-larga { aspect-ratio: 16 / 11; }
.dupla h2 { margin-bottom: 1.6rem; }
@media (max-width: 860px) {
.dupla { grid-template-columns: 1fr; }
.dupla-inverte > :first-child { order: 0; }
}
/* ficha técnica */
.ficha { margin-top: 2.6rem; }
.ficha div {
display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
padding: 1rem 0;
border-top: 1px solid var(--linha-escura);
}
.ficha div:last-child { border-bottom: 1px solid var(--linha-escura); }
.ficha dt { color: var(--texto-escuro-2); font-size: var(--t-s); padding-top: .1rem; }
.ficha dd { margin: 0; font-weight: 500; }
.ficha dd small { display: block; font-weight: 400; color: var(--texto-escuro-2); font-size: var(--t-s); margin-top: .15rem; }
@media (max-width: 480px) { .ficha div { grid-template-columns: 1fr; gap: .2rem; } }
/* onde atendemos — resumo das 3 regiões; a lista completa abre em "ver todos" */
.regioes {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 var(--gutter); border-top: 1px solid var(--grafite);
}
.regiao {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
padding: 1.1rem 0; border-bottom: 1px solid var(--linha);
}
.regiao b { font-weight: 500; }
.regiao span {
font-size: var(--t-xs); font-stretch: var(--estreita); font-weight: 500;
color: var(--texto-2); font-variant-numeric: tabular-nums; letter-spacing: .04em;
white-space: nowrap;
}
.regioes-todos { margin-top: 1.6rem; }
.regioes-todos summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .7rem;
font-size: var(--t-s); font-weight: 500;
padding: .75rem 1.2rem; border: 1px solid var(--grafite);
transition: background-color .2s, color .2s;
}
.regioes-todos summary::-webkit-details-marker { display: none; }
.regioes-todos summary::after { content: "+"; font-size: 1.15rem; line-height: 1; }
.regioes-todos[open] summary::after { content: "–"; }
.regioes-todos summary:hover { background: var(--grafite); color: var(--texto-escuro); }
.regioes-lista {
margin-top: 1.6rem; columns: 4 11rem; column-gap: var(--gutter);
font-size: var(--t-s);
}
.regioes-lista h3 {
font-size: var(--t-xs); font-stretch: var(--estreita); font-weight: 500;
color: var(--texto-2); letter-spacing: .06em; text-transform: uppercase;
margin: 0 0 .4rem; break-after: avoid;
}
.regioes-lista ul { margin: 0 0 1.4rem; }
.regioes-lista li { padding: .2rem 0; break-inside: avoid; }
.regioes-nota {
margin-top: 2.4rem; max-width: 60ch;
font-size: var(--t-s); color: var(--texto-2);
}
@media (max-width: 860px) {
.regioes { grid-template-columns: 1fr; }
.regioes-lista { columns: 2; }
}
/* loja e dados em lista */
.dados { margin: 2rem 0 2.4rem; }
.dados div { padding: 1rem 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.dados div:last-child { border-bottom: 1px solid var(--linha); }
.dados dt { color: var(--texto-2); font-size: var(--t-s); padding-top: .1rem; display: flex; align-items: flex-start; gap: .55rem; }
.dados dt .ic { width: 20px; height: 20px; margin-top: .05rem; }
.dados dd { margin: 0; }
@media (max-width: 480px) { .dados div { grid-template-columns: 1fr; gap: .3rem; } .dados dd { padding-left: calc(20px + .55rem); } }
/* dúvidas — título fixo à esquerda, perguntas à direita */
.faq-grade {
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: 2rem var(--gutter); align-items: start;
}
.faq-cabeca { position: sticky; top: 110px; }
.faq-cabeca .lead { margin-top: 1.2rem; font-size: var(--t-m); }
@media (max-width: 860px) {
.faq-grade { grid-template-columns: 1fr; }
.faq-cabeca { position: static; }
}
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary {
list-style: none; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
padding: 1.5rem 0;
font-size: var(--t-l); font-weight: 500; letter-spacing: -.01em; line-height: 1.3;
transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { /* + que vira × */
content: ""; flex: none; width: 14px; height: 14px;
background:
linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--nogueira); }
.faq .resposta { padding: 0 3rem 1.6rem 0; color: var(--texto-2); max-width: 44em; }
.faq .resposta p + p { margin-top: .8em; }
.faq .resposta strong { color: var(--texto); font-weight: 500; }
.faq details[open] .resposta { animation: abre .4s var(--ease); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) { .faq .resposta { padding-right: 0; } }
/* contato */
.contato {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.contato h2 { margin-bottom: 1.6rem; }
.contato .acoes { margin-top: 2.4rem; }
@media (max-width: 960px) { .contato { grid-template-columns: 1fr; } }
.contato-direto { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--linha-escura); }
.contato-direto p { font-size: var(--t-s); color: var(--texto-escuro-2); }
.contato-direto p + p { margin-top: .4rem; }
.contato-direto a { color: var(--texto-escuro); text-underline-offset: .3em; }
/* ---------- 7. formulário ---------- */
.form-cartao {
background: var(--branco);
color: var(--texto);
border-radius: var(--raio);
padding: clamp(1.5rem, 4vw, 2.75rem);
}
.form-titulo { font-size: var(--t-xl); margin-bottom: .5rem; }
.form-sub { color: var(--texto-2); margin-bottom: 2rem; font-size: var(--t-s); }
.campo { margin-bottom: 1.5rem; }
.campo > label, .campo-rotulo {
display: block; margin-bottom: .55rem;
font-size: var(--t-s); font-weight: 500;
}
.dica { font-weight: 400; color: var(--texto-2); margin-left: .35rem; }
.campo input[type="text"], .campo input[type="tel"] {
width: 100%; height: 54px;
padding: 0 1rem;
border: 1px solid var(--linha);
border-radius: var(--raio);
background: #fff;
color: var(--texto);
font: 400 var(--t-m) var(--fonte);
transition: border-color .2s, box-shadow .2s;
}
.campo input::placeholder { color: #8E9295; }
.campo input:hover { border-color: rgba(30, 34, 37, .32); }
.campo input:focus {
outline: none; border-color: var(--nogueira);
box-shadow: 0 0 0 3px rgba(138, 90, 54, .16);
}
/* ambientes como fichas marcáveis (checkbox — pode marcar mais de um) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips label {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 42px; padding: 0 1rem;
border: 1px solid var(--linha); border-radius: 999px;
background: #fff;
font-size: var(--t-s); cursor: pointer; user-select: none;
transition: border-color .2s, background-color .2s, color .2s;
}
.chips label::before { /* o visto, que só aparece marcado */
content: ""; width: 0; height: 9px; margin-top: -3px;
border: solid currentColor; border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
opacity: 0; margin-right: -.5rem;
transition: width .2s var(--ease), opacity .2s, margin .2s var(--ease);
}
.chips label:hover { border-color: var(--grafite); }
.chips input:checked + label { background: var(--grafite); border-color: var(--grafite); color: var(--pedra); }
.chips input:checked + label::before { width: 5px; opacity: 1; margin-right: 0; }
.chips input:focus-visible + label { outline: 2px solid var(--nogueira); outline-offset: 2px; }
.form-cartao .btn[type="submit"] { margin-top: .5rem; min-height: 56px; }
.form-status { display: none; margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--raio); font-size: var(--t-s); }
.form-status.ok { display: block; background: #E3EDE3; color: #2D5A31; }
.form-status.erro { display: block; background: #F3E4E0; color: #86321F; }
.form-nota { margin-top: 1rem; font-size: var(--t-xs); color: var(--texto-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ou {
display: flex; align-items: center; gap: 1rem;
margin: 1.6rem 0; color: var(--texto-2); font-size: var(--t-xs);
}
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
/* ---------- 8. rodapé, flutuante, landing, movimento ---------- */
.rodape {
background: var(--grafite); color: var(--texto-escuro-2);
padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem;
font-size: var(--t-s);
border-top: 1px solid var(--linha-escura);
}
.rodape-grade {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem var(--gutter);
padding-bottom: 3rem; border-bottom: 1px solid var(--linha-escura);
}
.rodape img { height: 40px; width: auto; margin-bottom: 1.2rem; }
.rodape h3 { font-size: var(--t-s); font-stretch: 100%; font-weight: 500; color: var(--texto-escuro); margin-bottom: .8rem; letter-spacing: 0; }
.rodape a { color: var(--texto-escuro-2); text-decoration: none; transition: color .2s; }
.rodape a:hover { color: var(--texto-escuro); }
.rodape-marca p { max-width: 24em; }
.rodape-fim {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem;
padding-top: 1.8rem; font-size: var(--t-xs);
}
.rodape-lp { padding-top: 2rem; }
.rodape-lp .rodape-fim { padding-top: 0; }
/* política de privacidade (31/10) — texto longo, coluna estreita para ler sem cansar */
.legal { padding: calc(76px + clamp(3rem, 7vw, 6rem)) 0 clamp(4rem, 8vw, 7rem); }
.legal-grade {
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.legal-cabeca { position: sticky; top: calc(76px + 2rem); }
.legal-cabeca h1 { font-size: var(--t-2xl); }
.legal-cabeca .lead { margin-top: 1rem; }
.legal-data { margin-top: 1.5rem; font-size: var(--t-xs); color: var(--texto-2); }
.legal-texto { max-width: 42em; }
.legal-texto h2 {
margin: 2.75rem 0 .9rem; padding-top: 1.1rem; border-top: 1px solid var(--linha);
font-size: var(--t-l); font-weight: 500; letter-spacing: -.01em;
}
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto h3 { margin: 1.4rem 0 .5rem; font-size: var(--t-m); font-weight: 500; }
.legal-texto p, .legal-texto li { color: var(--texto-2); }
.legal-texto p + p { margin-top: .8rem; }
.legal-texto ul { margin: .6rem 0 .8rem; padding-left: 1.2rem; list-style: disc; }
.legal-texto li::marker { color: var(--nogueira); }
.legal-texto li + li { margin-top: .45rem; }
.legal-texto strong { color: var(--texto); font-weight: 500; }
@media (max-width: 860px) {
.legal { padding-top: calc(64px + 2.5rem); }
.legal-grade { grid-template-columns: 1fr; }
.legal-cabeca { position: static; }
}
.topo .btn-linha { white-space: nowrap; }
@media (max-width: 860px) { .rodape-grade { grid-template-columns: 1fr 1fr; } .rodape-marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rodape-grade { grid-template-columns: 1fr; } }
/* WhatsApp flutuante — só depois do herói (etapa 4: mais chamativo)
Pílula verde com o texto, não só a bolinha: quem não reconhece o ícone
lê "WhatsApp". O anel pulsa uma vez a cada 4 s — chama o olho sem virar
pisca-pisca. No celular o texto encurta para "WhatsApp".
Sem os spans (landing, até a etapa 6) continua sendo a bolinha de antes. */
.zap {
--verde: #1F7A4D;
position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 40;
display: inline-flex; align-items: center; gap: .7rem;
min-width: 60px; height: 60px; padding: 0 1.5rem 0 .4rem;
border-radius: 999px;
background: var(--verde); color: #fff;
font: 600 var(--t-s)/1 var(--fonte); letter-spacing: .01em;
text-decoration: none; white-space: nowrap;
box-shadow: 0 12px 32px rgba(18, 70, 44, .35), 0 2px 6px rgba(30, 34, 37, .2);
transform: translateY(140%) scale(.9); opacity: 0; pointer-events: none;
transition: transform .5s var(--ease), opacity .3s, background-color .2s, box-shadow .2s;
}
.zap:not(:has(.zap-texto)) { padding: 0; justify-content: center; width: 60px; }
.zap.aparece { transform: none; opacity: 1; pointer-events: auto; }
.zap:hover { background: #17633E; box-shadow: 0 14px 36px rgba(18, 70, 44, .45), 0 2px 6px rgba(30, 34, 37, .2); }
.zap svg { width: 28px; height: 28px; fill: currentColor; }
.zap-bola {
display: grid; place-items: center; flex: none;
width: 48px; height: 48px; border-radius: 50%;
background: #25D366;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.zap-bola svg { width: 26px; height: 26px; }
.zap::before { /* o anel que pulsa */
content: ""; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid #25D366; opacity: 0; pointer-events: none;
}
.zap.aparece::before { animation: anel 4s var(--ease) .8s infinite; }
@keyframes anel {
0% { opacity: .9; transform: scale(1); }
35% { opacity: 0; transform: scale(1.12, 1.4); }
100% { opacity: 0; transform: scale(1.12, 1.4); }
}
@media (max-width: 560px) {
/* etapa 18 (04/11): no celular só o ícone — a pílula cobria texto e botões */
.zap { width: 58px; height: 58px; min-width: 0; padding: 0; gap: 0; justify-content: center; }
.zap-bola { width: 58px; height: 58px; background: none; box-shadow: none; }
.zap-bola svg { width: 30px; height: 30px; }
.zap-texto { display: none; }
}
/* landing: topo sem menu */
.topo-nota { font-size: var(--t-s); color: var(--texto-2); }
@media (max-width: 560px) { .topo-nota { display: none; } }
.lp-heroi { padding-top: calc(76px + clamp(2rem, 4vw, 3.5rem)); padding-bottom: var(--secao); }
.lp-grade {
display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.lp-texto h1 { font-size: clamp(2.3rem, min(1.2rem + 3vw, 7.6svh), 4rem); margin-bottom: 1.6rem; }
.lp-texto .lead { margin-bottom: 0; }
.lp-grade .form-cartao { border: 1px solid var(--linha); position: sticky; top: 100px; }
.lp-foto { margin-top: 2.6rem; }
.lp-foto .moldura { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--raio); }
.lp-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
.lp-heroi { padding-top: calc(64px + 1.5rem); }
.lp-grade { grid-template-columns: 1fr; }
.lp-grade .form-cartao { position: static; }
/* ordem do celular: título → formulário → foto e fatos */
.lp-texto { display: contents; }
.lp-texto .lp-intro { order: 1; }
.lp-grade > .form-cartao { order: 2; }
.lp-foto { order: 3; margin-top: 0; }
.lp-texto .fatos { order: 4; margin-top: 0; }
}
/* ---------- movimento ao rolar (etapa 5, 05/10) ----------
O pedido foi "animações mais bonitas". A regra: devagar, curto e uma vez
só. Nada pisca, nada volta a animar ao subir a página.
• texto e blocos sobem 28px e aparecem;
• foto abre de baixo para cima — a mesma "cortina" da foto do herói —
e a imagem assenta de 112% para 100%;
• a cota das fases se desenha, como a do herói;
• o que entra na tela junto entra em sequência (90 ms entre um e outro);
o que entra sozinho não espera ninguém — o atraso é calculado na hora.
Quem esconde é o js/site.js (classe .revelando no ). Se o JS não
carregar, nada fica escondido. Terminada a entrada, a classe .pronto
devolve o elemento ao normal (o zoom do mouse nas fotos volta a valer). */
/* 04/11: 28px/.9s → 16px/.6s — quem rola rápido via a seção meio apagada */
.revelando .revela:not(.visivel) { opacity: 0; transform: translateY(16px); }
.revelando .revela.visivel:not(.pronto) {
transition: opacity .6s var(--ease) var(--atraso, 0s), transform .7s var(--ease) var(--atraso, 0s);
}
/* foto: a cortina é o movimento, a foto não sobe */
.revelando .revela-foto:not(.visivel) { transform: none; }
/* ⚠️ Quando a própria .foto é o alvo observado, a cortina vai na ![]()
e NÃO
na .foto: o IntersectionObserver do Chrome respeita o clip-path do alvo,
então a .foto "fechada" nunca contava como visível e ficava em branco. */
.revelando .revela-foto.foto:not(.visivel) > img,
.revelando .revela-foto:not(.visivel) .foto { clip-path: inset(100% 0 0 0); }
.revelando .revela-foto:not(.visivel) img { transform: scale(1.12); }
.revelando .revela-foto.visivel:not(.pronto) { transition: opacity .5s var(--ease) var(--atraso, 0s); }
.revelando .revela-foto.visivel:not(.pronto) .foto { clip-path: inset(0); transition: clip-path 1.2s var(--ease) var(--atraso, 0s); }
.revelando .revela-foto.visivel:not(.pronto) img { transform: none; transition: transform 1.7s var(--ease) var(--atraso, 0s); }
.revelando .revela-foto.foto.visivel:not(.pronto) > img {
clip-path: inset(0);
transition: clip-path 1.2s var(--ease) var(--atraso, 0s), transform 1.7s var(--ease) var(--atraso, 0s);
}
/* cotas das fases: a linha se desenha, o texto entra depois */
.revelando .fase:not(.visivel) .cota::before { transform: translateY(-50%) scaleX(0); }
.revelando .fase:not(.visivel) .cota-num { opacity: 0; }
.revelando .fase.visivel:not(.pronto) .cota::before { transition: transform 1s var(--ease) calc(var(--atraso, 0s) + .2s); }
.revelando .fase.visivel:not(.pronto) .cota-num { transition: opacity .5s calc(var(--atraso, 0s) + .8s); }
/* ---------- galeria em tela cheia (etapa 5, 05/10) ----------