html,body{margin:0;padding:0}img,svg{max-width:100%}html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root {
--blu9: #0A2250;
--blu8: #0E2E68;
--blu7: #14407F;
--blu5: #2060B4;
--oro: #F2B333;
--oro2: #FFD36E;
--oro-t: #9A6A12;
--bianco:#FFFFFF;
--neve: #F3F5F9;
--neve2: #E6EAF2;
--inch: #111A2B;
--inch2: #41506B;
--tenue: #76859E;
--f-d: "Archivo", ui-sans-serif, system-ui, sans-serif;
--f-s: "Bitter", ui-serif, Georgia, serif;
--f-m: "Kaushan Script", ui-serif, cursive;
}
* { box-sizing: border-box; }
body {
background: var(--neve); color: var(--inch);
font-family: var(--f-d); font-size: 16.5px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .shell { padding-left: 18px; padding-right: 18px; } }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.manu { font-family: var(--f-m); font-weight: 400; color: var(--oro); line-height: 1.35; }
.occhio {
font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--oro-t); margin: 0 0 12px;
}
.occhio.su-blu { color: var(--oro); }
/* ── cunha diagonal com fio dourado ── */
.cuneo { display: block; width: 100%; height: 56px; }
.cuneo svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .cuneo { height: 32px; } }
/* ── bandas ── */
.blu { background: var(--blu9); color: #E8EEF9; }
.blu h2, .blu h3 { color: #FFF; }
.chiaro { background: var(--neve); }
/* ── header ── */
header.top {
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
background: var(--blu9); border-bottom: 3px solid var(--oro);
}
.top-in { display: flex; align-items: center; gap: 20px; height: 74px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logo svg { width: 38px; height: 30px; }
.logo .w { font-family: var(--f-s); font-size: 24px; font-weight: 700; color: #FFF; letter-spacing: -.01em; line-height: 1; }
.logo .s { display: block; font-family: var(--f-d); font-size: 8px; font-weight: 700; letter-spacing: .22em; color: var(--oro); margin-top: 3px; }
nav.n a { text-decoration: none; font-size: 14.5px; font-weight: 600; color: #BFCCE4; margin-left: 24px; transition: color .18s; }
nav.n a:hover { color: var(--oro); }
.lang { display: flex; gap: 2px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }
.lang a { text-decoration: none; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; padding: 5px 10px; border-radius: 999px; color: #9FB2D2; }
.lang a[aria-current="true"] { background: var(--oro); color: var(--blu9); }
@media (max-width: 980px) { nav.n { display: none; } }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
padding: 14px 26px; border-radius: 6px; border: 2px solid transparent; transition: all .18s;
}
.btn.oro { background: var(--oro); color: var(--blu9); }
.btn.oro:hover { background: var(--oro2); }
.btn.vuoto { background: none; color: #FFF; border-color: rgba(255,255,255,.4); }
.btn.vuoto:hover { border-color: var(--oro); color: var(--oro); }
.btn.blu { background: var(--blu9); color: #FFF; }
.btn.blu:hover { background: var(--blu7); }
@media (max-width: 500px) { .top-in .btn { display: none; } }
/* ── hero ── */
.hero { background: var(--blu9); position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.02fr .98fr; gap: 0; align-items: stretch; }
.hero-txt { padding: 62px 48px 62px 0; }
.hero .manu { font-size: clamp(27px, 3.6vw, 40px); margin: 0 0 14px; transform: rotate(-1.6deg); transform-origin: left; }
.hero h1 {
font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; line-height: 1.04;
letter-spacing: -.028em; margin: 0 0 18px; color: #FFF; text-wrap: balance;
}
.hero p { font-size: 17.5px; color: #C3D0E6; max-width: 46ch; margin: 0 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-foto { position: relative; margin-right: -80px; }
.hero-foto svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 900px) {
.hero-in { grid-template-columns: 1fr; }
.hero-txt { padding: 40px 0 36px; order: 2; }
.hero-foto { margin: 0; height: 260px; order: 1; }
}
/* ── faixa de confiança ── */
.fiducia { background: var(--blu7); }
.fid-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 52px; padding: 20px 0; }
.fid { display: flex; align-items: center; gap: 11px; }
.fid svg { width: 26px; height: 26px; flex: none; }
.fid b { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFF; }
/* ── seções ── */
section { padding-block: 72px; }
.s-head { max-width: 58ch; margin-bottom: 40px; }
h2 { font-size: clamp(29px, 4.3vw, 43px); font-weight: 800; line-height: 1.08; letter-spacing: -.028em; margin: 0 0 14px; text-wrap: balance; }
h2 .oro { color: var(--oro-t); }
.blu h2 .oro { color: var(--oro); }
.s-head p { font-size: 17px; color: var(--inch2); margin: 0; }
.blu .s-head p { color: #B9C7E0; }
/* ── selos de serviço ── */
.servizi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.serv {
background: var(--bianco); border: 1px solid var(--neve2); border-radius: 8px; padding: 24px 22px;
display: flex; gap: 16px; align-items: flex-start; transition: transform .18s, box-shadow .18s;
}
.serv:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10,34,80,.12); }
.bollo {
flex: none; width: 54px; height: 54px; border-radius: 50%;
background: var(--blu9); border: 2px solid var(--oro);
display: grid; place-items: center;
}
.bollo svg { width: 26px; height: 26px; }
.serv h3 { font-size: 15.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin: 4px 0 5px; }
.serv p { font-size: 14px; color: var(--inch2); margin: 0; }
@media (max-width: 920px) { .servizi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .servizi { grid-template-columns: 1fr; } }
/* ── imóveis ── */
.griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.carta {
background: var(--bianco); border-radius: 8px; overflow: hidden; text-decoration: none;
display: flex; flex-direction: column; border: 1px solid var(--neve2);
transition: transform .18s, box-shadow .18s;
}
.carta:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10,34,80,.16); }
.carta .img { position: relative; aspect-ratio: 4/3; background: var(--blu8); }
.carta .img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.targa {
position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px;
background: var(--oro); color: var(--blu9);
}
.targa.ob { background: var(--blu5); color: #FFF; }
.carta .corpo { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tipologia { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-t); margin: 0; line-height: 1.45; }
.carta h3 { font-family: var(--f-s); font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.carta .luogo { font-size: 13.5px; color: var(--tenue); margin: -6px 0 0; }
.righe { display: grid; gap: 7px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--neve2); }
.riga { display: flex; justify-content: space-between; font-size: 14px; }
.riga dt { color: var(--tenue); }
.riga dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.prezzo-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 2px solid var(--oro); }
.prezzo-riga .p { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prezzo-riga .l { font-size: 12px; color: var(--tenue); }
@media (max-width: 920px) { .griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .griglia { grid-template-columns: 1fr; } }
/* ── dossiê ── */
.fasi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.fase-b {
background: var(--bianco); border: 2px solid var(--neve2); border-radius: 8px;
text-align: left; padding: 16px 18px; cursor: pointer; font-family: var(--f-d); transition: all .2s;
}
.fase-b .k { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); display: block; margin-bottom: 6px; }
.fase-b .t { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--inch2); }
.fase-b[aria-selected="true"] { background: var(--blu9); border-color: var(--blu9); }
.fase-b[aria-selected="true"] .k { color: var(--oro); }
.fase-b[aria-selected="true"] .t { color: #FFF; }
.fase-b:hover { border-color: var(--oro); }
@media (max-width: 680px) { .fasi { grid-template-columns: 1fr; } }
.dossier { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; }
.dossier-fig { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--blu8); }
.dossier-fig .lay { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.dossier-fig .lay.on { opacity: 1; }
.dossier-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dossier-fig .stampo {
position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 11px; font-weight: 800;
letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px;
background: var(--oro); color: var(--blu9);
}
.dossier h3 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.dossier > div > p { font-size: 15.5px; color: var(--inch2); margin: 0 0 20px; }
.voci { background: var(--bianco); border: 1px solid var(--neve2); border-radius: 8px; overflow: hidden; }
.voce { padding: 13px 18px; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; border-bottom: 1px solid var(--neve2); }
.voce:last-child { border-bottom: 0; }
.voce dt { font-size: 13.5px; color: var(--tenue); }
.voce dd { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.voce dd.g { color: var(--oro-t); }
.voce dd.b { color: var(--blu5); }
.pie { font-size: 12.5px; color: var(--tenue); margin: 14px 0 0; }
@media (max-width: 880px) { .dossier { grid-template-columns: 1fr; } }
/* ── perché ── */
.perche { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.spunte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.spunte li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; }
.spunte svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.perche-foto { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; position: relative; background: var(--blu8); }
.perche-foto svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 880px) { .perche { grid-template-columns: 1fr; gap: 28px; } }
/* ── mapa ── */
.mappa-box { display: grid; grid-template-columns: 1fr 258px; border-radius: 8px; overflow: hidden; background: var(--blu8); }
.mappa { position: relative; }
.mappa svg { display: block; width: 100%; height: auto; }
.pin { cursor: pointer; }
.pin circle.c { fill: var(--oro); }
.pin circle.a { fill: none; stroke: var(--oro); opacity: .35; }
.pin text { fill: var(--oro); font-family: var(--f-d); font-size: 15px; font-weight: 700; }
.pin.on circle.a { opacity: .9; }
.pin.on text { fill: #FFF; }
.tempi { padding: 24px 22px; background: var(--blu9); }
.tempi h4 { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin: 0 0 16px; }
.tr { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.tr:last-of-type { border-bottom: 0; }
.tr dt { font-size: 14px; color: #BCC9E2; }
.tr dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--oro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sel { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--oro); }
.sel b { display: block; font-size: 16px; color: #FFF; margin-bottom: 3px; }
.sel span { font-size: 13px; color: #9FB2D2; }
@media (max-width: 860px) { .mappa-box { grid-template-columns: 1fr; } }
/* ── simulador ── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.campo { margin-bottom: 24px; }
.campo .testa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.campo label { font-size: 14.5px; font-weight: 600; color: #D4DEEF; }
.campo output { font-size: 19px; font-weight: 800; color: #FFF; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(255,255,255,.22); border-radius: 4px; margin: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--oro); border: 0; cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--oro); border: 0; cursor: grab; }
.esiti { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 24px; }
.esito { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.esito:last-of-type { border-bottom: 0; }
.esito .k { font-size: 14px; color: #B9C7E0; }
.esito .v { font-size: 20px; font-weight: 800; color: #FFF; font-variant-numeric: tabular-nums; }
.esito.big { padding-top: 18px; }
.esito.big .k { font-size: 15px; color: #FFF; font-weight: 700; }
.esito.big .v { font-size: 42px; letter-spacing: -.04em; color: var(--oro); }
.nota { font-size: 12.5px; color: #93A4C2; margin: 16px 0 0; line-height: 1.5; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; gap: 28px; } }
/* ── faq ── */
.faq { max-width: 840px; }
details { background: var(--bianco); border: 1px solid var(--neve2); border-radius: 8px; margin-bottom: 10px; }
summary { list-style: none; cursor: pointer; padding: 18px 50px 18px 20px; position: relative; font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
summary::-webkit-details-marker { display: none; }
summary::after {
content: ""; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
border-radius: 50%; background: var(--oro);
}
summary::before {
content: ""; position: absolute; right: 26px; top: 50%; z-index: 2; width: 9px; height: 9px; margin-top: -7px;
border-right: 2.5px solid var(--blu9); border-bottom: 2.5px solid var(--blu9);
transform: rotate(45deg); transition: transform .2s;
}
details[open] summary::before { transform: rotate(-135deg); margin-top: -3px; }
details p { margin: 0 20px 18px; color: var(--inch2); font-size: 15.5px; }
/* ── fechamento ── */
.fine-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.recap { display: grid; gap: 10px; }
.recap a {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
padding: 16px 18px; display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
text-decoration: none; transition: all .18s;
}
.recap a:hover { background: var(--oro); border-color: var(--oro); }
.recap a:hover .k, .recap a:hover .v { color: var(--blu9); }
.recap .k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.recap .v { font-size: 15px; font-weight: 600; color: #FFF; }
@media (max-width: 880px) { .fine-in { grid-template-columns: 1fr; gap: 28px; } }
footer.piede { background: var(--blu9); color: #9FB2D2; padding-block: 44px 40px; }
.piede-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.piede h5 { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: 0 0 14px; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.piede a { font-size: 14.5px; color: #BCC9E2; text-decoration: none; }
.piede a:hover { color: var(--oro); }
.piede-legale { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; }
@media (max-width: 820px) { .piede-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }