/* Versão clara (claro.html): mesma estrutura e demonstrações, outra pele.
   Carregado depois de styles.css, só troca cores, formas e a tipografia dos títulos. */
:root{
  --bg:#FFFFFF; --surface:#F3F5F9; --line:#E1E5EC; --text:#0B1020; --muted:#566074;
  --acc:#2F5BFF; --acc-text:#2346D6;
  --win:#FFFFFF; --win-line:#E1E5EC;
  color-scheme:light;
}
body{background-image:none}

/* topo */
.nav{background:rgba(255,255,255,.96)}
.logo b{color:var(--acc)}

/* botões em pílula */
.btn{border-radius:99px;padding:15px 28px}
.btn:hover{transform:none;box-shadow:0 8px 20px -8px rgba(47,91,255,.55);background:#2449e6}
.btn-line{color:var(--text);border-color:var(--text)}
.btn-line:hover{background:var(--text);color:#fff;box-shadow:none}
.btn-sm{padding:9px 18px}

/* rótulos viram chips */
.tag{display:inline-block;background:#E8EEFF;color:var(--acc-text);padding:7px 14px;border-radius:99px;letter-spacing:.1em;margin-bottom:1.4rem}

/* títulos grandes em caixa alta */
h1{text-transform:uppercase;font-weight:800;letter-spacing:-.035em;line-height:.96;font-size:clamp(2rem,6.2vw,5.2rem)}
h2{font-weight:750;letter-spacing:-.03em}
.hero{align-items:center}
.swap{border-bottom-color:var(--acc)}
.prob{text-decoration-color:#b3bac8}

/* cartões arredondados */
.panel{border:0;border-radius:32px;padding:clamp(24px,4vw,52px)}
.win{border-radius:20px;border:1px solid var(--win-line);box-shadow:0 24px 48px -28px rgba(11,16,32,.35)}
.win-bar{background:#F3F5F9}
.cat-detail{border:0;border-radius:28px}
.prova{border-radius:24px}
.index a:hover{background:var(--surface)}
.cat-item[aria-pressed="true"]{color:var(--text)}


/* tipo de negócio: cartões grandes coloridos, no lugar das fotos */
.seg-out{border-top:0;background:var(--surface);border-radius:26px;padding:26px 28px;margin-top:18px}
.seg-why{color:var(--text)}

/* dúvidas e contato */
.qs details{border-radius:0}
.contact form input,.contact form select,.contact form textarea{border-radius:14px;background:#fff}
.promise{color:var(--acc-text)}
.foot{border-top:0}

@media (max-width:980px){
  .panel{border-radius:24px}
}
@media (max-width:520px){
}

/* ícones nos cartões de negócio */
.cap{background:#fff;border-color:var(--line)}
.palco-art svg{filter:drop-shadow(0 30px 34px rgba(11,16,32,.22))}

/* com foto, o cartao mantem a foto (nao vira preto ao selecionar) */

/* a foto vence a cor do cartao, selecionado ou nao */

/* grade de segmentos no tema claro */
.seg-ic{border:1px solid #DCE4FF;border-radius:26px;background:linear-gradient(160deg,#F6F8FF,#E4EBFF);color:var(--acc);box-shadow:0 10px 22px -16px rgba(47,91,255,.55),inset 0 1px 0 #fff;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.seg-ic .ic{width:34px;height:34px;stroke-width:1.6}
.seg-btn:hover .seg-ic{background:linear-gradient(160deg,#EEF2FF,#D9E3FF);transform:translateY(-4px);box-shadow:0 16px 28px -16px rgba(47,91,255,.7),inset 0 1px 0 #fff}
.seg-btn[aria-pressed="true"] .seg-ic{background:linear-gradient(160deg,#4C77FF,#2346D6);border-color:transparent;color:#fff;box-shadow:0 18px 30px -14px rgba(47,91,255,.8)}
.seg-btn:focus-visible{outline:none}
.seg-btn:focus-visible .seg-ic{outline:2px solid var(--acc);outline-offset:3px}
.seg-lb{color:var(--muted)}
.seg-btn:hover .seg-lb,.seg-btn[aria-pressed="true"] .seg-lb{color:var(--text)}
.seg-copy .lede{max-width:30em}

.dem input{background:#fff;border-color:#8f98a8}
.dem input:checked{background:var(--acc);border-color:var(--acc)}

/* hero: a prova solta na página, sem caixa */
.prova{border:0;background:none;padding:0}
.pd-cap{color:var(--text)}

/* título do hero acompanha telas largas */
@media (min-width:1900px){h1{font-size:clamp(2rem,6.2vw,6rem)}}
@media (min-width:2400px){h1{font-size:clamp(2rem,6.2vw,7rem)}}
@media (min-width:3000px){h1{font-size:clamp(2rem,6.2vw,8rem)}}
:root{--ok:#16A34A}