/* Camada visual "moderna" (estilo das interfaces em React / shadcn), 2026-10-20, pedido do dono.
   Mesmas cores da marca (--brand, --link, --btn, --green...); muda fonte, cantos, bordas, sombras, botões e cartões.
   Carregada por último em views/layout.php. Para voltar ao visual anterior, basta tirar o <link> deste arquivo. */
:root {
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text: #0F172A; --text-2: #1E293B; --muted: #64748B;
  --line: #E2E8F0; --soft: #F8FAFC;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(15,23,42,.05);
  --sh: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh-lg: 0 12px 28px -8px rgba(15,40,80,.18), 0 4px 10px -4px rgba(15,40,80,.08);
  --ring: 0 0 0 3px rgba(10,100,173,.22);
}
html.calm { --ring: 0 0 0 3px rgba(59,95,125,.22); }

/* ---------- Base e tipografia ---------- */
body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font-family: var(--font); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero-title, .feature-title, .tools-band h2, .nl-title { font-family: var(--font) !important; letter-spacing: -.025em; }
.big-title, .section-title, .sec-title, .list-head h1, .hw-title, .ph h1, .article-title, .msg-box h1, .f-h1, .pf-h1, .pf-pname, .guia-sub, .card-title, .hg-card strong, .ht-card strong { font-family: var(--font) !important; letter-spacing: -.03em; }
.article-title { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.content { font-family: var(--font); line-height: 1.75; color: var(--text-2); }
.content h2 { letter-spacing: -.02em; font-weight: 700; }
.content h3 { letter-spacing: -.01em; }
.kicker, .sec-kicker, .card-kicker, .guia-kicker, .ct-kicker { letter-spacing: .08em; font-weight: 700; }
.guia-kicker { display: inline-flex; align-items: center; gap: 6px; background: #E8F1FA; color: var(--brand); border-radius: 999px; padding: 4px 12px; font-size: 12px; text-transform: uppercase; }

/* ---------- Cabeçalho ---------- */
.brandbar-row { min-height: 60px; }
.brand-mark { border-radius: 9px; font-family: var(--font); }
.brand-name { font-family: var(--font); font-weight: 800; font-size: 23px; letter-spacing: -.04em; }
.brand-tools { font-weight: 600; }
.calm-toggle, .login-link { border-radius: 999px; font-family: var(--font); font-weight: 600; }
.login-link { background: #fff; color: var(--brand) !important; padding: 7px 14px; box-shadow: var(--sh-sm); }
.login-link:hover { text-decoration: none !important; opacity: .92; }
.topics-nav { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
.nav-row { gap: 0; padding-top: 7px; padding-bottom: 7px; flex-wrap: nowrap; }
.topics-nav a { white-space: nowrap; font-size: 13.5px; padding: 7px 8px; border-radius: var(--r-sm); border-bottom: 0; font-weight: 600; color: #334155; transition: background .15s, color .15s; }
.topics-nav a:hover { background: #F1F5F9; color: var(--brand); }
.topics-nav a.on { background: #E8F1FA; color: var(--brand); }
.topics-nav .search { border-radius: var(--r-sm); border-color: var(--line); box-shadow: var(--sh-sm); }
.topics-nav .search:focus-within { box-shadow: var(--ring); border-color: var(--link); }
.topics-nav .search input { outline: none; }

/* ---------- Botões ---------- */
.btn-primary, .hero-btn, .lead-btn, .wa-btn, .find-search button, .hw-search button, .nl-row button, .msg-box button, .pf-search button,
.lead-form button, .pf-btn, .sb, .fb-buttons button, .read-more, .hb-cta, .ct-hub-btn, .f-login-cta a {
  font-family: var(--font) !important; border-radius: var(--r-sm); transition: background .15s, box-shadow .15s, transform .1s, border-color .15s;
}
.btn-primary { font-weight: 600; box-shadow: var(--sh-sm); }
.btn-primary:hover { box-shadow: var(--sh); }
.btn-primary:active, .pf-btn:active, .sb:active { transform: translateY(1px); }
.hero-btn { border-radius: var(--r-sm); font-weight: 600; }
.wa-btn { border-radius: var(--r-sm); font-weight: 600; box-shadow: var(--sh-sm); }
.sb { border-radius: var(--r-sm); font-weight: 600; box-shadow: var(--sh-sm); }
.fb-buttons button { font-weight: 600; box-shadow: var(--sh-sm); }
.read-more { font-weight: 600; }

/* ---------- Campos ---------- */
input[type=text], input[type=email], input[type=search], input[type=tel], input[type=url], input[type=number], select, textarea { font-family: var(--font); }
.find-search input, .nl-row input, .lead-field input, .f-input, .pf-form input[type=text], .pf-form input[type=email], .pf-form input[type=tel], .pf-form input[type=url], .pf-form select, .pf-form textarea {
  border-radius: var(--r-sm) !important; border-color: #CBD5E1; transition: border-color .15s, box-shadow .15s;
}
.find-search input:focus, .nl-row input:focus, .lead-field input:focus, .f-input:focus, .pf-form input:focus, .pf-form select:focus, .pf-form textarea:focus { outline: none; border-color: var(--link); box-shadow: var(--ring); }
.find-search { gap: 8px; }
.find-search input { border-right: 1px solid #CBD5E1; }
.find-search button { border-radius: var(--r-sm); }
.hw-search { box-shadow: var(--sh-lg); border-color: var(--line); }
.hw-search:focus-within { box-shadow: var(--ring), var(--sh-lg); border-color: var(--link); }
.hw-search input { outline: none; }

/* ---------- Chips e temas ---------- */
.chip { border-radius: 999px; font-weight: 600; box-shadow: var(--sh-sm); transition: all .15s; }
.chip:hover, .chip.on { box-shadow: var(--sh); background: #E8F1FA; border-color: #BCD3EA; }
.topic-grid a { border-radius: var(--r); font-weight: 600; box-shadow: var(--sh-sm); transition: all .15s; }
.topic-grid a:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: #BCD3EA; }

/* ---------- Cartões ---------- */
.card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 0 18px; background: #fff; box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: #CBD5E1; }
.card.card-noimg { border-top: 1px solid var(--line); padding-top: 0; }
.card > :not(.card-img):not(.card-art) { padding-left: 18px; padding-right: 18px; }
.card > :first-child:not(.card-img):not(.card-art) { padding-top: 18px; }
.card-img img { margin-bottom: 14px; }
.card .card-art { border-radius: 0; margin-bottom: 14px; }
.card-title { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.card-title a:hover { text-decoration: none; }
.cards { gap: 22px; }
.feature { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); background: #fff; }
.feature-body { padding: 28px 30px; }
.feature-title { font-weight: 800; }
.hg-card, .ht-card, .ct-hub-card, .f-card, .side-card, .side-meta, .box, .nl, .empty, .alert-box, .hc-topics, .hc-empty, .pf-card, .pf-box, .pf-contact, .pf-fbox, .pf-esp-card, .lead-form, .login-card, .account-grid > section {
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.hg-card, .side-card, .side-meta, .f-card, .pf-card, .pf-box, .pf-fbox, .pf-esp-card, .hc-topics { border-color: var(--line); }
.hg-card:hover, .ct-hub-card:hover, .pf-esp-card:hover, .pf-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: #CBD5E1; }
.ht-card { box-shadow: var(--sh); }
.ht-card:hover { box-shadow: var(--sh-lg); }
.house-banner { border-radius: var(--r-lg); box-shadow: var(--sh); }
.box.wa { border-radius: var(--r-lg); box-shadow: var(--sh); }
.content blockquote { border-radius: 0 var(--r) var(--r) 0; }
.content table { border-radius: var(--r); border: 1px solid var(--box-line); }
.content th, .content td { border-left: 0; border-right: 0; }
.content th { border-bottom: 1px solid #BCD3EA; }
.toolbar button, .toolbar a { font-family: var(--font); font-weight: 600; background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); }
.toolbar button:hover, .toolbar a:hover { border-color: #CBD5E1; background: var(--soft); }
.related li { border-top-color: var(--line); }
.related a { font-weight: 600; }

/* ---------- Seções da home e cabeçalhos ilustrados ---------- */
.hw, .ph, .pf-hero, .page-hero { background: radial-gradient(1200px 400px at 85% -10%, #DCEBF7 0%, transparent 60%), linear-gradient(180deg, #F8FBFE 0%, #EEF5FB 100%); border-bottom: 1px solid var(--line); }
.hw-art, .ph-art, .pf-hero-art { box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.ht { background: radial-gradient(900px 300px at 10% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(135deg, #003B71, #0A64AD); }
.hc { background: var(--soft); border-top-color: var(--line); }
.tools-band { background: linear-gradient(135deg, var(--brand), #0A64AD); }
.sec-more { font-weight: 600; }
.ht-ico { border-radius: var(--r); }

/* ---------- Paginação e diversos ---------- */
.pager a { border-radius: var(--r-sm); font-weight: 600; box-shadow: var(--sh-sm); background: #fff; }
.pager a:hover { box-shadow: var(--sh); }
.to-top { box-shadow: var(--sh-lg); }
.tag, .new, .hb-badge, .tools-side .free { border-radius: 999px; }
.author-mark { font-family: var(--font); }
.progress span { background: linear-gradient(90deg, var(--link), var(--green)); }

/* ---------- Rodapé ---------- */
.site-footer { font-family: var(--font); background: linear-gradient(180deg, var(--brand), #00305C); }
.site-footer .footer-brand { font-weight: 800; letter-spacing: -.03em; }
.footer-title { letter-spacing: .08em; }

/* ---------- Diretório, fórum e ferramentas (mesma pegada) ---------- */
.pf-search { border-radius: var(--r) !important; }
.pf-search button { border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0; }
.pf-tag, .pf-chips li { font-family: var(--font); }
.f-cat, .f-topic { border-radius: var(--r); }
.tool-card, .tl-card { border-radius: var(--r-lg); }

@media (max-width: 1180px) { .topics-nav a { padding: 7px 6px; font-size: 13px; } .topics-nav .search input { width: 96px; } }
@media (max-width: 900px) {
  .nav-row { flex-wrap: wrap; }
  .pf-search button { border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); }
  .nav-row { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 720px) {
  .feature-body { padding: 20px; }
  .card:hover, .hg-card:hover, .pf-card:hover { transform: none; }
}
@media (max-width: 720px) {
  .nav-row { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .topics-nav a { padding: 11px 12px; font-size: 15px; border-bottom: 0; }
  .topics-nav .search input { width: 100%; }
}
/* Cabeçalho no celular: marca numa linha só, "Contato" vai só para o rodapé e o login vira "Entrar" */
@media (max-width: 720px) {
  .brandbar-row { gap: 8px; min-height: 56px; }
  .brand { gap: 7px; min-width: 0; }
  .brand-name { font-size: 18px; white-space: nowrap; }
  .brand-tools { gap: 6px; }
  .brand-tools > a:not(.login-link):not(.acct-link) { display: none; }
  .calm-toggle { font-size: 11px; padding: 5px 8px; white-space: nowrap; }
  .login-link { white-space: nowrap; font-size: 0 !important; padding: 6px 11px; }
  .login-link::after { content: "Entrar"; font-size: 12px; }
  .acct-link span { display: none; }
  .menu-toggle { padding: 4px 10px; }
}
@media (max-width: 400px) { .brand-name { font-size: 16px; } .calm-toggle { font-size: 0 !important; padding: 4px 9px; } .calm-toggle::after { content: "☾"; font-size: 15px; line-height: 1; } }