/* ============================================================
HOME IMERSIVA
============================================================ */
/* ── HERO — cinematográfico (imagem + gradiente) ──
Dois controles principais, fáceis de trocar:
1) a IMAGEM → o ![]()
no index.html (+ o
do ). A rotação puxa os ambientes do catálogo automaticamente.
2) o GRADIENTE → a regra .hero-scrim (mexa só nela). */
.hero {
position:relative; min-height:100svh; display:flex; align-items:center;
overflow:hidden; background:var(--azul-900); color:#fff;
padding-bottom:clamp(70px,11vh,128px);
}
.hero-fundo { position:absolute; inset:0; z-index:0; }
/* Camadas do carrossel em tela cheia: empilhadas; só a .is-active aparece
(crossfade) com um zoom lento (Ken Burns). */
.hero-fundo-img {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transform:scale(1.06); transform-origin:62% 42%;
will-change:opacity, transform; transition:opacity 1.5s ease;
}
.hero-fundo-img.is-active { opacity:1; animation:heroKen 11s ease-out both; }
@keyframes heroKen { from { transform:scale(1.06); } to { transform:scale(1.16); } }
/* ★ GRADIENTE DA HERO — escurece a esquerda (texto) e a base (legenda/onda),
deixando o ambiente brilhar no centro/direita; leve foco atrás do Darinho. */
.hero-scrim {
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
/* horizontal: escurece a esquerda (texto) e some até a foto aparecer inteira à direita */
linear-gradient(100deg, rgba(4,18,46,.92) 0%, rgba(6,32,90,.80) 24%, rgba(6,32,90,.40) 50%, rgba(6,32,90,.12) 74%, rgba(6,32,90,0) 100%),
/* base mais densa: assenta legenda/Darinho e casa com a onda branca */
linear-gradient(to top, rgba(4,18,46,.74) 0%, rgba(4,18,46,.14) 36%, transparent 60%),
/* foco suave atrás do Darinho */
radial-gradient(54% 64% at 88% 104%, rgba(4,18,46,.5), transparent 70%);
}
.hero-grid {
position:relative; z-index:2; width:100%;
padding-top:calc(var(--h-header) + 24px);
display:grid; grid-template-columns:minmax(0,1fr); align-items:center;
}
.hero-conteudo { position:relative; z-index:3; max-width:600px; }
/* DESKTOP: textos do início — eyebrow + título grande (--fs-display) + subtítulo.
No mobile (≤860px) o eyebrow e o sub são ocultados e o título encolhe. */
.hero-eyebrow {
display:inline-flex; align-items:center; gap:var(--sp-2);
font-size:var(--fs-2xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:rgba(255,255,255,.85); margin-bottom:var(--sp-5); animation:subirFade .6s .05s both;
}
.hero-eyebrow::before { content:""; width:26px; height:2px; background:var(--amarelo); }
.hero-titulo { color:#fff; font-size:var(--fs-display); font-weight:800; line-height:1.02; letter-spacing:-.025em; text-shadow:0 1px 18px rgba(4,18,46,.5); animation:subirFade .7s .12s both; }
/* barra amarela só no mobile — no desktop quem traz o acento é o eyebrow */
.hero-titulo::before { content:""; display:none; width:clamp(44px,5vw,60px); height:4px; border-radius:2px; background:var(--amarelo); margin-bottom:clamp(16px,2vw,22px); }
.hero-titulo span { display:block; }
.hero-sub { max-width:46ch; font-size:var(--fs-lead); line-height:1.5; color:rgba(255,255,255,.84); margin-top:var(--sp-4); text-shadow:0 1px 12px rgba(4,18,46,.45); animation:subirFade .7s .34s both; }
.hero-acoes { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); animation:subirFade .7s .3s both; }
/* botão de vidro fica sobre a foto (que muda no carrossel): fundo azul-fosco da
marca + borda branca garantem leitura do texto branco em qualquer trecho claro */
.hero-acoes .btn-vidro { background:rgba(6,32,90,.42); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); text-shadow:0 1px 8px rgba(4,18,46,.55); }
.hero-acoes .btn-vidro:hover { background:rgba(6,32,90,.56); }
/* Legenda do ambiente atual (muda a cada slide, leva ao produto) — espelha .ambh-badge/.ambh-tag */
.hero-legenda {
display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-6); max-width:100%;
padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border-radius:var(--r-full);
background:rgba(255,255,255,.94); color:var(--azul-900);
box-shadow:var(--sombra-lg); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
font-size:var(--fs-xs); line-height:1; opacity:0; animation:subirFade .7s .5s both;
transition:opacity .5s ease, transform var(--t), box-shadow var(--t);
}
.hero-legenda.is-pronta { opacity:1; }
.hero-legenda:hover { transform:translateY(-2px); }
.hero-legenda-badge { font-size:var(--fs-2xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--azul-900); background:var(--amarelo); padding:var(--sp-1) var(--sp-2); border-radius:var(--r-full); white-space:nowrap; }
.hero-legenda-nome { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-legenda svg { flex-shrink:0; color:var(--azul-700); }
.hero-legenda.is-trocando .hero-legenda-nome { animation:legTroca .55s ease; }
@keyframes legTroca { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
/* Darinho — coadjuvante, ancorado na base à direita, encaixado pela onda */
.hero-mascote { position:absolute; right:clamp(0px,4vw,72px); bottom:0; z-index:2; width:clamp(240px,32vw,420px); height:clamp(360px,66vh,600px); pointer-events:none; }
.hero-darinho { position:absolute; right:0; bottom:0; height:100%; width:100%; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 24px 32px rgba(4,12,30,.6)); animation:subirFade .9s .5s both; }
/* Onda branca de transição p/ a seção branca seguinte */
.hero-onda { position:absolute; left:0; right:0; bottom:-1px; z-index:4; height:clamp(56px,9vh,112px); line-height:0; pointer-events:none; }
.hero-onda svg { width:100%; height:100%; display:block; }
@media (max-width:860px){
/* Empilha: texto no topo (centralizado), Darinho centralizado na base */
.hero { flex-direction:column; justify-content:flex-start; align-items:stretch; min-height:auto; padding-bottom:0; }
.hero-grid { padding-top:calc(var(--h-header) + 30px); text-align:center; }
.hero-conteudo { max-width:none; }
/* mobile mantém o atual: sem eyebrow/sub, título menor, com a barra amarela */
.hero-eyebrow, .hero-sub { display:none; }
.hero-titulo { font-size:clamp(2.4rem,6vw,4.4rem); margin-inline:auto; }
.hero-titulo span { white-space:nowrap; }
.hero-titulo::before { display:block; margin-inline:auto; }
.hero-acoes { justify-content:center; }
/* gradiente vertical no mobile (texto em cima, foto/Darinho embaixo) */
.hero-scrim { background:linear-gradient(180deg, rgba(4,18,46,.9) 0%, rgba(6,32,90,.5) 30%, rgba(6,32,90,.44) 58%, rgba(4,18,46,.9) 100%); }
.hero-mascote { position:relative; right:auto; left:auto; margin-top:clamp(16px,4vh,32px); width:100%; height:clamp(300px,46vh,430px); align-self:center; }
}
@media (max-width:600px){
.hero-grid { padding-top:calc(var(--h-header) + 22px); }
.hero-titulo { font-size:clamp(2.1rem,8.5vw,2.9rem); }
/* botões lado a lado, sem quebrar pra baixo */
.hero-acoes { flex-wrap:nowrap; gap:var(--sp-2); }
.hero-acoes .btn { flex:1 1 0; min-width:0; padding:var(--sp-4) var(--sp-3); font-size:1rem; }
.hero-acoes .btn svg { display:none; }
.hero-legenda { font-size:var(--fs-xs); }
.hero-mascote { height:clamp(290px,48vh,400px); }
}
@media (prefers-reduced-motion: reduce){
.hero-fundo-img { transform:none; }
.hero-fundo-img.is-active { animation:none; }
}
/* ── FAIXA DE BENEFÍCIOS (ticker que corre em loop) ── */
.faixa-beneficios { background:#fff; border-bottom:1px solid var(--borda); overflow:hidden; }
/* fade nas bordas: os itens surgem/somem suaves em vez de cortar seco */
.faixa-mascara {
overflow:hidden;
-webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.faixa-track {
display:flex; align-items:center; width:max-content;
padding-block:clamp(13px,1.7vw,18px); will-change:transform;
}
.faixa-grupo { display:inline-flex; align-items:center; }
.faixa-item {
display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap;
font-weight:700; font-size:var(--fs-sm); color:var(--azul-800);
}
.faixa-item svg { flex-shrink:0; color:var(--azul-600); }
/* divisor: losango amarelo antes de cada item (acento da marca) */
.faixa-item::before {
content:""; flex-shrink:0; width:6px; height:6px; border-radius:1px;
margin:0 clamp(22px,3vw,42px); background:var(--amarelo); transform:rotate(45deg);
}
@media (max-width:600px){
.faixa-item { font-size:var(--fs-xs); }
}
/* ── COLEÇÕES — carrossel 3D (coverflow) ── */
/* overflow:hidden contém os cards 3D que recuam pras laterais (evita scroll lateral no iOS) */
.colecoes { padding-bottom:clamp(16px,3vw,40px); overflow:hidden; }
.colecoes .secao-cabecalho.centro { margin-bottom:clamp(20px,3vw,32px); }
.cat3d { user-select:none; }
.cat3d-stage {
position:relative; height:clamp(290px,66vw,400px);
perspective:1100px; perspective-origin:50% 42%;
margin-bottom:var(--sp-3); touch-action:pan-y; cursor:grab;
}
.cat3d-stage:active { cursor:grabbing; }
.cat3d-ring {
position:absolute; inset:0; margin:auto;
width:clamp(190px,56vw,260px); height:clamp(250px,72vw,340px);
transform-style:preserve-3d; will-change:transform;
}
.cat3d-card {
position:absolute; inset:0; border-radius:var(--r-lg); overflow:hidden; color:#fff;
box-shadow:var(--sombra-lg); backface-visibility:hidden;
opacity:.62; filter:saturate(.95) brightness(.86);
transition:opacity .5s var(--t-suave), filter .5s var(--t-suave), box-shadow .5s var(--t-suave);
}
.cat3d-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.cat3d-card-grad { position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,12,30,0) 34%, rgba(4,12,30,.88) 100%); }
.cat3d-card-info { position:absolute; left:0; right:0; bottom:0; padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-1); }
.cat3d-card-info strong { color:#fff; font-size:1.35rem; letter-spacing:-.01em; line-height:1.2; }
.cat3d-card-link { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:700; color:var(--amarelo); opacity:0; transform:translateY(8px); transition:opacity .45s ease .1s, transform .45s ease .1s; }
.cat3d-card-ativo { opacity:1; filter:none; box-shadow:var(--sombra-xl); }
.cat3d-card-ativo .cat3d-card-link { opacity:1; transform:none; }
.cat3d-ctrl { display:flex; align-items:center; justify-content:center; gap:16px; }
.cat3d-nav { width:44px; height:44px; border-radius:var(--r-full); background:#fff; color:var(--azul-800); box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center; transition:transform var(--t), background var(--t), color var(--t); }
.cat3d-nav:hover { background:var(--azul-800); color:#fff; transform:translateY(-2px); }
.cat3d-dots { display:flex; align-items:center; gap:8px; }
.cat3d-dot { width:8px; height:8px; border-radius:var(--r-full); background:var(--azul-200); transition:all var(--t); }
.cat3d-dot-ativo { background:var(--azul-700); width:22px; border-radius:6px; }
/* Desktop: cards horizontais (paisagem) — preenchem as laterais.
O raio do anel recalcula pela largura do card, então os cards laterais
se espalham pros cantos e somem os espaços vazios. */
@media (min-width:700px){
.cat3d-stage { height:392px; }
.cat3d-ring { width:520px; height:330px; }
.cat3d-card-info { padding:22px; }
.cat3d-card-info strong { font-size:1.6rem; }
}
@media (min-width:1024px){
.cat3d-stage { height:485px; perspective:2000px; }
.cat3d-ring { width:740px; height:450px; }
.cat3d-card-info { padding:30px; }
.cat3d-card-info strong { font-size:2.1rem; }
.cat3d-card-link { font-size:.95rem; }
}
@media (min-width:1400px){
.cat3d-stage { height:545px; }
.cat3d-ring { width:880px; height:520px; }
}
/* ── VITRINE ── */
.vitrine { background:var(--azul-50); }
.vitrine-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); margin-bottom:var(--sp-7); flex-wrap:wrap; }
/* ── AMBIENTES REAIS (galeria por categoria) ── */
.ambientes-home { background:#fff; }
.ambh-cats { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; margin-bottom:var(--sp-6); }
.ambh-cat { padding:var(--sp-3) var(--sp-5); border-radius:var(--r-sm); border:1.5px solid var(--borda); background:#fff; font-weight:600; font-size:var(--fs-sm); color:var(--texto-suave); transition:all var(--t); }
.ambh-cat:hover { border-color:var(--azul-400); color:var(--azul-700); }
.ambh-cat-ativa { background:var(--azul-800); color:#fff; border-color:var(--azul-800); }
.ambh-wrap { display:grid; grid-template-columns:1.55fr 1fr; gap:var(--sp-6); align-items:stretch; }
.ambh-stage { position:relative; min-width:0; margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; min-height:300px; box-shadow:var(--sombra-lg); background:var(--azul-50); cursor:zoom-in; }
.ambh-stage img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes ambFade { from { opacity:.25; transform:scale(1.015); } to { opacity:1; transform:none; } }
.ambh-trocando { animation:ambFade .4s ease; }
.ambh-badge { position:absolute; top:var(--sp-4); left:var(--sp-4); z-index:2; font-size:var(--fs-2xs); font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:rgba(13,21,38,.62); color:#fff; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); backdrop-filter:blur(6px); }
.ambh-tag { position:absolute; left:var(--sp-4); bottom:var(--sp-4); z-index:2; display:flex; flex-direction:column; gap:var(--sp-1); background:rgba(255,255,255,.92); backdrop-filter:blur(6px); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm); box-shadow:var(--sombra); }
.ambh-tag strong { font-size:var(--fs-sm); color:var(--azul-900); line-height:1.1; }
.ambh-tag span { font-size:var(--fs-xs); font-weight:700; color:var(--azul-700); }
.ambh-zoom { position:absolute; top:14px; right:14px; z-index:2; width:42px; height:42px; border-radius:var(--r-full); background:rgba(255,255,255,.92); color:var(--azul-800); display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra); transition:transform var(--t); }
.ambh-zoom:hover { transform:scale(1.08); }
.ambh-lado { display:flex; flex-direction:column; gap:var(--sp-4); background:var(--azul-50); border:1.5px solid var(--borda); border-radius:var(--r-lg); padding:var(--sp-5); }
.ambh-tit { display:block; font-size:var(--fs-2xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave); }
.ambh-swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:var(--sp-2); }
.ambh-swatch { aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden; border:2.5px solid transparent; box-shadow:var(--sombra-sm); background:#fff; transition:transform var(--t), border-color var(--t); }
.ambh-swatch img { width:100%; height:100%; object-fit:cover; }
.ambh-swatch:hover { transform:translateY(-2px); }
.ambh-swatch-ativa { border-color:var(--azul-600); }
#ambh-ver { margin-top:auto; }
@media (max-width:820px){
.ambh-wrap { grid-template-columns:1fr; }
/* sem aspect-ratio+min-height (forçavam largura de 400px e estouravam a tela);
altura controlada por vw, largura segue a coluna */
.ambh-stage { aspect-ratio:auto; min-height:0; height:clamp(220px,60vw,330px); }
}
/* ── COMO FUNCIONA ── */
.passos { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); counter-reset:p; }
.passo {
position:relative; padding:var(--sp-7) var(--sp-6); background:#fff; border:1.5px solid var(--borda);
border-radius:var(--r-lg); box-shadow:var(--sombra-sm); overflow:hidden;
}
.passo::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad-dourado); }
.passo-num { font-family:var(--ff-display); font-size:2.5rem; font-weight:800; color:var(--azul-400); line-height:1; }
.passo h3 { margin:var(--sp-3) 0 var(--sp-2); }
.passo p { color:var(--texto-suave); font-size:var(--fs-sm); line-height:1.6; }
/* ── CTA FINAL ── */
.cta-final { text-align:center; padding-inline:clamp(16px,4vw,32px); }
.cta-inner {
max-width:760px; margin-inline:auto; padding:clamp(36px,5vw,60px) clamp(24px,4vw,48px);
background:linear-gradient(160deg,#0a3d91,#06205a); color:#fff; border-radius:var(--r-xl);
box-shadow:var(--sombra-xl); position:relative;
}
.cta-darinho { width:96px; height:auto; margin:0 auto var(--sp-2); }
.cta-final h2 { color:#fff; }
.cta-final p { color:rgba(255,255,255,.82); font-size:var(--fs-lead); line-height:1.5; max-width:46ch; margin:var(--sp-4) auto var(--sp-6); }
.cta-final .btn-wa { margin-inline:auto; }
/* ── CALCULADORA (entrada na home) ── */
.home-calc { background:var(--azul-50); }
.home-calc-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,56px); align-items:center; }
.home-calc-texto h2 { margin:var(--sp-2) 0 var(--sp-3); }
.home-calc-texto p { color:var(--texto-suave); font-size:var(--fs-lead); line-height:1.5; max-width:46ch; margin-bottom:var(--sp-6); }
.home-calc-visual { display:flex; justify-content:center; }
.home-calc-card { width:100%; max-width:300px; background:#fff; border:1.5px solid var(--borda); border-radius:var(--r-lg); box-shadow:var(--sombra-lg); padding:var(--sp-6); }
.home-calc-card-rotulo { font-size:var(--fs-2xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave); }
.home-calc-card-area { display:block; font-family:var(--ff-display); font-size:2.5rem; font-weight:800; color:var(--azul-800); line-height:1.1; margin:var(--sp-1) 0 var(--sp-4); }
.home-calc-card-linha { display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--tinta-2); padding:var(--sp-2) 0; border-top:1px solid var(--borda); }
.home-calc-card-linha span:last-child { font-weight:700; color:var(--azul-800); }
.home-calc-card-total { display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:2px solid var(--borda); }
.home-calc-card-total > span:first-child { font-weight:700; }
.home-calc-card-total strong { font-family:var(--ff-display); font-size:1.4rem; color:var(--azul-800); }
/* ── FAQ ── */
.faq { background:#fff; }
.faq-lista { display:flex; flex-direction:column; gap:var(--sp-3); }
.faq-item { background:#fff; border:1.5px solid var(--borda); border-radius:var(--r); overflow:hidden; transition:border-color var(--t), box-shadow var(--t); }
.faq-item[open] { border-color:var(--azul-400); box-shadow:var(--sombra-sm); }
.faq-item summary { cursor:pointer; list-style:none; padding:var(--sp-5); font-weight:700; font-size:var(--fs-md); color:var(--texto); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.5rem; line-height:1; font-weight:400; color:var(--azul-600); flex-shrink:0; transition:transform var(--t); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-resp { padding:0 var(--sp-5) var(--sp-5); color:var(--texto-suave); font-size:var(--fs-sm); line-height:1.6; }
.faq-resp a { color:var(--azul-700); font-weight:600; }
.faq-resp a:hover { text-decoration:underline; }
/* ── RESPONSIVO ── */
@media (max-width:760px){
.visu-grid { grid-template-columns:1fr; }
.passos { grid-template-columns:1fr; }
.home-calc-inner { grid-template-columns:1fr; }
}
@media (max-width:480px){
.hero-acoes .btn { padding:var(--sp-4) var(--sp-2); font-size:var(--fs-sm); }
/* CTA longo pode quebrar linha em telas estreitas (não estoura) */
.cta-final .btn-wa { white-space:normal; }
}
/* ── Depoimentos de clientes (renderizados só se houver dados reais) ── */
.depo-grade { display:grid; gap:clamp(16px,2.5vw,24px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.depo-card { background:#fff; border:1px solid var(--borda); border-radius:var(--r-lg); padding:clamp(20px,2.5vw,28px); box-shadow:var(--sombra-sm); display:flex; flex-direction:column; gap:10px; }
.depo-estrelas { display:inline-flex; color:#f5b301; }
.depo-texto { margin:0; color:var(--texto); line-height:1.65; font-size:1.02rem; }
.depo-nome { color:var(--texto-suave); font-weight:600; font-size:.9rem; }