/* ==========================================================================
   ADM Direito — Tema 2026 (camada visual sobre o layout V3)
   --------------------------------------------------------------------------
   Não muda conteúdo, menus nem HTML: só a aparência. É carregado por último
   no topo_pagina_3 (depois do custom_v3.css e do <style> de cada página),
   então vence os estilos antigos sem precisar mexer neles.

   Cores: o tema padrão é "Esmeralda". Para trocar, ponha data-tema="azul"
   ou data-tema="vinho" na tag <html> (topo_pagina_3) — ou mude só os
   tokens --t-* abaixo. Para voltar ao visual anterior, basta remover o
   <link> deste arquivo no topo_pagina_3.
   ========================================================================== */

:root {
    /* Tema Esmeralda (padrão) */
    --t-base: #12161C;          /* grafite: cabeçalho, hero, rodapé */
    --t-base-2: #1C232C;        /* grafite claro: menus, cartões sobre escuro */
    --t-acc: #0E9F6E;           /* esmeralda: ações e destaques */
    --t-acc-rgb: 14, 159, 110;
    --t-acc-dark: #0B7F58;      /* esmeralda escura: texto e botões sobre claro (AA) */
    --t-acc-deep: #08603F;      /* hover dos botões */
    --t-acc-soft: #E6F5EE;      /* fundos suaves de destaque */
    --t-acc-on-dark: #4ADE9F;   /* esmeralda clara: texto sobre o grafite */
    --t-paper: #F4F6F5;         /* fundo das páginas */
    --t-line: #E1E6E3;          /* bordas finas */
    --t-text: #2B3138;          /* texto corrido */
    --t-muted: #5F6B76;         /* texto secundário */
    --t-radius: 14px;
}
:root[data-tema="azul"] {
    --t-base: #0F1B2D; --t-base-2: #182842;
    --t-acc: #2F6FE4; --t-acc-rgb: 47, 111, 228; --t-acc-dark: #1F55C0; --t-acc-deep: #173F91;
    --t-acc-soft: #E9F0FD; --t-acc-on-dark: #8DB4FF;
    --t-paper: #F4F6FA; --t-line: #DFE5EE;
}
:root[data-tema="vinho"] {
    --t-base: #24121A; --t-base-2: #351B25;
    --t-acc: #A3324C; --t-acc-rgb: 163, 50, 76; --t-acc-dark: #8E2840; --t-acc-deep: #6E1E31;
    --t-acc-soft: #F8EAEE; --t-acc-on-dark: #F4A8BA;
    --t-paper: #F7F5F4; --t-line: #E7E1DF;
}

/* --- Os tokens do layout V3 passam a apontar para o tema ----------------- */
:root,
:root[data-tema] {
    --blue: var(--t-acc-dark);
    --blue-dark: var(--t-base-2);
    --ink: var(--t-base);
    --ink-soft: #2A323C;
    --gold: var(--t-acc-dark);
    --gold-dark: #FFFFFF;
    --gold-wash: var(--t-acc-soft);
    --paper: var(--t-paper);
    --hairline: var(--t-line);
    --ink-muted: var(--t-muted);
    --green-cta: var(--t-acc-dark);
    --header-height: 76px;

    --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; /* rótulos deixam de ser mono */

    /* Bootstrap 5.3 */
    --bs-primary: var(--t-acc-dark);
    --bs-primary-rgb: var(--t-acc-rgb);
    --bs-link-color: var(--t-acc-dark);
    --bs-link-color-rgb: var(--t-acc-rgb);
    --bs-link-hover-color: var(--t-acc-deep);
    --bs-link-hover-color-rgb: var(--t-acc-rgb);
    --bs-body-color: var(--t-text);
    --bs-body-font-family: var(--font-body);
    --bs-border-radius: 10px;
    --bs-border-color: var(--t-line);
    --bs-focus-ring-color: rgba(var(--t-acc-rgb), .25);
}

/* Dentro das áreas escuras, o "dourado" vira a cor clara do tema (contraste). */
.header, .home-hero, .hero-section, .testimonials-section, .pecas-section,
.side-cta, .site-footer, .bg-ink, .stats-bar, .main-nav, .dropdown-menu[style*="--blue-dark"] {
    --gold: var(--t-acc-on-dark);
    --gold-dark: var(--t-base);
}

/* --- Base ---------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--t-text);
    background-color: var(--t-paper);
}
body.bg-light { background-color: var(--t-paper) !important; }
h1, h2, h3, h4, .adm-display, .h1, .h2, .h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    word-spacing: .04em;
    color: var(--t-base);
}
h1, .h1 { font-weight: 800; }
h2, h3, .h2, .h3 { font-weight: 700; }
::selection { background: rgba(var(--t-acc-rgb), .2); }
a { text-underline-offset: .18em; }

.adm-eyebrow, .adm-tag-gold {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--gold);
}
.adm-mono { font-family: var(--font-display); font-weight: 600; }

/* --- Botões e formulários ------------------------------------------------ */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--t-acc-dark);
    --bs-btn-border-color: var(--t-acc-dark);
    --bs-btn-hover-bg: var(--t-acc-deep);
    --bs-btn-hover-border-color: var(--t-acc-deep);
    --bs-btn-active-bg: var(--t-acc-deep);
    --bs-btn-active-border-color: var(--t-acc-deep);
    --bs-btn-disabled-bg: var(--t-acc-dark);
    --bs-btn-disabled-border-color: var(--t-acc-dark);
    --bs-btn-focus-shadow-rgb: var(--t-acc-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--t-acc-dark);
    --bs-btn-border-color: var(--t-acc-dark);
    --bs-btn-hover-bg: var(--t-acc-dark);
    --bs-btn-hover-border-color: var(--t-acc-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--t-acc-deep);
    --bs-btn-active-border-color: var(--t-acc-deep);
    --bs-btn-active-color: #fff;
    border-color: var(--t-acc-dark);
    color: var(--t-acc-dark);
}
.btn-outline-primary:hover { background-color: var(--t-acc-dark); color: #fff; }
.btn-cta, .btn-cta:focus {
    background-color: var(--t-acc);
    color: #fff;
    border-radius: 10px;
}
.btn-cta:hover { background-color: var(--t-acc-dark); color: #fff; }
.hero-section .btn-cta, .home-hero .btn-cta, .side-cta .btn-cta, .pecas-section .btn-cta {
    background-color: var(--t-acc-on-dark);
    color: var(--t-base);
}
.hero-section .btn-cta:hover, .home-hero .btn-cta:hover, .side-cta .btn-cta:hover, .pecas-section .btn-cta:hover {
    background-color: #fff;
    color: var(--t-base);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--t-acc);
    box-shadow: 0 0 0 .2rem rgba(var(--t-acc-rgb), .2);
}
.form-check-input:checked { background-color: var(--t-acc-dark); border-color: var(--t-acc-dark); }
.pagination {
    --bs-pagination-color: var(--t-acc-dark);
    --bs-pagination-hover-color: var(--t-acc-deep);
    --bs-pagination-focus-color: var(--t-acc-deep);
    --bs-pagination-active-bg: var(--t-acc-dark);
    --bs-pagination-active-border-color: var(--t-acc-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--t-acc-rgb), .25);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--t-acc-dark); }
.list-group { --bs-list-group-active-bg: var(--t-acc-dark); --bs-list-group-active-border-color: var(--t-acc-dark); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--t-acc-dark); }
.badge.bg-primary, .bg-primary { background-color: var(--t-acc-dark) !important; }
.text-primary { color: var(--t-acc-dark) !important; }

/* --- Cabeçalho ----------------------------------------------------------- */
.header {
    background-color: var(--t-base);
    height: var(--header-height);
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.header .nav-link {
    font-weight: 600;
    font-size: .92rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, .82) !important;
}
.header .nav-link:hover,
.header .nav-link:focus,
.header .nav-link.show,
.header .nav-item.active > .nav-link {
    background-color: rgba(255, 255, 255, .08);
    color: #fff !important;
}
.header .nav-item.active > .nav-link { box-shadow: inset 0 -2px 0 var(--t-acc-on-dark); }
.header .nav-link .icon { opacity: .75; }
/* O menu não quebra em duas linhas: menos espaço entre itens e ícones só em telas largas. */
.header .main-nav .nav { flex-wrap: nowrap; }
.header .main-nav .nav-link { padding: .5rem .7rem; white-space: nowrap; }
@media (max-width: 1499.98px) and (min-width: 1200px) {
    .header .main-nav .nav-link .icon { display: none !important; }
}
.header #entrar_sistema span { white-space: nowrap; }
.header .site-search .form-control { max-width: 150px; }
/* Os menus grandes tinham "top: 84px" no próprio HTML: acompanham a nova altura. */
.header .dropdown-menu {
    top: var(--header-height) !important;
    background-color: var(--t-base-2) !important;
    border-top: 2px solid var(--t-acc) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.header .dropdown-item { border-radius: 8px; }
.header .dropdown-item:hover { background-color: rgba(255, 255, 255, .06); color: #fff !important; }
.header input.form-control { border-radius: 8px; }
.header .btn-outline-light { border-radius: 8px; }
.updates-panel { top: var(--header-height); height: calc(100vh - var(--header-height)); }
@media (max-width: 1199.98px) {
    .main-nav { background-color: var(--t-base-2); }
}
@media (max-width: 991.98px) {
    .updates-panel { top: var(--header-height-mobile); height: calc(100vh - var(--header-height-mobile)); }
}

/* --- Home: abertura ------------------------------------------------------ */
.home-hero {
    background-color: var(--t-base);
    padding: 4rem 0 3.25rem;
}
/* Malha discreta, como papel quadriculado de rascunho. */
.home-hero::before, .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.home-hero > .container, .hero-section > .container { position: relative; z-index: 1; }
body .home-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.25rem);
    letter-spacing: -0.02em;
    word-spacing: .06em;
    line-height: 1.06;
    max-width: 19ch;
}
.home-hero .hero-lead { color: #B8C2CC; font-size: 1.08rem; }
.hero-accent { color: var(--t-acc-on-dark); }
.hero-search {
    border-radius: var(--t-radius);
    padding: 8px 8px 8px 18px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .07), 0 18px 40px rgba(0, 0, 0, .35);
}
.hero-search input { font-family: var(--font-body); font-size: 1rem; color: var(--t-text); }
.hero-search input::placeholder { color: #8C979F; }
.hero-search .btn { border-radius: 10px; padding-inline: 1.25rem; }
.hero-stat .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    color: #fff;
    letter-spacing: -0.02em;
}
.hero-stat .lbl { color: #9AA6B2; }
.home-hero .border-start { border-color: rgba(255, 255, 255, .14) !important; }

/* Faixa do Diário Oficial */
.dou-strip {
    background: #fff;
    border-top: 0;
    border-bottom: 1px solid var(--t-line);
}
.dou-badge {
    background: var(--t-acc-soft);
    color: var(--t-acc-dark);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: 4px 11px;
}
.dou-track span { font-family: var(--font-body); color: var(--t-muted); font-size: .82rem; }

/* Abas */
.nav-tabs { border-bottom: 1px solid var(--t-line); }
.nav-tabs .nav-link { color: var(--t-muted); }
.nav-tabs .nav-link:hover { color: var(--t-acc-dark); }
.nav-tabs .nav-link.active { color: var(--t-base); border-bottom: 2px solid var(--t-acc); }

/* --- Cartões ------------------------------------------------------------- */
.doc-card, .benefit-card, .inventory-card, .plan-card {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.doc-card:hover, .benefit-card:hover, .plan-card:hover {
    border-color: rgba(var(--t-acc-rgb), .55);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
}
.inventory-card:hover { border-color: var(--t-acc); }
.doc-card h3 { font-family: var(--font-display); font-weight: 700; color: var(--t-base); letter-spacing: -0.01em; }
.doc-gutter { background: var(--t-acc-soft); }
.doc-gutter .mark { color: var(--t-acc-dark); font-family: var(--font-display); font-weight: 700; }
.doc-thumb { background: var(--t-paper); }
.card { border-radius: var(--t-radius); border-color: var(--t-line); }

/* Caixa escura de chamada (lateral) */
.side-cta { background: var(--t-base); border-radius: 16px; }
.side-cta .feat { color: #C9D1D9; }

/* Cabeçalho das páginas internas */
.adm-page-head {
    background: #fff;
    border-top: 3px solid var(--t-acc);
    border-bottom: 1px solid var(--t-line);
}
.adm-page-head h1 { font-weight: 800; letter-spacing: -0.025em; color: var(--t-base); }

/* --- Planos e páginas de venda ------------------------------------------ */
.hero-section { background: var(--t-base); overflow: hidden; }
.hero-title { font-weight: 800; letter-spacing: -0.02em; word-spacing: .06em; }
.hero-subtitle { color: #B8C2CC; }
.stats-bar { background: var(--t-base-2); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.stats-bar .stat-number { color: var(--t-acc-on-dark); font-family: var(--font-display); font-weight: 800; }
.feature-icon-box { background: var(--t-acc-soft); color: var(--t-acc-dark); }
.feature-title, .benefit-title, .plan-price { font-family: var(--font-display); font-weight: 800; color: var(--t-base); }
.plan-card.featured { border: 2px solid var(--t-acc); }
.badge-popular { background: var(--t-acc); color: #fff; font-family: var(--font-display); font-weight: 700; }
.testimonials-section, .pecas-section { background: var(--t-base); }

/* --- Rodapé -------------------------------------------------------------- */
.site-footer { background-color: var(--t-base); color: #A3AEB9; }
.site-footer a { color: #CBD3DB; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--t-acc-on-dark);
}
.site-footer .footer-brand { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: #7F8B97; }

/* --- Modais -------------------------------------------------------------- */
.modal-content { border-radius: 16px; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .doc-card, .benefit-card, .plan-card, .inventory-card { transition: none; }
}