/* =========================================================
   supercrédito | página
   Uma coluna no telemóvel, duas no computador. A escolha do
   produto fica logo no topo para se começar a simular sem
   procurar o botão.

   O site estava todo branco. A cor vem por faixas, com as
   cores da Gestlifes: herói azul, exemplo em azul claro,
   passos em navy, prémio em dourado. Entre faixas fica branco
   para respirar.
   ========================================================= */

/* =========================================================
   1. BARRA LEGAL
   ========================================================= */
.legalbar{padding:7px 16px; background:var(--navy); color:var(--on-dark); font-size:12px; line-height:1.4; text-align:center}
.legalbar a{color:var(--white)}


/* =========================================================
   2. CABEÇALHO
   ========================================================= */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:6; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.scrolled{border-color:var(--line)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:12px}
.brand{display:flex; align-items:center}
.brand img{display:block; height:32px; width:auto}
@media (min-width:760px){.brand img{height:38px}}

/* Área de cliente: no site atual é um quadrado azul sem texto no
   telemóvel. Aqui fica sempre com ícone e nome. */
.client{display:inline-flex; align-items:center; gap:8px; padding:5px 14px 5px 5px; border:1.5px solid var(--line); border-radius:99px; background:var(--bg); color:var(--navy); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; transition:border-color .15s, background .15s}
.client:hover{border-color:var(--blue); background:var(--soft)}
.client-ic{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--blue); color:var(--white)}


/* =========================================================
   3. HERÓI E ESCOLHA DO PRODUTO
   ========================================================= */
.hero{position:relative; overflow:hidden; background:var(--blue); color:var(--white)}
.hero-shape{position:absolute; right:-230px; top:-40px; width:520px; height:520px; pointer-events:none; opacity:.9}
.hero-shape svg{width:100%; height:100%}
.hero-shape rect{fill:var(--navy)}
.hero-shape path{fill:var(--gold)}
@media (max-width:899px){.hero-shape{display:none}}

.hero-in{position:relative; display:grid; gap:24px; padding-block:26px 30px}
@media (min-width:900px){.hero-in{grid-template-columns:1.05fr 1fr; align-items:center; gap:48px; padding-block:64px}}
.badge{display:inline-flex; align-items:center; gap:8px; border:1px solid color-mix(in srgb, var(--white) 25%, transparent); background:color-mix(in srgb, var(--white) 12%, transparent); color:var(--white); border-radius:99px; padding:6px 14px; font-size:14px; font-weight:600}
.badge i{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent)}
h1{font-family:var(--display); font-weight:800; color:var(--white); font-size:clamp(31px,8.6vw,52px); line-height:1.04; letter-spacing:-.035em; margin:16px 0 12px; text-wrap:balance}
h1 em{font-style:normal; color:var(--gold)}
.lead{color:var(--on-blue); font-size:17px; margin:0; max-width:46ch}
.trust{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; font-size:13.5px; color:var(--on-blue)}
.trust span{display:inline-flex; align-items:center; gap:6px}
.trust svg{color:var(--gold); flex:none}

.pick{border-radius:24px; padding:18px; background:var(--bg); color:var(--ink); box-shadow:0 24px 60px -24px color-mix(in srgb, var(--navy) 60%, transparent)}
.pick h2{font-family:var(--display); font-weight:800; font-size:21px; color:var(--navy); margin:0 0 12px; letter-spacing:-.02em}
.prods{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.prod{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; border:1.5px solid var(--line); background:var(--bg); border-radius:18px; padding:14px; min-height:118px; transition:border-color .15s, background .15s, transform .1s}
.prod:hover{border-color:var(--line-hover)}
.prod:active{transform:scale(.98)}
.prod[aria-pressed="true"]{border-color:var(--blue); background:var(--soft)}
.prod .ic{width:40px; height:40px; border-radius:12px; background:var(--soft); color:var(--blue); display:grid; place-items:center}
.prod[aria-pressed="true"] .ic{background:var(--blue); color:var(--white)}
.prod b{display:block; color:var(--navy); font-weight:700; font-size:15.5px; line-height:1.2}
.prod small{display:block; color:var(--muted); font-size:13px; line-height:1.3; margin-top:2px}
.prod .hot{position:absolute; top:10px; right:10px; background:var(--gold); color:var(--gold-ink); font-size:10.5px; font-weight:800; letter-spacing:.03em; border-radius:99px; padding:2px 8px}
.pick-foot{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--muted)}
.pick-foot svg{color:var(--good); flex:none}

.resume{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:16px; padding:12px 14px; margin-bottom:12px}
.resume p{margin:0; font-size:14px; color:var(--gold-ink)}
.resume p b{display:block}
.resume button{border:0; background:var(--navy); color:var(--white); font-weight:700; border-radius:12px; padding:10px 14px; white-space:nowrap}


/* =========================================================
   4. BANCOS
   Logos a cinzento para não competirem com a página.
   ========================================================= */
.partners{padding-block:24px 22px; border-bottom:1px solid var(--line)}
.partners p{margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center}
.plist{display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-items:center; gap:16px 18px; max-width:860px; margin:0 auto}
@media (min-width:760px){.plist{grid-template-columns:repeat(8,1fr)}}
.plist img{display:block; width:auto; max-width:100%; max-height:26px; filter:grayscale(1); opacity:.7; transition:filter .2s, opacity .2s}
.plist img:hover{filter:none; opacity:1}
.plist em{color:var(--navy); font-style:normal; font-weight:800; font-size:13px; text-align:center}


/* =========================================================
   SECÇÕES E FAIXAS (o que é comum)
   ========================================================= */
.sec{padding-block:48px 0}
.band{margin-top:56px; padding-block:44px}
.band + .band{margin-top:0} /* duas faixas seguidas encostam, sem risca branca no meio */
.band.soft{background:var(--soft)}
.band.navy{background:var(--navy); color:var(--white)}
.band.gold{background:var(--gold); color:var(--gold-ink)}
.sec-h{max-width:640px; margin-bottom:18px}
.sec-h h2{font-family:var(--display); font-weight:800; font-size:clamp(25px,6vw,36px); line-height:1.1; color:var(--navy); letter-spacing:-.03em; margin:0 0 8px; text-wrap:balance}
.sec-h h2 em{font-style:normal; color:var(--blue)}
.sec-h p{margin:0; color:var(--muted)}
.band.navy .sec-h h2{color:var(--white)}
.band.navy .sec-h h2 em{color:var(--gold)}

.btn-y{display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:12px 18px; border:0; border-radius:99px; background:var(--gold); color:var(--gold-ink); font-weight:700; font-size:16px}
.btn-y:hover{filter:brightness(.96)}


/* =========================================================
   5. PRODUTOS
   ========================================================= */
.cards{display:grid; gap:14px}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; background:var(--bg); transition:transform .15s, box-shadow .15s}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 40px -24px color-mix(in srgb, var(--navy) 45%, transparent)}
.card-art{height:148px; position:relative; display:flex; align-items:center; justify-content:center; gap:18px; background:var(--soft)}
.card-art.dark{background:linear-gradient(135deg,var(--blue),var(--navy))}
.card-art.gold{background:var(--gold)}
.card-art.gold .art-ic{color:var(--navy)}
.card-art.gold .tags span{color:var(--navy)}
.card-art.blue{background:var(--blue)}
.card-art .hot{position:absolute; top:14px; right:14px; background:var(--gold); color:var(--gold-ink); font-size:12px; font-weight:800; border-radius:99px; padding:4px 10px}
.stack{display:grid; gap:6px}
.stack span{display:flex; align-items:center; gap:8px; border:1px solid color-mix(in srgb, var(--white) 22%, transparent); background:color-mix(in srgb, var(--white) 8%, transparent); color:var(--white); border-radius:10px; padding:5px 12px; font-size:13px; font-weight:600}
.stack span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold)}
.lines{width:30px; height:10px; border-top:2px solid color-mix(in srgb, var(--white) 40%, transparent); border-bottom:2px solid color-mix(in srgb, var(--white) 40%, transparent)}
.goldbox{width:60px; height:60px; border-radius:16px; background:var(--gold); color:var(--navy); display:grid; place-items:center}
.art-ic{width:62px; height:62px; border-radius:18px; background:var(--bg); color:var(--blue); display:grid; place-items:center; box-shadow:0 8px 20px -12px color-mix(in srgb, var(--navy) 40%, transparent)}
.tags{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px}
.tags span{background:var(--bg); color:var(--blue); border-radius:8px; padding:3px 10px; font-size:12.5px; font-weight:600}
.card-b{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-b h3{margin:0; font-family:var(--display); font-weight:800; font-size:21px; color:var(--navy); letter-spacing:-.02em}
.card-b p{margin:0; color:var(--muted); font-size:15px}
.card-b p.small{font-size:13.5px}
.card-b ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14.5px; color:var(--ink)}
.card-b li{display:flex; gap:8px; align-items:flex-start}
.card-b li svg{flex:none; color:var(--blue); margin-top:3px}
.card-cta{margin-top:auto; padding-top:6px}
.btn-sm{display:inline-flex; align-items:center; gap:8px; border:0; border-radius:14px; padding:12px 16px; font-weight:700; font-size:15px; background:var(--soft); color:var(--blue); transition:background .15s, color .15s}
.btn-sm:hover{background:var(--blue); color:var(--white)}
.btn-sm.gold{background:var(--gold); color:var(--gold-ink)}
.btn-sm.gold:hover{filter:brightness(.96)}

/* números do crédito habitação, como no site atual */
.facts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0}
.facts div{border-radius:12px; background:var(--soft); padding:8px 12px}
.facts dt{font-size:12px; color:var(--muted)}
.facts dd{margin:0; font-family:var(--display); font-weight:800; font-size:18px; color:var(--navy)}


/* =========================================================
   6. EXEMPLO DE CONSOLIDAÇÃO
   ========================================================= */
.cons{display:grid; gap:24px; align-items:center}
@media (min-width:860px){.cons{grid-template-columns:1fr 1.1fr; gap:48px}}
.cons .sec-h{margin-bottom:0}
.ex{border-radius:22px; background:var(--bg); padding:18px; box-shadow:0 18px 40px -28px color-mix(in srgb, var(--navy) 50%, transparent)}
.ex-row{display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; gap:8px}
.ex-col small{display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.loan{display:flex; justify-content:space-between; gap:6px; background:var(--tint); border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:13.5px; margin-bottom:6px}
.loan b{color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap}
.ex-sum{font-size:13.5px; color:var(--muted); padding:2px 4px}
.ex-sum b{color:var(--navy); text-decoration:line-through; text-decoration-thickness:2px}
.one{background:var(--blue); color:var(--white); border-radius:14px; padding:14px 12px}
.one b{display:block; white-space:nowrap; font-family:var(--display); font-weight:800; font-size:clamp(20px,6vw,26px); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.one span{font-size:13px; color:var(--on-dark)}
.ex-arrow{color:var(--blue); display:grid; place-items:center}
.ex-taeg{font-size:12.5px; color:var(--muted); margin:12px 0 0}
.ex-taeg b{color:var(--navy)}


/* =========================================================
   7. COMO FUNCIONA
   ========================================================= */
ol.how{padding:0; margin:0; display:grid; gap:18px; counter-reset:h}
@media (min-width:760px){ol.how{grid-template-columns:repeat(3,1fr)}}
.how li{display:grid; grid-template-columns:44px 1fr; gap:14px; list-style:none; align-items:start}
.how li::before{counter-increment:h; content:counter(h); width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--navy); font-weight:800; font-size:18px; display:grid; place-items:center; font-family:var(--display)}
.how b{color:var(--white); font-size:17px}
.how p{margin:2px 0 0; color:var(--on-navy); font-size:15px}


/* =========================================================
   8. PORQUÊ NÓS
   ========================================================= */
.feats{display:grid; gap:18px}
@media (min-width:760px){.feats{grid-template-columns:1fr 1fr}}
.feat{display:flex; gap:14px}
.feat .ic{flex:none; width:44px; height:44px; border-radius:14px; background:var(--soft); display:grid; place-items:center; color:var(--blue)}
.feat h3{margin:0 0 2px; font-size:16.5px; color:var(--navy)}
.feat p{margin:0; color:var(--muted); font-size:15px}


/* =========================================================
   9. PRÉMIO
   ========================================================= */
.award{display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:center}
@media (min-width:760px){.award{grid-template-columns:120px 1fr; gap:32px}}
.award img{width:100%; height:auto; border-radius:50%; background:var(--bg)}
.award h2{margin:0 0 6px; font-family:var(--display); font-weight:800; font-size:clamp(21px,5vw,30px); line-height:1.1; letter-spacing:-.02em; color:var(--navy)}
.award p{margin:0; max-width:62ch; font-size:15px}
.award p.award-n{margin-top:10px; font-weight:600}
.award-n b{font-family:var(--display); font-weight:800; font-size:20px; color:var(--blue)}
@media (max-width:420px){.award{grid-template-columns:64px 1fr; gap:14px}}


/* =========================================================
   10. PERGUNTAS FREQUENTES
   ========================================================= */
.faq{max-width:760px}
.faq h3{margin:26px 0 2px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue)}
.faq .sec-h + h3{margin-top:4px}
details{border-bottom:1px solid var(--line); padding-block:14px}
summary{font-weight:700; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--blue); font-size:22px; line-height:1}
details[open] summary::after{content:"−"}
details p, details ul{margin:8px 0 0; color:var(--muted); font-size:15px}
details ul{padding-left:20px}


/* =========================================================
   11. RODAPÉ E TEXTO LEGAL
   ========================================================= */
.foot{margin-top:64px; padding-top:44px; background:var(--tint); border-top:4px solid var(--gold)}
.foot-in{display:grid; gap:26px}
@media (min-width:760px){.foot-in{grid-template-columns:1.2fr 1fr 1fr}}
.foot-logo{display:block; height:36px; width:auto; margin-bottom:12px}
.foot-in p{margin:0; font-size:14px; color:var(--muted); max-width:36ch}
.foot h4{margin:0 0 10px; color:var(--navy); font-family:var(--display); font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.02em}
.foot-in a{display:block; padding:4px 0; font-size:14px; color:var(--ink); text-decoration:none}
.foot-in a:hover{color:var(--blue); text-decoration:underline}
.foot-in a.tel-big{font-family:var(--display); font-weight:800; font-size:22px; color:var(--blue)}
.legal{font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); margin-top:30px; padding-block:18px 130px}
.legal p{margin:0 0 8px; max-width:880px}


/* =========================================================
   12. BOTÃO FIXO
   ========================================================= */
.land-cta{position:fixed; left:0; right:0; bottom:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, var(--bg) 72%, transparent); z-index:5; transition:transform .25s}
.land-cta.hide{transform:translateY(130%)}
@media (min-width:900px){.land-cta{display:none}}
@media (prefers-reduced-motion:reduce){.land-cta,.card{transition:none}}