/* Prime Higienização de Cortinas — estilos compartilhados entre as páginas.
O layout de cada página fica em estilos inline (como no protótipo); este
arquivo cobre o que estilo inline não resolve: fundo com textura, sistema
de cards com profundidade, motion lento e "luxuoso", e estados de :hover. */
/* ── Cabeçalho: links no desktop, hambúrguer no mobile ─────────────────── */
.nav-links {
display: flex;
align-items: center;
gap: clamp(20px, 2.6vw, 34px);
}
.nav-link {
position: relative;
font-size: .92rem;
font-weight: 600;
color: #1B304F;
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #EA8F0E;
transition: width .35s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover { color: #B8710A; }
.nav-link:hover::after { width: 100%; }
.nav-toggle {
display: none;
position: relative;
width: 48px;
height: 48px;
flex: none;
border: none;
border-radius: 10px;
background: #1B304F;
cursor: pointer;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -2px 4px rgba(0,0,0,.15) inset, 0 10px 20px -10px rgba(27,48,79,.4);
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.nav-toggle:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 4px rgba(0,0,0,.16) inset, 0 18px 30px -12px rgba(27,48,79,.45); }
.nav-toggle:active { transform: translateY(0); }
.nav-toggle-bar {
width: 20px;
height: 2px;
border-radius: 2px;
background: #fff;
transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s cubic-bezier(.16,1,.3,1);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
#site-header { position: fixed; }
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: 1px;
background: rgba(255,255,255,.98);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid #E6E3DC;
box-shadow: 0 24px 48px -24px rgba(27,48,79,.3);
max-height: 0;
overflow: hidden;
opacity: 0;
/* Devagar e em duas etapas (altura, depois opacidade) — o mesmo
motion "lento e luxuoso" do resto do site, pra abrir/fechar de
forma fluida em vez de num corte seco. */
transition: max-height .65s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1);
}
.nav-links.is-open { max-height: 420px; opacity: 1; }
.nav-link {
padding: 18px clamp(16px,4vw,44px);
border-top: 1px solid #E6E3DC;
}
.nav-link::after { display: none; }
.nav-link:hover, .nav-link:active { background: rgba(234,143,14,.06); color: #B8710A; }
.nav-toggle { display: flex; }
.nav-wa-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav-links, .nav-toggle-bar, .nav-toggle { transition: none; }
}
/* Grades de 2 colunas com proporção fixa (texto maior de um lado, mídia
menor do outro) — abaixo de 760px sempre empilham em 1 coluna só,
porque minmax() sozinho não força isso quando as duas faixas somadas
ainda cabem (ou pior, "cabem" mas comprimem o conteúdo lateralmente). */
@media (max-width: 760px) {
.two-col-grid { grid-template-columns: 1fr !important; }
/* Na seção "Aqui não entra máquina", a foto tem order:2 pra ficar do
lado esquerdo no grid do desktop — mas com o grid virando 1 coluna
no mobile, esse order manteria a foto DEPOIS do texto. Aqui força
a foto pra cima, antes de qualquer texto, só nessa largura. */
.solution-photo { order: -1 !important; }
}
:root {
--navy: #1B304F;
--navy-deep: #142540;
--gold: #EA8F0E;
--gold-text: #B8710A;
--bg: #FFFFFF;
--surface: #F7F6F3;
--border: #E6E3DC;
--text: #1B304F;
--text-muted: #222222;
/* curva de desaceleração suave — a base do motion "devagar e elegante" */
--ease-lux: cubic-bezier(.16,1,.3,1);
--dur-slow: .65s;
--dur-med: .42s;
}
html {
overflow-x: hidden;
/* O cabeçalho é fixo e cobre 73px do topo. Sem isto, toda âncora
(#como-funciona, #beneficios, #depoimentos, #contato) para com o
começo da seção escondido atrás dele. scroll-padding-top no
elemento que rola resolve todas de uma vez, sem precisar de
scroll-margin em cada destino. */
scroll-padding-top: clamp(88px, 12vh, 104px);
scroll-behavior: smooth;
}
/* Barra de rolagem lateral no azul-marinho da marca, com o mesmo relevo
dourado no hover que os botões usam — combina com o resto do site em
vez da barra cinza padrão do navegador. */
html {
scrollbar-width: auto;
scrollbar-color: var(--navy) var(--surface);
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-track {
background: var(--surface);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--navy), var(--navy-deep));
border-radius: 20px;
border: 4px solid var(--surface);
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--gold), #C97400);
}
body {
margin: 0;
background: #FFFFFF;
color: #1B304F;
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
font-weight: 500;
-webkit-font-smoothing: antialiased;
/* Sem overflow-x aqui de propósito: o "html" acima já clipa a rolagem
horizontal da página inteira. Se o body também define overflow
não-visible, ele vira um "container de rolagem" próprio aos olhos
do position: sticky (mesmo sem rolar de verdade, já que quem rola a
página é o html) — e qualquer sticky dentro dele (como a pilha de
cards de "Por que quase ninguém lava") trava, pinado no lugar
errado. Duplicar overflow-x:hidden aqui foi o que causava isso. */
width: 100%;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(90deg, rgba(27,48,79,.055) 0 1px, rgba(27,48,79,0) 1px 4px, rgba(27,48,79,.022) 4px 5px, rgba(27,48,79,0) 5px 34px),
repeating-linear-gradient(90deg, rgba(27,48,79,.03) 0 18px, rgba(27,48,79,0) 18px 96px),
radial-gradient(120% 55% at 50% -10%, rgba(234,143,14,.10), rgba(255,255,255,0) 62%);
}
a { color: #1B304F; text-decoration-color: rgba(234,143,14,.55); text-underline-offset: 3px; transition: color var(--dur-med) var(--ease-lux); }
a:hover { color: #B8710A; }
/* FAQ — cards com leve relevo 3D, abertura lenta e luxuosa (CSS Grid
animatable rows) e interior dourado da marca quando aberto. */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.faq-card {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(27,48,79,.05), 0 20px 40px -30px rgba(27,48,79,.18);
transition: box-shadow var(--dur-slow) var(--ease-lux), border-color var(--dur-slow) var(--ease-lux), transform var(--dur-slow) var(--ease-lux);
}
.faq-card:hover {
transform: translateY(-3px);
border-color: rgba(234,143,14,.45);
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 46px -26px rgba(27,48,79,.26);
}
.faq-card.is-open {
border-color: rgba(234,143,14,.55);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 46px -26px rgba(27,48,79,.22);
}
.faq-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 64px;
padding: 18px 22px;
font-size: 1.05rem;
font-weight: 600;
color: var(--navy);
line-height: 1.4;
transition: color var(--dur-slow) var(--ease-lux);
}
.faq-card:hover .faq-summary,
.faq-card.is-open .faq-summary { color: var(--gold-text); }
.faq-plus {
flex: none;
color: var(--gold);
font-size: 1.4rem;
line-height: 1;
transition: transform var(--dur-slow) var(--ease-lux) !important;
}
.faq-card.is-open .faq-plus { transform: rotate(45deg); }
/* Altura animada via JS (height em px, não grid-template-rows) — mais
robusto entre navegadores do que o truque de grid-rows, e permite
abrir E fechar com a mesma transição (o atributo nativo [open] some
antes da transição rodar, o que fazia o fechamento parecer brusco). */
.faq-panel {
height: 0;
overflow: hidden;
transition: height .6s var(--ease-lux);
}
.faq-panel-inner {
overflow: hidden;
background: linear-gradient(180deg, rgba(234,143,14,.16), rgba(234,143,14,.05));
transition: background .7s var(--ease-lux);
}
.faq-answer {
font-size: 1rem;
line-height: 1.75;
color: var(--text-muted);
margin: 0;
max-width: 62ch;
padding: 2px 22px 22px;
text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
.faq-panel, .faq-card, .faq-summary, .faq-plus { transition: none; }
}
/* ── Sistema de cards ─────────────────────────────────────────────────── */
.pc-card {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(27,48,79,.05), 0 20px 44px -28px rgba(27,48,79,.18);
transition: transform var(--dur-slow) var(--ease-lux),
box-shadow var(--dur-slow) var(--ease-lux),
border-color var(--dur-slow) var(--ease-lux);
will-change: transform;
}
.pc-card:hover {
transform: translateY(-8px);
box-shadow: 0 34px 64px -26px rgba(27,48,79,.28), 0 6px 18px rgba(27,48,79,.08);
border-color: rgba(234,143,14,.5);
}
.pc-card-dark {
background: var(--navy);
border-color: var(--navy);
box-shadow: 0 1px 2px rgba(20,37,64,.3), 0 20px 44px -28px rgba(20,37,64,.5);
}
.pc-card-dark:hover {
box-shadow: 0 34px 64px -22px rgba(20,37,64,.55), 0 6px 18px rgba(0,0,0,.15);
border-color: var(--gold);
}
.pc-card-feature {
box-shadow: 0 2px 4px rgba(27,48,79,.05), 0 28px 60px -30px rgba(27,48,79,.2);
}
/* Distintivo circular para ícones dentro de um card — relevo 3D leve
(brilho no topo + sombra na base) em todos os ícones do site, para dar
um acabamento estruturado e "lapidado". */
.pc-icon-badge {
position: relative;
/* Sem isto, um ::before decorativo posicionado em absolute (como a
linha conectora do "Como funciona") pinta por cima do badge mesmo
vindo antes no HTML — elementos posicionados sempre ficam acima de
conteúdo não-posicionado na pilha de camadas. */
z-index: 1;
width: 54px;
height: 54px;
flex: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(234,143,14,.08);
border: 1px solid rgba(234,143,14,.32);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 3px rgba(27,48,79,.08) inset, 0 6px 14px -8px rgba(27,48,79,.35);
transition: background var(--dur-slow) var(--ease-lux),
border-color var(--dur-slow) var(--ease-lux),
box-shadow var(--dur-slow) var(--ease-lux),
transform var(--dur-slow) var(--ease-lux);
}
.pc-card:hover .pc-icon-badge {
background: rgba(234,143,14,.16);
border-color: rgba(234,143,14,.6);
transform: scale(1.08) translateY(-2px);
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 3px rgba(27,48,79,.1) inset, 0 14px 22px -10px rgba(27,48,79,.4);
}
.pc-icon-badge-light {
background: rgba(255,255,255,.06);
border-color: rgba(234,143,14,.45);
box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 3px rgba(0,0,0,.2) inset, 0 6px 14px -8px rgba(0,0,0,.4);
}
.pc-card-dark:hover .pc-icon-badge-light {
background: rgba(234,143,14,.18);
border-color: var(--gold);
}
/* Distintivo preenchido — para seções que pedem mais cor/atenção */
.pc-icon-badge-solid {
background: var(--gold);
border-color: var(--gold);
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 5px rgba(90,68,20,.35) inset, 0 8px 16px -8px rgba(27,48,79,.45);
}
.pc-card:hover .pc-icon-badge-solid {
background: var(--navy);
border-color: var(--navy);
transform: scale(1.08) translateY(-2px);
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -3px 5px rgba(0,0,0,.3) inset, 0 14px 24px -10px rgba(27,48,79,.5);
}
/* Barra de acento no topo do card — dá presença de cor sem pesar */
.pc-card-accent { border-top: 3px solid var(--gold); }
/* "Cinco passos" e "Por que quase ninguém lava" migraram para o mesmo
carrossel vertical de ".carrossel-*" usado em "O que está incluído" —
ver esse bloco de CSS mais abaixo e initCarrossel em site.js. */
/* Molduras de imagem com profundidade (hero, fechamento) */
.pc-frame { position: relative; }
.pc-frame::before {
content: "";
position: absolute;
inset: 12px;
z-index: -1;
border-radius: 2px;
box-shadow: 0 40px 80px -32px rgba(27,48,79,.32);
}
/* ── Vídeo dentro do quadro ("Cinco passos...") ────────────────────────
Toca sozinho e sem som, como uma foto que se move. Os dois botões no
canto de baixo devolvem o controle: pausar e ligar o áudio. Ficam
pequenos e translúcidos pra não competir com a cena, e escurecem no
hover. Quem pausa fica pausado — o JS não volta a tocar sozinho. */
.pc-video-ctl {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
display: flex;
gap: 8px;
}
.pc-video-btn {
width: 38px;
height: 38px;
flex: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.5);
border-radius: 999px;
background: rgba(20,37,64,.58);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
box-shadow: 0 8px 20px -8px rgba(15,28,48,.6);
transition: background .3s var(--ease-lux), border-color .3s var(--ease-lux), transform .3s var(--ease-lux);
}
.pc-video-btn:hover {
background: rgba(20,37,64,.85);
border-color: var(--gold);
transform: scale(1.08);
}
.pc-video-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pc-video-btn svg { display: block; }
/* Cada botão carrega os dois ícones; o data-state decide qual aparece. */
.pc-video-btn [data-icon] { display: none; }
.pc-video-btn[data-state="playing"] [data-icon="pause"],
.pc-video-btn[data-state="paused"] [data-icon="play"],
.pc-video-btn[data-state="muted"] [data-icon="muted"],
.pc-video-btn[data-state="on"] [data-icon="sound"] { display: block; }
/* No celular o alvo de toque precisa ser maior que o ícone. */
@media (max-width: 700px) {
.pc-video-btn { width: 42px; height: 42px; }
}
/* Botões e links com hover — motion lento e com elevação, com um leve
relevo 3D (brilho no topo + sombra interna na base) que dá o toque
luxuoso sem alterar as cores de fundo definidas inline. */
/* Letter-spacing e peso mais firmes em todos os botões — pra não
parecerem texto solto, principalmente no mobile, onde não existe hover
pra "avisar" que aquilo é clicável antes do toque. */
.btn-primary, .btn-dark, .btn-footer, .btn-outline, .btn-gold, .btn-cookie-allow, .btn-cookie-deny {
letter-spacing: .015em;
}
.btn-primary, .btn-dark, .btn-footer, .btn-outline, .btn-cookie-allow, .btn-cookie-deny {
position: relative;
isolation: isolate;
overflow: hidden;
}
/* #wa-fab fica de fora do overflow:hidden acima: o anel pulsante (::after,
mais abaixo) precisa se expandir para fora do círculo do botão. */
#wa-fab {
position: relative;
isolation: isolate;
}
/* Brilho que desliza pela superfície do botão ao passar o mouse — o
"toque a mais" luxuoso pedido para todos os botões do site. */
.btn-primary::after, .btn-dark::after, .btn-footer::after, .btn-outline::after {
content: "";
position: absolute;
top: -20%;
left: -60%;
width: 35%;
height: 140%;
background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-18deg);
transition: left .85s var(--ease-lux);
pointer-events: none;
z-index: 3;
}
.btn-primary:hover::after, .btn-dark:hover::after, .btn-footer:hover::after, .btn-outline:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
.btn-primary::after, .btn-dark::after, .btn-footer::after, .btn-outline::after { display: none; }
}
/* Botão dourado (usado na hero mobile, sobre fundo escuro) — mantém o
tom quente no hover em vez de virar azul e sumir contra o painel. */
.btn-gold:hover { background: linear-gradient(180deg,#EA8F0E,#C97400) !important; }
.btn-primary::before, .btn-dark::before, .btn-footer::before, .btn-outline::before,
.btn-cookie-allow::before, .btn-cookie-deny::before, #wa-fab::before {
content: "";
position: absolute;
inset: 0;
/* z-index negativo: fica acima do fundo do próprio botão (que pinta no
nível mais baixo da stacking context) mas abaixo do texto/ícone, que
são conteúdo inline normal — assim o brilho nunca encobre o conteúdo. */
z-index: -1;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 48%, rgba(0,0,0,.05) 100%);
pointer-events: none;
transition: opacity var(--dur-med) var(--ease-lux);
}
.btn-primary {
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 4px rgba(0,0,0,.12) inset, 0 16px 32px -12px rgba(27,48,79,.55);
transition: background var(--dur-med) var(--ease-lux), transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.btn-primary:hover { background: #142540; transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 4px rgba(0,0,0,.14) inset, 0 26px 44px -16px rgba(27,48,79,.5); }
.btn-primary:active { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 2px rgba(0,0,0,.16) inset, 0 8px 16px -8px rgba(27,48,79,.4); }
.btn-dark {
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -2px 4px rgba(0,0,0,.15) inset, 0 12px 26px -10px rgba(27,48,79,.5);
transition: background-color var(--dur-med) var(--ease-lux), transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.btn-dark:hover { background: #142540; transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 4px rgba(0,0,0,.16) inset, 0 18px 30px -12px rgba(27,48,79,.45); }
.btn-dark:active { transform: translateY(0); }
.btn-footer {
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -2px 3px rgba(20,37,64,.08) inset, 0 18px 36px -14px rgba(0,0,0,.4);
transition: transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.btn-footer:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 -2px 3px rgba(20,37,64,.1) inset, 0 28px 48px -16px rgba(0,0,0,.42); }
.btn-footer:active { transform: translateY(-1px); }
.btn-outline {
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px -8px rgba(27,48,79,.22);
transition: border-color var(--dur-med) var(--ease-lux), transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux), background-color var(--dur-med) var(--ease-lux);
}
.btn-outline:hover { border-color: #EA8F0E; background: rgba(234,143,14,.06); transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 32px -16px rgba(27,48,79,.24); }
.btn-cookie-deny { transition: border-color var(--dur-med) var(--ease-lux); }
.btn-cookie-deny:hover { border-color: #EA8F0E; }
.btn-cookie-allow {
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 18px -10px rgba(27,48,79,.4);
transition: background-color var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.btn-cookie-allow:hover { background: #142540; }
.link-gold:hover { color: #EA8F0E; }
/* Botão flutuante do WhatsApp — sempre visível, em qualquer tela, do
carregamento da página até o fim da rolagem. Relevo 3D acentuado e
anel dourado para reforçar o toque luxuoso; ícone verde WhatsApp para
chamar a atenção instantaneamente. */
#wa-fab {
background: radial-gradient(120% 120% at 30% 22%, #22405f 0%, #1B304F 55%, #142540 100%);
box-shadow:
0 1px 0 rgba(255,255,255,.4) inset,
0 -3px 6px rgba(0,0,0,.25) inset,
0 4px 0 rgba(10,20,36,.55),
0 18px 34px -8px rgba(20,37,64,.55);
transition: transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
#wa-fab:hover {
transform: translateY(-4px) scale(1.07);
box-shadow:
0 1px 0 rgba(255,255,255,.5) inset,
0 -3px 6px rgba(0,0,0,.28) inset,
0 7px 0 rgba(10,20,36,.55),
0 26px 48px -10px rgba(20,37,64,.62);
}
#wa-fab:active { transform: translateY(-1px) scale(1.02); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -2px 4px rgba(0,0,0,.3) inset, 0 2px 0 rgba(10,20,36,.5), 0 10px 20px -8px rgba(20,37,64,.5); }
#wa-fab::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1.5px solid rgba(234,143,14,.6);
animation: wa-pulse 2.6s var(--ease-lux) infinite;
pointer-events: none;
}
@keyframes wa-pulse {
0% { transform: scale(.92); opacity: .8; }
70% { transform: scale(1.28); opacity: 0; }
100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
#wa-fab::after { animation: none; display: none; }
}
/* Placeholder de imagem — mantém o espaço reservado, pronto para receber a
foto real (ver README do pacote de design: sem fotos disponíveis ainda). */
.img-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
padding: 16px;
box-sizing: border-box;
background: #F7F6F3;
border: 1.5px dashed rgba(27,48,79,.3);
color: #222222;
}
.img-placeholder svg { opacity: .45; flex: none; }
.img-placeholder span { font-size: 13px; line-height: 1.4; max-width: 88%; }
/* Placeholder que já recebeu a foto: sem moldura tracejada nem fundo, senão
a borda fica desenhada em volta da imagem. Se a ![]()
falhar, o onerror a
remove, o :has() deixa de casar e o placeholder tracejado volta sozinho. */
.img-placeholder:has(img) { border: 0; background: none; }
/* Revelação suave ao rolar (aplicada via JS a [data-reveal]) */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity .9s var(--ease-lux), transform .9s var(--ease-lux);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
.pc-card, .btn-primary, .btn-dark, .btn-footer, .btn-outline { transition: none; }
}
@keyframes prime-spin { to { transform: rotate(360deg); } }
/* ── Hero: versão completa em desktop, foto cheia com overlay no mobile ──
IMPORTANTE: display fica só aqui (nunca inline no elemento), senão o
estilo inline vence a media query e as duas heros aparecem juntas. */
.hero-mobile { display: none; }
@media (max-width: 760px) {
.hero-desktop { display: none; }
.hero-mobile { display: block; }
}
/* ══════════════════════════════════════════════════════════════════════
"O que está incluído" — carrossel vertical com paginação por bolinhas
e setas no desktop. Loop infinito de verdade: o primeiro e o último
card reais têm clones ocultos (aria-hidden) nas pontas da pista; ao
rolar além da ponta, o JS "pula" instantaneamente para o card real
correspondente, sem salto visual perceptível — o mesmo efeito de loop
que as outras pilhas do site (.stack-*) já usam no mobile.
JS: initIncludedCarrossel em site.js.
══════════════════════════════════════════════════════════════════════ */
.carrossel-wrap {
display: flex;
align-items: stretch;
gap: 16px;
max-width: 640px;
margin: 0 auto;
}
.carrossel-track {
flex: 1;
min-width: 0;
min-height: 0;
height: clamp(500px, 80vw, 620px);
padding: clamp(56px, 7vw, 68px) 0;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
touch-action: pan-y;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
/* O card anterior/seguinte "espia" no topo e no rodapé da pista — sem
isto ele corta em linha reta bem no meio da sombra do card, o que
parece uma barra cinza flutuando. O fade some com esse corte, indo
de opaco (mostra a espiada) a transparente (funde com o fundo da
seção) nas pontas. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(40px,5vw,52px), #000 calc(100% - clamp(40px,5vw,52px)), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(40px,5vw,52px), #000 calc(100% - clamp(40px,5vw,52px)), transparent 100%);
}
.carrossel-track::-webkit-scrollbar { display: none; }
.carrossel-card {
scroll-snap-align: center;
/* Sem isto, um scroll rápido (roda do mouse ou swipe forte) pula
direto do 1º pro 3º card: o navegador só encosta no ponto de snap
mais próximo de onde o gesto terminou, sem parar nos do meio.
"always" obriga a parar em cada card, um de cada vez. */
scroll-snap-stop: always;
box-sizing: border-box;
opacity: 1;
filter: blur(0);
transform: scale(1);
transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.carrossel-card + .carrossel-card { margin-top: 14px; }
.carrossel-card.is-dimmed { opacity: .4; filter: blur(2.5px); transform: scale(.92); }
.carrossel-dots {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
width: 10px;
}
.carrossel-dot {
display: block;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--border);
border: none;
padding: 0;
cursor: pointer;
transition: background .25s, height .25s;
}
.carrossel-dot.is-active { background: var(--gold); height: 22px; }
.carrossel-nav { display: none; }
@media (min-width: 860px) {
.carrossel-wrap { gap: 20px; max-width: 720px; }
.carrossel-dots { width: 34px; gap: 10px; }
.carrossel-nav {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
border-radius: 999px;
background: #fff;
border: 1.5px solid var(--border);
color: var(--gold-text);
cursor: pointer;
transition: background .2s, border-color .2s, transform .2s, opacity .2s;
}
.carrossel-nav svg { width: 14px; height: 14px; }
.carrossel-nav:hover { border-color: var(--gold); transform: translateY(-1px); }
.carrossel-prev { margin-bottom: 4px; }
.carrossel-next { margin-top: 4px; }
}
.carrossel-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 18px 0 0;
font-size: .85rem;
font-weight: 600;
color: var(--gold-text);
filter: blur(0);
transition: opacity .6s var(--ease-lux), filter .6s var(--ease-lux);
}
.carrossel-hint svg { animation: stack-hint-bob 1.4s ease-in-out infinite; }
/* Some com um desfoque suave assim que a pessoa já mexeu no carrossel uma
vez — ela já aprendeu o gesto, então a dica não precisa mais ocupar
espaço visual. Volta a aparecer normalmente só num recarregamento da
página (não fica guardado em nenhum storage, é por design). */
.carrossel-hint.is-hidden { opacity: 0; filter: blur(4px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.carrossel-hint svg { animation: none; }
.carrossel-hint { transition: opacity .4s ease; filter: none !important; }
.carrossel-card { transition: none; }
}
/* .stack-grabber/.stack-dots (pilha antiga com arraste livre) saíram de
uso — as 3 seções que usavam esse sistema agora rodam no carrossel de
".carrossel-*" acima. A keyframe do "arraste para ver mais" continua
viva porque `.carrossel-hint svg` a reaproveita. */
@keyframes stack-hint-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* ══════════════════════════════════════════════════════════════════════
SCROLL STACKING — "os cards vão se juntando conforme rola"
Usado em "Por que quase ninguém lava a cortina?" (#pc-why-outer) e em
"Cinco passos, e você não sobe em escada nenhuma" (#como-funciona).
COMO FUNCIONA: CSS puro, sem JS e sem lib nenhuma. Cada card é
position:sticky com um `top` um pouquinho maior que o do card
anterior (--pc-stack-step por posição). Conforme a página rola, o
card da vez sobe, encosta no topo e TRAVA ali; o próximo continua
subindo e para logo abaixo dele — e assim os cards vão se juntando
numa pilha, com a beirada de cada um ainda à mostra por baixo do
seguinte. Rolando pra trás, a pilha se desfaz sozinha na ordem
inversa (é o navegador fazendo, não tem estado nenhum pra reverter).
POR QUE ISTO E NÃO O MODELO ANTIGO (seção grudada + JS movendo card
por card): aqui o conteúdo continua em fluxo normal, então a altura
da seção é a altura real do conteúdo — acabou o `height:455vh`
calculado na mão que precisava ser refeito toda vez que um texto
mudava, e acabou o card estourando a caixa de altura fixa em tela
baixa. Cada card cresce conforme o texto que tem dentro, e o efeito
funciona igual em qualquer tamanho de tela, inclusive com JS
desligado. ═══════════════════════════════════════════════════════ */
.pc-stack-sec {
position: relative;
padding: clamp(56px,8vw,96px) clamp(24px,5vw,44px) clamp(72px,10vw,120px);
}
.pc-stack-grid {
max-width: 1280px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px,5vw,44px);
/* `start`, e não `center`: com `center` o item da coluna da foto é
centralizado dentro da linha inteira do grid e não sobra folga pro
sticky correr — a foto simplesmente não gruda. */
align-items: start;
}
/* Abaixo de 860px vira uma coluna só: a foto em cima, os cards embaixo.
É isso que substituiu a antiga seção-extra só com a foto
(.pc-mobile-photo) — ela só existia porque a foto não cabia espremida
dentro dos 100vh da seção grudada; sem o pin, o próprio grid resolve. */
@media (min-width: 860px) {
.pc-stack-grid {
grid-template-columns: minmax(260px,1fr) minmax(360px,1.5fr);
gap: clamp(40px,6vw,72px);
}
}
/* Espelho da seção "Cinco passos": os cards ocupam a coluna da esquerda,
onde a leitura começa, e o vídeo vai para a direita. É feito com
grid-column, não mexendo na ordem do HTML — assim, quando o grid
colapsa numa coluna só (abaixo de 860px), o vídeo continua entrando
primeiro, em cima dos cards, como sempre foi no celular. */
/* O quadro do vídeo: 4:5 no celular (o mesmo recorte de sempre) e, no
desktop, altura livre para acompanhar a coluna dos cards. */
.pc-video-box { position: relative; aspect-ratio: 4/5; background: #F7F6F3; border-radius: 2px; overflow: hidden; }
/* Espelho da seção "Cinco passos" no desktop: os cards ocupam a coluna da
esquerda, onde a leitura começa, e o vídeo a da direita, do topo do
primeiro card até a base do último.
São três itens em duas linhas: o título sozinho em cima (linha 1) e, na
linha 2, os cards à esquerda e o vídeo à direita. É o título estar fora
da linha do vídeo que faz as duas bordas baterem com as dos cards. */
@media (min-width: 860px) {
.pc-stack-grid-flip {
grid-template-columns: minmax(360px,1.5fr) minmax(260px,1fr);
grid-template-rows: auto 1fr;
row-gap: clamp(20px,3vw,30px);
column-gap: clamp(40px,6vw,72px);
}
/* 1 / -1: o título atravessa as DUAS colunas. Antes ele morava só na
coluna dos cards, e centralizar ali o deixaria no eixo da coluna,
não no da dobra — desencontrado do conjunto cards+vídeo que ele
anuncia. Atravessando, o centro dele é o centro da seção. */
.pc-stack-grid-flip > .pc-stack-head { grid-column: 1 / -1; grid-row: 1; text-align: center; }
/* align-self:stretch anula o `align-items:start` do .pc-stack-grid para
ESTE item. Sem isso a coluna de cards fica com a própria altura de
conteúdo, o min-height:100% da .pc-steps resolve contra ela mesma e
o space-between não tem espaço nenhum para distribuir — os cards
ficam amontoados no topo em vez de acompanhar o vídeo. */
.pc-stack-grid-flip > .pc-stack-main { grid-column: 1; grid-row: 2; align-self: stretch; }
.pc-stack-grid-flip > .pc-stack-aside {
grid-column: 2;
grid-row: 2;
width: 100%; /* solta o teto de 380px: o vídeo ocupa a coluna */
/* O vídeo guarda a proporção própria (o 4/5 do .pc-video-box) em vez
de esticar. A inversão é o ponto desta dobra: antes a pilha de
cards dava a altura e o vídeo se alongava atrás dela; agora o
vídeo é a medida fixa e a coluna de cards é que se distribui
dentro dela. Sem isso os dois não teriam como "encaixar" — a
altura ficaria refém do card aberto e mudaria a cada passagem
do mouse. */
/* min-height:0 desarma a altura mínima automática do item de grid.
Sem ela, em algumas larguras o vídeo empurrava a própria linha
para mais alto que os cards e a base passava do último. */
min-height: 0;
/* align-self:start, e não stretch: o aside tem a altura natural do
vídeo e para por aí. Quem estica para acompanhar é a coluna dos
cards, do outro lado. O margin-bottom que existia aqui descontava
o ::after da .pc-stack — que esta seção não usa mais. */
align-self: start;
}
}
.pc-stack-aside { width: min(100%, 380px); margin: 0 auto; }
@media (min-width: 860px) {
/* A foto fica parada enquanto os cards se juntam do lado dela.
ATENÇÃO: o [data-reveal] (que anima com transform) fica na div de
DENTRO, nunca aqui — transform no próprio sticky, ou em qualquer
ancestral dele, mata o position:sticky sem dar erro nenhum. */
.pc-stack-aside { position: sticky; top: clamp(88px,13vh,116px); }
}
.pc-stack-head { margin: 0 0 clamp(20px,3vw,30px); }
.pc-stack {
/* --pc-stack-top: altura do cabeçalho fixo + um respiro. É onde o
primeiro card trava. O cabeçalho tem 73px e é TRANSLÚCIDO
(backdrop-filter), então não basta passar de 73: se a pilha parar
colada nele, as beiradas dos cards de trás ficam borradas por
baixo do vidro e somem. Daí o mínimo de 97px, que dá uns 24px de
folga limpa embaixo do cabeçalho mesmo na tela mais baixa.
--pc-stack-step: o quanto cada card para mais embaixo que o
anterior. É essa sobra que deixa a beirada do card de trás
aparecendo e desenha a pilha — o degrau precisa ser maior que
os 3px da borda dourada do topo do card, senão os cards de trás
viram só um monte de listra laranja em vez de parecerem cards.
o espaço entre os cards (margin-top abaixo): é o intervalo de
rolagem entre um card travar e o próximo encostar nele — quanto
maior, mais devagar a pilha se forma. */
--pc-stack-top: clamp(97px,13vh,116px);
--pc-stack-step: clamp(13px,1.8vw,19px);
/* ATENÇÃO, esta caixa é `block` de propósito, NÃO use grid/flex aqui:
num container grid, o "quadro" que prende um item sticky é a célula
dele, e a célula tem exatamente a altura do card — ou seja, sobra
zero folga pro card correr, e ele se solta do topo antes da pilha
ficar pronta (dava pra ver os cards de trás escapando um por um
conforme o último encostava). Em layout de bloco, o quadro de todos
eles é esta caixa inteira, então cada card fica travado até a pilha
terminar. Por isso o espaçamento também é margin, e não gap. */
display: block;
}
/* Respiro DEPOIS do último card: enquanto sobrar altura aqui dentro, a
pilha inteira continua travada na tela. Sem isto o último card encosta
no topo e vai embora no mesmo instante, sem dar tempo de ler — é o
mesmo "HOLD" do modelo antigo, só que de graça.
TEM que ser este ::after (conteúdo de verdade) e NÃO um padding-bottom
na .pc-stack: o navegador limita o quanto um sticky pode descer pela
caixa de CONTEÚDO do pai, e padding fica fora dela. Com padding, os
dois últimos cards nunca chegavam a encostar no topo — paravam ~30px
antes e a pilha terminava torta, com os degraus finais grudados. */
.pc-stack::after {
content: "";
display: block;
height: clamp(80px,22vh,200px);
}
.pc-stack-item + .pc-stack-item { margin-top: clamp(20px,4.5vh,52px); }
.pc-stack-item {
position: sticky;
top: calc(var(--pc-stack-top) + var(--i) * var(--pc-stack-step));
/* Cada card precisa pintar por cima dos que já travaram atrás dele. */
z-index: calc(var(--i) + 1);
}
.pc-stack-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: clamp(18px,2.4vw,24px);
box-sizing: border-box;
/* Fundo opaco é obrigatório: é ele que faz um card esconder o outro.
Com fundo transparente os textos se sobrepõem e vira aquela sopa
ilegível. Branco puro aqui pede um fundo de seção levemente tingido
(ver os gradientes no HTML das duas seções) — card branco em cima de
seção branca some, e a pilha vira só um monte de linha dourada
solta, sem corpo de card nenhum aparecendo atrás. */
background: #fff;
/* Sombra um pouco mais presente que a do .pc-card padrão: aqui os
cards ficam encostados uns nos outros, e é ela que separa a beirada
de um do corpo do outro. */
box-shadow: 0 1px 2px rgba(27,48,79,.06), 0 14px 30px -18px rgba(27,48,79,.28);
}
/* Sem o "pulinho" de -8px no hover aqui: o card está travado na pilha,
levantar ele faz a beirada do card de trás piscar junto. Borda e
sombra continuam reagindo, então o card não fica morto. */
.pc-stack-card:hover { transform: none; }
.pc-stack-num {
flex: none;
font-family: 'PT Serif',Georgia,serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
}
.pc-stack-card-title {
font-size: clamp(.98rem,1.5vw,1.06rem);
font-weight: 700;
color: #1B304F;
margin: 0 0 8px;
line-height: 1.35;
text-wrap: pretty;
}
.pc-stack-card-text {
font-size: clamp(.88rem,1.2vw,.93rem);
line-height: 1.65;
color: #222222;
margin: 0;
text-wrap: pretty;
}
.pc-stack-cta { margin: clamp(26px,4vw,38px) 0 0; }
/* ══════════════════════════════════════════════════════════════════════
"Cinco passos" (#como-funciona) — cards em sanfona
ATENÇÃO: esta seção NÃO usa mais a .pc-stack / .pc-stack-item logo
acima. Aquele empilhamento sticky continua valendo, e só, na seção
"por que suja tão rápido" (#problem-stack) — por isso as classes aqui
têm nome próprio. Mexer numa não mexe na outra.
Aqui cada card fica parado no seu lugar mostrando número e título; o
texto abre ao passar o mouse. ══════════════════════════════════════ */
/* O vão mínimo tem de caber a seta (13px de altura visual) mais folga
dos dois lados. No desktop o space-between já abre bem mais que
isso; quem depende deste número é o celular, onde o vão é só o
gap. Com 22px a seta encostava no card de baixo. */
.pc-steps { display: flex; flex-direction: column; gap: clamp(28px,3vw,32px); }
.pc-step { position: relative; }
/* A seta que liga um passo ao próximo, no mesmo dourado dos badges de
número (--gold, a mesma cor dos ícones do site).
É ::after em position:absolute de propósito, e NÃO um elemento entre
os cards: como item de flex ela entraria na conta da altura da coluna
— os cinco cards mais quatro setas mais os vãos passariam da altura do
vídeo, e aí some a folga que a sanfona usa para abrir sem empurrar
nada. Em absolute ela não ocupa altura nenhuma: flutua no vão que já
existe entre dois cards.
O vão varia (o space-between encolhe ele quando um card abre: vai de
~41px para ~32px), por isso a seta é presa no TOPO do vão, a 8px da
base do card, e não centralizada nele — assim ela nunca encosta no
card de baixo, aberto ou fechado. */
.pc-step:not(:last-child)::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
margin-top: 8px;
width: 9px;
height: 9px;
border-right: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
border-bottom-right-radius: 2px;
transform: translateX(-50%) rotate(45deg);
pointer-events: none;
}
@media (min-width: 860px) {
/* height:100% + space-between é o que faz a coluna "encaixar" no vídeo:
ela recebe exatamente a altura dele (que agora é fixa, pelo 4/5) e os
cinco cards se espalham dentro dessa altura.
O efeito colateral é o que salva a sanfona: quando um card abre, é a
folga ENTRE os cards que encolhe para absorver — a altura total não
muda e nada pula na tela. Para isso continuar valendo, os cinco
cards fechados mais a maior abertura têm de caber na altura do
vídeo; é daí que sai o padding baixo do .pc-step-card. */
.pc-steps { min-height: 100%; justify-content: space-between; }
/* flex:none é obrigatório. Sem ele o item de flex ENCOLHE para caber na
altura da coluna, e o card aberto não cresce — a sanfona abria uns
8px e cortava o texto no meio, em silêncio. Com flex:none o card
manda na própria altura e quem cede é a folga entre eles.
E min-height, não height: se um dia o texto crescer a ponto de não
caber, a coluna passa um pouco do vídeo em vez de cortar a frase. */
.pc-step { flex: none; }
}
.pc-step-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: clamp(12px,1.5vw,15px) clamp(16px,2vw,20px);
box-sizing: border-box;
}
/* Badge menor que os 54px do padrão, e é uma conta, não gosto: ele é o
que define a altura do card fechado (o título tem só ~23px). Com 54 o
card fecha em 96px, os cinco somam 480 e não sobra folga nenhuma
dentro do vídeo para a sanfona abrir. Com 40 o card fecha em ~72px e
sobram ~120px de folga — mais que os ~57px do maior texto. */
.pc-step-num.pc-icon-badge { width: 40px; height: 40px; font-size: .95rem; }
/* Sem o "pulinho" de -8px do .pc-card: aqui o hover já abre a sanfona, e
levantar o card ao mesmo tempo faz a coluna inteira tremer. Borda e
sombra continuam reagindo, então o card não fica morto. */
.pc-step-card:hover { transform: none; }
.pc-step-card:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.pc-step-content { min-width: 0; }
.pc-step-num {
flex: none;
font-family: 'PT Serif',Georgia,serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
}
.pc-step-title {
font-size: clamp(.98rem,1.5vw,1.06rem);
font-weight: 700;
color: #1B304F;
margin: 0;
line-height: 1.35;
text-wrap: pretty;
}
/* .pc-step-body-in existe só para levar o overflow:hidden. Ele NÃO pode
ser o próprio : padding e margin de um item de grid não entram na
caixa que o overflow corta, entram na medida da linha. Com o padding
no
direto, a linha "fechada" nunca ia a zero — parava nos 8px do
respiro e sobrava um vão fantasma embaixo de cada título. */
.pc-step-body-in { overflow: hidden; }
.pc-step-text {
font-size: clamp(.88rem,1.2vw,.93rem);
line-height: 1.65;
color: #222222;
margin: 0;
padding-top: 8px;
text-wrap: pretty;
}
/* A sanfona: grid de uma linha indo de 0fr a 1fr. É o único jeito de
animar "altura automática" em CSS puro — height:auto não é animável, e
um max-height chutado ou corta o texto ou deixa a transição com um
atraso morto no fim. O filho precisa do overflow:hidden (está no
.pc-step-body-in) para o corte acontecer. */
.pc-step-body { display: grid; grid-template-rows: 1fr; }
@media (hover: hover) and (pointer: fine) {
/* Só onde existe mouse de verdade. Em tela de toque não há hover: o
dedo "passa o mouse" ao tocar e o texto abriria e fecharia sozinho,
ou pior, ficaria inalcançável. Lá os cinco textos nascem abertos,
que é como a seção sempre funcionou no celular. */
.pc-step-body { grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-lux); }
/* O primeiro passo nasce aberto: em repouso a dobra já mostra o que a
sanfona faz, em vez de cinco títulos mudos que ninguém sabe que
abrem. */
.pc-step:first-child .pc-step-body { grid-template-rows: 1fr; }
/* Assim que o mouse (ou o foco do teclado) pega QUALQUER card, todos
fecham — inclusive o primeiro... */
.pc-steps:has(.pc-step-card:hover) .pc-step-body,
.pc-steps:has(.pc-step-card:focus-within) .pc-step-body { grid-template-rows: 0fr; }
/* ...menos o que está sob o mouse. Esta regra EMPATA em especificidade
com a de cima (ambas valem 4) e só ganha por vir depois — não troque
a ordem das duas.
Ter só um card aberto por vez não é capricho: dois abertos somam
~456px de card e, com o vão mínimo de 28px, passam dos 546px do
vídeo. A dobra cresceria na passagem do mouse, que é exatamente o
que todo o resto desta seção foi montado para evitar. */
.pc-steps .pc-step-card:hover .pc-step-body,
.pc-steps .pc-step-card:focus-within .pc-step-body { grid-template-rows: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
/* Sem transição, mas a sanfona continua abrindo no hover: o que
incomoda é o movimento, não o conteúdo aparecer. */
.pc-step-body { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
/* Quem pediu menos movimento vê exatamente o mesmo conteúdo, só que
nada gruda: cards um embaixo do outro, todos legíveis de uma vez. */
.pc-stack-item, .pc-stack-aside { position: static; }
.pc-stack::after { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
"Um retrato do nosso cuidado, do trilho ao trilho" (#beneficios) —
seção normal, em fluxo, como qualquer outra da página. Dentro dela
fica o carrossel "coverflow", navegado por arraste ou pelas setas, no
tempo de quem está lendo. Ela faz as duas coisas de uma vez: mostra a
foto de cada etapa (o antigo Portfólio, removido a pedido) e explica,
no próprio card, o que aquela etapa faz pela cortina.
Esta seção já teve o efeito de "pin" (ela grudava na tela por 300vh e
o Portfólio subia por cima cobrindo tudo) — foi removido a pedido.
Com ele saíram as classes .pc-why-outer/.pc-why-inner/.pc-why-cover,
que não são mais usadas em lugar nenhum. A mecânica continua
documentada em scroll-stacking-cards.txt (MECÂNICA B), caso um dia
se queira de volta aqui ou em outra seção. ═══════════════════════ */
.pc-included-sec {
background: linear-gradient(180deg,#FBF6EB,#F7F6F3);
border-top: 1px solid #E6E3DC;
border-bottom: 1px solid #E6E3DC;
padding: clamp(56px,8vw,88px) clamp(20px,5vw,44px) clamp(48px,6vw,72px);
}
@media (min-width: 560px) {
.pc-included-sec { padding-left: clamp(24px,5vw,44px); padding-right: clamp(24px,5vw,44px); }
}
.pc-included-inner { width: 100%; }
/* Cards com ícone+título+parágrafo abaixo da foto são mais altos que um
card só de imagem — por isso esta caixa é maior que o .pf-stage
padrão. Medido de verdade com o conteúdo real, pra não repetir o card
estourando a caixa. */
#included-stage { height: clamp(440px, 90vw, 480px); }
@media (min-width: 900px) {
#included-stage { height: clamp(500px, 36vw, 560px); }
}
/* ── Mobile: títulos centralizados e quebras de texto limpas ───────────── */
@media (max-width: 700px) {
.sec-title, .mobile-center { text-align: center; }
}
.sec-title, h1, h2, h3 { text-wrap: balance; }
/* Mobile: nenhum título deve ter uma largura em "ch" mais estreita que a
tela — isso é o que forçava quebras feias (às vezes no meio da
palavra) nos títulos que ganharam max-width em ch para controlar a
quebra no desktop. No celular eles usam a largura inteira disponível,
com uma quebra mais inteligente que evita deixar palavra solta. */
@media (max-width: 760px) {
h1, h2, .sec-title {
max-width: none !important;
text-wrap: pretty;
overflow-wrap: normal;
word-break: normal;
}
/* Fonte um pouco menor e padronizada em todos os títulos de seção no
mobile — cabem em 2-3 linhas de forma consistente, em vez de cada
título ter seu próprio tamanho "grande demais para a tela". O hero
(maior, de propósito) tem seu próprio teto, levemente acima dos
demais. */
.sec-title, h2 {
font-size: clamp(1.55rem, 6vw, 2.05rem) !important;
line-height: 1.25 !important;
}
.hero-mobile h1 {
font-size: clamp(2rem, 8.5vw, 2.6rem) !important;
line-height: 1.15 !important;
}
}
/* Quebra de linha manual só pra desktop, em títulos onde o cliente pediu
uma quebra específica (em vez de deixar o balanceamento automático do
navegador decidir) — no mobile o título volta a quebrar sozinho. */
.br-desktop { display: none; }
@media (min-width: 761px) {
.br-desktop { display: block; content: ""; }
}
/* Linha de CTAs/ações que deve ficar centralizada no mobile mesmo quando o
bloco ao redor é alinhado à esquerda no desktop. */
@media (max-width: 700px) {
.mobile-center-row { justify-content: center; text-align: center; }
}
/* ── Faixa de destaques (stats) em carrossel infinito, 100% CSS ───────── */
.stats-marquee {
position: relative;
overflow: hidden;
}
/* Fade nas bordas com um degradê sólido branco (em vez de mask-image) —
assim a borda "some" contra o próprio fundo branco do card, sem revelar
o que está atrás dele. */
.stats-marquee::before,
.stats-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: clamp(24px, 6vw, 64px);
z-index: 3;
pointer-events: none;
}
.stats-marquee::before {
left: 0;
background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}
.stats-marquee::after {
right: 0;
background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}
.stats-track {
display: flex;
align-items: center;
gap: clamp(28px, 4vw, 56px);
width: max-content;
padding: clamp(22px, 2.6vw, 28px) clamp(24px, 3.4vw, 40px);
animation: stats-scroll 32s linear infinite;
}
@keyframes stats-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.stats-item {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: .82rem;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 600;
color: var(--navy);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.stats-track { animation: none; }
}
/* ── Carrossel "coverflow" — card central em foco, vizinhos desfocados
nas laterais, transição lenta e luxuosa ───────────────────────────── */
.pf-wrap { position: relative; touch-action: pan-y; }
.pf-stage {
position: relative;
height: clamp(340px, 54vw, 480px);
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
/* Os slides fora de foco ficam deslocados bem além da borda via
transform — sem isto, essa área invisível alarga a página e cria
scroll horizontal fantasma (a página "escorrega" ao arrastar no
celular). */
overflow: hidden;
}
.pf-stage:active { cursor: grabbing; }
/* Sem isto o arraste morre no primeiro milímetro: ao apertar em cima
da foto do card, o navegador entende que a pessoa quer arrastar a
IMAGEM (o drag-and-drop nativo), dispara pointercancel e o gesto
nunca chega no carrossel. O user-select evita de quebra que o texto
do card saia grifado durante o arraste. */
.pf-stage { user-select: none; -webkit-user-select: none; }
.pf-stage img { -webkit-user-drag: none; user-drag: none; }
.pf-slides {
position: relative;
width: 100%;
height: 100%;
}
.pf-slide {
--delta: 0;
--scale: 1;
--op: 1;
--blur: 0px;
position: absolute;
top: 50%;
left: 50%;
width: min(80vw, 380px);
transform: translate(calc(-50% + var(--delta) * 62%), -50%) scale(var(--scale));
opacity: var(--op);
filter: blur(var(--blur));
/* Sem transition de propósito: quem anima agora é o JS, quadro a
quadro (ver initLoopCarousel no site.js). Com transition, cada
valor novo abriria uma animação de 1s que o quadro seguinte
interromperia, e o card viveria atrasado em relação ao dedo —
aquele arraste borrachudo. */
will-change: transform, opacity;
}
@media (min-width: 900px) {
/* Cards maiores no desktop, como pedido — a foto real deve ter pelo
menos 1400x1050px (proporção 4:3) para não esticar. */
.pf-stage { height: clamp(460px, 42vw, 620px); }
.pf-slide { width: min(38vw, 520px); }
}
.pf-slide-card { overflow: hidden; }
/* Setas: no mobile ficam numa fileira abaixo da foto (não sobrepõem a
imagem); a partir de 641px sobem para os cantos do carrossel, como no
desktop original. */
.pf-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 20px 0 0;
}
.pf-stage-arrow {
position: static;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--border);
background: #fff;
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 22px -8px rgba(27,48,79,.35);
transition: border-color var(--dur-med) var(--ease-lux), transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.pf-stage-arrow:hover { border-color: var(--gold); transform: scale(1.1); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 32px -10px rgba(27,48,79,.45); }
@media (min-width: 641px) {
.pf-controls {
position: absolute;
inset: 0;
margin: 0;
justify-content: space-between;
pointer-events: none;
}
.pf-stage-arrow {
position: static;
pointer-events: auto;
margin: 0 clamp(4px, 3vw, 24px);
}
.pf-stage-arrow:hover { transform: scale(1.1); }
}
@media (max-width: 640px) {
.pf-stage-arrow { width: 44px; height: 44px; }
}
/* "Reduzir movimento" ligado no sistema: o giro automático não parte
(tratado no JS). Arrastar e as setas seguem funcionando, porque aí
o movimento responde a um gesto da pessoa, em vez de acontecer por
conta própria. */
/* Botão circular reutilizado pelos controles de depoimentos */
.pf-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--border);
background: #fff;
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 20px -8px rgba(27,48,79,.3);
transition: border-color var(--dur-med) var(--ease-lux), transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
z-index: 2;
}
.pf-arrow:hover { border-color: var(--gold); box-shadow: 0 14px 30px -10px rgba(27,48,79,.4); }
/* ── "O problema": linha do tempo que se preenche de dourado conforme a
leitura avança, e os números 01-04 trocam de dourado para azul-marinho
assim que são "lidos" (cruzam a linha de referência na tela). ────────── */
.problem-timeline {
position: relative;
}
.problem-line-track {
position: absolute;
/* Passa pelo centro exato dos círculos de 40px (19px = metade de 40px
menos metade da linha de 2px) — mesmo cálculo do "Como funciona". */
left: 19px;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 2px;
background: var(--border);
}
.problem-line-fill {
position: absolute;
left: 19px;
top: 6px;
width: 2px;
height: 0%;
border-radius: 2px;
background: linear-gradient(180deg, var(--gold), var(--gold-text));
box-shadow: 0 0 12px rgba(234,143,14,.55);
transition: height .12s linear;
}
.problem-item {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(18px, 3vw, 34px);
align-items: start;
}
/* Bolinha numerada — mesmo estilo dos círculos do "Como funciona" (branco,
relevo 3D leve), só que troca de dourado para azul-marinho conforme a
leitura avança. */
.problem-num {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(234,143,14,.45);
box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 3px rgba(27,48,79,.08) inset, 0 6px 14px -8px rgba(27,48,79,.35);
font-family: 'PT Serif', Georgia, serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--gold-text);
transition: color .5s var(--ease-lux), border-color .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.problem-num.is-passed {
color: var(--navy);
border-color: rgba(27,48,79,.4);
}
@media (max-width: 700px) {
.problem-item { gap: clamp(12px, 4vw, 20px); }
}
@media (prefers-reduced-motion: reduce) {
.problem-line-fill { transition: none; }
.problem-num { transition: none; }
}
/* ── Depoimentos: mesmo carrossel "coverflow" do portfólio — card central
em foco, vizinhos desfocados nas laterais ─────────────────────────── */
.testi-stage {
position: relative;
height: clamp(300px, 44vw, 360px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.testi-slide {
--delta: 0;
--scale: 1;
--op: 1;
--blur: 0px;
position: absolute;
top: 50%;
left: 50%;
width: min(84vw, 460px);
transform: translate(calc(-50% + var(--delta) * 62%), -50%) scale(var(--scale));
opacity: var(--op);
filter: blur(var(--blur));
transition: transform 1.05s var(--ease-lux), opacity 1.05s var(--ease-lux), filter 1.05s var(--ease-lux);
}
.testi-slide-card { padding: clamp(26px, 3.2vw, 38px); }
.testi-stars { color: var(--gold); font-size: .9rem; letter-spacing: .12em; line-height: 1; margin: 0 0 14px; }
.testi-quote { font-size: .96rem; line-height: 1.65; color: var(--text-muted); margin: 0; text-wrap: pretty; }
.testi-quote-dark { color: rgba(255,255,255,.92); }
@media (prefers-reduced-motion: reduce) {
.testi-slide { transition: none; }
}
/* ── "Por que quase ninguém lava": acordeão no desktop (passa o mouse e o
card abre, mostrando o texto completo; os outros ficam só com o título),
vira carrossel horizontal de arrastar no mobile ─────────────────────── */
.problem-items { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.problem-card { padding: clamp(18px, 2.2vw, 26px); cursor: default; }
.problem-card-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--navy);
margin: 0;
line-height: 1.4;
transition: color var(--dur-slow) var(--ease-lux);
}
.problem-card-body {
max-height: 0;
opacity: 0;
overflow: hidden;
/* Bem mais lento que o padrão do site (1.1s/.9s em vez de .6s/.5s) —
um acordeão que abre rápido demais no hover parece nervoso; devagar
assim lê como um gesto deliberado, mais "premium". */
transition: max-height 1.1s var(--ease-lux), opacity .9s var(--ease-lux), margin-top 1.1s var(--ease-lux);
}
.problem-card-body-inner {
font-size: 1rem;
line-height: 1.75;
color: var(--text-muted);
margin: 0;
max-width: 62ch;
text-wrap: pretty;
}
.problem-card:hover, .problem-card:focus-within, .problem-card:focus {
border-color: rgba(234,143,14,.5);
}
.problem-card:hover .problem-card-title,
.problem-card:focus-within .problem-card-title { color: var(--gold-text); }
.problem-card:hover .problem-card-body,
.problem-card:focus-within .problem-card-body {
max-height: 260px;
opacity: 1;
margin-top: 12px;
}
/* "Por que quase ninguém lava" migrou para o carrossel ".carrossel-*"
compartilhado — ver esse bloco de CSS mais acima. */
/* ── "Aqui não entra máquina": tags de tecido + checklist com régua
dourada reaproveitando os estilos de .problem-timeline ──────────────── */
.fabric-tag {
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 20px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--navy);
background: #fff;
white-space: nowrap;
}
/* Mobile: as 4 tags ficam numa linha só (nunca quebram pra baixo) —
compactas o bastante pra caber lado a lado na maioria dos celulares;
em telas bem estreitas, a fileira toda rola de leve na horizontal em
vez de embolar em duas linhas. */
@media (max-width: 480px) {
.fabric-tags-row {
flex-wrap: nowrap !important;
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}
.fabric-tag { padding: 7px 12px; font-size: .72rem; }
}
.solution-timeline { padding-left: 0; }
.solution-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 22px); }
.solution-dot { font-size: .95rem; }
.solution-text { font-size: .98rem; line-height: 1.6; color: var(--text-muted); padding-top: 8px; display: inline-block; }
.solution-checklist .problem-item { grid-template-columns: auto 1fr; align-items: center; }
/* Mobile: a coluna de texto inteira desta seção fica centralizada — a
régua do checklist (compartilhada com "O problema") vira um traço
vertical fininho no meio dos itens, então também é escondida aqui,
já que cada linha do checklist passa a ser um par ícone+texto
centrado, sem precisar da régua para se situar. */
@media (max-width: 700px) {
.solution-col { text-align: center; }
.fabric-tags-row { justify-content: center; }
#solution-timeline .problem-line-track, #solution-timeline .problem-line-fill { display: none; }
.solution-checklist { align-items: center; }
.solution-checklist .problem-item {
grid-template-columns: auto auto;
justify-content: center;
gap: 12px;
}
.solution-text { text-align: left; padding-top: 0; }
/* Fica alinhada à esquerda, do ladinho da régua dourada — não
centralizada como o resto da coluna. */
.solution-quote { text-align: left; }
}
/* ── Cards de benefícios com miniatura de foto acima do ícone ──────────── */
.benefit-card-img { display: flex; flex-direction: column; }
.benefit-thumb {
position: relative;
aspect-ratio: 8/5;
border-radius: 10px;
overflow: hidden;
margin: 0 0 18px;
}
.benefit-thumb .img-placeholder { border-radius: 10px; }
/* ── Selo "5,0 ★★★★★" acima do carrossel de depoimentos ─────────────── */
.rating-badge {
font-family: 'PT Serif', Georgia, serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--navy);
}
/* ── Depoimentos: faixa contínua (marquee) que nunca pausa no hover, e
pode ser arrastada livremente com o mouse ou o dedo — o arraste
interrompe o auto-scroll por um instante e ele retoma sozinho ──────── */
.testi-marquee {
position: relative;
overflow: hidden;
/* Espaço de sobra em cima/embaixo: o card não tem o "levante" de hover
(ver .testi-card-flat abaixo), mas esta folga evita qualquer corte
se o card crescer um pixel a mais em algum navegador. */
padding: 10px 0;
margin: -10px 0;
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-marquee-track {
display: flex;
gap: 16px;
width: max-content;
cursor: grab;
/* "none" (em vez de "pan-y"): mesmo bug dos outros arrastes — "pan-y"
deixa o navegador entender o gesto como rolagem da página e toma o
toque pra si, em vez de deixar o JS mover a faixa. */
touch-action: none;
user-select: none;
}
.testi-marquee-track:active { cursor: grabbing; }
.testi-card-flat { flex: none; width: min(84vw, 360px); padding: clamp(24px, 3vw, 32px); }
/* Sem o "levante" de hover do .pc-card aqui: dentro de uma faixa que se
move sozinha o tempo todo, o mouse cruza os cards a cada instante, e
esse hover ficava disparando repetidas vezes — cortando o topo do
card contra a borda do container e dando a sensação de travamento. */
.testi-card-flat:hover { transform: none; }
/* Mobile: cards menores e com o texto limitado a poucas linhas, pra
caberem por inteiro na tela com uma lasca do card anterior e do
próximo visível nas bordas — assim dá pra perceber que tem mais
depoimentos vindo e indo, em vez de um card gigante tomando a tela
inteira. */
@media (max-width: 560px) {
.testi-marquee-track { gap: 32px; }
.testi-card-flat { width: 66vw; padding: 20px 22px; }
.testi-quote {
font-size: .88rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* ── Slider "Antes e depois": arraste (mouse ou dedo) revela a foto de
"antes" por baixo da de "depois" — funciona igual em desktop e mobile,
sem depender de hover. ────────────────────────────────────────────── */
.ba-slider {
--pos: 50%;
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 14px;
cursor: ew-resize;
/* "none" (em vez de "pan-y"): o slider é só de arraste horizontal, mas
"pan-y" deixava o navegador entender que o gesto podia ser rolagem
vertical da página e tomar o toque pra si — daí a tela "mexendo"
em vez do slider responder, no Android e no iPhone. */
touch-action: none;
user-select: none;
box-shadow: 0 1px 2px rgba(27,48,79,.05), 0 20px 44px -28px rgba(27,48,79,.18);
}
.ba-slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ba-after, .ba-before, .ba-before-inner {
position: absolute;
inset: 0;
}
.ba-after.img-placeholder { border-radius: 0; }
.ba-before {
clip-path: inset(0 calc(100% - var(--pos)) 0 0);
transition: clip-path .05s linear;
}
.ba-before-inner.img-placeholder { border-radius: 0; border-right: 0; }
.ba-handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--pos);
width: 3px;
background: #fff;
box-shadow: 0 0 0 1px rgba(27,48,79,.15), 0 4px 14px rgba(27,48,79,.35);
transform: translateX(-50%);
pointer-events: none;
z-index: 3;
}
.ba-handle-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 22px -8px rgba(27,48,79,.4);
}
.ba-label {
position: absolute;
top: 14px;
z-index: 2;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff;
background: rgba(20,37,64,.55);
padding: 6px 12px;
border-radius: 20px;
pointer-events: none;
}
.ba-label-before { left: 14px; }
.ba-label-after { right: 14px; }
@media (prefers-reduced-motion: reduce) {
.ba-before { transition: none; }
}
/* ── Formulário "A gente te chama" — campos adicionais (serviço + detalhes) ── */
#lead-form input, #lead-form select, #lead-form textarea {
transition: border-color .25s, background .25s;
}
#lead-form input:focus, #lead-form select:focus, #lead-form textarea:focus {
outline: none;
border-color: var(--gold) !important;
background: rgba(255,255,255,.1) !important;
}
#lead-form ::placeholder { color: rgba(255,255,255,.4); }
.lead-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C874' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px !important;
padding-right: 40px !important;
cursor: pointer;
}
.lead-select option { background: #1B304F; color: #fff; }
@media (max-width: 560px) {
.lead-form-row { grid-template-columns: 1fr !important; }
}
/* ── Rodapé ──────────────────────────────────────────────────────────
Uma dobra branca fechando a página: a faixa de informação em três
colunas — atendimento, endereço e institucional — e embaixo a linha de
copyright e CNPJ. No celular as colunas viram uma pilha centralizada,
acompanhando o resto do site.
Era azul-marinho e tinha um andar a mais em cima das colunas: logo,
"Deixe a gente avaliar" e o botão dourado do WhatsApp. Esse andar saiu.
A chamada já é feita na seção escura imediatamente acima (o formulário
"A gente te chama"), e repetir a mesma oferta na sequência só adiava o
fim da página. Sem ele o rodapé volta a ser rodapé — e branco, porque
escuro viraria um segundo bloco escuro emendado no primeiro, sem nada
marcando onde um termina e o outro começa. ──────────────────────── */
.ft { background: var(--bg); color: var(--text); padding: clamp(48px,6vw,72px) clamp(24px,5vw,44px) clamp(24px,3vw,32px); }
.ft-inner { max-width: 1080px; margin: 0 auto; }
/* Sem margin/padding/border no topo: essa folga e essa linha existiam
para separar as colunas do bloco de chamada que ficava acima delas.
Agora as colunas são o começo do rodapé, e quem dá o respiro é o
padding do próprio .ft. */
.ft-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(30px,4vw,44px);
text-align: center;
justify-items: center;
}
@media (min-width: 720px) {
/* Três colunas, cada uma com o conteúdo centralizado no próprio terço.
Alinhadas à esquerda ficavam encostadas num lado só: como os textos
têm larguras bem diferentes, sobrava um vazio grande à direita e o
bloco inteiro puxava para a esquerda, desencontrado do botão e do
resto do rodapé, que são centralizados. Centralizadas, a coluna do
meio cai em cima do eixo da página e as três ficam simétricas. */
.ft-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(28px,4vw,56px); }
}
.ft-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* --gold-text, e não --gold: o dourado dos botões (#EA8F0E) foi escolhido
contra o marinho e sobre branco fica claro demais para texto pequeno.
O --gold-text é a mesma cor rebaixada justamente para fundo claro. */
.ft-col-title { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 4px; }
.ft-text { font-size: .9rem; line-height: 1.75; color: rgba(27,48,79,.72); margin: 0; }
.ft-link { font-size: .9rem; line-height: 1.75; color: rgba(27,48,79,.86); text-decoration: none; transition: color var(--dur-med) var(--ease-lux); }
.ft-link:hover { color: var(--gold-text); }
.ft-phone { font-size: 1.02rem; font-weight: 600; color: var(--navy); }
.ft-social { display: flex; align-items: center; gap: 12px; }
.ft-bar {
margin: clamp(32px,4vw,44px) 0 0;
padding: clamp(18px,2.2vw,24px) 0 0;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 10px;
text-align: center;
}
/* A logo assina a linha de fecho, ao lado do copyright. Sem filtro de cor:
a arte já é marinho e dourado sobre transparente, feita para fundo claro
— era o rodapé escuro de antes que precisava do brightness(0) invert(1).
A margem direita é a única separação dela para o texto; o gap do .ft-bar
é pequeno de propósito, porque serve para o "·" colar nas duas frases. */
/* 72px de teto, e não os ~44px que o tamanho de uma barra de copyright
pediria: nesta arte o "PRIME CORTINAS" ocupa só uma faixa estreita da
altura total e a linha "LAVANDERIA" é menor ainda. Abaixo de uns 60px o
lettering vira borrão — sobra o ícone da cortina e o nome some. */
.ft-bar-logo { height: clamp(60px,6vw,72px); width: auto; display: block; margin-right: clamp(8px,1.4vw,18px); }
@media (max-width: 719px) {
/* Aqui o .ft-bar já virou coluna: a logo passa a ficar EM CIMA das duas
linhas, e a margem lateral não serve mais — vira respiro embaixo. */
.ft-bar-logo { margin: 0 0 10px; }
}
.ft-bar p { font-size: .8rem; line-height: 1.6; color: rgba(27,48,79,.58); margin: 0; }
.ft-bar-sep { color: rgba(27,48,79,.32); }
@media (max-width: 719px) {
/* No celular o separador "·" sumiria no fim de uma linha quebrada; cada
informação ganha a própria linha. */
.ft-bar { flex-direction: column; gap: 6px; }
.ft-bar-sep { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
Popup de confirmação do formulário "A gente te chama"
Abre com showModal(), então o fundo escurecido é o ::backdrop nativo e
não uma div extra. O foco fica preso dentro da caixa e o Esc fecha —
tudo do próprio