/* Housafe — site institucional.
Estático puro: nada de WordPress, nada de plugin, nada que quebre sozinho.
O desenho: papel quente e tinta escura como base, laranja da marca só onde
precisa apontar, e um verde profundo reservado ao bloco jurídico — é ali que o
corretor precisa sentir chão. Preços e números de apólice saem em fonte
monoespaçada: são documento, não enfeite. */
:root{
--laranja:#FC5412; --laranja-fundo:#FFF1EA; --laranja-escuro:#D63F05;
--tinta:#1B1614; /* preto quente: madeira e telhado, não preto de tela */
--grafite:#57504B;
--cinza:#8A827C;
--papel:#FBF9F7;
--branco:#FFFFFF;
--argila:#EFE6DE; /* faixa clara: separa seções sem virar mais um cartão */
--linha:#E4DAD2;
--musgo:#22463B; /* bloco "é permitido": aprovação, não alarme */
--musgo-claro:#8FBFA9;
--verde:#1f9d55;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--papel);color:var(--tinta);
font-family:'DM Sans',-apple-system,Segoe UI,Roboto,sans-serif;
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
a{color:var(--laranja);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:4px}
.caixa{max-width:1120px;margin:0 auto;padding:0 24px}
/* ── tipografia ─────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.03em;font-weight:700;margin:0 0 18px}
h2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.1;letter-spacing:-.022em;font-weight:700;margin:0 0 14px}
h3{font-size:1.1rem;line-height:1.25;letter-spacing:-.01em;font-weight:700;margin:0 0 6px}
.olho-dagua{
font-family:'DM Mono',ui-monospace,monospace;
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laranja);
font-weight:500;margin:0 0 10px;
}
.grande{font-size:1.13rem;color:var(--grafite);max-width:62ch}
.mudo{color:var(--cinza)}
.dado{font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* ── topo ───────────────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:20;background:rgba(251,249,247,.9);backdrop-filter:blur(10px);
border-bottom:1px solid var(--linha)}
.topo .caixa{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.topo img{height:32px;display:block}
.menu{margin-left:auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.menu a{color:var(--grafite);font-weight:500;font-size:.94rem}
.menu a:hover{color:var(--tinta);text-decoration:none}
@media(max-width:900px){.menu .some{display:none}}
/* ── botões ─────────────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--laranja);color:#fff;border:0;border-radius:10px;
padding:15px 26px;font-weight:700;font-size:1rem;cursor:pointer;
box-shadow:0 1px 0 var(--laranja-escuro), 0 10px 24px -12px rgba(252,84,18,.9);
transition:transform .12s ease, background .12s ease}
.btn:hover{background:var(--laranja-escuro);text-decoration:none;color:#fff;transform:translateY(-1px)}
.btn.fantasma{background:transparent;color:var(--tinta);border:1.5px solid var(--tinta);box-shadow:none}
.btn.fantasma:hover{background:var(--tinta);color:#fff}
.btn.pequeno{padding:10px 18px;font-size:.92rem;border-radius:8px}
.btn.claro{background:#fff;color:var(--musgo);box-shadow:none}
.btn.claro:hover{background:#EAF3EE;color:var(--musgo)}
/* ── faixas ─────────────────────────────────────────────────────────────── */
section{padding:86px 0}
section.cinza{background:var(--argila)}
@media(max-width:700px){section{padding:56px 0}}
/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{
padding:52px 0 68px;
background:
radial-gradient(1100px 420px at 78% -10%, var(--laranja-fundo) 0%, transparent 62%),
var(--papel);
border-bottom:1px solid var(--linha);
}
.hero-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero .depois{display:block;margin-top:16px;font-size:.93rem;max-width:46ch}
.hero .btn{margin-top:28px}
@media(max-width:940px){.hero-grade{grid-template-columns:1fr;gap:40px}}
/* os selos: é a primeira objeção do corretor ("quanto vai me custar?"), então
ela é respondida antes de qualquer outra coisa, não em letra miúda. */
.selos{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.selos li{display:inline-flex;align-items:center;gap:8px;background:var(--branco);
border:1px solid var(--linha);border-radius:999px;padding:9px 16px 9px 12px;
font-size:.93rem;font-weight:700;color:var(--tinta)}
.selos li::before{content:"";width:18px;height:18px;border-radius:50%;flex:0 0 18px;
background:var(--laranja) url("data:image/svg+xml;utf8,") center/12px no-repeat}
/* o artefato do hero: a mesa de escolha, que é o que a plataforma tem de único */
.mesa{background:var(--branco);border:1px solid var(--linha);border-radius:16px;
box-shadow:0 30px 60px -40px rgba(27,22,20,.45);overflow:hidden}
.mesa-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:16px 20px;border-bottom:1px solid var(--linha);background:var(--papel)}
.mesa-topo b{font-size:.95rem}
.mesa-topo span{font-size:.72rem;color:var(--cinza);font-family:'DM Mono',ui-monospace,monospace}
.mesa table{width:100%;border-collapse:collapse}
.mesa th{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);
font-weight:500;text-align:right;padding:14px 20px 8px;font-family:'DM Mono',ui-monospace,monospace}
.mesa th:first-child{text-align:left}
.mesa td{padding:13px 20px;border-top:1px solid var(--linha);text-align:right;
font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.95rem}
.mesa td:first-child{text-align:left;font-family:'DM Sans',sans-serif;font-weight:700}
.mesa tr.escolhida td{background:#F3FAF6}
.mesa .voce{color:var(--laranja);font-weight:700}
.mesa-pe{padding:12px 20px;border-top:1px solid var(--linha);background:var(--papel);
font-size:.78rem;color:var(--cinza)}
/* ── passos: é uma sequência de verdade, por isso numerada ──────────────── */
.passos{list-style:none;margin:44px 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--linha)}
.passos li{padding:28px 26px;border-right:1px solid var(--linha)}
.passos li:first-child{padding-left:0}
.passos li:last-child{border-right:0;padding-right:0}
.passos .n{font-family:'DM Mono',ui-monospace,monospace;font-size:.76rem;color:var(--laranja);
letter-spacing:.12em;display:block;margin-bottom:10px}
.passos p{margin:0;color:var(--grafite);font-size:.97rem}
@media(max-width:760px){
.passos li{border-right:0;border-bottom:1px solid var(--linha);padding:24px 0}
.passos li:last-child{border-bottom:0}
}
/* ── a escada da comissão ───────────────────────────────────────────────── */
.escada{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
background:var(--linha);border:1px solid var(--linha);border-radius:16px;overflow:hidden;margin-top:38px}
.degrau{background:var(--branco);padding:28px 26px}
.degrau .pct{font-family:'DM Mono',ui-monospace,monospace;font-size:.78rem;color:var(--cinza);
letter-spacing:.12em;text-transform:uppercase}
.degrau .valor{font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-size:2.3rem;font-weight:700;
letter-spacing:-.03em;line-height:1.05;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.degrau .valor small{font-size:.88rem;font-weight:500;color:var(--cinza);letter-spacing:0}
.degrau .sua{margin-top:14px;padding-top:14px;border-top:1px dashed var(--linha);
font-size:.95rem;color:var(--grafite)}
.degrau .sua b{color:var(--laranja);font-family:'DM Mono',ui-monospace,monospace;font-size:1.05rem}
/* ── coberturas ─────────────────────────────────────────────────────────── */
.lista{list-style:none;padding:0;margin:30px 0 0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 44px}
.lista li{padding:13px 0 13px 28px;position:relative;color:var(--grafite);
border-bottom:1px solid var(--linha);font-size:1rem}
.lista li::before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;
border-radius:50%;background:var(--laranja);opacity:.85}
/* ── bloco jurídico ─────────────────────────────────────────────────────── */
.destaque{background:var(--musgo);color:#fff;border-radius:22px;padding:52px;
background-image:radial-gradient(700px 260px at 90% 0%, rgba(143,191,169,.22), transparent 60%)}
.destaque h2{color:#fff}
.destaque .olho-dagua{color:var(--musgo-claro)}
.destaque p{color:#DCE7E1}
.destaque b{color:#fff}
.destaque .mudo{color:#DCE7E1}
.destaque .btn{margin-top:26px}
.carimbo{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
border:1.5px solid var(--musgo-claro);color:var(--musgo-claro);border-radius:8px;
padding:8px 14px;font-family:'DM Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase}
@media(max-width:700px){.destaque{padding:32px 24px;border-radius:16px}}
/* ── dúvidas ────────────────────────────────────────────────────────────── */
.duvidas{max-width:820px;margin-top:30px;border-top:1px solid var(--linha)}
details{border-bottom:1px solid var(--linha)}
summary{cursor:pointer;padding:20px 34px 20px 0;font-weight:700;font-size:1.05rem;
position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.5rem;font-weight:400;
color:var(--laranja);line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0 0 22px;color:var(--grafite);max-width:70ch}
/* ── quem está atrás ────────────────────────────────────────────────────── */
.fundadora{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;margin-top:10px}
.inicial{width:78px;height:78px;border-radius:50%;background:var(--tinta);color:#fff;
display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-size:1.9rem;
font-weight:700;letter-spacing:-.02em}
@media(max-width:600px){.fundadora{grid-template-columns:1fr}}
/* ── fechamento ─────────────────────────────────────────────────────────── */
.fecho{text-align:center}
.fecho .grande{margin:0 auto 10px}
/* ── rodapé ─────────────────────────────────────────────────────────────── */
.rodape{background:var(--tinta);color:#B8AFA9;padding:64px 0 40px;font-size:.95rem}
.rodape img{height:30px;margin-bottom:12px}
.rodape a{color:#B8AFA9}
.rodape a:hover{color:#fff}
.colunas{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.colunas b{display:block;margin-bottom:10px;font-size:.76rem;letter-spacing:.14em;
text-transform:uppercase;font-family:'DM Mono',ui-monospace,monospace;font-weight:500;color:#fff}
.colunas p{margin:0;max-width:34ch}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid #332B27;font-size:.83rem;
color:#8A807A;line-height:1.6}
@media(max-width:820px){.colunas{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.colunas{grid-template-columns:1fr}}
/* ── páginas de texto (privacidade, termos) ─────────────────────────────── */
.texto{max-width:760px}
.texto h2{margin-top:38px}
.texto p,.texto li{color:var(--grafite)}
@media(max-width:400px){
h1{word-break:break-word}
.btn{padding:13px 20px;font-size:.95rem}
.topo img{height:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
/* ═══ TEXTURA ═══════════════════════════════════════════════════════════════
Ela: "o site ainda está sem graça, sólido". Cor chapada em tela grande vira
plástico. Aqui entra grão de papel na página inteira, malha de projeto atrás
do hero, uma linha de telhado entre as faixas e a marca em água no rodapé —
tudo desenhado, nada de foto de banco de imagem. */
/* grão: fica por cima de tudo, não recebe clique e é quase invisível de perto */
body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
}
/* malha de projeto atrás do hero, apagando para as bordas */
.hero{position:relative;isolation:isolate}
.hero::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background-image:
linear-gradient(to right, var(--linha) 1px, transparent 1px),
linear-gradient(to bottom, var(--linha) 1px, transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(760px 380px at 30% 40%, #000 0%, transparent 78%);
mask-image:radial-gradient(760px 380px at 30% 40%, #000 0%, transparent 78%);
}
/* linha de telhado: separa faixas sem virar mais um cartão */
.telhado{height:16px;background-repeat:repeat-x;background-position:center;
background-image:url("data:image/svg+xml;utf8,")}
.telhado.escuro{background-image:url("data:image/svg+xml;utf8,")}
/* faixa de argila ganha um pontilhado quase imperceptível */
section.cinza{
background-image:radial-gradient(var(--linha) 1px, transparent 1px);
background-size:22px 22px;background-position:0 0;
}
/* o bloco verde ganha hachura diagonal fina */
.destaque{position:relative;overflow:hidden}
.destaque::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 1px, transparent 1px 11px);
}
.destaque > *{position:relative}
/* rodapé: a casa da marca em água, no canto */
.rodape{position:relative;overflow:hidden}
.rodape::before{
content:"";position:absolute;right:-60px;bottom:-80px;width:420px;height:420px;opacity:.05;
background:no-repeat center/contain
url("data:image/svg+xml;utf8,");
}
.rodape .caixa{position:relative}
/* a fileira de telhados: dá horizonte à página e diz do que o seguro trata,
sem foto de banco de imagem. Desenhada, na paleta da marca. */
.horizonte{height:190px;margin-top:-190px;pointer-events:none;
background:url("/marca/telhados.svg") center bottom/cover no-repeat}
@media(max-width:700px){.horizonte{height:120px;margin-top:-120px}}
/* ═══ GENTE E FOTOS ═════════════════════════════════════════════════════════
Ela: "coisas mais humanizadas, assim com imagens". As fotos vêm do site antigo
dela — já eram dela, e são as que mostram gente, não ícone. */
.cobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:34px}
.cob{background:var(--branco);border:1px solid var(--linha);border-radius:16px;overflow:hidden;
display:flex;flex-direction:column}
.cob img{width:100%;height:150px;object-fit:cover;display:block}
.cob div{padding:16px 18px 20px}
.cob h3{margin:0 0 4px;font-size:1.02rem}
.cob p{margin:0;color:var(--grafite);font-size:.92rem}
.mais-cob{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.mais-cob li{background:var(--branco);border:1px solid var(--linha);border-radius:999px;
padding:7px 15px;font-size:.9rem;color:var(--grafite)}
/* a fundadora com rosto, não com iniciais */
.fundadora img.retrato{width:190px;border-radius:18px;background:var(--argila);display:block}
@media(max-width:600px){.fundadora img.retrato{width:150px}}
/* bloco jurídico com foto de atendimento: a parte mais fria da página é a que
mais precisa de gente */
.destaque-grade{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:center}
.destaque-grade img{width:100%;border-radius:16px;display:block;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
@media(max-width:820px){.destaque-grade{grid-template-columns:1fr;gap:26px}
.destaque-grade img{max-width:340px}}
/* fechamento com a família: quem é protegido no fim da conta */
.fecho-grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;text-align:left}
.fecho-grade img{width:100%;max-width:420px;display:block}
@media(max-width:760px){.fecho-grade{grid-template-columns:1fr;text-align:center}
.fecho-grade img{margin:0 auto;max-width:300px}}
/* ── as seguradoras que respondem ───────────────────────────────────────────
Barra correndo com as marcas. É a prova de que o preço não é chute: são
estas as seguradoras que devolvem cotação para a Housafe. */
.esteira{background:var(--branco);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
padding:22px 0;overflow:hidden;position:relative}
.esteira p{margin:0 0 14px;text-align:center;font-family:'DM Mono',ui-monospace,monospace;
font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.esteira-trilho{display:flex;width:max-content;align-items:center;gap:56px;
animation:corre 32s linear infinite}
.esteira:hover .esteira-trilho{animation-play-state:paused}
.esteira img{height:46px;width:auto;display:block;filter:grayscale(1);opacity:.62;
transition:filter .2s ease, opacity .2s ease}
.esteira img:hover{filter:none;opacity:1}
/* as bordas somem no papel, para a barra não parecer cortada */
.esteira::before,.esteira::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.esteira::before{left:0;background:linear-gradient(to right,var(--branco),transparent)}
.esteira::after{right:0;background:linear-gradient(to left,var(--branco),transparent)}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.esteira-trilho{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:34px}
}
@media(max-width:700px){.esteira img{height:36px}.esteira-trilho{gap:38px}}
/* ── a foto do topo ─────────────────────────────────────────────────────────
Ela: "põe alguma imagem na primeira parte, tem que dar vontade de rolar".
A casa entra atrás e a mesa de cotação encosta nela: a promessa e a prova
na mesma imagem. */
/* A casa fica ATRÁS de tudo, sangrando pela direita, e o cartão de cotação
flutua sobre ela. É render, não imóvel de cliente. */
.hero{overflow:hidden}
.hero::after{
content:"";position:absolute;z-index:-1;pointer-events:none;
right:-4%;top:50%;transform:translateY(-50%);bottom:auto;
width:min(66%,940px);aspect-ratio:1180/990;
background:url("/marca/fotos/casa-mao.jpg") right center/contain no-repeat;
/* a casa desmancha onde encosta no texto, para a leitura não sofrer */
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 20%);
mask-image:linear-gradient(to right, transparent 0%, #000 20%);
}
.hero-arte{position:relative;padding-top:300px}
.hero-arte .mesa{max-width:415px;margin-left:auto}
.hero-arte .mesa{background:rgba(255,255,255,.97);backdrop-filter:blur(2px)}
.hero-arte .mesa td,.hero-arte .mesa th{padding-top:11px;padding-bottom:11px}
@media(max-width:940px){
.hero::after{position:relative;right:auto;top:auto;transform:none;width:100%;display:block;
margin:6px auto -6px;background-position:center center;
-webkit-mask-image:none;mask-image:none}
.hero-arte{padding-top:0}
}
/* a mesa fora do topo: card próprio dentro da seção "Quanto você ganha" */
.mesa-larga{max-width:620px;margin-top:32px}
.mesa-larga .mesa-topo{background:var(--branco)}
.mesa-larga .mesa-pe{background:var(--branco)}