:root{
  --bg:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--brand:#22d3ee;--brand-2:#60a5fa;
  --card:#111827;--line:#1f2937;--accent:#7dd3fc;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--brand-2);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.small{font-size:.9rem;color:var(--muted)}
.site-header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(12px);background:rgba(15,23,42,.7);border-bottom:1px solid var(--line);z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{font-weight:700;color:#fff}
.nav a{margin:0 10px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#081021;padding:10px 16px;border-radius:10px;font-weight:600}
.btn-outline{background:transparent;color:var(--fg);border:1px solid var(--line)}
.hero{padding:72px 0;background:radial-gradient(1200px 400px at 20% 0%, rgba(96,165,250,.15),transparent), radial-gradient(1200px 400px at 80% 0%, rgba(34,211,238,.15),transparent)}
.section{padding:64px 0;border-top:1px solid var(--line);background:rgba(17,24,39,.45)}
.section h2{margin-top:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card.highlight{outline:2px solid var(--accent)}
.form input,.form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:var(--fg)}
.form label{display:block;margin-bottom:10px}
.form button{margin-top:6px}
.site-footer{padding:32px 0;border-top:1px solid var(--line);text-align:center;background:rgba(8,12,22,.8)}
.whatsapp-fab{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;font-weight:800}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* --- Hero refinements --- */
.hero .sub{margin:10px 0 18px; font-size:1.05rem; color:var(--muted)}
.hero .hero-bullets{list-style:none; padding:0; margin:0 0 18px;}
.hero .hero-bullets li{margin:6px 0; padding-left:18px; position:relative; opacity:.95}
.hero .hero-bullets li::before{content:""; position:absolute; left:0; top:10px; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.hero .cta-group{display:flex; gap:10px; flex-wrap:wrap}
.hero h1{margin:0 0 6px; font-size:clamp(26px,3.2vw,40px); line-height:1.15}

/* --- Quem Somos refinements --- */
#quem-somos .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
#quem-somos .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:left}
#quem-somos .card h3{margin-top:0;margin-bottom:8px;font-size:1.2rem;color:var(--brand-2)}
#quem-somos .card ul{list-style:none;padding:0;margin:0}
#quem-somos .card ul li{margin:6px 0;padding-left:18px;position:relative;opacity:.95}
#quem-somos .card ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
#quem-somos .metrics .card{text-align:center;font-size:1.2rem;font-weight:600}
#quem-somos .metrics .card strong{font-size:1.5rem;display:block;color:var(--brand-2)}

/* --- Planos & Serviços refinements --- */
#planos .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
#planos .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
#planos .card h3{margin:0 0 8px;color:var(--brand-2)}
#planos .card .bullets{list-style:none;padding:0;margin:0 0 12px}
#planos .card .bullets li{margin:6px 0;padding-left:18px;position:relative;opacity:.95}
#planos .card .bullets li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
#planos .price{margin:8px 0 12px;color:var(--fg);font-size:1rem}
#planos .price strong{font-size:1.2rem;color:#fff}
#planos .card.highlight{outline:2px solid var(--accent);transform:translateY(-2px)}
#planos .card .btn{align-self:flex-start}
@media (max-width:900px){#planos .plans-grid{grid-template-columns:1fr}}

/* --- Portfólio / Cases refinements --- */
#portfolio .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
#portfolio .case{position:relative;padding-bottom:50px}
#portfolio .case h3{margin:0 0 8px;color:var(--brand-2);font-size:1.1rem}
#portfolio .case .bullets{list-style:none;padding:0;margin:0 0 12px}
#portfolio .case .bullets li{margin:6px 0;padding-left:18px;position:relative;opacity:.95}
#portfolio .case .bullets li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
#portfolio .case .kpi{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-weight:600}
#portfolio .case .kpi strong{font-size:1.4rem;color:var(--brand-2);display:block}
@media (max-width:900px){#portfolio .cases-grid{grid-template-columns:1fr}}

/* --- Contato refinements --- */
#contato form{margin-top:20px}
#contato form label{display:block;font-size:.95rem;color:var(--fg)}
#contato form input,
#contato form textarea,
#contato form select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--fg);
  font-size:.95rem;
}
#contato form textarea{resize:vertical;min-height:100px}
#contato form select{appearance:none;background:#0b1220 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><polygon points='0,0 12,0 6,8' fill='%23e2e8f0'/></svg>") no-repeat right 10px center;background-size:12px}
#contato form button{margin-top:10px}
#contato .small{font-size:.8rem;color:var(--muted);line-height:1.3}
@media (max-width:900px){
  #contato .grid-2{grid-template-columns:1fr}
}

/* === IAgnóstico — UI refinements (escopo isolado) ======================= */
#progress { background: rgba(255,255,255,.08); border-radius: 6px; }
#progress-bar { background: #2563eb !important; }

#iagnostico-app .step { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
#iagnostico-app .step .sub { opacity: .85; }

#iagnostico-app .step-body { display: grid; gap: 16px; }
#iagnostico-app .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 768px){
  #iagnostico-app .grid-2 { grid-template-columns: 1fr; }
}

/* Labels, inputs e selects unificados */
#iagnostico-app label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
#iagnostico-app input[type="text"],
#iagnostico-app input[type="email"],
#iagnostico-app input[type="tel"],
#iagnostico-app input:not([type]),
#iagnostico-app select,
#iagnostico-app textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #e6efff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#iagnostico-app select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9cc0ff 50%), linear-gradient(135deg, #9cc0ff 50%, transparent 50%), linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,.08)); background-position: calc(100% - 22px) calc(1.1em), calc(100% - 16px) calc(1.1em), calc(100% - 44px) 0.6em; background-size: 6px 6px, 6px 6px, 1px 2.2em; background-repeat: no-repeat; }
#iagnostico-app input:focus,
#iagnostico-app select:focus,
#iagnostico-app textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
  background: rgba(255,255,255,.06);
}

/* Checkboxes como "chips" */
#iagnostico-app fieldset { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; }
#iagnostico-app fieldset .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 768px){
  #iagnostico-app fieldset .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
#iagnostico-app fieldset label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  user-select: none;
}
#iagnostico-app input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
#iagnostico-app input[type="checkbox"] + span { pointer-events: none; }
#iagnostico-app input[type="checkbox"]:checked + span {
  color: #0b1220;
  background: none;
}
#iagnostico-app fieldset label:has(input[type="checkbox"]:checked) {
  background: #2563eb; border-color: #2563eb; color: #0b1220;
}

/* Botões nas ações do step */
#iagnostico-app .cta-group .btn { padding: 10px 16px; border-radius: 10px; }
#iagnostico-app .cta-group .btn.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.20); }

/* Último step — alinhamento consistente */
#iagnostico-app .step[id="contato"] .grid-2 label { min-width: 0; }

/* Mensagens de feedback */
#iagnostico-app .card h2 { margin-bottom: 6px; }

/* Ajuste geral do herói CTA highlight */
.btn.btn-highlight { background: #22d3ee; color: #0b1220; border: none; }
.btn.btn-highlight:hover { filter: brightness(1.05); }

/* ====================================================================== */

/* === IAgnóstico: animação suave entre steps ============================ */
#iagnostico-app .step { 
  animation: ia-step-in .24s ease-out both;
}
@keyframes ia-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === IAgnóstico: seta custom nos <select> (substitui o padrão) ========= */
#iagnostico-app select {
  appearance: none;
  background-color: rgba(255,255,255,.04);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239cc0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px; /* espaço para a seta */
}

/* IAgnóstico: inputs mais equilibrados no último step */
#step-contato .grid-2 { gap: 18px; }
#step-contato input, #step-contato select { min-height: 44px; }

/* IAgnóstico: estados de foco levemente mais vivos */
#iagnostico-app input:focus,
#iagnostico-app select:focus,
#iagnostico-app textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/* === IAgnóstico: cartões de opção (radios/choices) ===================== */
#iagnostico-app .option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){#iagnostico-app .option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#iagnostico-app .option-card{
  position:relative;border:1px solid rgba(148,192,255,.25);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  padding:12px 14px;cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
#iagnostico-app .option-card:hover{transform:translateY(-1px);border-color:#60a5fa;box-shadow:0 2px 10px rgba(96,165,250,.12)}
#iagnostico-app .option-card input{position:absolute;inset:0;opacity:0;cursor:pointer}
#iagnostico-app .option-card .dot{
  width:12px;height:12px;border-radius:50%;border:2px solid #9cc0ff;box-shadow:0 0 0 2px rgba(96,165,250,.18) inset;
}
#iagnostico-app .option-card:has(input:checked){border-color:#2563eb;background:linear-gradient(180deg,rgba(37,99,235,.20),rgba(37,99,235,.08))}
#iagnostico-app .option-card:has(input:checked) .dot{background:#2563eb;border-color:#2563eb}
#iagnostico-app .option-title{font-weight:600}
#iagnostico-app .option-desc{font-size:.85rem;opacity:.8}

/* variações em linha única (ex: B2B/B2C/Ambos) */
#iagnostico-app .option-inline{display:flex;gap:10px;flex-wrap:wrap}
#iagnostico-app .option-inline .option-card{min-width:140px;justify-content:flex-start}
/* ===== IAgnóstico – fixes de contraste/overlay e micro-polimento ===== */

/* 1) Cartões selecionados: garantir contraste do texto */
#iagnostico-app .option-card:has(input:checked){
  color:#0b1220;                 /* texto escuro sobre o fundo azul */
  border-color:#2563eb;
  background:linear-gradient(180deg,rgba(37,99,235,.22),rgba(37,99,235,.10));
}
#iagnostico-app .option-card:has(input:checked) .option-title{ color:#0b1220; }
#iagnostico-app .option-card:has(input:checked) .option-desc{ color:#10233f; opacity:.95; }

/* 2) Hover/focus mais elegante e clique mais “vivo” */
#iagnostico-app .option-card{
  isolation:isolate;             /* cria contexto e evita sombras/overlays escaparem */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#iagnostico-app .option-card:hover{
  transform:translateY(-1px);
  border-color:#60a5fa;
  box-shadow:0 4px 14px rgba(96,165,250,.18);
}
#iagnostico-app .option-card:active{
  transform:translateY(0);
  filter:saturate(1.05);
}

/* 3) Nunca deixar cartões/fieldsets cobrirem botões/inputs de outras áreas */
#iagnostico-app .step{ position:relative; z-index:0; }
#iagnostico-app .step-body{ position:relative; z-index:1; }
#iagnostico-app .cta-group{ position:relative; z-index:3; }   /* acima de chips/cards */
#iagnostico-app fieldset{ position:relative; z-index:1; }
#iagnostico-app .option-grid, 
#iagnostico-app .option-inline{ position:relative; z-index:1; }

/* 4) Chips (checkboxes) selecionados – garantir legibilidade */
#iagnostico-app fieldset label:has(input[type="checkbox"]:checked){
  color:#0b1220;
  background:#2563eb;
  border-color:#2563eb;
}

/* 5) Inputs do último step – reforçar clicabilidade */
#step-contato input, #step-contato select, #step-contato textarea, #step-contato label{
  position:relative; z-index:2;
}

/* 6) Progress bar com transição suave */
#progress-bar{ transition: width .28s ease; }

/* === IAgnóstico — ajustes finos de contraste e LGPD ===================== */
/* 1) Cartões (radios) com selecionado mais claro e legível */
#iagnostico-app .option-card{
  border:1px solid rgba(148,192,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.03));
}
#iagnostico-app .option-card .option-title{ color:#e6efff; }
#iagnostico-app .option-card .option-desc{ color:rgba(230,239,255,.8); }

#iagnostico-app .option-card:has(input:checked){
  background:linear-gradient(180deg,rgba(96,165,250,.30),rgba(96,165,250,.16));
  border-color:#60a5fa;
  color:#0b1220;
}
#iagnostico-app .option-card:has(input:checked) .option-title{ color:#0b1220; }
#iagnostico-app .option-card:has(input:checked) .option-desc{ color:#0a223f; opacity:.95; }
#iagnostico-app .option-card .dot{ border-color:#9cc0ff; }
#iagnostico-app .option-card:has(input:checked) .dot{ background:#2563eb; border-color:#2563eb; }

/* 2) Chips (checkboxes do fieldset) selecionados — manter alto contraste */
#iagnostico-app fieldset label:has(input[type="checkbox"]:checked){
  background:#2563eb;
  border-color:#2563eb;
  color:#0b1220;
}

/* 3) NÃO esconder o checkbox de LGPD */
#step-contato input[name="lgpd"]{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  opacity:1 !important;
  cursor:pointer !important;
  accent-color:#2563eb; /* cor do check */
}

/* 4) Link de privacidade sempre legível */
#step-contato a{ color:#60a5fa; text-decoration:underline; }

/* 5) Micro-polimento: foco/teclado visível nos cartões */
#iagnostico-app .option-card:focus-within{
  outline:2px solid rgba(96,165,250,.6);
  outline-offset:2px;
}

/* === Ajuste final dos botões e multi-select === */

/* Texto sempre branco */
#iagnostico-app .option-card,
#iagnostico-app .option-card .option-title,
#iagnostico-app .option-card .option-desc {
  color: #ffffff !important;
}

/* Multi-select (checkboxes): apenas muda a cor de fundo ao selecionar */
#iagnostico-app fieldset label {
  background: rgba(255,255,255,.04);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.10);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#iagnostico-app fieldset label:has(input[type="checkbox"]:checked) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* Cartões de radio: borda azul clara quando selecionado */
#iagnostico-app .option-card:has(input:checked) {
  background: linear-gradient(180deg, rgba(96,165,250,.25), rgba(96,165,250,.15));
  border-color: #60a5fa;
}

/* Check do LGPD visível */
#step-contato input[name="lgpd"] {
  position: static !important;
  opacity: 1 !important;
  cursor: pointer !important;
  accent-color: #2563eb;
}

/* === Multiselects iguais aos botões de radio === */
#iagnostico-app fieldset label {
  background: rgba(255,255,255,.04);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
  padding: 10px 14px;
  cursor: pointer;
}

/* Quando marcado: fundo azul igual aos botões abaixo */
#iagnostico-app fieldset label:has(input[type="checkbox"]:checked) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* Checkbox escondido mas funcional */
#iagnostico-app input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* === OVERRIDE FINAL — Multiselect igual ao padrão dos botões (texto branco; fundo azul no checked) === */
#iagnostico-app fieldset .grid-3 > label,
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
#iagnostico-app fieldset .grid-3 > label span{
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
  color:#ffffff !important;
}

#iagnostico-app fieldset .grid-3 > label{
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  transition: background .2s ease, border-color .2s ease !important;
}

#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked){
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#ffffff !important;
}

#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked) span{
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
  color:#ffffff !important;
}
/* === OVERRIDES FINAIS — seleção suave e legibilidade ==================== */

/* Radios (cards) selecionados: fundo/borda #2563eb; texto branco */
#iagnostico-app .option-card:has(input:checked){
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}
#iagnostico-app .option-card:has(input:checked) .option-title,
#iagnostico-app .option-card:has(input:checked) .option-desc{
  color:#fff !important;
}

/* Multiselect (checkbox chips): igual aos radios */
#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked){
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}
#iagnostico-app fieldset .grid-3 > label span{ color:#fff !important; }
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked) span{ color:#fff !important; }
  #iagnostico-app fieldset .grid-3 > label.multi-select-top:has(input[type="checkbox"]:checked){background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;}
/* === LGPD layout: forçar linha única e clique confortável =============== */
#step-contato label:has(input[name="lgpd"]) {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:10px !important;
}
#step-contato input[name="lgpd"]{
  position:static !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  accent-color:#2563eb !important;
  transform: translateY(1px);
}
#step-contato .small a{ color:#60a5fa; text-decoration:underline; }

/* === IAgnóstico – override para chips (visual sutil) ===================== */
#iagnostico-app fieldset label{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: #e6efff;
}
#iagnostico-app fieldset label:has(input[type="checkbox"]:checked){
  background: rgba(96,165,250,.12);
  border-color: #60a5fa;
  color: #e6efff;
  box-shadow: inset 0 0 0 2px rgba(96,165,250,.25);
}
/* ======================================================================= */

/* === IAgnóstico — OVERRIDE FINAL (seleção sutil, texto branco) ========== */
#iagnostico-app .option-card:has(input:checked){
  background: linear-gradient(180deg, rgba(96,165,250,.16), rgba(96,165,250,.10)) !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}
#iagnostico-app .option-card:has(input:checked) .option-title,
#iagnostico-app .option-card:has(input:checked) .option-desc{
  color:#fff !important;
}

/* Chips (multiselect) — igual aos cards: fundo sutil, borda azul, texto branco */
#iagnostico-app fieldset label{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #e6efff !important;
}
#iagnostico-app fieldset label:has(input[type="checkbox"]:checked){
  background: rgba(96,165,250,.16) !important;
  border-color: #60a5fa !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.30) !important;
}
/* ======================================================================= */

/* === Top multi-select: mesma pegada visual dos option-cards === */
#iagnostico-app fieldset .grid-3 > label{
  border:1px solid rgba(148,192,255,.22) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.03)) !important;
  border-radius:12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#iagnostico-app fieldset .grid-3 > label:hover{
  transform:translateY(-1px);
  border-color:#60a5fa !important;
  box-shadow:0 4px 14px rgba(96,165,250,.18);
}
#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked){
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}
#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked) span{
  color:#fff !important;
}

/* === LGPD: manter a cor do link mesmo quando marcado ===================== */
#step-contato input[name="lgpd"]:checked + .small { 
  color: #e6efff !important;              /* texto normal do label */
}
#step-contato input[name="lgpd"]:checked + .small a {
  color: #60a5fa !important;              /* link azul consistente */
  text-decoration: underline;
}
/* ========================================================================= */
/* === IAgnóstico — tema suave para selecionados (menos azul) ================ */
#iagnostico-app .option-card:has(input:checked){
  background: linear-gradient(180deg, rgba(96,165,250,.22), rgba(96,165,250,.10)) !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}
#iagnostico-app .option-card:has(input:checked) .option-title,
#iagnostico-app .option-card:has(input:checked) .option-desc{ color:#fff !important; }

#iagnostico-app fieldset .grid-3 > label:has(input[type="checkbox"]:checked){
  background: rgba(96,165,250,.16) !important;
  border-color: #60a5fa !important;
  color:#fff !important;
  box-shadow: inset 0 0 0 1px rgba(148,192,255,.25) !important;
}
/* ========================================================================== */