/* =========================================================
SOUL — Landing
DNA estrutural: Ledger / Registry (a página é um dossiê)
========================================================= */
:root{
--ink: #0B0C0B;
--ink-2: #131513;
--bone: #EDE8E0;
--bone-dim: rgba(237,232,224,.62);
--bone-faint: rgba(237,232,224,.14);
--brass: #B08D57;
--signal: #7FA88B;
--f-disp: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--f-body: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
--f-mono: 'IBM Plex Mono', ui-monospace, monospace;
--hd-h: 84px;
--pad: clamp(1.25rem, 4vw, 5rem);
--wrap: 1200px; /* largura máxima do conteúdo, seção 2 em diante */
--ease: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
/* a rolagem suave vale para toda âncora da página, inclusive as disparadas
por JS (focus/hash). O scroll-padding desconta a altura do header fixo,
senão o topo da seção alvo para escondido atrás dele.
overflow-x fica aqui e não só no body: quando o corte é declarado apenas
no body, o elemento de rolagem passa a ser o body e o smooth do html
deixa de valer em parte dos navegadores. */
html{
scroll-behavior:smooth;
scroll-padding-top:calc(var(--hd-h) + 1rem);
overflow-x:hidden;
-webkit-text-size-adjust:100%;
}
body{
margin:0;
background:var(--ink);
color:var(--bone);
font-family:var(--f-body);
font-weight:300;
line-height:1.6;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--brass); color:var(--ink); }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2C2E2C; }
::-webkit-scrollbar-thumb:hover{ background:var(--brass); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
/* ================= BOTÃO ================= */
.btn{
--bg:var(--bone); --fg:var(--ink);
display:inline-flex; align-items:center; gap:.7em;
background:var(--bg); color:var(--fg);
font-family:var(--f-body); font-weight:500;
letter-spacing:.01em; line-height:1;
border:1px solid var(--bg);
padding:1.1em 1.6em;
position:relative; overflow:hidden;
transition:color .45s var(--ease), border-color .45s var(--ease);
}
/* preenchimento fica atrás do conteúdo: z-index negativo + isolation
garante que o texto permaneça visível mesmo sem wrapper */
.btn{ isolation:isolate; }
.btn::after{
content:''; position:absolute; inset:0; z-index:-1;
background:var(--brass);
transform:translateY(101%);
transition:transform .5s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ border-color:var(--brass); }
.btn svg{
width:1.05em; height:1.05em; fill:none;
stroke:currentColor; stroke-width:1.6;
stroke-linecap:square;
transition:transform .45s var(--ease);
}
.btn:hover svg{ transform:translateX(5px); }
.btn--sm{ padding:.85em 1.35em; font-size:.8rem; }
.btn--lg{ font-size:clamp(.88rem,1.05vw,1rem); padding:1.25em 1.9em; }
/* secundário: contorno em vez de preenchido. O ::after de brass continua
subindo no hover, então o comportamento é o mesmo do botão cheio */
.btn--gh{
background:transparent;
color:var(--bone);
border-color:var(--bone-faint);
}
.btn--gh:hover{ color:var(--ink); border-color:var(--brass); }
/* ================= HEADER ================= */
/* estático (rola com a página), porém sobreposto ao hero com fundo
transparente: ocupa a faixa superior sem empurrar o conteúdo */
.hd{
position:absolute; inset:0 0 auto 0;
z-index:100;
background:transparent;
border-bottom:1px solid transparent;
}
/* a nav saiu do fluxo (virou cortina fixa): restam marca, CTA e hambúrguer.
A mesma medida do hero, para logo e CTA alinharem com as colunas de baixo
em vez de escaparem para as bordas em telas largas. */
.hd__in{
height:var(--hd-h);
max-width:calc(var(--wrap) + var(--pad) * 2);
margin-inline:auto;
padding:0 var(--pad);
display:grid;
grid-template-columns:1fr auto auto;
align-items:center;
gap:clamp(.8rem,2vw,1.5rem);
}
.hd__brand img{
height:clamp(26px,2.4vw,34px); width:auto;
filter:brightness(0) invert(1);
transition:opacity .35s var(--ease);
}
.hd__brand:hover img{ opacity:.72; }
/* ---- cortina lateral ----
a navegação sai do fluxo do header e vira um painel fixo que entra pela
esquerda. Vale em todas as larguras: o acesso é sempre pelo hambúrguer. */
.hd__nav{
/* --nav-cut é a profundidade do corte na base da cortina */
--nav-cut:clamp(2.5rem,6vh,4.5rem);
position:fixed;
top:0; left:0; bottom:0;
z-index:120;
width:min(24rem, 82vw);
display:flex; flex-direction:column;
align-items:stretch;
gap:0;
padding:calc(var(--hd-h) + 1.5rem) clamp(1.5rem,3vw,2.5rem)
calc(var(--nav-cut) + 1.5rem);
/* sem background nem backdrop-filter aqui: o desfoque é aplicado ao
retângulo do elemento ANTES do clip-path recortar, e a área do corte
ficaria com o fundo borrado visível. Quem pinta é o ::after, que leva
o mesmo recorte. Sem border-right pelo mesmo motivo — seria cortada
em ângulo, deixando um degrau. */
/* a rolagem continua possível em telas muito baixas, mas sem barra
visível — ela cortaria o filete de brass da borda direita */
overflow-y:auto;
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none; /* Edge legado */
transform:translateX(-100%);
visibility:hidden;
transition:transform .5s var(--ease), visibility .5s;
}
.hd--open .hd__nav{
transform:translateX(0);
visibility:visible;
}
/* Chrome e Safari: a barra some sem desativar a rolagem */
.hd__nav::-webkit-scrollbar{ width:0; height:0; }
/* o fundo da cortina, já recortado na diagonal.
Fica em position:fixed (e não absolute) para não rolar junto com o
conteúdo, e atrás dele via z-index negativo. */
.hd__nav::after{
content:'';
position:fixed;
top:0; left:0; bottom:0;
/* repete a largura da cortina: width:inherit não resolve o min() aqui */
width:min(24rem, 82vw);
z-index:-1;
background:rgba(11,12,11,.98);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
clip-path:polygon(
0 0,
100% 0,
100% calc(100% - var(--nav-cut)),
0 100%
);
pointer-events:none;
}
/* filete de brass rente à borda interna, marcando a cortina como painel.
Termina acima do corte, para não ser interrompido em ângulo por ele */
.hd__nav::before{
content:'';
position:absolute;
right:0; top:0;
bottom:var(--nav-cut);
width:2px;
background:linear-gradient(to bottom,
var(--brass) 0%,
rgba(176,141,87,.25) 55%,
transparent 100%);
}
/* os links entram escalonados depois da cortina, não junto com ela */
.hd--open .hd__lk{
animation:navIn .5s var(--ease) both;
}
@keyframes navIn{
from{ opacity:0; transform:translateX(-14px); }
to { opacity:1; transform:none; }
}
/* o atraso é calculado pelo índice, cobrindo qualquer número de itens sem
precisar de uma regra por link */
.hd--open .hd__lk{
animation-delay:calc(.14s + var(--i, 0) * .04s);
}
/* com a cortina aberta o header sobe de camada, para o hambúrguer (que
vira X) continuar clicável por cima dela */
.hd--open{ z-index:140; }
/* marca no topo da cortina; o espaço abaixo já a separa dos links */
.hd__navbrand{
display:block;
flex:none;
margin-bottom:clamp(2rem,4.5vh,3rem);
}
.hd__navbrand img{
width:auto; height:clamp(28px,3.5vh,38px);
display:block;
}
.hd__lk{
position:relative;
display:block;
padding:.7em 0;
font-family:var(--f-mono); font-weight:300;
font-size:.86rem; letter-spacing:.06em;
color:var(--bone-dim);
transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.hd__lk:hover,
.hd__lk:focus-visible{
color:var(--bone);
padding-left:.45rem;
}
.hd__lk.is-on{ color:var(--brass); }
/* marca da seção corrente: filete rente à borda da cortina.
O recuo acompanha o padding, negado via calc() — um clamp não pode
receber sinal negativo direto */
.hd__lk.is-on::after{
content:'';
position:absolute;
left:calc(-1 * clamp(1.5rem,3vw,2.5rem)); top:50%;
width:3px; height:1.4em;
background:var(--brass);
transform:translateY(-50%);
}
.hd__cta{ grid-column:2; justify-self:end; }
/* o hambúrguer passa a ser o único acesso ao menu, em qualquer largura.
O header sobe de camada quando aberto (regra .hd--open abaixo), senão o
botão ficaria atrás da cortina e não daria para fechar pelo X. */
.hd__burger{
grid-column:3; justify-self:end;
display:block;
position:relative;
z-index:1;
width:44px; height:44px; padding:0;
background:none; border:0; cursor:pointer;
position:relative;
}
/* moldura discreta que dá alvo ao botão e o marca como controle */
.hd__burger::before{
content:'';
position:absolute; inset:0;
border:1px solid var(--bone-faint);
transition:border-color .4s var(--ease), background .4s var(--ease);
}
.hd__burger:hover::before{
border-color:var(--brass);
background:rgba(176,141,87,.08);
}
/* três traços: o do meio encurta, dando assimetria ao ícone em repouso */
.hd__burger span{
position:absolute; left:13px;
height:1.5px;
background:var(--bone);
transition:transform .45s var(--ease), opacity .25s var(--ease),
width .45s var(--ease);
}
.hd__burger span:nth-child(1){ top:15px; width:18px; }
.hd__burger span:nth-child(2){ top:21px; width:12px; }
.hd__burger span:nth-child(3){ top:27px; width:18px; }
/* no hover os três se igualam, antes mesmo de abrir */
.hd__burger:hover span{ width:18px; background:var(--brass); }
/* aberto: as pontas cruzam no centro e o traço do meio some */
.hd--open .hd__burger span:nth-child(1){
transform:translateY(6px) rotate(45deg);
width:20px;
}
.hd--open .hd__burger span:nth-child(2){
opacity:0;
transform:scaleX(0);
}
.hd--open .hd__burger span:nth-child(3){
transform:translateY(-6px) rotate(-45deg);
width:20px;
}
/* ================= HERO ================= */
.hero{
position:relative;
min-height:100svh;
display:flex; flex-direction:column;
padding-top:var(--hd-h); /* faixa ocupada pelo header sobreposto */
overflow:hidden;
isolation:isolate;
}
/* ---- fundo do hero, com tratamento HDR ----
a foto é um render noturno de faixa dinâmica curta: pretos lavados e luzes
da cidade sem brilho. O filtro reconstrói a curva — contrast abre a
distância entre sombra e alta luz, saturate devolve o azul do crepúsculo e
o âmbar das janelas, brightness compensa o escurecimento que o contraste
traz. É tone mapping feito na composição, sem tocar no arquivo. */
.hero__bg{
position:absolute; inset:0; z-index:-3;
background:url('../imagens/hero.webp') center right / cover no-repeat;
filter:contrast(1.14) saturate(1.22) brightness(1.04);
transform:scale(1.06);
animation:heroIn 2.4s var(--ease) forwards;
}
@keyframes heroIn{ to{ transform:scale(1); } }
/* realce local: um leve bloom sobre as luzes, que é o que distingue um HDR
de um simples aumento de contraste. Screen suave sobre as áreas onde a
cidade acende, e um lift frio no céu para separar os tons de azul. */
.hero__bg::after{
content:''; position:absolute; inset:0;
background:
radial-gradient(58% 42% at 50% 78%,
rgba(255,196,120,.16) 0%,
transparent 62%),
linear-gradient(180deg,
rgba(150,190,255,.10) 0%,
transparent 46%);
mix-blend-mode:screen;
pointer-events:none;
}
/* ---- divisor inferior em onda ----
mesmo desenho do divisor entre 02 e 03, espelhado na vertical: a cor da
seção seguinte sobe sobre o hero. O path tem a crista no centro (x=720,
y=20), que é onde a seta se apoia. */
.hero__wave{
position:absolute;
left:0; right:0; bottom:-1px;
width:100%;
height:clamp(52px,7vw,104px);
display:block;
z-index:2;
pointer-events:none;
}
.hero__wave path{ fill:#F4F2ED; }
/* mouse animado acima da onda.
no centro o path mergulha até y=100 de 120, então a borda superior da curva
está a ~17% da altura da onda medindo de baixo. O mouse assenta a partir daí
e ainda ganha uma folga, ficando sobre a foto e não sobre o branco. */
.wave__mouse{
--wave-h: clamp(52px,7vw,104px);
--wave-gap: clamp(1rem,2.2vh,1.8rem); /* espaçamento entre o mouse e a onda */
position:absolute;
left:50%;
bottom:calc(var(--wave-h) * 0.17 + var(--wave-gap));
transform:translateX(-50%);
z-index:4;
display:grid; place-items:center;
}
/* fora da onda ele repousa sobre a foto: volta ao contorno claro do hero */
.wave__mouse .scroll__mouse{ border-color:var(--bone-dim); }
.wave__mouse:hover .scroll__mouse{
border-color:var(--brass);
transform:translateY(2px);
}
/* overlay da esquerda para a direita */
.hero__veil{
position:absolute; inset:0; z-index:-2;
background:
linear-gradient(90deg,
rgba(11,12,11,.96) 0%,
rgba(11,12,11,.90) 26%,
rgba(11,12,11,.72) 48%,
rgba(11,12,11,.38) 70%,
rgba(11,12,11,.14) 100%),
linear-gradient(to top, rgba(11,12,11,.85) 0%, transparent 42%);
}
.hero__grain{
position:absolute; inset:0; z-index:-1;
pointer-events:none; opacity:.5; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
/* o conteúdo tem medida própria e fica centrado: sem ela, em ultrawide as
duas colunas se afastariam até as bordas da janela. Usa o mesmo --wrap
das demais seções, então tudo alinha na mesma coluna. A foto de fundo
continua ocupando a largura inteira. */
.hero__in{
flex:1;
width:100%;
max-width:calc(var(--wrap) + var(--pad) * 2);
margin-inline:auto;
padding:clamp(2rem,4vh,3.5rem) var(--pad) clamp(5.5rem,9vh,7rem);
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.78fr);
align-items:center;
gap:clamp(2.5rem,5vw,5.5rem);
}
/* ---- coluna esquerda ---- */
.hero__copy{ max-width:44rem; }
.tag{
display:inline-flex; align-items:center; gap:.7em;
margin:0 0 clamp(1.4rem,3vh,2.2rem);
padding:.6em 1.05em;
border:1px solid var(--bone-faint);
background:rgba(237,232,224,.045);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
font-family:var(--f-mono);
font-size:clamp(.66rem,.82vw,.76rem);
letter-spacing:.08em; text-transform:uppercase;
color:var(--bone-dim); line-height:1;
}
.tag__pip{
width:6px; height:6px; border-radius:50%;
background:var(--brass); flex:none;
box-shadow:0 0 0 0 rgba(176,141,87,.6);
animation:pip 2.4s ease-out infinite;
}
@keyframes pip{
0%{ box-shadow:0 0 0 0 rgba(176,141,87,.55); }
70%{ box-shadow:0 0 0 9px rgba(176,141,87,0); }
100%{ box-shadow:0 0 0 0 rgba(176,141,87,0); }
}
.hero__h1{
margin:0 0 clamp(1.3rem,2.6vh,1.9rem);
font-family:var(--f-disp);
font-weight:400;
font-size:clamp(2.15rem,5.05vw,4.5rem);
line-height:1.03;
letter-spacing:-.022em;
text-wrap:balance;
}
.hero__h1 em{
font-style:italic;
color:var(--brass);
display:inline;
}
.hero__desc{
max-width:57ch;
margin:0 0 clamp(1.9rem,3.6vh,2.6rem);
}
.hero__desc p{
margin:0 0 .95em;
font-size:clamp(.92rem,1.02vw,1.02rem);
line-height:1.72;
color:var(--bone-dim);
}
.hero__desc p:last-child{ margin-bottom:0; }
.hero__desc--em{
color:var(--bone) !important;
border-left:1px solid var(--brass);
padding-left:1.1em;
}
/* ---- coluna direita: cards ---- */
.hero__side{
align-self:center;
justify-self:end;
width:100%;
max-width:27rem;
}
.stats{
display:flex; flex-direction:column;
}
.stat{
position:relative;
padding:clamp(1.05rem,2.2vh,1.5rem) 0;
border-bottom:1px solid var(--bone-faint);
transition:padding-left .5s var(--ease);
}
.stat:last-child{ border-bottom:none; }
.stat::before{
content:''; position:absolute; left:0; bottom:-1px;
width:100%; height:1px; background:var(--brass);
transform:scaleX(0); transform-origin:left;
transition:transform .6s var(--ease);
}
.stat:hover{ padding-left:.5rem; }
.stat:hover::before{ transform:scaleX(1); }
.stat__i{
position:absolute; left:0; top:calc(clamp(1.05rem,2.2vh,1.5rem) + .35em);
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.1em;
color:var(--brass);
}
.stat__v{
margin:0 0 .28em;
font-family:var(--f-disp);
font-size:clamp(1.65rem,2.5vw,2.35rem);
line-height:1; letter-spacing:-.015em;
color:var(--bone);
white-space:nowrap;
}
.stat__v i{
font-style:normal;
color:var(--brass);
padding:0 .12em;
}
.stat__l{
margin:0;
font-size:.815rem;
line-height:1.5;
color:var(--bone-dim);
max-width:26ch;
}
/* ---- scroll animado ---- */
.scroll{
position:absolute;
left:50%; bottom:clamp(1.5rem,3.4vh,2.4rem);
transform:translateX(-50%);
z-index:3;
display:flex; flex-direction:column;
align-items:center; gap:.6rem;
opacity:0;
animation:fadeUp 1s var(--ease) 1.5s forwards;
}
/* corpo do mouse */
.scroll__mouse{
position:relative;
display:block;
width:26px; height:42px;
border:1px solid var(--bone-dim);
border-radius:14px;
transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.scroll:hover .scroll__mouse{
border-color:var(--brass);
transform:translateY(2px);
}
/* rodinha percorrendo o corpo */
.scroll__wheel{
position:absolute;
left:50%; top:8px;
width:2px; height:7px;
margin-left:-1px;
border-radius:1px;
background:var(--brass);
animation:wheelRun 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes wheelRun{
0% { transform:translateY(0); opacity:0; }
18% { opacity:1; }
60% { transform:translateY(15px); opacity:0; }
100% { transform:translateY(15px); opacity:0; }
}
/* chevron pulsando abaixo */
.scroll__arw{
width:14px; height:9px;
fill:none; stroke:var(--bone-dim);
stroke-width:1.4;
stroke-linecap:square; stroke-linejoin:miter;
animation:arwRun 2.1s cubic-bezier(.65,0,.35,1) infinite .25s;
transition:stroke .4s var(--ease);
}
.scroll:hover .scroll__arw{ stroke:var(--brass); }
@keyframes arwRun{
0%,100%{ opacity:.25; transform:translateY(-2px); }
50% { opacity:1; transform:translateY(2px); }
}
/* ================= REVEALS ================= */
[data-rv]{
opacity:0;
transform:translateY(22px);
filter:blur(6px);
animation:rvIn 1.05s var(--ease) forwards;
}
[data-rv="1"]{ animation-delay:.35s; }
[data-rv="2"]{ animation-delay:.5s; }
[data-rv="3"]{ animation-delay:.68s; }
[data-rv="4"]{ animation-delay:.84s; }
[data-rv="5"]{ animation-delay:.98s; }
/* stats do hero entram da direita, uma por vez (só desktop) */
@media (min-width:981px){
/* no desktop quem anima são os itens, não o container */
.hero__side[data-rv]{
opacity:1;
transform:none;
filter:none;
animation:none;
}
.hero__side .stat{
opacity:0;
transform:translateX(46px);
animation:statIn .9s var(--ease) forwards;
}
.hero__side .stat:nth-child(1){ animation-delay:.98s; }
.hero__side .stat:nth-child(2){ animation-delay:1.16s; }
.hero__side .stat:nth-child(3){ animation-delay:1.34s; }
}
@keyframes statIn{
to{ opacity:1; transform:none; }
}
@keyframes rvIn{
to{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes fadeUp{ to{ opacity:1; } }
/* =========================================================
02 · COMPARATIVO
========================================================= */
.cmp{
/* seção clara: os tokens --bone são redefinidos em tom escuro para que
tabela, bordas e remates invertam sem reescrever cada regra */
--bone: #1A1C1A;
--bone-dim: rgba(26,28,26,.66);
--bone-faint: rgba(26,28,26,.14);
position:relative;
min-height:100svh;
display:flex; flex-direction:column;
justify-content:center;
background:#F4F2ED;
color:var(--bone);
/* sem borda de topo: a onda do hero é que faz a transição para esta seção,
e uma linha reta sob a curva denunciaria o encaixe */
padding:clamp(2rem,4.5vh,3.5rem) var(--pad);
overflow:hidden;
isolation:isolate;
}
/* divisor inferior em onda: a cor da seção 02 avança sobre a seção 03.
fica fora do overflow:hidden de .cmp, por isso mora no topo de .prd */
.cmp__wave{
position:absolute;
left:0; right:0; top:-1px;
width:100%;
height:clamp(52px,7vw,104px);
display:block;
z-index:2;
pointer-events:none;
}
.cmp__wave path{ fill:#F4F2ED; }
/* seta pulsante centrada dentro do corpo da onda
(x=720/1440 = 50%; y~70/120, acima do vale em y=100) */
.wave__arw{
position:absolute;
left:50%;
top:calc(-1px + clamp(52px,7vw,104px) * 0.58);
transform:translateX(-50%);
z-index:4;
display:grid; place-items:center;
width:44px; height:44px;
margin-top:-22px;
}
.wave__arw svg{
width:22px; height:14px;
fill:none; stroke:var(--graph-dim);
stroke-width:1.5;
stroke-linecap:square; stroke-linejoin:miter;
animation:waveArw 2.1s cubic-bezier(.65,0,.35,1) infinite;
transition:stroke .4s var(--ease);
}
.wave__arw:hover svg{ stroke:var(--brass); }
/* onda mais rasa em telas estreitas: seta e curso do pulso encolhem junto */
@media (max-width:1024px){
.wave__arw{ width:32px; height:32px; margin-top:-16px; }
.wave__arw svg{ width:17px; height:11px; }
.wave__arw svg{ animation-name:waveArwSm; }
}
@keyframes waveArwSm{
0% { opacity:0; transform:translateY(-3px); }
25% { opacity:1; transform:translateY(-1px); }
60% { opacity:.9; transform:translateY(3px); }
85%,
100% { opacity:0; transform:translateY(5px); }
}
/* pulso descendente: parte de cima, desce e some para baixo */
@keyframes waveArw{
0% { opacity:0; transform:translateY(-5px); }
25% { opacity:1; transform:translateY(-1px); }
60% { opacity:.9; transform:translateY(5px); }
85%,
100% { opacity:0; transform:translateY(8px); }
}
/* detalhes.png — coluna central (20%), como parte do fundo */
.cmp__art{
position:relative;
align-self:stretch;
display:grid; place-items:center;
overflow:hidden;
pointer-events:none; user-select:none;
}
/* camada de luz recortada pelo próprio desenho:
a imagem é usada como máscara, então o brilho só
aparece sobre o traço — nunca como faixa retangular */
.cmp__art::after{
content:'';
position:absolute;
top:50%; left:50%;
height:128%;
aspect-ratio:3955/8087; /* proporção nativa de detalhes.png */
transform:translate(-50%,-50%);
z-index:1;
background:linear-gradient(
to bottom,
transparent 0%,
transparent 24%,
rgba(176,141,87,.10) 32%,
rgba(176,141,87,.38) 40%,
rgba(224,206,178,.6) 46%,
rgba(255,246,232,.8) 50%,
rgba(224,206,178,.6) 54%,
rgba(176,141,87,.38) 60%,
rgba(176,141,87,.10) 68%,
transparent 76%,
transparent 100%);
background-size:100% 300%;
/* máscara dupla: o traço do desenho ∩ o fade das pontas */
-webkit-mask-image:url('../imagens/detalhes.png'),
linear-gradient(to bottom,transparent 0%,#000 18%,#000 76%,transparent 98%);
mask-image:url('../imagens/detalhes.png'),
linear-gradient(to bottom,transparent 0%,#000 18%,#000 76%,transparent 98%);
-webkit-mask-size:100% 100%, 100% 100%;
mask-size:100% 100%, 100% 100%;
-webkit-mask-repeat:no-repeat, no-repeat;
mask-repeat:no-repeat, no-repeat;
-webkit-mask-composite:source-in;
mask-composite:intersect;
/* multiply no lugar de screen: em fundo claro o brilho precisa
escurecer o traço para aparecer */
mix-blend-mode:multiply;
/* 9s = ~4s de percurso + 5s de pausa entre as passagens.
duas animações independentes: o easing do deslocamento
governa o percurso inteiro, sem ser fatiado pelos
keyframes de opacidade. */
animation:
artBeam 9s cubic-bezier(.37,0,.63,1) infinite,
artFade 9s ease-in-out infinite;
}
/* percurso: desliza no primeiro trecho, repousa no restante */
@keyframes artBeam{
0%, 4% { background-position:0 -100%; }
46%,100%{ background-position:0 200%; }
}
/* opacidade: acende ao entrar, apaga ao sair, some na pausa */
@keyframes artFade{
0%, 6% { opacity:0; }
20% { opacity:1; }
32% { opacity:1; }
46%,100%{ opacity:0; }
}
.cmp__art img{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
height:128%; width:auto;
max-width:none;
/* o traço é claro (feito para fundo escuro): inverte para marcar o papel */
filter:invert(1);
opacity:.11;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 76%,transparent 98%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 76%,transparent 98%);
}
/* largura máxima do conteúdo — vale da seção 2 em diante */
.cmp__in,
.cmp__out{
width:100%;
max-width:var(--wrap);
margin-inline:auto;
}
.cmp__in{
position:relative;
display:grid;
grid-template-columns:40% 20% 40%;
align-items:center;
}
/* o respiro vem por padding interno, para 40/20/40 ser exato */
.cmp__copy{ padding-right:clamp(1rem,2vw,2.25rem); }
.cmp__table{ padding-left:clamp(1rem,2vw,2.25rem); }
.cmp__h2{
margin:0 0 clamp(.9rem,2vh,1.5rem);
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.9rem,2.9vw+.2vh,2.85rem);
line-height:1.05; letter-spacing:-.022em;
text-wrap:pretty;
}
/* cada frase em sua própria linha */
.cmp__h2 em{
display:block;
font-style:italic; color:var(--brass);
margin-top:.12em;
}
.cmp__p{
margin:0 0 .9em;
max-width:52ch;
font-size:clamp(.85rem,.95vw,.97rem);
line-height:1.65; color:var(--bone-dim);
}
.cmp__p:last-child{ margin-bottom:0; }
/* ---------- tabela ---------- */
.tbl__scroll{ overflow-x:auto; }
.tbl__scroll:focus-visible{ outline:2px solid var(--brass); outline-offset:4px; }
.tbl{
width:100%;
border-collapse:collapse;
font-variant-numeric:tabular-nums;
}
.tbl__cap{
text-align:left;
padding-bottom:.75rem;
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--bone-dim);
}
.tbl thead th{
padding:0 1rem .75rem;
text-align:right; vertical-align:bottom;
font-family:var(--f-body); font-weight:500;
font-size:.8rem; letter-spacing:.03em;
color:var(--bone);
border-bottom:1px solid var(--bone-dim);
white-space:nowrap;
}
.tbl thead th i{
display:block; margin-top:.35em;
font-style:normal; font-weight:300;
font-family:var(--f-mono);
font-size:.66rem; letter-spacing:.06em;
color:var(--bone-dim);
}
.tbl thead th.tbl__lbl{
text-align:left; padding-left:0;
font-family:var(--f-mono); font-weight:400;
font-size:.68rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--bone-dim);
}
.tbl thead th.tbl__soul{ color:var(--brass); }
.tbl thead th.tbl__soul i{ color:rgba(176,141,87,.7); }
.tbl tbody th{
padding:clamp(.55rem,1.15vh,.95rem) 1rem clamp(.55rem,1.15vh,.95rem) 0;
text-align:left; vertical-align:middle;
font-family:var(--f-body); font-weight:400;
font-size:.85rem; line-height:1.4;
color:var(--bone-dim);
border-bottom:1px solid var(--bone-faint);
}
.tbl tbody th span{
font-family:var(--f-mono);
font-size:.7em; color:rgba(26,28,26,.45);
}
.tbl tbody td{
padding:clamp(.55rem,1.15vh,.95rem) 1rem;
text-align:right; vertical-align:middle;
font-family:var(--f-mono); font-weight:400;
font-size:clamp(.78rem,.92vw,.88rem);
color:var(--bone-dim);
border-bottom:1px solid var(--bone-faint);
white-space:nowrap;
}
.tbl tbody td:last-child{ padding-right:0; }
.tbl tbody td.is-soul{ color:var(--bone); }
.tbl tbody td b{
display:inline-block;
margin-left:.6em;
padding:.2em .5em;
font-weight:500;
font-size:.92em;
color:var(--signal);
background:rgba(127,168,139,.1);
border:1px solid rgba(127,168,139,.28);
}
.tbl tbody td b.is-bad{
color:#C97A5F;
background:rgba(201,122,95,.1);
border-color:rgba(201,122,95,.28);
}
/* linhas de totalização */
.tbl__sum th,
.tbl__sum td{
border-top:1px solid var(--bone-dim);
border-bottom-color:transparent;
padding-top:clamp(.65rem,1.35vh,1.1rem);
padding-bottom:clamp(.65rem,1.35vh,1.1rem);
}
.tbl__sum th{
font-family:var(--f-mono);
font-size:.7rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--bone);
}
.tbl__sum td{
font-family:var(--f-disp);
font-size:clamp(1.05rem,1.5vw,1.35rem);
color:var(--bone);
}
.tbl__sum--hi td.is-soul{ color:var(--brass); }
.tbl tbody tr:not(.tbl__sum):hover th,
.tbl tbody tr:not(.tbl__sum):hover td{
background:rgba(26,28,26,.035);
}
.tbl__note{
margin:clamp(.8rem,1.8vh,1.3rem) 0 0;
max-width:60ch;
font-family:var(--f-mono);
font-size:.68rem; line-height:1.6;
color:rgba(26,28,26,.5);
}
/* ---------- remates ---------- */
.cmp__out{
margin-top:clamp(1.5rem,3.5vh,3rem);
padding-top:clamp(1.25rem,3vh,2.25rem);
display:flex; flex-direction:column;
align-items:center;
}
.fin{
width:100%;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1.5rem,3vw,3rem);
margin-bottom:clamp(1.25rem,3vh,2.25rem);
}
.fin__i{
position:relative;
isolation:isolate;
padding:clamp(1.1rem,2.4vh,1.75rem) clamp(.75rem,1.2vw,1.1rem)
clamp(1.1rem,2.4vh,1.75rem) clamp(1.35rem,2.2vw,2rem);
}
/* numeral como marca d'água de fundo do card: ocupa a altura inteira
do item e centra o algarismo nela, para acompanhar o bloco de texto
em vez de ficar ancorado no topo */
.fin__i::before{
content:attr(data-n);
position:absolute;
top:0; bottom:0; left:0;
z-index:-1;
display:flex;
align-items:center;
font-family:var(--f-disp);
font-size:clamp(4.5rem,7vw,6.5rem);
line-height:1;
color:var(--bone);
opacity:.055;
pointer-events:none; user-select:none;
transition:opacity .55s var(--ease), color .55s var(--ease);
}
.fin__i:hover::before{ opacity:.13; color:var(--brass); }
.fin__k{
margin:0 0 clamp(.5rem,1.2vh,.85rem);
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--brass);
}
.fin__v{
margin:0 0 clamp(.45rem,1vh,.7rem);
font-family:var(--f-disp);
font-size:clamp(1.2rem,1.8vw,1.6rem);
line-height:1.15; letter-spacing:-.015em;
color:var(--bone);
}
.fin__v i{
display:block; margin-top:.35em;
font-style:normal;
font-family:var(--f-body); font-weight:300;
font-size:.5em; line-height:1.55;
color:var(--bone-dim); letter-spacing:0;
}
.fin__d{
margin:0;
font-size:.8rem; line-height:1.55;
color:var(--bone-dim);
}
.fin__d b{ font-weight:500; color:var(--bone); }
/* o botão herda --bg de --bone, agora escuro: o texto precisa voltar a
ser claro, senão fica escuro sobre escuro */
.cmp__cta{
align-self:center;
--fg:#F4F2ED;
}
/* ---------- reveal por scroll ---------- */
[data-io]{
opacity:0; transform:translateY(26px);
transition:opacity .95s var(--ease), transform .95s var(--ease);
}
[data-io].is-in{ opacity:1; transform:none; }
.fin__i[data-io]:nth-child(2){ transition-delay:.12s; }
.fin__i[data-io]:nth-child(3){ transition-delay:.24s; }
/* =========================================================
03 · PRODUTO (seção clara)
========================================================= */
.prd{
/* mesmo fundo da seção 04, para as duas seções claras se emendarem */
--paper: #FFFFFF;
--paper-2: #DFDBD3;
--graph: #1A1C1A;
--graph-dim: rgba(26,28,26,.66);
--graph-faint:rgba(26,28,26,.14);
position:relative;
isolation:isolate;
overflow:hidden;
background:var(--paper);
color:var(--graph);
padding:clamp(1.6rem,3.2vh,2.4rem) var(--pad);
}
.prd__in{
position:relative;
z-index:3; /* acima do divisor em onda */
max-width:var(--wrap);
margin-inline:auto;
padding-top:clamp(2.5rem,7vw,6.5rem); /* espaço para a onda do divisor */
}
/* duas colunas: texto/memorial à esquerda, lista/imagens à direita */
.prd__row{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
gap:clamp(2rem,4.5vw,4.5rem);
align-items:start;
}
/* linha 2 — o carrossel ocupa a largura toda */
.prd__row--b{
grid-template-columns:1fr;
margin-top:clamp(1rem,2.2vh,1.5rem);
}
/* a coluna esquerda agora é longa (texto + memorial): rola normalmente */
.prd__hd{ min-width:0; }
.prd__h2{
margin:0 0 clamp(.7rem,1.5vh,1.05rem);
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.75rem,2.6vw+.2vh,2.5rem);
line-height:1.05; letter-spacing:-.022em;
text-wrap:pretty;
}
.prd__h2 em{
display:block;
margin-top:.12em;
font-style:italic; color:#8A6A38;
}
.prd__p{
margin:0;
max-width:66ch;
font-size:clamp(.88rem,.98vw,1rem);
line-height:1.7; color:var(--graph-dim);
}
/* ---------- lista de diferenciais (coluna direita) ---------- */
.dif{
display:flex;
flex-direction:column;
}
/* a coluna esquerda é mais alta (texto + memorial): a lista acompanha
a rolagem em vez de deixar um vão no fim da coluna direita */
.prd__row > .dif{
position:sticky;
top:clamp(1rem,3vh,2rem);
}
/* cada item é uma linha: ícone à esquerda, texto à direita */
.dif__i{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:0 clamp(.9rem,1.4vw,1.25rem);
padding:clamp(.42rem,.95vh,.62rem) 0;
border-bottom:1px solid var(--graph-faint);
transition:padding-left .5s var(--ease);
}
.dif__i:first-child{ padding-top:0; }
.dif__i:last-child{ border-bottom:none; padding-bottom:0; }
.dif__i:hover{ padding-left:.5rem; }
.dif__ic{
grid-row:span 2;
display:grid; place-items:center;
width:38px; height:38px;
border:1px solid var(--graph-faint);
border-radius:50%;
color:#8A6A38;
transition:border-color .5s var(--ease), color .5s var(--ease);
}
.dif__i:hover .dif__ic{ border-color:rgba(138,106,56,.45); }
.dif__ic svg{
width:19px; height:19px;
fill:none; stroke:currentColor;
stroke-width:1.4;
stroke-linecap:round; stroke-linejoin:round;
}
.dif__k{
align-self:center;
margin:0 0 .35em;
font-family:var(--f-body); font-weight:500;
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.3; letter-spacing:-.01em;
color:var(--graph);
}
.dif__d{
margin:0;
font-size:.83rem; line-height:1.6;
color:var(--graph-dim);
}
/* ---------- memorial resumido (abaixo do texto de abertura) ---------- */
.mem{
position:relative;
display:flex; flex-direction:column;
align-items:stretch;
margin-top:clamp(1.1rem,2.5vh,1.75rem);
}
.mem__t{
margin:0 0 clamp(.5rem,1.2vh,.9rem);
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:#8A6A38;
}
/* itens de uma linha só: o título fica centrado ao lado do ícone */
.dif--mem .dif__i{
grid-template-rows:auto;
align-items:center;
padding:clamp(.38rem,.8vh,.52rem) 0;
}
.dif--mem .dif__ic{
grid-row:auto;
width:32px; height:32px;
}
.dif--mem .dif__ic svg{ width:16px; height:16px; }
.dif--mem .dif__k{
margin:0;
font-weight:400;
font-size:.87rem;
color:var(--graph-dim);
}
/* botão "ver mais" — só entra no desktop, via JS (fica hidden sem script) */
.mem__more{
display:none;
margin-left:auto; /* alinhado à direita da coluna */
align-items:center; gap:.7em;
margin-top:clamp(.9rem,2vh,1.25rem);
padding:0; border:0;
background:none; color:#8A6A38;
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase;
cursor:pointer;
transition:color .4s var(--ease);
}
/* acima da camada expandida, senão a lista aberta cobre o botão */
.mem__more{ position:relative; z-index:4; }
.mem__more:hover{ color:var(--graph); }
.mem__more:focus-visible{ outline:2px solid #8A6A38; outline-offset:3px; }
.mem__more-i{
display:grid; place-items:center;
width:24px; height:24px;
border:1px solid var(--graph-faint);
border-radius:50%;
transition:transform .45s var(--ease), border-color .4s var(--ease);
}
.mem__more:hover .mem__more-i{ border-color:rgba(138,106,56,.45); }
.mem__more[aria-expanded="true"] .mem__more-i{ transform:rotate(180deg); }
.mem__more svg{
width:14px; height:14px;
fill:none; stroke:currentColor;
stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
/* ≥981px: a lista mostra 4 itens e o resto abre por cima, sem empurrar
nada — a coluna da direita é sticky e mudaria de lugar se a altura
desta coluna crescesse. --mem-h é medido pelo JS. */
@media (min-width:981px){
.mem__more{ display:inline-flex; }
.dif--mem{
position:relative;
height:var(--mem-h,auto);
overflow:hidden;
transition:height .55s var(--ease);
}
/* o 4º item encerra a lista enquanto está recortada */
.mem.is-cut .dif--mem .dif__i:nth-child(4){ border-bottom:none; }
/* aberta: cresce sobre o que vem abaixo, sem ocupar espaço no fluxo */
.mem.is-open .dif--mem{
position:absolute;
top:0; left:0; right:0;
z-index:3;
height:var(--mem-full,auto);
/* espaço para o botão, que fica sobreposto no rodapé da camada */
padding-bottom:clamp(2.6rem,5vh,3.2rem);
background:var(--paper);
box-shadow:0 18px 40px -24px rgba(26,28,26,.45);
}
/* âncora do posicionamento absoluto + reserva do espaço dos 4 itens */
.mem.is-open .mem__ls-wrap{ height:var(--mem-h,auto); }
/* aberto: o botão desce para o rodapé da camada, ainda à direita */
.mem.is-open .mem__more{
position:absolute;
right:0;
/* --mem-top é a distância do topo de .mem até o topo da lista */
top:calc(var(--mem-top,0px) + var(--mem-full,0px) - clamp(2.4rem,4.4vh,2.9rem));
margin-top:0;
}
}
.mem__ls-wrap{ position:relative; }
/* ---------- galeria — carrossel (coluna direita) ---------- */
.gal{ --gal-n:3; --gal-gap:clamp(.75rem,1.4vw,1.15rem); }
.gal__vp{ overflow:hidden; }
.gal__tr{
display:flex;
gap:var(--gal-gap);
transition:transform .75s var(--ease);
will-change:transform;
}
/* as 3 imagens dividem a largura em partes iguais, descontadas as calhas */
.gal__i{
flex:0 0 calc((100% - (var(--gal-n) - 1) * var(--gal-gap)) / var(--gal-n));
min-width:0;
}
/* o botão é a própria moldura clicável da imagem */
.gal__z{
--corner: #A8763A;
--corner-size: clamp(1.5rem, 3.5vw, 2.4rem);
--corner-in: clamp(.5rem, 1.1vw, .75rem);
display:block; position:relative; width:100%;
margin:0; padding:0; border:0;
background:var(--paper-2);
aspect-ratio:4/3;
overflow:hidden;
border-radius:5px;
cursor:zoom-in;
}
/* a imagem só acende quando termina de decodificar: sem isso ela aparece
de repente, em faixas, conforme o arquivo chega. quem apaga é o JS, via
.is-load no contêiner — sem JS a imagem fica visível desde o início */
.gal__z img{
width:100%; height:100%;
object-fit:cover;
transition:opacity .7s var(--ease), transform 1.1s var(--ease);
}
.gal.is-load .gal__z img{ opacity:0; }
.gal.is-load .gal__z img.is-ok{ opacity:1; }
.gal__z:hover img{ transform:scale(1.04); }
/* ---- cantos em "L" que acendem no hover ----
usado nas duas galerias (carrossel do produto e grade do 8º pavimento).
Cada pseudo-elemento desenha só as duas bordas que formam o ângulo; o
deslocamento inicial vem da diagonal, então o L entra na direção do
próprio canto. Na seção 04 o ::after da moldura já é o véu da legenda,
por isso o segundo canto mora no ::before do — daí a lista dupla
de seletores abaixo. */
.gal__z::before,
.gal__z::after,
.amb__z::before,
.amb__i::before{
content:'';
position:absolute; z-index:2;
width:var(--corner-size); height:var(--corner-size);
opacity:0;
pointer-events:none;
transition:opacity .45s var(--ease), transform .45s var(--ease);
}
/* superior direito */
.gal__z::before,
.amb__z::before{
top:var(--corner-in); right:var(--corner-in);
border-top:2px solid var(--corner);
border-right:2px solid var(--corner);
transform:translate3d(.4rem, -.4rem, 0);
}
/* inferior esquerdo */
.gal__z::after,
.amb__i::before{
bottom:var(--corner-in); left:var(--corner-in);
border-bottom:2px solid var(--corner);
border-left:2px solid var(--corner);
transform:translate3d(-.4rem, .4rem, 0);
}
.gal__z:hover::before,
.gal__z:hover::after,
.gal__z:focus-visible::before,
.gal__z:focus-visible::after,
.amb__z:hover::before,
.amb__z:focus-visible::before,
.amb__i:hover::before,
.amb__i:focus-within::before{
opacity:1;
transform:none;
}
.gal__z:focus-visible{ outline:2px solid #8A6A38; outline-offset:-3px; }
/* controles — centralizados abaixo do carrossel */
.gal__ui{
display:flex; flex-direction:column;
align-items:center; gap:clamp(.6rem,1.4vh,.9rem);
margin-top:clamp(.7rem,1.5vh,1rem);
}
.gal__nav{ display:flex; align-items:center; gap:.75rem; }
.gal__ar{
display:grid; place-items:center;
width:40px; height:40px;
border:1px solid var(--graph-faint);
border-radius:50%;
background:none; color:var(--graph);
cursor:pointer;
transition:border-color .4s var(--ease), background .4s var(--ease),
color .4s var(--ease), opacity .4s var(--ease);
}
.gal__ar svg{
width:17px; height:17px;
fill:none; stroke:currentColor;
stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.gal__ar:hover:not(:disabled){
background:var(--graph); color:var(--paper);
border-color:var(--graph);
}
.gal__ar:disabled{ opacity:.28; cursor:default; }
/* =========================================================
04 · LAZER (seção clara — mesmo fundo da seção 03)
========================================================= */
.lzr{
--paper: #FFFFFF;
--graph: #1A1C1A;
--graph-dim: rgba(26,28,26,.66);
--graph-faint:rgba(26,28,26,.14);
position:relative;
background:var(--paper);
color:var(--graph);
/* a seção inteira cabe em uma tela: nada rola dentro dela */
height:100svh;
display:flex;
align-items:center;
padding:clamp(1.5rem,4vh,3rem) var(--pad);
overflow:hidden;
}
/* texto à esquerda, mosaico à direita */
.lzr__in{
width:100%;
max-width:var(--wrap);
margin-inline:auto;
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
gap:clamp(2rem,4vw,4rem);
align-items:center;
/* a altura disponível é o que sobra da tela depois do respiro */
max-height:100%;
min-height:0;
}
/* sem rolagem interna, o sticky perde a função: as duas colunas apenas
se centram na altura da tela */
.lzr__hd,
.lzr__art{ min-width:0; min-height:0; }
/* o mosaico é limitado pela altura da coluna, não pela largura: assim
as 3 linhas cabem na tela e as fotos encolhem junto em telas baixas */
.lzr__art{
height:100%;
display:flex;
align-items:center;
}
/* telas baixas: a régua de números é o que mais ocupa altura na coluna
de texto — os espaços apertam para o conjunto continuar cabendo */
@media (max-height:760px){
.lzr__kpi{
gap:.6rem;
margin-top:1rem;
padding-top:.9rem;
}
.lzr__k{ padding-bottom:.5rem; }
}
/* o limite de medida vale para o texto corrido, não para a régua de
números — que precisa da largura inteira para caber em uma linha */
.lzr__h2, .lzr__p{ max-width:62ch; }
.lzr__h2{
margin:0 0 clamp(.9rem,2vh,1.5rem);
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.9rem,2.9vw+.2vh,2.85rem);
line-height:1.05; letter-spacing:-.022em;
}
.lzr__h2 em{ display:block; font-style:italic; color:var(--brass); }
.lzr__p{
margin:0;
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.75; color:var(--graph-dim);
}
/* três números de apoio, no mesmo registro de ficha das stats do hero */
/* na coluna estreita os três números empilham em régua vertical */
.lzr__kpi{
display:flex; flex-direction:column;
gap:clamp(.9rem,2vh,1.3rem);
margin:clamp(1.6rem,3.5vh,2.4rem) 0 0;
padding-top:clamp(1.2rem,2.6vh,1.7rem);
border-top:1px solid var(--graph-faint);
}
/* número e rótulo lado a lado, alinhados pela base */
.lzr__k{
display:flex; align-items:baseline;
gap:.7em;
border-bottom:1px solid var(--graph-faint);
padding-bottom:clamp(.6rem,1.4vh,.9rem);
}
.lzr__k:last-child{ border-bottom:none; padding-bottom:0; }
.lzr__k b{
flex:none;
/* largura fixa alinha os rótulos numa coluna só */
min-width:3.6ch;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.7rem,3vw,2.4rem);
line-height:1; letter-spacing:-.02em;
color:var(--brass);
}
.lzr__k span{
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--graph-dim);
}
/* ---------- chamada para o conteúdo imersivo (planta 3D) ----------
reaproveita o componente .scroll do hero, mas aqui ele fecha a seção em
fluxo normal — não é o indicador absoluto sobre a imagem de capa — e a
seção é clara, então as cores saem dos tokens --graph em vez de --bone.
Ocupa as duas colunas da grade para centralizar na seção inteira. */
.scroll--lzr{
position:static;
grid-column:1 / -1;
/* o .lzr__in alinha os filhos em start: sem isso o link não centraliza */
justify-self:center;
transform:none;
margin-top:clamp(2.5rem,6vh,4.5rem);
/* o fadeUp da base tem 1.5s de atraso, herdado do hero: aqui a entrada
fica por conta do reveal padrão, então o elemento nasce visível */
opacity:1;
animation:none;
text-decoration:none;
}
.scroll--lzr .scroll__mouse{ border-color:var(--graph-faint); }
.scroll--lzr:hover .scroll__mouse{ border-color:var(--brass); }
.scroll--lzr .scroll__arw{ stroke:var(--graph-faint); }
.scroll--lzr:hover .scroll__arw{ stroke:var(--brass); }
.scroll__t{
font-family:var(--f-mono);
font-size:.68rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--graph-dim);
transition:color .4s var(--ease);
}
.scroll--lzr:hover .scroll__t{ color:var(--brass); }
/* ---------- grade dos ambientes fotografados ---------- */
/* grade uniforme: todos os itens no mesmo tamanho e proporção */
.amb{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
/* as 3 linhas dividem a altura disponível: é ela que manda, para a
grade caber na tela sem rolagem em vez de crescer pela largura */
grid-template-rows:repeat(3,minmax(0,1fr));
gap:clamp(.5rem,.9vw,.8rem);
width:100%;
max-height:100%;
aspect-ratio:3/2.4; /* proporção do conjunto, não de cada foto */
margin-top:0;
}
/* o ancora o canto inferior esquerdo: o ::after da moldura já é o véu */
.amb__i{
--corner: #A8763A;
--corner-size: clamp(1.1rem, 2.4vw, 1.7rem);
--corner-in: clamp(.4rem, .9vw, .6rem);
position:relative;
}
/* vaga: só reserva o lugar na grade. Mantém a proporção das demais para
a linha não colapsar, sem moldura, cantos nem fundo visível */
.amb__i--gap{
pointer-events:none;
}
.amb__i--gap::before,
.amb__i--gap::after{ display:none; }
/* o botão é a moldura clicável — mesmo padrão do carrossel do produto */
.amb__z{
display:block; position:relative;
/* preenche a célula da grade: a altura vem da linha, não da proporção */
width:100%; height:100%;
margin:0; padding:0; border:0;
background:#DFDBD3;
overflow:hidden;
border-radius:5px;
cursor:zoom-in;
color:var(--bone);
}
.amb__z img{
width:100%; height:100%;
object-fit:cover;
transition:transform 1.1s var(--ease);
}
/* ---- fade de entrada da foto ----
as fotos são pesadas: o fade só começa quando a célula está na viewport
E o bitmap terminou de decodificar — o JS espera decode(), não load, para
a foto não acender ainda crua. Até lá vale o fundo da moldura como
placeholder, em vez de um retângulo piscando.
O leve zoom-out no fim tira a secura do "pop" quando a imagem chega. */
.amb--fade .amb__z img{
opacity:0;
transform:scale(1.04);
transition:opacity 1s var(--ease), transform 1.4s var(--ease);
}
.amb--fade .amb__i.is-shown .amb__z img{
opacity:1;
transform:none;
}
/* o hover volta a mandar no transform depois que a foto já entrou */
.amb--fade .amb__i.is-shown .amb__z:hover img,
.amb--fade .amb__i.is-shown .amb__z:focus-visible img{ transform:scale(1.05); }
/* véu inferior: garante contraste da legenda sobre qualquer foto */
.amb__z::after{
content:''; position:absolute; inset:0;
background:linear-gradient(to top, rgba(11,12,11,.88) 0%, rgba(11,12,11,.25) 45%, transparent 72%);
pointer-events:none;
}
.amb__z:hover img,
.amb__z:focus-visible img{ transform:scale(1.05); }
.amb__t{
position:absolute; z-index:1;
left:0; right:0; bottom:0;
display:block;
padding:clamp(.6rem,1.4vw,.9rem);
font-size:clamp(.72rem,.9vw,.84rem);
line-height:1.3; text-align:left;
font-weight:400;
opacity:.55;
}
/* capitular: só o corpo distingue a inicial — a opacidade é a mesma do texto */
.amb__t::first-letter{
font-family:var(--f-disp);
font-size:1.9em;
}
/* =========================================================
05 · PLANTA 3D DO LAZER
========================================================= */
.plt{
--paper: #FFFFFF;
--graph: #1A1C1A;
--graph-dim: rgba(26,28,26,.66);
--graph-faint:rgba(26,28,26,.14);
position:relative;
background:var(--paper);
color:var(--graph);
/* a seção é exatamente uma tela: sem padding próprio, o quadro 3D
não divide a viewport com o respiro das seções vizinhas */
height:100svh;
overflow:hidden;
}
.plt__in{
max-width:var(--wrap);
margin-inline:auto;
height:100%;
}
/* a landing move a câmera pelo próprio scroll (uma parada por viewport).
Dentro do iframe esse scroll é isolado, então o quadro ocupa uma tela
inteira e o visitante percorre os 21 ambientes rolando dentro dele. */
.plt__frame{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw); /* rompe o --wrap e vai de borda a borda */
height:100%;
background:#FFF;
overflow:hidden;
}
.plt__3d{
display:block;
width:100%; height:100%;
border:0;
}
/* =========================================================
LIGHTBOX
========================================================= */
.lb{
position:fixed; inset:0;
z-index:200;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:clamp(.5rem,2vw,1.5rem);
padding:clamp(1rem,4vh,3rem) clamp(.75rem,3vw,2.5rem);
opacity:0;
transition:opacity .45s var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-on{ opacity:1; }
.lb__veil{
position:absolute; inset:0;
z-index:-1;
background:rgba(8,9,8,.94);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
cursor:zoom-out;
}
.lb__fig{
grid-column:2;
margin:0;
display:flex; flex-direction:column;
align-items:center; gap:clamp(.75rem,2vh,1.15rem);
min-height:0;
}
.lb__img{
max-width:100%;
max-height:calc(100vh - clamp(8rem,20vh,11rem));
object-fit:contain;
transform:scale(.97);
opacity:0;
transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.lb.is-on .lb__img{ transform:none; opacity:1; }
.lb__cap{
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.13em;
text-transform:uppercase;
color:var(--bone-dim);
text-align:center;
}
.lb__cap i{ font-style:normal; color:var(--brass); margin-left:.6em; }
.lb__ar,
.lb__x{
display:grid; place-items:center;
border:1px solid var(--bone-faint);
border-radius:50%;
background:none; color:var(--bone);
cursor:pointer;
transition:background .4s var(--ease), color .4s var(--ease),
border-color .4s var(--ease), opacity .4s var(--ease);
}
.lb__ar{ width:clamp(40px,4vw,52px); aspect-ratio:1; }
.lb__ar--p{ grid-column:1; }
.lb__ar--n{ grid-column:3; }
.lb__x{
position:absolute;
top:clamp(.75rem,2.5vh,1.5rem);
right:clamp(.75rem,2.5vw,1.5rem);
width:42px; height:42px;
}
.lb__ar:hover,
.lb__x:hover{
background:var(--bone); color:var(--ink);
border-color:var(--bone);
}
.lb__ar svg,
.lb__x svg{
width:19px; height:19px;
fill:none; stroke:currentColor;
stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
/* trava a rolagem do fundo com o lightbox aberto */
body.is-lb{ overflow:hidden; }
/* reveal escalonado dos cards */
.dif__i[data-io]:nth-child(2){ transition-delay:.06s; }
.dif__i[data-io]:nth-child(3){ transition-delay:.12s; }
.dif__i[data-io]:nth-child(4){ transition-delay:.18s; }
.dif__i[data-io]:nth-child(5){ transition-delay:.24s; }
.dif__i[data-io]:nth-child(6){ transition-delay:.30s; }
.dif__i[data-io]:nth-child(7){ transition-delay:.36s; }
/* =========================================================
06 · TIPOLOGIAS
========================================================= */
/* seção escura, para contrastar com a planta 3D branca que vem antes */
/* seção clara: os tokens --bone são redefinidos em tom escuro para que abas,
filetes e ficha técnica invertam sem reescrever cada regra — mesmo recurso
usado na seção 02 */
.tip{
--bone: #1A1C1A;
--bone-dim: rgba(26,28,26,.66);
--bone-faint: rgba(26,28,26,.14);
position:relative;
background:#FFFFFF;
color:var(--bone);
/* sem respiro embaixo: a seção 07 encosta direto no fim das abas. O corte
diagonal do vídeo já sobe por cima deste branco (margin-top negativa
de --cut lá), então qualquer padding aqui vira um vão vazio entre as
duas seções em vez de respiro. */
padding:clamp(3.5rem,8vh,6rem) var(--pad) 0;
}
.tip__in{
max-width:var(--wrap);
margin-inline:auto;
}
/* cabeçalho centralizado: a headline abre a seção antes das abas, que são
uma faixa de largura cheia */
.tip__hd{
margin-bottom:clamp(2.5rem,5.5vh,4rem);
text-align:center;
}
/* duas linhas exatas: cada frase ocupa uma. Sem limite de medida — ele
quebraria a primeira frase antes de chegar ao da segunda. O corpo
acompanha a largura da janela para caber sem quebra em cada linha. */
.tip__h2{
margin:0;
font-family:var(--f-disp); font-weight:400;
/* o piso de 1.1rem é o que ainda cabe em uma linha nos celulares
estreitos (~360px), onde a segunda frase tem 42 caracteres */
font-size:clamp(1.1rem,3.6vw,3.2rem);
line-height:1.12; letter-spacing:-.026em;
}
.tip__h2 span,
.tip__h2 em{ display:block; }
.tip__h2 em{ font-style:italic; color:var(--brass); }
/* ---------- barra de abas ----------
só o filete de base: é ele que serve de trilho para a régua da aba ativa */
.tip__bar{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-bottom:1px solid var(--bone-faint);
}
/* sem separadores verticais: o rótulo e a régua bastam para delimitar */
.tip__tab{
position:relative;
display:flex;
align-items:center;
margin:0; border:0;
background:transparent;
padding:clamp(1rem,2.4vh,1.5rem) clamp(.9rem,2vw,1.6rem);
text-align:left;
cursor:pointer;
color:var(--bone-dim);
transition:color .4s var(--ease), background .4s var(--ease);
}
.tip__tab:hover{ color:var(--bone); background:rgba(26,28,26,.035); }
/* régua de brass que corre sob a aba corrente */
.tip__tab::after{
content:'';
position:absolute; left:0; right:0; bottom:-1px;
height:2px;
background:var(--brass);
transform:scaleX(0);
transform-origin:left;
transition:transform .45s var(--ease);
}
.tip__tab[aria-selected="true"]{ color:var(--bone); }
.tip__tab[aria-selected="true"]::after{ transform:scaleX(1); }
.tip__tabl{
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1rem,1.5vw,1.25rem);
line-height:1.15; letter-spacing:-.01em;
}
/* ---------- painel ---------- */
.tip__pan{
padding-top:clamp(1.8rem,4vh,2.8rem);
outline-offset:4px;
}
/* troca de aba: o painel entra deslizando, sem empurrar o layout */
.tip__pan:not([hidden]){
animation:tipIn .5s var(--ease) both;
}
@keyframes tipIn{
from{ opacity:0; transform:translateY(12px); }
to { opacity:1; transform:none; }
}
/* dados à esquerda, plantas à direita */
.tip__grid{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
gap:clamp(2rem,4vw,4rem);
align-items:start;
}
/* na coluna estreita a ficha empilha em régua vertical. São cinco linhas:
o respiro é menor que numa lista curta para o CTA não descer demais */
.tip__specs{
display:flex; flex-direction:column;
gap:clamp(.7rem,1.6vh,1.05rem);
margin:0 0 clamp(1.6rem,3.5vh,2.4rem);
}
/* rótulo à esquerda e valor à direita, na mesma linha. O baseline alinha os
dois corpos diferentes pela base do texto, não pelo centro da caixa. */
.tip__spec{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:1.2rem;
padding-top:clamp(.9rem,2vh,1.2rem);
border-top:1px solid var(--bone-faint);
}
/* o primeiro item abre a ficha: o filete acima dele não separa nada */
.tip__spec:first-child{
padding-top:0;
border-top:0;
}
/* rótulo e valor na mesma família do título (serifada de display) */
.tip__spec dt{
flex:none;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.05rem,1.6vw,1.3rem);
line-height:1.25; letter-spacing:-.01em;
color:var(--bone-dim);
}
.tip__spec dd{
margin:0;
/* o valor toma o espaço restante e alinha à direita, formando coluna */
text-align:right;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.05rem,1.6vw,1.3rem);
line-height:1.25; letter-spacing:-.01em;
color:var(--bone);
}
/* contagens (vagas, unidades restantes) destacam em brass, herdando o
negrito e o corpo do resto da linha */
.tip__spec dd b{
font-weight:inherit;
color:var(--brass);
}
/* a unidade de medida acompanha a linha: mesma serifada, só um pouco menor
e esmaecida, para o número ficar em primeiro plano */
.tip__spec dd i{
font-style:normal;
font-size:.8em;
color:var(--bone-dim);
}
/* ---------- carrossel das plantas ----------
sem moldura: a planta é desenho técnico sobre fundo branco e se apoia
no próprio papel da seção */
.tip__plans{ min-width:0; }
.tip__vp{ overflow:hidden; }
.tip__tr{
display:flex;
transition:transform .6s var(--ease);
}
.tip__plan{
position:relative;
flex:0 0 100%;
min-width:0;
margin:0;
}
/* Quadro fixo por aba. Ele precisa ser fixo dentro da aba — as duas plantas
de cada carrossel dividem o mesmo quadro, senão a altura salta ao passar
de uma para a outra e os botões de navegação pulam junto.
Mas o quadro NÃO pode ser o mesmo nas três abas: cada par tem formato
próprio, e um valor único obriga duas das abas a sobrar altura em branco,
que é o que descolava a planta do topo da ficha à esquerda.
Tipo 2558×1954 e 2658×1954 → ~1,31 e ~1,36 (paisagem)
Garden 1663×2288 e 1659×2328 → ~0,73 e ~0,71 (retrato)
Cobertura 1678×1278 e 1620×1318 → ~1,31 e ~1,23 (paisagem)
Dentro de cada aba as duas são quase idênticas, então o quadro assume a
proporção do par (a mais baixa das duas, para a outra caber inteira) e a
planta o preenche encostada no topo, sem faixa vazia acima. */
.tip__plan img{
display:block;
width:100%;
/* contain, não cover: a planta é desenho técnico e cortar perderia cotas.
A sobra vira margem, nunca recorte. */
object-fit:contain;
/* o que sobrar do contain desce; o topo do desenho fica na borda de cima,
alinhado com a primeira linha da ficha */
object-position:top center;
}
#pan-tipo .tip__plan img{ aspect-ratio:2558/1954; } /* ~1,31 */
#pan-garden .tip__plan img{ aspect-ratio:1659/2328; } /* ~0,71 */
#pan-cob .tip__plan img{ aspect-ratio:1620/1318; } /* ~1,23 */
/* teto de altura: em retrato a proporção real deixaria o Garden mais alto
que a tela em telas estreitas e largas. O max-height corta esse excesso
e o contain reencaixa o desenho — a planta encolhe, continua inteira e
presa ao topo. As duas plantas da aba dividem o mesmo teto, então o
carrossel segue sem salto de altura. */
.tip__plan img{ max-height:78vh; }
/* etiqueta no canto superior esquerdo, sobre a planta */
.tip__plan figcaption{
position:absolute;
top:0; left:0;
z-index:1;
padding:.55em .85em;
background:var(--bone);
color:#FFF;
font-family:var(--f-mono);
font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
line-height:1;
}
/* ---- controles ---- */
.tip__nav{
display:flex; align-items:center; justify-content:center;
gap:clamp(.8rem,1.8vw,1.3rem);
margin-top:clamp(1rem,2.4vh,1.6rem);
}
.tip__ar{
display:grid; place-items:center;
width:38px; height:38px;
margin:0; padding:0;
background:transparent;
border:1px solid var(--bone-faint);
border-radius:50%;
cursor:pointer;
transition:border-color .4s var(--ease), background .4s var(--ease);
}
.tip__ar svg{
width:16px; height:16px;
fill:none; stroke:var(--bone-dim);
stroke-width:1.6; stroke-linecap:square;
transition:stroke .4s var(--ease);
}
.tip__ar:hover{ border-color:var(--brass); }
.tip__ar:hover svg{ stroke:var(--brass); }
/* ---------- CTA ---------- */
.tip__cta{
display:flex;
width:fit-content;
margin-inline:auto;
/* na seção clara o --bone virou escuro: o texto precisa do tom claro */
--fg:#F4F2ED;
}
/* =========================================================
07 · VÍDEO
========================================================= */
/* corte inclinado no topo e na base, feito com clip-path.
O fundo da seção é a cor da seção SEGUINTE: é ela que aparece na diagonal
inferior, e assim a 08 parece começar inclinada, encaixando no corte. */
.vid{
/* --cut é a profundidade da inclinação */
--cut:clamp(2rem,5vw,5rem);
position:relative;
/* cada diagonal mostra a cor da seção que a encosta: branco da 06 no topo,
bege da 08 na base. O gradiente troca exatamente no meio da seção. */
background:linear-gradient(#FFFFFF 0 50%, #F4F2ED 50% 100%);
/* a margem negativa no topo puxa a seção anterior para dentro do corte */
margin-top:calc(var(--cut) * -1 + 1px);
}
/* o quadro recortado: é ele que carrega o vídeo e sofre o clip */
.vid__frame{
position:relative;
height:100svh;
min-height:32rem;
background:var(--ink);
overflow:hidden;
isolation:isolate;
clip-path:polygon(
0 var(--cut),
100% 0,
100% calc(100% - var(--cut)),
0 100%
);
}
.vid__el{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
/* o primeiro quadro pode demorar: o fundo escuro evita o flash branco */
background:var(--ink);
}
/* véu diagonal: escurece a base e a esquerda, onde o texto se apoia */
.vid__veil{
position:absolute; inset:0;
z-index:1;
background:
linear-gradient(to top, rgba(11,12,11,.82) 0%, rgba(11,12,11,.25) 42%, transparent 68%),
linear-gradient(to right, rgba(11,12,11,.55) 0%, transparent 55%);
pointer-events:none;
}
/* o corte come as pontas: o conteúdo respeita a faixa segura */
.vid__copy{
position:absolute;
left:var(--pad);
bottom:calc(var(--cut) + clamp(5rem,12vh,8rem));
z-index:2;
max-width:calc(100% - var(--pad) * 2);
color:var(--bone);
}
/* duas linhas exatas: o corpo acompanha a janela para cada frase caber
inteira. A primeira, com 27 caracteres, é a que dita o teto. */
.vid__h2{
margin:0;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.25rem,5vw,4rem);
line-height:1.06; letter-spacing:-.024em;
}
.vid__h2 span,
.vid__h2 em{ display:block; }
.vid__h2 em{ font-style:italic; color:var(--brass); }
/* ---- botão de som ----
só aparece quando o navegador bloqueia o áudio no autoplay */
.vid__snd{
position:absolute;
right:var(--pad);
top:calc(var(--cut) + clamp(1.5rem,4vh,2.5rem));
z-index:3;
display:inline-flex; align-items:center; gap:.6em;
padding:.75em 1.1em;
background:rgba(11,12,11,.55);
backdrop-filter:blur(8px);
border:1px solid var(--bone-faint);
color:var(--bone);
font-family:var(--f-mono);
font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
cursor:pointer;
transition:border-color .4s var(--ease), background .4s var(--ease);
}
.vid__snd:hover{ border-color:var(--brass); background:rgba(11,12,11,.75); }
.vid__snd svg{
width:16px; height:16px; flex:none;
fill:none; stroke:currentColor;
stroke-width:1.6; stroke-linecap:square;
}
.vid__snd svg path:first-child{ fill:currentColor; stroke:none; }
/* alterna entre o X (mudo) e as ondas (com som) conforme o estado */
.vid__snd .vid__snd-o{ display:none; }
.vid__snd.is-on .vid__snd-x{ display:none; }
.vid__snd.is-on .vid__snd-o{ display:inline; }
/* ---- indicador de rolagem, na base ---- */
.vid__scroll{
position:absolute;
left:50%;
bottom:calc(var(--cut) + clamp(1.2rem,3vh,2rem));
transform:translateX(-50%);
z-index:2;
display:grid; place-items:center;
}
/* sobre o vídeo escuro o mouse usa o contorno claro do hero */
.vid__scroll .scroll__mouse{ border-color:var(--bone-dim); }
/* =========================================================
08 · MERCADO
========================================================= */
/* seção clara: os tokens --bone invertem para tom escuro, e com isso a
tabela reusada da seção 02 inverte junto, sem reescrever nada dela */
.mkt{
--bone: #1A1C1A;
--bone-dim: rgba(26,28,26,.66);
--bone-faint: rgba(26,28,26,.14);
/* mesma profundidade de inclinação da seção 07: as duas diagonais que
fecham a seção precisam ter exatamente o mesmo ângulo */
--cut:clamp(2rem,5vw,5rem);
position:relative;
background:#F4F2ED;
color:var(--bone);
/* o topo é curto de propósito: o corte inclinado do vídeo já cria a
separação visual, e um padding cheio deixaria o título solto dele.
Embaixo, o padding ganha o --cut: a diagonal come essa altura na
ponta esquerda e sem a folga o último cartão encostaria no corte. */
padding:clamp(.2rem,.8vh,.6rem) var(--pad)
calc(clamp(3.5rem,8vh,6rem) + var(--cut));
/* a base repete a inclinação do topo. O corte do vídeo entrega a borda
superior descendo da direita para a esquerda (o vértice esquerdo é o
mais baixo); a base repete esse mesmo sentido, saindo de
100% - --cut na direita para 100% na esquerda — as duas diagonais
ficam paralelas e a seção vira uma faixa inclinada uniforme. */
clip-path:polygon(
0 0,
100% 0,
100% calc(100% - var(--cut)),
0 100%
);
/* a seguinte sobe para dentro do corte, senão sobraria uma cunha branca */
margin-bottom:calc(var(--cut) * -1 + 1px);
}
.mkt__in{
max-width:var(--wrap);
margin-inline:auto;
}
.mkt__hd{ margin-bottom:clamp(2rem,4.5vh,3.2rem); }
/* duas linhas exatas: sem limite de medida, que quebraria a primeira frase
antes do . O teto de 2.5rem é o limite físico — acima disso a frase de
63 caracteres, já girada, ultrapassa a largura do --wrap. */
.mkt__h2{
margin:0;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.15rem,3.05vw,2.5rem);
line-height:1.15; letter-spacing:-.024em;
}
.mkt__h2 span,
.mkt__h2 em{ display:block; }
.mkt__h2 em{ font-style:italic; color:var(--brass); }
/* ---- as duas linhas acompanham a inclinação do corte do vídeo ----
o corte tem --cut de desnível ao longo da largura da janela, o que dá
atan(5vw / 100vw) ≈ 2.86°. A diagonal sobe da esquerda para a direita,
então a rotação é negativa. É uma inclinação sutil, de propósito: é
exatamente a mesma da seção acima. */
@media (min-width:981px){
.mkt__hd{
display:grid;
place-items:center;
/* só o bastante para as pontas das linhas giradas não encostarem */
padding-block:clamp(.2rem,.5vh,.4rem);
margin-bottom:clamp(2.5rem,5.5vh,4rem);
}
.mkt__h2{
transform:rotate(-2.86deg);
transform-origin:center;
text-align:center;
white-space:nowrap;
}
}
/* acima de 1600px o --cut satura em 80px e a diagonal fica mais rasa:
a rotação acompanha para não descolar do corte */
@media (min-width:1600px){
.mkt__h2{ transform:rotate(-2.39deg); }
}
/* texto à esquerda, tabela à direita */
.mkt__cols{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
gap:clamp(2rem,4vw,4rem);
align-items:start;
}
.mkt__p{
margin:0 0 clamp(1rem,2.2vh,1.4rem);
max-width:56ch;
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.75; color:var(--bone-dim);
}
.mkt__p:last-child{ margin-bottom:0; }
/* os números que sustentam o argumento sobem para a cor cheia */
.mkt__p b{ font-weight:500; color:var(--bone); }
.mkt__src{
margin:clamp(.8rem,1.8vh,1.1rem) 0 0;
text-align:right;
font-family:var(--f-mono);
font-size:.62rem; letter-spacing:.1em;
color:var(--bone-dim);
}
/* ---------- tabela ---------- */
/* todos os cabeçalhos no mesmo registro: por padrão o .tbl__lbl é mono
caixa-alta e os demais são body, o que os deixava desiguais */
.mkt__tbl thead th,
.mkt__tbl thead th.tbl__lbl{
font-family:var(--f-mono); font-weight:400;
font-size:.66rem; letter-spacing:.14em;
text-transform:uppercase;
color:var(--bone-dim);
}
/* a posição precede o nome da cidade, sem moldura */
.mkt__pos{
display:inline-block;
min-width:1.4em;
margin-right:.5em;
font-family:var(--f-mono); font-weight:400;
font-size:.78em;
color:var(--bone-dim);
}
/* na linha de Balneário o dado sobe para a cor cheia — sem fundo, o
destaque fica por peso e cor */
.mkt__hi th{ color:var(--bone); font-weight:500; }
.mkt__hi .mkt__pos{ color:var(--brass); }
.mkt__hi .mkt__cnt{ color:var(--brass); }
/* o contador é numérico: tabular-nums trava a largura dos dígitos para o
número não tremer enquanto sobe */
.mkt__cnt{
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum';
}
/* ---------- os dois remates, lado a lado ---------- */
.mkt__cards{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(1.2rem,2.5vw,2rem);
/* a folga acomoda as tags, que sobem 1.4rem para fora do topo dos cards */
margin-top:clamp(3.2rem,6.5vh,4.6rem);
/* stretch (padrão do grid) iguala a altura dos dois cards pelo mais alto */
align-items:stretch;
}
/* ---------- os dois cards ----------
mesmo fundo e mesma tag: o que os distingue é o conteúdo, não a cor */
.mkt__note,
.mkt__warn{
padding:clamp(2rem,4vh,2.6rem) clamp(1.3rem,2.5vw,1.9rem) clamp(1.4rem,3vh,2rem);
background:#FFFFFF;
}
/* título em tag, ancorado na borda superior do card: a margem negativa o
puxa para fora, e o recuo lateral negativo o desencosta do padding, então
ele parece pousado sobre o canto em vez de contido nele */
.mkt__note-t,
.mkt__warn-t{
display:inline-flex; align-items:center; gap:.7em;
/* -1.4rem tira cerca de dois terços da tag para fora da borda superior,
deixando o resto apoiado sobre o card */
margin:-1.4rem 0 clamp(1.2rem,2.6vh,1.7rem)
calc(-1 * clamp(1.3rem,2.5vw,1.9rem));
padding:.85em 1.3em;
background:var(--brass);
font-family:var(--f-mono);
font-size:clamp(.8rem,1.1vw,1rem);
letter-spacing:.12em; text-transform:uppercase;
line-height:1; color:#FFFFFF;
}
/* o ícone acompanha a cor do texto */
.mkt__note-t svg,
.mkt__warn-t svg{
width:1.15em; height:1.15em; flex:none;
fill:none; stroke:#FFFFFF;
stroke-width:1.7; stroke-linecap:square; stroke-linejoin:miter;
}
/* ---------- corpo dos cards ---------- */
.mkt__note-p,
.mkt__warn-p{
margin:0 0 clamp(.8rem,1.8vh,1.1rem);
max-width:70ch;
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.75; color:var(--bone-dim);
}
.mkt__note-p b{ font-weight:500; color:var(--bone); }
.mkt__warn-p:last-child{ margin-bottom:0; }
/* a frase de fecho de cada card: serifada em corpo maior, encerrando o bloco */
.mkt__note-p--em,
.mkt__warn-p--em{
margin-bottom:0;
font-family:var(--f-disp);
font-size:clamp(1.05rem,1.5vw,1.3rem);
line-height:1.35; letter-spacing:-.012em;
color:var(--bone);
}
/* =========================================================
09 · QUEM ENTREGA
========================================================= */
/* seção clara: os tokens --bone invertem para tom escuro, e com isso a
tabela e o botão de contorno acompanham sem regra própria */
.who{
--bone: #1A1C1A;
--bone-dim: rgba(26,28,26,.66);
--bone-faint: rgba(26,28,26,.14);
/* --grid é o passo da quadrícula; --grid-c a cor do traço */
--grid: clamp(1.4rem,2.2vw,2rem);
--grid-c: rgba(26,28,26,.038);
position:relative;
background:#FFFFFF;
color:var(--bone);
padding:clamp(3.5rem,8vh,6rem) var(--pad);
overflow:hidden;
}
/* ---- grade quadriculada ----
dois gradientes repetidos cruzados desenham as linhas verticais e
horizontais. Fica num pseudo-elemento, e não no background da seção, para
receber a máscara que dissolve a grade nas bordas — sem ela o padrão
terminaria em corte seco no limite da seção. */
.who::before{
content:'';
position:absolute; inset:0;
z-index:0;
pointer-events:none;
background-image:
repeating-linear-gradient(to right,
var(--grid-c) 0 1px, transparent 1px var(--grid)),
repeating-linear-gradient(to bottom,
var(--grid-c) 0 1px, transparent 1px var(--grid));
/* a grade some para as bordas em vez de terminar cortada */
-webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 85%);
mask-image:radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 85%);
}
/* o conteúdo sobe acima da grade */
.who__in{
position:relative;
z-index:1;
max-width:var(--wrap);
margin-inline:auto;
}
/* ---------- cabeçalho centralizado ---------- */
/* sem medida no cabeçalho: a headline ocupa a largura inteira da seção e
só a descrição recebe limite, para o texto corrido não ficar longo */
.who__hd{
margin:0 0 clamp(2.5rem,5.5vh,4rem);
text-align:center;
}
.who__h2{
margin:0 0 clamp(1.2rem,2.6vh,1.8rem);
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.9rem,3.2vw+.2vh,3.1rem);
line-height:1.08; letter-spacing:-.024em;
}
/* a Instrument Serif só vem em peso 400: o 700 é sintetizado pelo navegador.
font-synthesis explícito garante que todos o apliquem — alguns desligam
a síntese por padrão e o negrito não apareceria. */
.who__h2 b{
font-weight:700;
font-synthesis-weight:auto;
}
.who__p{
max-width:64ch;
margin:0 auto;
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.75; color:var(--bone-dim);
}
/* os dois nomes que sustentam o argumento sobem para a cor cheia */
.who__p b{ font-weight:400; color:var(--bone); }
/* ---------- tabela de confiança ---------- */
/* medida menor que o --wrap: a segunda coluna é texto corrido e ficaria
longa demais para ler ocupando os 1200px da seção */
.who__table{
max-width:900px;
margin-inline:auto;
}
/* as duas colunas são texto e sempre cabem: não há o que rolar, e o
overflow-x do .tbl__scroll só acionaria a barra quando o span do hover
transborda alguns pixels */
.who__table .tbl__scroll{ overflow-x:visible; }
/* o .tbl alinha os cabeçalhos à direita, porque suas colunas são numéricas.
Aqui as duas são texto: o cabeçalho volta à esquerda para encostar na
coluna que ele nomeia. O padding-left zerado casa com o das células. */
.who__tbl thead th,
.who__tbl thead th.tbl__lbl{
text-align:left;
padding-left:0;
font-family:var(--f-mono); font-weight:400;
font-size:.66rem; letter-spacing:.14em;
text-transform:uppercase;
color:var(--bone-dim);
}
/* o cabeçalho da primeira coluna acompanha o recuo lateral do do corpo */
.who__tbl thead th.tbl__lbl{
padding-right:clamp(1.5rem,3vw,3rem);
}
/* a coluna do ponto é curta e nomeia a linha: fica em cor cheia */
/* o ponto nomeia a linha: corpo maior que o da explicação ao lado, para a
leitura em varredura pegar primeiro os cinco títulos */
.who__tbl tbody th{
width:1%;
white-space:nowrap;
padding-right:clamp(1.5rem,3vw,3rem);
font-size:clamp(1rem,1.35vw,1.18rem);
line-height:1.35;
color:var(--bone);
vertical-align:top;
}
/* ---- hover: a linha inteira aproxima ----
transform não funciona em display:table-cell — Chrome e Safari ignoram.
O zoom vem então de um dentro de cada célula, que é um elemento
comum e aceita scale. A origem em cada borda faz as duas metades crescerem
para fora, e a linha se expande como um bloco só. */
.who__tbl tbody th > span,
.who__tbl tbody td > span{
/* inline-block é o mínimo para aceitar transform; a largura cheia mantém
a quebra de linha do texto longo igual à de antes */
display:inline-block;
width:100%;
transition:transform .35s var(--ease);
}
/* a origem no topo evita que o span escalado desça sobre o border-bottom
da célula — era isso que criava um risco escuro no fim da linha */
.who__tbl tbody tr:hover th > span{
transform:scale(1.04);
transform-origin:left top;
}
.who__tbl tbody tr:hover td > span{
transform:scale(1.02);
transform-origin:left top;
}
/* a linha inteira também acende, reforçando que é um bloco só.
O fundo vem da regra genérica do .tbl; aqui só a cor do texto muda —
repetir o background empilhava dois véus e escurecia demais a faixa. */
.who__tbl tbody th,
.who__tbl tbody td{ transition:color .35s var(--ease), background .35s var(--ease); }
.who__tbl tbody tr:hover th{ color:var(--brass); }
.who__tbl tbody tr:hover td{ color:var(--bone); }
/* o significado é texto corrido, não número: precisa desfazer o alinhamento
à direita, o mono e o nowrap que a .tbl aplica às células de dado */
.who__tbl tbody td{
text-align:left;
vertical-align:top;
white-space:normal;
padding-left:0;
font-family:var(--f-body);
font-size:clamp(.88rem,1vw,.96rem);
line-height:1.65;
color:var(--bone-dim);
}
/* ---------- CTA ---------- */
.who__cta{
display:flex;
justify-content:center;
margin-top:clamp(2.5rem,5.5vh,4rem);
}
/* =========================================================
10 · ESCASSEZ
========================================================= */
/* seção clara: os tokens --bone invertem para tom escuro. O painel da
direita reverte para o escuro na própria regra, já que é o único bloco
que mantém o contraste original. */
.scr{
--bone: #1A1C1A;
--bone-dim: rgba(26,28,26,.66);
--bone-faint: rgba(26,28,26,.14);
position:relative;
background:#FFFFFF;
color:var(--bone);
padding:clamp(3.5rem,8vh,6rem) var(--pad);
}
.scr__in{
max-width:900px;
margin-inline:auto;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
gap:clamp(2rem,4vw,3.5rem);
align-items:center;
}
/* ---------- coluna de texto ---------- */
/* duas linhas exatas: sem limite de medida, que quebraria a primeira frase
antes do . Os blocos garantem uma frase por linha. */
.scr__h2{
margin:0 0 clamp(1.2rem,2.6vh,1.8rem);
font-family:var(--f-disp); font-weight:400;
/* o teto de 2.4rem é o que a coluna esquerda comporta com a seção em
900px, mantendo "Não vão existir outras." em uma linha */
font-size:clamp(1.7rem,2.6vw,2.4rem);
line-height:1.08; letter-spacing:-.024em;
}
.scr__h2 span,
.scr__h2 em{ display:block; }
.scr__h2 em{ font-style:italic; color:var(--brass); }
.scr__p{
margin:0 0 clamp(1.8rem,4vh,2.6rem);
max-width:54ch;
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.75; color:var(--bone-dim);
}
/* o botão fica na coluna clara: fundo escuro com texto branco, e o
preenchimento de brass continua subindo no hover */
.scr__cta{
--bg:var(--ink);
--fg:#FFFFFF;
}
.scr__cta:hover{ color:#FFFFFF; }
/* ---------- painel de números ----------
o único bloco escuro da seção: os tokens voltam aos valores claros para
que contador, barra e lista invertam junto, sem regra própria */
.scr__panel{
--bone: #EDE8E0;
--bone-dim: rgba(237,232,224,.62);
--bone-faint: rgba(237,232,224,.14);
/* --chamfer é a profundidade do corte no canto inferior direito */
--chamfer:clamp(2.5rem,5vw,4rem);
position:relative;
padding:clamp(2rem,4.5vh,3rem) clamp(1.8rem,4vw,2.6rem);
background:var(--ink);
color:var(--bone);
/* o canto é recortado de fato: o clip-path remove o triângulo em vez de
pintá-lo, então o branco da seção aparece ali.
Sem box-shadow: o clip-path recortaria a sombra junto, deixando um
retângulo escuro visível para além do corte. */
clip-path:polygon(
0 0,
100% 0,
100% calc(100% - var(--chamfer)),
calc(100% - var(--chamfer)) 100%,
0 100%
);
}
/* contador grande, com o rótulo em duas linhas ao lado.
center alinha o bloco de duas linhas pelo meio da altura do número */
.scr__big{
display:flex;
align-items:center;
gap:clamp(.7rem,1.6vw,1.1rem);
margin:0 0 clamp(1.5rem,3.5vh,2.2rem);
padding-bottom:clamp(1.5rem,3.5vh,2.2rem);
border-bottom:1px solid var(--bone-faint);
}
.scr__n{
font-family:var(--f-disp); font-weight:400;
font-size:clamp(3.6rem,8vw,6rem);
line-height:.85; letter-spacing:-.035em;
color:var(--brass);
/* trava a largura dos dígitos: sem isso o número treme ao contar */
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum';
}
.scr__u{
font-family:var(--f-mono);
font-size:.66rem; letter-spacing:.16em; line-height:1.5;
text-transform:uppercase; color:var(--bone-dim);
}
/* ---------- barra de progresso ---------- */
.scr__track{
position:relative;
height:clamp(1.1rem,2.4vh,1.6rem);
background:rgba(237,232,224,.09);
overflow:hidden;
}
.scr__fill{
position:relative;
display:block;
height:100%;
width:0; /* o JS anima até o percentual real */
background:var(--brass);
transition:width 1.4s var(--ease);
}
/* remate claro na ponta do preenchimento, marcando onde a barra parou */
.scr__fill::after{
content:'';
position:absolute;
right:0; top:0; bottom:0;
width:3px;
background:#FFFFFF;
opacity:.6;
}
.scr__lbl{
display:flex; align-items:baseline;
justify-content:space-between; gap:1rem;
margin:.85rem 0 0;
font-family:var(--f-mono);
font-size:.66rem; letter-spacing:.1em;
color:var(--bone-dim);
}
.scr__lbl b{
font-weight:400;
color:var(--brass);
font-variant-numeric:tabular-nums;
}
/* ---------- quebra por tipologia ---------- */
.scr__ls{
list-style:none;
margin:clamp(1.5rem,3.5vh,2.2rem) 0 0;
padding:clamp(1.5rem,3.5vh,2.2rem) 0 0;
border-top:1px solid var(--bone-faint);
}
.scr__li{
display:flex; align-items:baseline;
justify-content:space-between; gap:1rem;
padding:.7rem 0;
font-size:.9rem;
border-bottom:1px solid var(--bone-faint);
}
/* o último item recua da direita: é onde o chanfro do canto avança */
.scr__li:last-child{
border-bottom:none;
padding-bottom:0;
padding-right:clamp(1.5rem,3vw,2.5rem);
}
.scr__li span{ color:var(--bone-dim); }
.scr__li b{
font-weight:400;
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.1em;
text-transform:uppercase;
color:var(--bone);
}
/* enquanto os dados não chegam, o valor fica em registro de pendência */
.scr__li b[data-todo]{
color:var(--bone-dim);
opacity:.7;
}
/* =========================================================
11 · FAQ
========================================================= */
.faq{
--bone: #1A1C1A;
--bone-dim: rgba(26,28,26,.66);
--bone-faint: rgba(26,28,26,.14);
position:relative;
background:#FFFFFF;
color:var(--bone);
padding:clamp(3.5rem,8vh,6rem) var(--pad);
}
.faq__in{
max-width:900px;
margin-inline:auto;
}
.faq__hd{
margin-bottom:clamp(2.5rem,5.5vh,4rem);
text-align:center;
}
.faq__h2{
margin:0;
max-width:22ch;
margin-inline:auto;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.8rem,3vw+.2vh,2.8rem);
line-height:1.1; letter-spacing:-.024em;
}
/* ---------- sanfona ---------- */
/* cada item é um : abre só no clique, sem hover nem estado inicial */
.faq__i{
border-top:1px solid var(--bone-faint);
}
.faq__i:last-child{ border-bottom:1px solid var(--bone-faint); }
/* a pergunta é o : marcador nativo removido, layout próprio */
.faq__q{
display:flex; align-items:flex-start;
justify-content:space-between; gap:clamp(1rem,2.5vw,2rem);
padding:clamp(1.15rem,2.6vh,1.6rem) 0;
cursor:pointer;
list-style:none;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.02rem,1.45vw,1.25rem);
line-height:1.35; letter-spacing:-.01em;
color:var(--bone);
transition:color .35s var(--ease);
}
/* o triângulo padrão do summary sai nos dois motores */
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:''; }
.faq__q:hover{ color:var(--brass); }
.faq__q:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
/* ícone de mais/menos desenhado em CSS: dois traços cruzados */
.faq__ic{
position:relative;
flex:none;
width:14px; height:14px;
margin-top:.35em;
}
.faq__ic::before,
.faq__ic::after{
content:'';
position:absolute;
left:50%; top:50%;
background:var(--brass);
transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.faq__ic::before{
width:14px; height:1.5px;
transform:translate(-50%,-50%);
}
.faq__ic::after{
width:1.5px; height:14px;
transform:translate(-50%,-50%);
}
/* aberto: a barra vertical some e o mais vira menos */
.faq__i[open] .faq__ic::after{
opacity:0;
transform:translate(-50%,-50%) rotate(90deg);
}
/* ---------- resposta ---------- */
/* a altura é animada pelo JS via grid-template-rows, que interpola de 0fr a
1fr — o único jeito de animar altura automática sem medir em pixels */
.faq__a{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .45s var(--ease);
}
.faq__i[open] .faq__a{ grid-template-rows:1fr; }
/* durante o fechamento o [open] ainda está no elemento: esta classe é o que
dispara a transição de volta antes de o JS remover o atributo */
.faq__i.is-closing .faq__a{ grid-template-rows:0fr; }
.faq__a > p{
overflow:hidden;
margin:0;
padding-right:clamp(1.5rem,4vw,3.5rem);
font-size:clamp(.9rem,1.02vw,1rem);
line-height:1.75; color:var(--bone-dim);
}
/* o padding inferior só existe quando aberto, senão soma altura no fechado */
.faq__i[open] .faq__a > p{ padding-bottom:clamp(1.15rem,2.6vh,1.6rem); }
.faq__i.is-closing .faq__a > p{ padding-bottom:0; }
/* o ícone volta a ser "mais" junto com o conteúdo recolhendo */
.faq__i.is-closing .faq__ic::after{ opacity:1; transform:translate(-50%,-50%); }
.faq__a b{ font-weight:500; color:var(--bone); }
/* =========================================================
12 · FECHAMENTO
========================================================= */
/* tela cheia: a seção fecha a página ocupando toda a janela, com o conteúdo
centrado na vertical. min-height (e não height) para o conteúdo poder
crescer se a janela for muito baixa, em vez de ser cortado. */
.end{
position:relative;
min-height:100svh;
display:flex;
align-items:center;
padding:clamp(3rem,7vh,5rem) var(--pad);
/* folga no fim: a onda do rodapé sobe sobre esta faixa */
padding-bottom:calc(clamp(3rem,7vh,5rem) + clamp(52px,7vw,104px));
background:var(--ink);
color:var(--bone);
overflow:hidden;
isolation:isolate;
}
.end__bg{
position:absolute; inset:0;
z-index:-2;
overflow:hidden;
}
.end__bg img{
width:100%; height:100%;
object-fit:cover;
object-position:center;
}
/* a foto é diurna e clara — piscina, céu e mar. Um véu uniforme mataria
justamente o que ela tem de bom, então o escurecimento é localizado:
um halo radial concentrado atrás do texto, e um véu chapado bem leve só
para segurar o contraste mínimo no resto do quadro. */
.end__veil{
position:absolute; inset:0;
z-index:-1;
/* véu uniforme, sem halo: a densidade sobe um pouco em relação ao que era
a borda do gradiente, para o texto manter contraste sem a mancha atrás */
background:rgba(11,12,11,.62);
}
/* ---- facho de luz ----
uma faixa clara inclinada que atravessa a seção quando ela entra em vista.
Fica acima do véu e abaixo do conteúdo, então lê como luz sobre a foto.
É larga e de baixa opacidade: o efeito é de claridade passando, não de
um objeto branco cruzando a tela. */
.end__ray{
position:absolute;
top:-60%; bottom:-60%;
left:-40%;
width:36%;
/* entre o véu (-1) e o conteúdo (auto): a luz cai sobre a foto já
escurecida, mas nunca sobre o texto */
z-index:0;
pointer-events:none;
/* anula a transição do reveal genérico: quem anima aqui é o @keyframes */
transition:none;
background:linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,.05) 30%,
rgba(255,255,255,.13) 50%,
rgba(255,255,255,.05) 70%,
transparent 100%);
transform:rotate(18deg);
opacity:0;
}
/* a classe entra pelo observer de [data-io]: a luz varre da esquerda para a
direita uma vez, e o opacity a acende e apaga nas pontas do percurso.
O seletor repete [data-io] para vencer a regra genérica de reveal, que
força transform:none e mataria a rotação e a varredura. */
.end__ray[data-io].is-in{
opacity:0;
animation:endRay 2.6s cubic-bezier(.35,.1,.25,1) .35s forwards;
}
@keyframes endRay{
0% { transform:translateX(0) rotate(18deg); opacity:0; }
18% { opacity:1; }
82% { opacity:1; }
100% { transform:translateX(340%) rotate(18deg); opacity:0; }
}
/* o segundo facho é mais estreito e corre atrás do primeiro, dando a
leitura de dois feixes paralelos em vez de uma faixa só */
.end__ray--b{
width:18%;
left:-58%;
}
.end__ray--b[data-io].is-in{ animation-delay:.62s; }
/* como o .end é flex, o item precisa de largura própria para o auto
das margens centralizá-lo horizontalmente */
.end__in{
position:relative;
z-index:1; /* acima dos fachos, que ficam em 0 */
width:100%;
max-width:var(--wrap);
margin-inline:auto;
text-align:center;
}
/* a medida fica nos blocos de texto, não no contêiner: assim a headline
pode crescer sem ser limitada pela largura de leitura dos parágrafos */
.end__copy,
.end__st,
.end__cta{
max-width:62ch;
margin-inline:auto;
}
.end__h2{
margin:0 0 clamp(1.4rem,3vh,2rem);
font-family:var(--f-disp); font-weight:400;
font-size:clamp(2.4rem,4.8vw+.2vh,4.6rem);
line-height:1.02; letter-spacing:-.03em;
}
.end__h2 em{ display:block; font-style:italic; color:var(--brass); }
.end__p{
margin:0 0 clamp(1rem,2.2vh,1.4rem);
font-size:clamp(.92rem,1.05vw,1.02rem);
line-height:1.75; color:#FFFFFF;
}
.end__p:last-child{ margin-bottom:0; }
/* ---------- os três números ---------- */
.end__st{
list-style:none;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1.2rem,3vw,2.5rem);
/* o auto lateral mantém a centralização definida no bloco acima */
margin:clamp(2.5rem,5.5vh,4rem) auto;
padding:clamp(1.8rem,4vh,2.4rem) 0;
border-top:1px solid var(--bone-faint);
border-bottom:1px solid var(--bone-faint);
}
.end__s{
display:flex; flex-direction:column;
align-items:center; gap:.6rem;
}
.end__sl{
font-family:var(--f-mono);
font-size:.6rem; letter-spacing:.16em;
text-transform:uppercase; color:#FFFFFF;
}
.end__sv{
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.15rem,1.8vw,1.5rem);
line-height:1.2; letter-spacing:-.015em;
color:var(--brass);
}
/* o complemento fica menor que o número, mas na mesma cor cheia */
.end__sv i{
display:block;
margin-top:.3rem;
font-style:normal;
font-family:var(--f-body);
font-size:.62rem; letter-spacing:.04em;
color:#FFFFFF;
}
/* ---------- CTA ---------- */
.end__cta{ display:grid; justify-items:center; }
/* botão na identidade do WhatsApp, sem efeito de hover: o ::after do .btn
(o preenchimento que sobe) é neutralizado, e cor e borda ficam fixas */
.end__btn{
--bg:#128C7E;
--fg:#FFFFFF;
max-width:100%;
}
.end__btn::after{ display:none; }
.end__btn:hover{
color:var(--fg);
border-color:var(--bg);
}
/* o ícone do WhatsApp é preenchido, ao contrário das setas traçadas do .btn.
O seletor precisa de .btn junto: `.btn svg` tem especificidade 0,1,1 e
venceria uma regra de classe sozinha, mantendo fill:none — que é o que
deixava o ícone invisível. */
.btn .end__wa{
width:1.35em; height:1.35em;
flex:none;
fill:currentColor;
stroke:none;
stroke-width:0;
}
/* o ícone abre a linha: sem o deslocamento que a seta padrão tem no hover */
.btn:hover .end__wa{ transform:none; }
.end__note{
margin:clamp(1rem,2.2vh,1.4rem) 0 0;
max-width:46ch;
font-family:var(--f-mono);
font-size:.62rem; letter-spacing:.06em;
line-height:1.6; color:#FFFFFF;
}
/* =========================================================
NAVEGAÇÃO LATERAL EM DOTS
========================================================= */
/* fica fora do fluxo, colada à direita e centrada na altura da janela.
nasce oculta e só entra quando o hero sai de vista (classe posta pelo JS) */
.dots{
position:fixed;
right:clamp(.9rem,1.8vw,1.6rem);
top:50%;
z-index:60;
display:flex; flex-direction:column;
align-items:flex-end;
gap:clamp(.45rem,1vh,.7rem);
opacity:0;
visibility:hidden;
transform:translateY(-50%) translateX(12px);
transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.dots.is-on{
opacity:1;
visibility:visible;
transform:translateY(-50%) translateX(0);
}
/* cada item é só o rótulo da seção. O item encolhe até a largura do texto,
então não sobra área invisível capturando cliques sobre o conteúdo. */
.dots__i{
display:flex;
align-items:center;
outline-offset:3px;
text-decoration:none;
}
/* o número sai do visual: o rótulo ocupa o lugar dele */
.dots__n{ display:none; }
/* ---- nome da seção ----
é o único conteúdo do item: a navegação é uma coluna de rótulos,
sempre visível, alinhada à direita da tela. */
.dots__t{
padding:.42em .7em;
background:rgba(11,12,11,.92);
color:var(--bone-dim);
border:1px solid rgba(237,232,224,.14);
border-radius:3px;
backdrop-filter:blur(6px);
font-family:var(--f-mono);
font-size:.6rem;
letter-spacing:.09em;
text-transform:uppercase;
line-height:1;
white-space:nowrap;
transition:color .35s var(--ease), border-color .35s var(--ease),
background .35s var(--ease);
}
.dots__i:hover .dots__t,
.dots__i:focus-visible .dots__t{
color:var(--bone);
border-color:var(--brass);
}
/* seção corrente: preenchido, o rótulo inverte para o fundo escuro */
.dots__i.is-on .dots__t{
background:var(--brass);
border-color:var(--brass);
color:var(--ink);
}
/* =========================================================
13 · BOTÕES FLUTUANTES
========================================================= */
.fab{
position:fixed;
right:clamp(1rem,2.5vw,1.75rem);
bottom:clamp(1rem,2.5vw,1.75rem);
z-index:150; /* acima dos dots (60), abaixo do popup (300) */
display:flex;
flex-direction:column;
align-items:center;
gap:.7rem;
}
.fab__b{
position:relative;
display:grid; place-items:center;
width:52px; height:52px;
border:0; border-radius:50%;
cursor:pointer;
text-decoration:none;
transition:transform .35s var(--ease), background .35s var(--ease),
box-shadow .35s var(--ease), opacity .4s var(--ease),
visibility .4s;
}
.fab__b:hover{ transform:translateY(-2px); }
.fab__b:active{ transform:translateY(0); }
/* ---- voltar ao topo ----
nasce oculto: só entra quando o hero sai de vista, como os dots */
.fab__b--top{
background:rgba(11,12,11,.72);
border:1px solid var(--bone-faint);
backdrop-filter:blur(6px);
color:var(--bone-dim);
opacity:0;
visibility:hidden;
transform:translateY(8px);
}
.fab__b--top.is-on{
opacity:1;
visibility:visible;
transform:none;
}
.fab__b--top.is-on:hover{
color:var(--bone);
border-color:var(--brass);
transform:translateY(-2px);
}
.fab__b--top svg{
width:19px; height:19px;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
/* ---- WhatsApp: abre o formulário ---- */
.fab__b--wa{
background:#25D366;
color:#FFFFFF;
box-shadow:0 6px 20px rgba(37,211,102,.34);
}
.fab__b--wa:hover{
background:#1DAF54;
box-shadow:0 8px 26px rgba(37,211,102,.45);
}
.fab__b--wa svg{ width:25px; height:25px; fill:currentColor; }
/* ---- efeito de borda: dois anéis que expandem e desvanecem ----
o botão isola o próprio contexto para o anel poder ficar atrás dele
sem sumir sob o fundo da página. O segundo anel sai com metade do
ciclo de atraso, então o pulso é contínuo. */
.fab__b--wa{ isolation:isolate; }
.fab__b--wa::before,
.fab__b--wa::after{
content:'';
position:absolute; inset:0;
z-index:-1;
border-radius:50%;
border:2px solid #25D366;
animation:fabRing 2.4s cubic-bezier(.2,.6,.35,1) infinite;
pointer-events:none;
}
.fab__b--wa::after{ animation-delay:1.2s; }
@keyframes fabRing{
0% { transform:scale(1); opacity:.75; }
70% { transform:scale(1.75); opacity:0; }
100% { transform:scale(1.75); opacity:0; }
}
/* telas estreitas: os botões encolhem para não competir com o conteúdo */
@media (max-width:600px){
.fab__b{ width:48px; height:48px; }
.fab__b--wa svg{ width:23px; height:23px; }
.fab__b--top svg{ width:17px; height:17px; }
}
/* sem movimento: o anel não pulsa */
@media (prefers-reduced-motion:reduce){
.fab__b--wa::before,
.fab__b--wa::after{ animation:none; opacity:0; }
}
/* =========================================================
14 · POPUP DE CONVERSÃO
========================================================= */
.pop{
/* a caixa é clara: as cores do formulário invertem em relação
ao resto da página, que é escura */
--pop-bg: #FFFFFF;
--pop-ink: #14161C;
--pop-dim: rgba(20,22,28,.62);
--pop-line: rgba(20,22,28,.16);
--pop-bad: #C0392B;
--wa: #25D366;
--wa-dark: #1DAF54;
position:fixed; inset:0;
z-index:300; /* acima do lightbox (200) e do header */
display:grid;
place-items:center;
padding:clamp(.75rem,3vh,2rem) clamp(.75rem,3vw,2rem);
opacity:0;
transition:opacity .4s var(--ease);
overflow-y:auto;
}
.pop[hidden]{ display:none; }
.pop.is-on{ opacity:1; }
.pop__veil{
position:absolute; inset:0;
background:rgba(8,9,12,.72);
backdrop-filter:blur(5px);
}
/* a caixa sobe alguns pixels ao entrar: o movimento curto evita
a sensação de salto sem atrasar quem só quer preencher */
.pop__box{
position:relative;
width:100%;
max-width:440px;
max-height:calc(100vh - clamp(1.5rem,6vh,4rem));
overflow-y:auto;
background:var(--pop-bg);
border-radius:8px;
padding:clamp(1.5rem,4vw,2.25rem);
color:var(--pop-ink);
box-shadow:0 24px 60px rgba(0,0,0,.4);
transform:translateY(14px) scale(.985);
transition:transform .45s var(--ease);
}
.pop.is-on .pop__box{ transform:none; }
.pop__x{
position:absolute;
top:.6rem; right:.6rem;
width:38px; height:38px;
display:grid; place-items:center;
background:none; border:0;
color:var(--pop-dim);
cursor:pointer;
transition:color .35s var(--ease);
}
.pop__x:hover{ color:var(--pop-ink); }
.pop__x svg{
width:17px; height:17px;
fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
}
/* ---------- cabeçalho ---------- */
.pop__hd{ margin-bottom:clamp(1.25rem,3vh,1.75rem); padding-right:2rem; }
.pop__t{
margin:0;
font-family:var(--f-disp); font-weight:400;
font-size:clamp(1.3rem,3.6vw,1.6rem);
line-height:1.15; letter-spacing:-.015em;
color:var(--pop-ink);
}
/* progresso das duas etapas */
.pop__steps{
display:flex; gap:.4rem;
margin-top:clamp(.9rem,2vh,1.2rem);
}
.pop__step{
height:2px; flex:1;
background:var(--pop-line);
transition:background .45s var(--ease);
}
.pop__step.is-on{ background:var(--wa); }
/* ---------- painéis das etapas ----------
a etapa que entra desliza de leve na direção da navegação */
.pop__pane{
display:grid;
gap:clamp(.85rem,2vh,1.15rem);
animation:popPane .4s var(--ease) both;
}
.pop__pane[hidden]{ display:none; }
@keyframes popPane{
from{ opacity:0; transform:translateX(10px); }
to { opacity:1; transform:none; }
}
/* ---------- campos ---------- */
.fld{ display:grid; gap:.4rem; }
.fld__l{
font-family:var(--f-mono);
font-size:.66rem; letter-spacing:.09em;
text-transform:uppercase;
color:var(--pop-dim);
}
.fld__i{
width:100%;
padding:.8em .9em;
background:#FFFFFF;
border:1px solid var(--pop-line);
border-radius:4px;
color:var(--pop-ink);
font-family:var(--f-body);
font-size:.94rem;
transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fld__i::placeholder{ color:rgba(20,22,28,.34); }
.fld__i:focus{
outline:none;
border-color:var(--wa);
box-shadow:0 0 0 3px rgba(37,211,102,.16);
}
/* campo reprovado na validação */
.fld__i.is-bad{ border-color:var(--pop-bad); }
.fld__i.is-bad:focus{ box-shadow:0 0 0 3px rgba(192,57,43,.14); }
.fld__e{
margin:0;
font-size:.72rem;
color:var(--pop-bad);
}
/* o select nativo some e a seta vem do wrapper, para o controle
ficar igual em todos os navegadores */
.fld__sel{ position:relative; display:grid; }
.fld__sel select{
appearance:none; -webkit-appearance:none;
padding-right:2.4em;
cursor:pointer;
}
/* enquanto nada foi escolhido, o texto fica no tom de placeholder */
.fld__sel select:invalid{ color:rgba(20,22,28,.34); }
.fld__sel option{ color:var(--pop-ink); }
.fld__sel svg{
position:absolute;
right:.85em; top:50%;
transform:translateY(-50%);
width:15px; height:15px;
fill:none; stroke:var(--pop-dim); stroke-width:1.6;
pointer-events:none;
}
/* ---------- botões ----------
o CTA é verde WhatsApp: o mesmo canal em que a resposta chega */
.pop__go{
width:100%;
margin-top:.35rem;
display:flex; align-items:center; justify-content:center; gap:.6em;
padding:1.05em 1.6em;
background:var(--wa);
border:0; border-radius:4px;
color:#FFFFFF;
font-family:var(--f-body); font-weight:500;
font-size:.95rem; letter-spacing:.01em;
cursor:pointer;
transition:background .3s var(--ease), transform .3s var(--ease);
}
.pop__go:hover{ background:var(--wa-dark); }
.pop__go:active{ transform:translateY(1px); }
.pop__go::after{ display:none; } /* neutraliza o preenchimento do .btn */
.pop__go svg{
width:17px; height:17px;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.pop__go[disabled]{ opacity:.55; pointer-events:none; }
.pop__back{
justify-self:center;
background:none; border:0;
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.09em;
text-transform:uppercase;
color:var(--pop-dim);
cursor:pointer;
transition:color .3s var(--ease);
}
.pop__back:hover{ color:var(--pop-ink); }
/* ---------- mensagens de sistema ---------- */
.pop__msg{
margin:1rem 0 0;
font-size:.82rem;
line-height:1.6;
border-radius:4px;
}
.pop__msg[hidden]{ display:none; }
.pop__msg--err{
padding:.7em .85em;
background:rgba(192,57,43,.07);
border:1px solid rgba(192,57,43,.3);
color:var(--pop-bad);
}
.pop__msg--ok{
padding:.7em .85em;
background:rgba(37,211,102,.1);
border:1px solid rgba(37,211,102,.4);
color:#127A3B;
}
.pop__msg--srv{
display:grid; gap:.7rem; justify-items:start;
padding:.85em;
background:rgba(192,57,43,.07);
border:1px solid rgba(192,57,43,.3);
color:var(--pop-bad);
}
.pop__msg--srv p{ margin:0; }
/* o botão de socorro repete o verde, em corpo menor */
.pop__wa{
display:inline-flex; align-items:center; gap:.5em;
padding:.7em 1.1em;
background:var(--wa);
border:0; border-radius:4px;
color:#FFFFFF;
font-family:var(--f-body); font-weight:500;
font-size:.8rem;
text-decoration:none;
transition:background .3s var(--ease);
}
.pop__wa:hover{ background:var(--wa-dark); }
.pop__wa::after{ display:none; }
.pop__wa svg{ width:14px; height:14px; }
/* o cadeado fica à direita da frase, no mesmo tom do texto */
.pop__note{
margin:1rem 0 0;
display:flex; align-items:center; justify-content:center; gap:.45em;
font-size:.7rem;
line-height:1.5;
color:var(--pop-dim);
text-align:center;
}
.pop__note svg{
width:12px; height:12px;
flex:none;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
/* o fundo da página não rola enquanto o popup está aberto */
body.is-pop{ overflow:hidden; }
/* =========================================================
15 · RODAPÉ
========================================================= */
.ft{
--navy:#0E1A2B; /* fundo da seção */
--navy-line:rgba(237,232,224,.14);
--wave-h:clamp(52px,7vw,104px);
position:relative;
color:var(--bone);
/* sem fundo próprio: quem pinta o navy é a onda, que sobe pela
seção de cima, mais o bloco sólido abaixo dela */
/* o -1px faz o bloco sólido subir sob a onda: sem a sobreposição,
alturas fracionárias deixam um fio da seção de cima na emenda */
background:linear-gradient(var(--navy),var(--navy))
0 calc(var(--wave-h) - 1px) / 100% calc(100% - var(--wave-h) + 1px)
no-repeat;
/* a onda ocupa a faixa do topo; o conteúdo começa depois dela */
padding:calc(var(--wave-h) + clamp(1.5rem,3vw,2.5rem))
var(--pad)
clamp(2rem,4vw,3rem);
/* sobe sobre a seção de contato pela altura exata da onda */
margin-top:calc(var(--wave-h) * -1);
z-index:3;
}
/* ---- divisor: a onda das seções anteriores, espelhada na vertical ----
o mesmo path das seções 02/03; scaleY(-1) vira a curva para cima,
e o navy do rodapé avança sobre a seção de contato */
.ft__wave{
position:absolute;
left:0; right:0;
top:0;
width:100%;
height:var(--wave-h);
display:block;
transform:scaleY(-1);
pointer-events:none;
}
.ft__wave path{ fill:var(--navy); }
/* ---- seta "voltar ao topo", dentro do corpo da onda ----
a onda está espelhada, então a barriga que antes ficava embaixo
agora aponta para cima; a seta senta nela, em x=720/1440 = 50% */
.ft__top{
position:absolute;
left:50%;
top:calc(var(--wave-h) * 0.42);
transform:translateX(-50%);
z-index:4;
display:grid; place-items:center;
width:44px; height:44px;
margin-top:-22px;
}
.ft__top svg{
width:22px; height:14px;
fill:none; stroke:var(--bone);
stroke-width:1.5;
stroke-linecap:square; stroke-linejoin:miter;
animation:ftTop 2.1s cubic-bezier(.65,0,.35,1) infinite;
transition:stroke .4s var(--ease);
}
.ft__top:hover svg{ stroke:var(--brass); }
/* pulso ascendente: parte de baixo, sobe e some para cima */
@keyframes ftTop{
0% { opacity:0; transform:translateY(8px); }
25% { opacity:1; transform:translateY(1px); }
60% { opacity:.9; transform:translateY(-5px); }
85%,
100% { opacity:0; transform:translateY(-8px); }
}
/* onda mais rasa em telas estreitas: a seta e o curso do pulso encolhem junto */
@media (max-width:1024px){
.ft__top{ width:32px; height:32px; margin-top:-16px; }
.ft__top svg{ width:17px; height:11px; animation-name:ftTopSm; }
}
@keyframes ftTopSm{
0% { opacity:0; transform:translateY(5px); }
25% { opacity:1; transform:translateY(1px); }
60% { opacity:.9; transform:translateY(-3px); }
85%,
100% { opacity:0; transform:translateY(-5px); }
}
.ft__in{
position:relative;
z-index:1;
max-width:1100px;
margin-inline:auto;
}
/* ---------- as três colunas ---------- */
.ft__cols{
display:grid;
grid-template-columns:1.1fr 1fr 1fr;
gap:clamp(1.75rem,4vw,3.25rem);
align-items:start;
}
/* rótulo comum a todas as colunas */
.ft__lb{
display:block;
font-family:var(--f-mono);
font-size:.68rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--brass);
margin-bottom:1.1rem;
}
/* ---- coluna 1: mosaico de logotipos ----
a marca do empreendimento ocupa a faixa inteira; as duas
incorporadoras dividem a linha de baixo. o filtro achata todas
em branco puro, para que convivam sem disputar peso entre si */
.ft__logos{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(1rem,2vw,1.5rem);
}
.ft__lg{
display:grid;
place-items:center stretch; /* a imagem ocupa a célula e se alinha por dentro */
padding:.25rem 0;
}
/* a célula larga: linha inteira do mosaico */
.ft__lg--w{ grid-column:1 / -1; }
.ft__lg img{
width:100%; /* ocupa a célula: o desenho encosta na esquerda */
height:38px;
object-fit:contain;
object-position:left center;
filter:brightness(0) invert(1);
opacity:.82;
}
/* o Soul é muito largo: a medida limita o quanto ele cresce na linha cheia */
.ft__lg--w img{ height:52px; max-width:190px; }
/* ---------- coluna 2: endereço ---------- */
.ft__adr{
display:flex;
align-items:flex-start;
gap:.7rem;
font-style:normal;
color:var(--bone-dim);
max-width:28ch;
}
.ft__pin{
width:18px; height:18px;
flex:none;
margin-top:.15rem;
color:var(--brass);
}
/* cada linha do endereço em sua própria linha visual */
.ft__adr-t{ display:grid; gap:.35rem; }
.ft__adr-t span{ font-size:.92rem; line-height:1.55; }
.ft__adr-t span:last-child{ color:rgba(237,232,224,.45); }
/* ---------- coluna 3: redes, só os ícones, centralizada ---------- */
.ft__col--soc{ text-align:center; }
.ft__soc{
list-style:none;
display:flex;
justify-content:center;
gap:.35rem;
}
.ft__soc a{
display:grid;
place-items:center;
width:44px; height:44px; /* alvo de toque, mesmo sem moldura visível */
color:var(--bone-dim);
transition:color .35s var(--ease);
}
.ft__soc a:hover{ color:var(--brass); }
.ft__soc svg{ width:22px; height:22px; }
/* ---------- disclaimer: régua na largura da seção ---------- */
.ft__dsc{
margin-top:clamp(2rem,4vw,3rem);
padding-top:clamp(1.5rem,3vw,2rem);
border-top:1px solid var(--navy-line);
}
.ft__dsc p{
font-size:.74rem;
line-height:1.75;
color:rgba(237,232,224,.45);
text-align:center;
}
/* ---------- links legais ---------- */
.ft__lgl{
margin-top:clamp(1.5rem,3vw,2rem);
padding-top:1.25rem;
border-top:1px solid var(--navy-line);
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.75rem clamp(1.5rem,4vw,2.75rem);
}
.ft__lgl a{
font-family:var(--f-mono);
font-size:.72rem;
letter-spacing:.06em;
color:var(--bone-dim);
text-decoration:none;
transition:color .35s var(--ease);
}
.ft__lgl a:hover{ color:var(--brass); }
/* =========================================================
RESPONSIVO
========================================================= */
/* ---- ≤1180px: cards ganham respiro ---- */
@media (max-width:1180px){
.hero__in{ grid-template-columns:minmax(0,1fr) minmax(0,.72fr); }
}
/* ---- ≤980px: empilha, nav vira drawer ---- */
@media (max-width:980px){
:root{ --hd-h:70px; }
/* a navegação em dots sai: a tela é estreita e o drawer já cobre o papel */
.dots{ display:none; }
/* tipologias: dados e plantas empilham */
/* tipologias: dados e plantas empilham, com a planta em cima.
No HTML a ficha vem antes do carrossel (a ordem certa no desktop, que
lê da esquerda para a direita). Empilhado, essa mesma ordem jogaria a
planta para baixo da ficha e do CTA — a imagem é o que identifica a
tipologia e precisa abrir o painel. O order inverte só a pintura; a
ordem do DOM continua a mesma, então leitor de tela e navegação por
tab seguem lendo ficha e depois carrossel. */
/* no mobile o painel empilha nesta ordem: planta → ficha → CTA.
A planta sobe com order:-1; o CTA já é o último filho da .tip__data,
então fica naturalmente no pé do painel, abaixo da imagem e da ficha. */
.tip__grid{ grid-template-columns:1fr; }
.tip__plans{ order:-1; }
/* largura cheia: em coluna única o botão ancora o painel melhor do que
o width:fit-content centralizado do desktop */
.tip__cta{
width:100%;
justify-content:center;
margin-top:clamp(1.2rem,3vh,1.8rem);
}
/* em coluna única a planta ocupa a largura toda: o teto de 78vh do
desktop deixaria a imagem alta demais e empurraria a ficha inteira
para fora da tela. 52vh mantém o desenho legível e a ficha à vista. */
.tip__plan img{ max-height:52vh; }
/* mercado: texto e tabela empilham, e os dois remates também */
.mkt__cols{ grid-template-columns:1fr; }
.mkt__cards{ grid-template-columns:1fr; }
/* escassez: texto e painel empilham */
.scr__in{ grid-template-columns:1fr; }
/* fechamento: os três números empilham em coluna única */
.end__st{
grid-template-columns:1fr;
gap:clamp(1.2rem,3vh,1.8rem);
}
.end__s{
flex-direction:row;
align-items:baseline;
justify-content:space-between;
gap:1rem;
text-align:left;
}
.end__sv i{ display:inline; margin:0 0 0 .4em; }
/* o CTA sai: sobram marca e hambúrguer, e o menu vive na cortina */
.hd__in{ grid-template-columns:1fr auto; }
.hd__cta{ display:none; }
.hd__burger{ grid-column:2; }
/* empilha: o texto deixa de ser coluna e o mosaico ocupa a largura toda */
/* empilhado, o conjunto não cabe em uma tela: a seção volta a crescer
com o conteúdo e o mosaico retoma a proporção por largura */
.lzr{ height:auto; display:block; padding-block:clamp(3.5rem,8vh,6rem); }
.lzr__in{ grid-template-columns:1fr; max-height:none; }
.lzr__art{ height:auto; display:block; }
.amb{ aspect-ratio:auto; max-height:none; grid-template-rows:none; }
.amb__z{ aspect-ratio:4/3; }
.amb{ margin-top:clamp(1.8rem,4vh,2.6rem); }
/* MOBILE — hero em tela única.
A altura é travada no que sobra da viewport abaixo do header, e o
conteúdo se distribui dentro dela: o hero começa e termina na mesma
tela, sem rolagem. 100svh (small viewport height) é o valor certo
aqui — com 100vh a barra do navegador móvel entra na conta e o rodapé
do hero fica escondido atrás dela. */
.hero{
min-height:calc(100svh - var(--hd-h));
height:calc(100svh - var(--hd-h));
max-height:none;
overflow:hidden;
}
.hero__bg{ background-position:72% center; }
/* overlay passa a ser vertical no mobile: texto sobre a base escura */
.hero__veil{
background:
linear-gradient(90deg, rgba(11,12,11,.93) 0%, rgba(11,12,11,.72) 55%, rgba(11,12,11,.5) 100%),
linear-gradient(to top, rgba(11,12,11,.94) 12%, rgba(11,12,11,.35) 65%);
}
/* o conteúdo ocupa a altura travada acima: as linhas se acomodam ao que
há de espaço em vez de somarem altura fixa e estourarem a tela. Os
gaps e paddings viram vh para encolherem junto em telas baixas. */
.hero__in{
grid-template-columns:1fr;
grid-template-rows:auto auto;
/* start, não space-between: com space-between a sobra de altura da tela
era distribuída entre as duas linhas e reabria o vão entre o botão e
os números, ignorando o gap abaixo. Agora o gap manda, e a folga que
sobrar fica embaixo, onde estão a onda e o mouse. */
align-content:start;
height:100%;
/* metade do respiro anterior (era clamp(1rem,3vh,2rem)): o botão fecha
o bloco de texto e a lista de números vem logo abaixo, sem o vão que
separava os dois em blocos distantes */
gap:clamp(.5rem,1.5vh,1rem);
padding-top:clamp(1rem,3vh,2rem);
padding-bottom:clamp(3rem,7vh,4.5rem);
}
.hero__copy{ max-width:none; }
.hero__side{ justify-self:stretch; max-width:none; }
/* os respiros do bloco de texto viram vh para cederem altura junto com
a tela, em vez de somarem rem fixos que estouram o quadro */
.hero__h1{
margin-bottom:clamp(.6rem,1.8vh,1.1rem);
font-size:clamp(1.7rem,6.4vw,2.4rem);
}
.hero__desc{ margin-bottom:clamp(.9rem,2.4vh,1.5rem); }
.hero__desc p{ font-size:.86rem; line-height:1.5; }
/* o texto de apoio é o que mais custa altura: no mobile fica só o
parágrafo em destaque, que carrega o argumento sozinho */
.hero__desc p:not(.hero__desc--em){ display:none; }
.hero__desc--em{ margin-bottom:0; }
/* MOBILE — cada número em uma linha só, com a descrição ao lado.
Empilhado (valor em cima, descrição embaixo) cada stat gasta duas
linhas e os três não cabem na tela junto com o título e o CTA. */
.stat{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:1rem;
padding:clamp(.5rem,1.4vh,.8rem) 0;
}
.stat__v{
margin:0;
flex:none;
font-size:clamp(1.05rem,4.2vw,1.35rem);
}
/* a descrição toma o espaço restante e alinha à direita, formando uma
coluna de leitura contra os números à esquerda */
.stat__l{
max-width:none;
text-align:right;
font-size:.72rem;
line-height:1.35;
}
/* comparativo empilha e volta a rolar */
.cmp{
min-height:auto;
padding:clamp(3.5rem,8vh,5.5rem) var(--pad);
}
.cmp__in{ grid-template-columns:1fr; gap:clamp(2.25rem,5vh,3rem); }
.cmp__copy,
.cmp__table{ padding-right:0; padding-left:0; }
/* sem colunas laterais, a arte vira textura de fundo da seção */
.cmp__art{
position:absolute;
inset:0;
z-index:-1;
}
.cmp__art::after{ display:none; }
.cmp__art img{
height:auto; width:150%;
opacity:.06;
}
.cmp__p{ max-width:none; }
.fin{ grid-template-columns:1fr; gap:clamp(.5rem,1.5vh,1rem); }
.fin__i{ padding:1.35rem 1.1rem; }
.fin__i[data-io]:nth-child(2),
.fin__i[data-io]:nth-child(3){ transition-delay:0s; }
.cmp__cta{ width:100%; }
/* produto: as duas colunas empilham */
.prd__row{
grid-template-columns:1fr;
gap:clamp(2rem,5vh,3rem);
}
/* coluna estreita: uma imagem por vez, com setas ativas */
.gal{ --gal-n:1; }
/* rodapé: os logotipos ficam na linha de cima, ocupando as duas colunas */
.ft__cols{ grid-template-columns:1fr 1fr; gap:2.25rem; }
.ft__col--logos{ grid-column:1 / -1; }
/* as três marcas lado a lado, numa linha só. No desktop o mosaico é de
duas colunas com o Soul ocupando a linha inteira (ele é bem mais largo
que os outros dois); aqui as três dividem a linha em partes iguais. */
.ft__logos{
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:center;
gap:clamp(.75rem,3vw,1.25rem);
}
/* o Soul deixa de ocupar a linha cheia e vira só mais uma das três */
.ft__lg--w{ grid-column:auto; }
/* na linha compartilhada as três precisam da mesma altura, senão o Soul
domina a faixa. As marcas centram na própria célula em vez de encostar
à esquerda, para a linha ficar equilibrada. */
.ft__lg img{ height:30px; object-position:center; }
.ft__lg--w img{ height:30px; max-width:100%; }
}
/* ---- ≤600px: ajustes finos de tipografia ---- */
@media (max-width:600px){
:root{ --pad:1.25rem; }
/* no celular a grade fica em 2 colunas */
.amb{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* em 2 colunas as vagas cairiam no meio da grade e só abririam buraco:
a composição dos cantos só faz sentido no desenho de 3 colunas */
.amb__i--gap{ display:none; }
/* rodapé: coluna única e leitura corrida */
.ft__cols{ grid-template-columns:1fr; gap:2rem; }
.ft__lb{ margin-bottom:.85rem; }
/* as três seguem na mesma linha (regra de ≤980px): a altura cai junto
para caberem na largura do celular, e o Soul continua nivelado com as
outras duas em vez de voltar a crescer */
.ft__lg img{ height:22px; }
.ft__lg--w img{ height:22px; max-width:100%; }
.ft__adr{ max-width:none; }
.ft__dsc p{ font-size:.72rem; }
.ft__lgl{ gap:.6rem 1.25rem; }
/* tipologias: abas empilhadas e ficha em coluna única */
.tip__bar{ grid-template-columns:1fr; }
/* empilhada, a marca da aba corrente vira uma barra lateral */
.tip__tab::after{
left:0; right:auto; top:0; bottom:0;
width:2px; height:auto;
transform:scaleY(0); transform-origin:top;
}
.tip__tab[aria-selected="true"]::after{ transform:scaleY(1); }
/* em tela estreita rótulo e valor podem não caber lado a lado: quebram
em duas linhas, com o valor voltando a alinhar à esquerda */
.tip__spec{ flex-wrap:wrap; gap:.15rem .8rem; }
.tip__spec dt{ flex:1 0 100%; }
.tip__spec dd{ text-align:left; }
/* no celular ocupa a largura toda: anula o fit-content do desktop */
.tip__cta{ width:100%; max-width:none; justify-content:center; }
/* em 2 colunas a legenda fica estreita: encolhe sem quebrar o número */
.amb__t{ font-size:.7rem; gap:.45em; }
/* a tabela de confiança empilha: o ponto perde a largura mínima e o
nowrap, que só fazem sentido com as duas colunas lado a lado */
.who__tbl tbody th{
width:auto;
white-space:normal;
padding-right:0;
}
.tag{
font-size:.62rem;
letter-spacing:.06em;
line-height:1.35;
text-align:left;
}
.hero__h1{
font-size:clamp(1.95rem,8.4vw,2.7rem);
line-height:1.08;
letter-spacing:-.018em;
}
.hero__desc p{ font-size:.9rem; line-height:1.68; }
.hero__desc--em{ padding-left:.95em; }
.btn--lg{
width:100%;
justify-content:space-between;
font-size:.88rem;
}
/* no popup o ícone acompanha o texto, em vez de ir para a borda */
.pop__go{ justify-content:center; }
.stat{ padding-left:0; }
.stat:hover{ padding-left:0; }
.stat__v{ font-size:1.85rem; white-space:normal; }
/* tabela vira blocos empilhados */
.tbl,
.tbl thead,
.tbl tbody,
.tbl tr,
.tbl th,
.tbl td{ display:block; width:100%; }
.tbl thead{
position:absolute;
width:1px; height:1px;
overflow:hidden; clip-path:inset(50%);
white-space:nowrap;
}
.tbl tbody tr{
padding:1.15rem 0;
border-bottom:1px solid var(--bone-faint);
}
.tbl tbody tr:last-child{ border-bottom:none; }
.tbl tbody th{
padding:0 0 .85rem;
border-bottom:none;
font-family:var(--f-mono);
font-size:.68rem; letter-spacing:.13em;
text-transform:uppercase; color:var(--bone);
}
.tbl tbody td{
display:flex; align-items:baseline;
justify-content:space-between; gap:1rem;
padding:.4rem 0;
text-align:right;
border-bottom:none;
white-space:normal;
}
.tbl tbody td::before{
content:attr(data-l);
flex:none;
font-size:.7rem; letter-spacing:.04em;
color:rgba(26,28,26,.55);
text-align:left;
}
.tbl tbody td.is-soul::before{ color:var(--brass); }
.tbl tbody td b{ margin-left:.4em; }
/* totais sem borda superior própria no formato bloco */
.tbl__sum th,
.tbl__sum td{
border-top:none;
padding-top:0; padding-bottom:.4rem;
}
.tbl__sum th{ padding-bottom:.85rem; }
.tbl__sum td{ font-size:1.05rem; }
.tbl tbody tr:not(.tbl__sum):hover th,
.tbl tbody tr:not(.tbl__sum):hover td{ background:none; }
/* produto: sem escalonamento dos reveals */
.dif__i[data-io]:nth-child(n){ transition-delay:0s; }
.dif__i:hover{ padding-left:0; }
.prd__p{ font-size:.9rem; }
/* lightbox: setas descem para a base, imagem ocupa a largura */
.lb{
grid-template-columns:1fr;
justify-items:center;
}
.lb__fig{ grid-column:1; grid-row:1; }
.lb__ar{ grid-row:2; width:44px; }
.lb__ar--p{ grid-column:1; justify-self:start; }
.lb__ar--n{ grid-column:1; justify-self:end; }
.lb__img{ max-height:calc(100vh - clamp(11rem,26vh,14rem)); }
.scroll{ bottom:1.3rem; gap:.45rem; }
/* alcança os dois usos do componente: o da seção 04 e o da onda do hero */
.scroll__mouse{ width:23px; height:37px; border-radius:12px; }
@keyframes wheelRun{
0% { transform:translateY(0); opacity:0; }
18% { opacity:1; }
60% { transform:translateY(12px); opacity:0; }
100% { transform:translateY(12px); opacity:0; }
}
}
/* ---- telas muito baixas em paisagem ---- */
@media (max-height:560px) and (orientation:landscape){
/* aqui a tela única não cabe: em paisagem baixa o hero volta a crescer
com o conteúdo e a rolar, senão o texto ficaria ilegível de tão
comprimido. Solta a altura travada da regra de mobile. */
.hero{ min-height:auto; height:auto; overflow:visible; }
.hero__in{ height:auto; }
/* com a altura solta, a ficha volta a empilhar valor sobre descrição */
.stat{ display:block; }
.stat__l{ text-align:left; }
/* espaço para a onda não encostar no conteúdo em telas baixas */
.hero__in{ padding-bottom:4rem; }
.hero__wave{ height:40px; }
/* o mouse acompanha a onda encolhida; a folga aperta, que a altura é curta */
.wave__mouse{ --wave-h:40px; --wave-gap:.5rem; }
.cmp{ min-height:auto; padding-block:3.5rem; }
}
/* telas baixas: a seção única precisaria comprimir demais */
@media (min-width:981px) and (max-height:700px){
.cmp{ min-height:auto; padding-block:clamp(3rem,7vh,4.5rem); }
}
/* ---- acessibilidade: movimento reduzido ---- */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
[data-rv], [data-io], .scroll,
.hero__side .stat{ opacity:1; transform:none; filter:none; }
.wave__arw svg,
.ft__top svg{ opacity:1; transform:none; }
/* sem movimento: as fotos do 8º pavimento aparecem direto */
.amb--fade .amb__z img{ opacity:1; transform:none; }
/* os cantos das galerias acendem sem deslizar */
.gal__z::before, .gal__z::after,
.amb__z::before, .amb__i::before{ transform:none; }
/* a linha da tabela de confiança acende sem aproximar */
.who__tbl tbody tr:hover th > span,
.who__tbl tbody tr:hover td > span{ transform:none; }
/* os fachos de luz não varrem a seção final */
.end__ray{ display:none; }
/* os links da cortina aparecem sem escalonamento */
.hd--open .hd__lk{ animation:none; opacity:1; transform:none; }
.cmp__art::after{ display:none; }
.cmp__art img{ opacity:.14; }
}
/* =========================================================
WEB VITALS — custo de renderização fora da tela
O navegador pinta, faz layout e calcula estilo de toda a página, mesmo
do que ninguém está vendo. content-visibility:auto adia esse trabalho
até a seção chegar perto da viewport — é o que mais reduz o tempo de
bloqueio (TBT) e o primeiro paint numa página longa como esta.
O contain-intrinsic-size é obrigatório junto: dá ao navegador uma altura
estimada para a seção adiada. Sem ele a barra de rolagem salta enquanto
as seções são medidas de verdade, e o CLS dispara.
O hero e o comparativo ficam de fora de propósito: estão na primeira
tela e adiá-los só atrasaria o LCP.
========================================================= */
.prd,
.lzr,
.plt,
.tip,
.vid,
.mkt,
.who,
.scr,
.faq,
.end{
content-visibility:auto;
contain-intrinsic-size:auto 100vh;
}
/* O rodapé é curto: uma estimativa menor evita reservar tela demais. */
.ft{
content-visibility:auto;
contain-intrinsic-size:auto 600px;
}
|