/* ============================================================
   design.css — componentes recorrentes do Claude Design (VERBATIM)
   + TODAS as 35 regras :hover (os <style-hover> do design não têm
     equivalente inline; viram regras :hover reais aqui) + anel de foco.
   Fonte de verdade: design/Sistema MVP Juridico.dc.html.
   Valores copiados caractere a caractere (D-03 — fidelidade 1:1).
   ============================================================ */

/* ---------- Botões: hero (linha 75/78) ---------- */
.btn-primary{background:linear-gradient(180deg,#13A877,#0FA070);color:#fff;border:none;border-radius:12px;padding:15px 26px;font:700 16px 'Hanken Grotesk',sans-serif;letter-spacing:-.01em;cursor:pointer;display:inline-flex;align-items:center;gap:9px;box-shadow:0 8px 24px rgba(15,160,112,.34),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .16s ease,box-shadow .16s ease}
.btn-secondary{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:15px 26px;font:600 16px 'Hanken Grotesk',sans-serif;cursor:pointer;transition:background .16s ease}
/* Secundário sobre superfície CLARA (estados vazios/placeholder): .btn-secondary
   é de contexto ESCURO (texto branco s/ branco translúcido) e fica invisível no
   fundo #FBFCFC. Tokens verbatim do design: superfície branca #fff, texto #0C1411
   e borda #E2E4E3 (igual ao secundário claro do Lab-sucesso/video_library), hover
   #0FA070/#F7FBF9 (igual a .btn-outline:hover/.btn-success-diag:hover). */
.btn-secondary-light{background:#fff;color:#0C1411;border:1px solid #E2E4E3;border-radius:12px;padding:15px 26px;font:600 16px 'Hanken Grotesk',sans-serif;cursor:pointer;text-decoration:none;display:inline-block;transition:border-color .16s ease,background .16s ease}
.btn-secondary-light:hover{border-color:#0FA070;background:#F7FBF9}

/* ---------- Botões: CTA final sobre escuro (linha 242/243) ---------- */
.btn-cta-primary{background:linear-gradient(180deg,#13A877,#0FA070);color:#fff;border:none;border-radius:12px;padding:15px 28px;font:700 16px 'Hanken Grotesk',sans-serif;letter-spacing:-.01em;cursor:pointer;box-shadow:0 8px 24px rgba(15,160,112,.36),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .16s ease}
.btn-cta-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:15px 28px;font:600 16px 'Hanken Grotesk',sans-serif;cursor:pointer;transition:background .16s ease}

/* ---------- Cards ---------- */
/* Card de ação branco (linha 156) — os 4 cards da central de acesso */
.action-card{text-align:left;cursor:pointer;background:#fff;border:1px solid #ECEEED;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px;min-height:208px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease,border-color .18s ease}
/* Card destacado escuro do diagnóstico (linha 136) */
.card-dark{width:100%;text-align:left;cursor:pointer;background:#062019;color:#fff;border:none;border-radius:20px;padding:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:26px;align-items:center;position:relative;overflow:hidden;box-shadow:0 16px 40px rgba(6,32,25,.2);transition:transform .18s cubic-bezier(.4,0,.2,1)}

/* ---------- Badges ---------- */
.badge-recommended{display:inline-block;background:#10B981;color:#062019;font:700 10px 'Hanken Grotesk',sans-serif;letter-spacing:.05em;padding:4px 9px;border-radius:6px}
/* Estados de risco (riskMeta — UI-SPEC § Color) */
.badge-risk-low{display:inline-flex;align-items:center;gap:6px;background:#E7F6F0;color:#0A6E50;border:1px solid #C5E8DA;font:700 11px 'Hanken Grotesk',sans-serif;padding:4px 10px;border-radius:99px}
.badge-risk-med{display:inline-flex;align-items:center;gap:6px;background:#FEF3E2;color:#B45309;border:1px solid #F5DCB3;font:700 11px 'Hanken Grotesk',sans-serif;padding:4px 10px;border-radius:99px}
.badge-risk-high{display:inline-flex;align-items:center;gap:6px;background:#FEECEA;color:#B42318;border:1px solid #F5C9C3;font:700 11px 'Hanken Grotesk',sans-serif;padding:4px 10px;border-radius:99px}

/* ---------- Section head (linhas 131-132) ---------- */
.section-eyebrow{font:700 12px 'Hanken Grotesk',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#0A6E50;margin-bottom:9px}
.section-head{font:800 28px 'Hanken Grotesk',sans-serif;color:#0C1411;margin:0;letter-spacing:-.025em}

/* ---------- Trust chip (linhas 81-83) ---------- */
.trust-chip{display:inline-flex;align-items:center;gap:7px;font:500 13px 'Hanken Grotesk',sans-serif;color:#86A99C}

/* ---------- Marca/avatar (linha 34) ---------- */
.brand-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(160deg,#13A877,#0B6E51);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 6px rgba(11,110,81,.28)}

/* ---------- Links de header/footer (base) ---------- */
.header-back-btn{background:none;border:none;color:#54605A;font:600 13px 'Hanken Grotesk',sans-serif;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .15s ease}
.footer-link{background:none;border:none;color:#9DB3AA;font:400 13px 'Hanken Grotesk',sans-serif;cursor:pointer;text-align:left;padding:0;transition:color .15s ease}
.footer-link-admin{color:#4A7A68}

/* ============================================================
   ESTADOS :hover — transcrição VERBATIM dos 35 <style-hover>.
   Cada linha corresponde a um marcador style-hover do design.
   ============================================================ */
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(15,160,112,.42),inset 0 1px 0 rgba(255,255,255,.16)} /* L75 */
.btn-secondary:hover{background:rgba(255,255,255,.13)} /* L78 */
.card-dark:hover{transform:translateY(-3px)} /* L136 */
/* 4 cards de ação da central de acesso (L156,166,176,186) */
.action-card-videos:hover,
.action-card-docs:hover,
.action-card-lab:hover,
.action-card-contato:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(16,24,40,.1);border-color:#D7DCDA}
.btn-cta-primary:hover{transform:translateY(-1px)} /* L242 */
.btn-cta-secondary:hover{background:rgba(255,255,255,.14)} /* L243 */
.header-back-btn:hover{color:#0FA070} /* L44 */
/* Links de navegação do footer (L613,614,615,616,622) */
.footer-link-diag:hover,
.footer-link-videos:hover,
.footer-link-docs:hover,
.footer-link-lab:hover,
.footer-link-analise:hover{color:#fff}
.footer-link-admin:hover{color:#34D399} /* L623 */

/* --- Estados :hover de componentes de fases seguintes (sheet compartilhado) --- */
.diag-option:hover{border-color:#0FA070;background:#F7FBF9} /* L289 */
.btn-step-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(15,160,112,.4),inset 0 1px 0 rgba(255,255,255,.16)} /* L314 */
.diag-skip-link:hover{color:#0FA070} /* L317 */
.video-card-rec:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(16,24,40,.09)} /* L406 */
.doc-row:hover{border-color:#D7DCDA} /* L428 */
.btn-result-cta:hover{transform:translateY(-1px)} /* L443 */
.video-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(16,24,40,.1);border-color:#D7DCDA} /* L463 */
.btn-watch:hover{background:#DAF3E8} /* L471 */
.btn-diag-sm:hover{transform:translateY(-1px)} /* L481 */
.btn-outline:hover{border-color:#0FA070;background:#F7FBF9} /* L482 */
.doc-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,24,40,.09);border-color:#D7DCDA} /* L499 */
.btn-doc-download:hover{transform:translateY(-1px)} /* L504 */
.btn-lab-submit:hover{transform:translateY(-1px)} /* L543 */
.btn-success-home:hover{transform:translateY(-1px)} /* L556 */
.btn-success-diag:hover{border-color:#0FA070;background:#F7FBF9} /* L557 */
.btn-contact-submit:hover{transform:translateY(-1px)} /* L582 */
.btn-contact-home:hover{transform:translateY(-1px)} /* L593 */
.admin-back-link:hover{color:#0FA070} /* L648 */
.nav-toggle:hover{transform:translateY(-1px)} /* L787 */

/* ============================================================
   Anel de foco de teclado (UI-03) — não remover outline sem substituto.
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #13A877;outline-offset:2px}