/* ============================================================
NEGÓCIO CERTO — camada de marca sobre Bootstrap 5.3.8
Carregar SEMPRE depois de bootstrap.min.css.
Estratégia: em vez de brigar com o Bootstrap, remapeamos as
variáveis dele (--bs-*) para os tokens da marca. Assim grid,
navbar, formulários, alertas e utilitários já nascem no tema.
============================================================ */
/* ------------------------------------------------------------
1. TOKENS DA MARCA
------------------------------------------------------------ */
:root{
--gold:#C08A26;
--gold-light:#D6A94C;
--gold-dark:#A66F12;
--graphite:#20252A;
--graphite-deep:#171B1F;
--graphite-soft:#2A2F33;
--ivory:#F5F3EF;
--sand:#FBF7EF;
--muted:#55606A;
--line:#E5E0D7;
--line-dark:#3A3F44;
--up:#3E9B6E;
--down:#C05B4E;
--up-dark:#5CC08D;
--down-dark:#E0796B;
--shadow:0 14px 40px rgba(32,37,42,.07);
--serif:"Playfair Display",Georgia,"Times New Roman",serif;
--sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
/* ------------------------------------------------------------
2. REMAPEAMENTO DO BOOTSTRAP — tema claro
------------------------------------------------------------ */
:root{
--bs-font-sans-serif:var(--sans);
--bs-body-font-family:var(--sans);
--bs-body-font-size:1.0625rem; /* 17px */
--bs-body-font-weight:400;
--bs-body-line-height:1.78;
--bs-body-color:#20252A;
--bs-body-color-rgb:32,37,42;
--bs-body-bg:#FFFFFF;
--bs-body-bg-rgb:255,255,255;
--bs-emphasis-color:var(--graphite-deep);
--bs-secondary-color:var(--muted);
--bs-tertiary-bg:var(--ivory);
--bs-border-color:var(--line);
--bs-border-color-translucent:var(--line);
--bs-border-radius:0;
--bs-border-radius-sm:0;
--bs-border-radius-lg:0;
--bs-border-radius-xl:0;
--bs-border-radius-pill:0;
--bs-primary:var(--gold);
--bs-primary-rgb:192,138,38;
--bs-primary-text-emphasis:var(--gold-dark);
--bs-primary-bg-subtle:var(--sand);
--bs-primary-border-subtle:rgba(192,138,38,.4);
--bs-dark:var(--graphite);
--bs-dark-rgb:32,37,42;
--bs-success:var(--up);
--bs-success-rgb:62,155,110;
--bs-danger:var(--down);
--bs-danger-rgb:192,91,78;
--bs-link-color:var(--gold-dark);
--bs-link-color-rgb:166,111,18;
--bs-link-hover-color:var(--gold);
--bs-link-hover-color-rgb:192,138,38;
--bs-focus-ring-color:rgba(192,138,38,.30);
--bs-focus-ring-width:2px;
--bs-heading-color:inherit;
}
/* Largura editorial da marca (Bootstrap vai a 1320px por padrão) */
@media (min-width:1200px){
.container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{max-width:1180px}
}
/* ------------------------------------------------------------
3. TEMA ESCURO — usado nas faixas grafite via data-bs-theme="dark"
------------------------------------------------------------ */
[data-bs-theme="dark"]{
--bs-body-color:#C2C8CD;
--bs-body-color-rgb:194,200,205;
--bs-body-bg:var(--graphite);
--bs-body-bg-rgb:32,37,42;
--bs-emphasis-color:#FFFFFF;
--bs-secondary-color:#9BA2A8;
--bs-border-color:var(--line-dark);
--bs-border-color-translucent:var(--line-dark);
--bs-link-color:var(--gold-light);
--bs-link-hover-color:var(--gold);
--bs-primary-text-emphasis:var(--gold-light);
--bs-form-control-bg:transparent;
--bs-form-control-color:#FFFFFF;
}
/* ------------------------------------------------------------
4. TIPOGRAFIA
------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6,.serif{font-family:var(--serif);font-weight:600;line-height:1.12}
h1,.h1{font-size:clamp(40px,5.4vw,66px);letter-spacing:-.5px}
h2,.h2{font-size:clamp(30px,3.6vw,45px)}
h3,.h3{font-size:20px}
.text-gold{color:var(--gold)!important}
.text-gold-light{color:var(--gold-light)!important}
.bg-ivory{background:var(--ivory)!important}
.bg-sand{background:var(--sand)!important}
.bg-graphite{background:var(--graphite)!important}
.bg-graphite-deep{background:var(--graphite-deep)!important}
::selection{background:var(--gold);color:#fff}
a{text-decoration:none}
img,svg{max-width:100%}
/* ------------------------------------------------------------
5. ASSINATURA DA MARCA — eyebrow + régua com losango
------------------------------------------------------------ */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:3.2px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:14px}
[data-bs-theme="dark"] .eyebrow{color:var(--gold-light)}
.rule{display:flex;align-items:center;gap:10px;margin:22px 0 26px}
.rule::before,.rule::after{content:"";height:1px;background:var(--gold);opacity:.55}
.rule::before{width:64px}
.rule::after{flex:1;max-width:190px}
.rule i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
[data-bs-theme="dark"] .rule::before,[data-bs-theme="dark"] .rule::after{background:var(--gold-light);opacity:.5}
[data-bs-theme="dark"] .rule i{background:var(--gold-light)}
.rule.center{justify-content:center}
.section{padding:104px 0}
.section-head{max-width:700px;margin-bottom:52px}
.section-head p{color:var(--muted);font-size:17.5px}
[data-bs-theme="dark"] .section-head p{color:#C2C8CD}
/* ------------------------------------------------------------
6. BOTÕES — variantes da marca sobre .btn do Bootstrap
------------------------------------------------------------ */
.btn{
--bs-btn-padding-y:16px;
--bs-btn-padding-x:32px;
--bs-btn-font-size:13px;
--bs-btn-font-weight:700;
--bs-btn-border-radius:0;
letter-spacing:2px;
text-transform:uppercase;
position:relative;
overflow:hidden;
}
.btn-sm{--bs-btn-padding-y:12px;--bs-btn-padding-x:22px;--bs-btn-font-size:12px;letter-spacing:1.6px}
.btn-lg{--bs-btn-padding-y:19px;--bs-btn-padding-x:40px;--bs-btn-font-size:14px}
/* brilho diagonal no hover */
.btn-gold::after,.btn-outline-gold::after{
content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.btn-gold:hover::after,.btn-outline-gold:hover::after{left:150%}
.btn-gold:disabled::after,.btn-outline-gold:disabled::after{display:none}
.btn-gold{
--bs-btn-color:#1C1305;
--bs-btn-bg:var(--gold);
--bs-btn-border-color:var(--gold);
--bs-btn-hover-color:#FFFFFF;
--bs-btn-hover-bg:var(--gold-dark);
--bs-btn-hover-border-color:var(--gold-dark);
--bs-btn-active-color:#FFFFFF;
--bs-btn-active-bg:var(--gold-dark);
--bs-btn-active-border-color:var(--gold-dark);
--bs-btn-disabled-color:#1C1305;
--bs-btn-disabled-bg:var(--gold);
--bs-btn-disabled-border-color:var(--gold);
--bs-btn-focus-shadow-rgb:192,138,38;
}
.btn-outline-gold{
--bs-btn-color:var(--gold-dark);
--bs-btn-bg:transparent;
--bs-btn-border-color:rgba(192,138,38,.55);
--bs-btn-hover-color:#FFFFFF;
--bs-btn-hover-bg:var(--gold-dark);
--bs-btn-hover-border-color:var(--gold-dark);
--bs-btn-active-color:#FFFFFF;
--bs-btn-active-bg:var(--gold-dark);
--bs-btn-active-border-color:var(--gold-dark);
--bs-btn-disabled-color:var(--gold-dark);
--bs-btn-disabled-border-color:rgba(192,138,38,.55);
--bs-btn-focus-shadow-rgb:192,138,38;
}
[data-bs-theme="dark"] .btn-outline-gold{
--bs-btn-color:var(--gold-light);
--bs-btn-hover-bg:rgba(192,138,38,.16);
--bs-btn-hover-color:var(--gold-light);
--bs-btn-hover-border-color:var(--gold);
--bs-btn-active-bg:rgba(192,138,38,.24);
--bs-btn-active-color:var(--gold-light);
}
/* ------------------------------------------------------------
7. FORMULÁRIOS — variante "linha" (só borda inferior)
------------------------------------------------------------ */
.form-label{font-size:11.5px;font-weight:600;letter-spacing:1.9px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
[data-bs-theme="dark"] .form-label{color:#A7AEB4}
.form-control,.form-select{
--bs-border-radius:0;
font-size:15.5px;
padding:10px 14px;
}
.form-control:focus,.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(192,138,38,.18)}
.form-control-line,.form-select-line{
background:transparent;
border:0;
border-bottom:1px solid var(--line);
border-radius:0;
padding:10px 0;
font-family:var(--serif);
font-size:18px;
}
.form-control-line:focus,.form-select-line:focus{
background:transparent;
border-bottom-color:var(--gold);
box-shadow:none;
}
[data-bs-theme="dark"] .form-control-line,[data-bs-theme="dark"] .form-select-line{
border-bottom-color:var(--line-dark);
color:#FFFFFF;
}
[data-bs-theme="dark"] .form-control-line:focus,[data-bs-theme="dark"] .form-select-line:focus{
border-bottom-color:var(--gold);color:#FFFFFF;
}
.form-select-line{background-position:right center}
/* ------------------------------------------------------------
8. ALERTAS
------------------------------------------------------------ */
.alert{--bs-alert-border-radius:0;border-width:0 0 0 2px;font-size:14.5px;line-height:1.7}
.alert-brand-erro{--bs-alert-color:#8C4136;--bs-alert-bg:#FBF1EF;--bs-alert-border-color:var(--down)}
.alert-brand-ok{--bs-alert-color:#2F6D4F;--bs-alert-bg:#F0F7F3;--bs-alert-border-color:var(--up)}
.alert-brand-info{--bs-alert-color:var(--muted);--bs-alert-bg:var(--sand);--bs-alert-border-color:var(--gold)}
/* ------------------------------------------------------------
9. TOPBAR + NAVBAR
------------------------------------------------------------ */
.topbar{background:var(--graphite-deep);color:#A6ADB3;font-size:11.5px;letter-spacing:2px;text-transform:uppercase}
.topbar .container{min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar b{color:var(--gold-light);font-weight:600}
.navbar{
--bs-navbar-padding-y:0;
--bs-navbar-color:var(--graphite);
--bs-navbar-hover-color:var(--gold-dark);
--bs-navbar-active-color:var(--gold-dark);
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
transition:box-shadow .3s;
}
.navbar.scrolled{box-shadow:0 6px 26px rgba(32,37,42,.09)}
.navbar > .container{min-height:86px;transition:min-height .3s}
.navbar.scrolled > .container{min-height:70px}
.navbar .navbar-nav .nav-link{
font-size:12.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
padding:6px 0;margin:0 13px;border-bottom:1px solid transparent;transition:.2s;
}
.navbar .navbar-nav .nav-link:hover{border-bottom-color:var(--gold)}
.navbar-toggler{--bs-navbar-toggler-border-radius:0;--bs-navbar-toggler-focus-width:.2rem;border-color:var(--line)}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:52px;height:52px;flex:none;transition:width .3s,height .3s}
.navbar.scrolled .brand .mark{width:44px;height:44px}
.brand .name{font-family:var(--serif);font-size:21px;letter-spacing:.5px;line-height:1.1}
.brand .name b{font-weight:600}
.brand .name .gold{color:var(--gold)}
.brand small{display:block;font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:2.8px;color:var(--muted);margin-top:3px}
/* menu recolhido em telas pequenas */
@media (max-width:991.98px){
.navbar .navbar-collapse{border-top:1px solid var(--line);padding:12px 0 20px;margin-top:8px}
.navbar .navbar-nav .nav-link{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.navbar .navbar-nav .btn{margin-top:14px}
}
/* ------------------------------------------------------------
10. HERO
------------------------------------------------------------ */
.hero{background:linear-gradient(140deg,var(--graphite-deep) 0%,#23282D 55%,#1B1F23 100%);position:relative;overflow:hidden;border-bottom:1px solid var(--gold)}
.hero::after{content:"";position:absolute;inset:auto -10% -55% 45%;height:520px;background:radial-gradient(closest-side,rgba(192,138,38,.20),transparent 72%);pointer-events:none}
.hero > .container{position:relative;z-index:1;padding-top:92px;padding-bottom:96px}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--gold-light)}
.hero .lead{color:#CFD5DA;font-size:19px;line-height:1.75;max-width:545px}
.hero-points{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--line-dark)}
.hero-points div{font-size:12.5px;font-weight:500;color:#B8BFC5;max-width:190px;line-height:1.5}
.hero-points strong{display:block;font-family:var(--serif);font-size:28px;font-weight:600;color:var(--gold-light);margin-bottom:2px}
.hero-art{width:min(420px,100%);margin-inline:auto;filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.hero-art{animation:none}}
/* ------------------------------------------------------------
11. TICKER DE MERCADO
------------------------------------------------------------ */
.market{background:var(--graphite);border-bottom:1px solid var(--line-dark)}
.market-label{font-size:11.5px;font-weight:700;letter-spacing:3px;color:var(--gold-light);white-space:nowrap}
.ticker-item{border-left:1px solid var(--line-dark);padding-left:18px}
.ticker-item small{display:block;font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:#949BA1}
.ticker-item strong{display:block;font-family:var(--serif);font-size:22px;font-weight:500;margin:3px 0;color:#fff}
.ticker-item .variation{font-size:12.5px;font-weight:600}
.up{color:var(--up-dark)}
.down{color:var(--down-dark)}
.ticker-item.loading strong,.ticker-item.loading .variation{opacity:.4}
.market-status{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:#7E858B;line-height:1.9}
.market-status .btn{--bs-btn-padding-y:6px;--bs-btn-padding-x:15px;--bs-btn-font-size:11px;--bs-btn-font-weight:400;
--bs-btn-color:#C2C8CD;--bs-btn-border-color:var(--line-dark);--bs-btn-bg:transparent;
--bs-btn-hover-color:var(--gold-light);--bs-btn-hover-border-color:var(--gold);--bs-btn-hover-bg:transparent;
letter-spacing:1.4px}
/* ------------------------------------------------------------
12. SERVIÇOS
------------------------------------------------------------ */
.services-grid{background:var(--line);border:1px solid var(--line);gap:1px!important}
.service{background:#fff;padding:40px 34px;height:100%;transition:.28s;position:relative}
.service::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.35s}
.service:hover{background:var(--sand);transform:translateY(-4px);box-shadow:var(--shadow);z-index:1}
.service:hover::before{transform:scaleX(1)}
.service .idx{font-size:11.5px;font-weight:700;letter-spacing:2.4px;color:var(--gold);display:block;margin-bottom:16px}
.service h3{font-size:22px;margin-bottom:13px}
.service p{font-size:15.5px;line-height:1.7;color:var(--muted)}
.link{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-dark);border:0;border-bottom:1px solid rgba(192,138,38,.4);padding:0 0 3px;background:none}
.link:hover{color:var(--gold-dark);border-bottom-color:var(--gold)}
/* Cabeçalho de coluna clicável, com a mesma aparência do th */
.ordenar{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.ordenar:hover{color:var(--gold-dark)}
.ordenar::after{content:"⇅";margin-left:6px;opacity:.45;font-size:11px}
/* ------------------------------------------------------------
13. SOBRE
------------------------------------------------------------ */
.about{background:var(--graphite)}
.about h2{color:#fff}
.about p{color:#C2C8CD;font-size:17px;line-height:1.8}
.sym{padding:24px;border:1px solid var(--line-dark);background:rgba(255,255,255,.022);height:100%;transition:.25s}
.sym:hover{border-color:rgba(192,138,38,.6);background:rgba(192,138,38,.06);transform:translateY(-3px)}
.sym strong{display:block;font-family:var(--serif);font-size:20px;color:var(--gold-light);margin-bottom:6px}
.sym span{font-size:15px;color:#AAB1B7;line-height:1.65}
.about-panel{border:1px solid var(--line-dark);background:linear-gradient(155deg,#282D32,#1A1E22);padding:46px 42px;position:relative}
.about-panel::before{content:"";position:absolute;top:-1px;left:34px;right:34px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.about-panel h3{font-size:28px;color:#fff;margin-bottom:18px}
.pillars{margin-top:30px;border-top:1px solid var(--line-dark);padding-top:24px;display:grid;gap:14px}
.pillar{display:flex;gap:14px;align-items:baseline}
.pillar i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
.pillar b{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold-light);min-width:118px}
.pillar span{font-size:15px;color:#B6BDC3}
/* ------------------------------------------------------------
14. PROPÓSITO
------------------------------------------------------------ */
.purpose{padding:40px 34px;background:var(--sand);border:1px solid var(--line);height:100%;transition:.3s}
.purpose:hover{border-color:rgba(192,138,38,.55);box-shadow:var(--shadow);transform:translateY(-4px)}
.purpose .eyebrow{margin-bottom:10px}
.purpose h3{font-size:26px;margin-bottom:14px}
.purpose p{font-size:15.5px;line-height:1.72;color:var(--muted)}
/* ------------------------------------------------------------
15. SIMULADOR
------------------------------------------------------------ */
.sim{background:var(--graphite-deep)}
.sim h2{color:#fff}
.sim p{color:#C2C8CD;font-size:17px;line-height:1.8}
.sim-box{border:1px solid var(--line-dark);background:#22272B;padding:38px}
.sim-result{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-dark)}
.sim-result small{font-size:11.5px;font-weight:600;letter-spacing:2.1px;text-transform:uppercase;color:#9BA2A8}
.sim-result strong{display:block;font-family:var(--serif);font-size:44px;font-weight:600;color:var(--gold-light);line-height:1.2;margin:6px 0 4px}
.sim-result span{font-size:14.5px;color:#A7AEB4}
/* ------------------------------------------------------------
16. FAQ — accordion do Bootstrap no tema da marca
------------------------------------------------------------ */
.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-radius:0;--bs-accordion-inner-border-radius:0;
--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-bg:transparent;--bs-accordion-active-color:var(--gold-dark);
--bs-accordion-btn-padding-x:0;--bs-accordion-btn-padding-y:24px;--bs-accordion-body-padding-x:0;--bs-accordion-body-padding-y:0}
.accordion-item{border:0;border-bottom:1px solid var(--line);background:transparent}
.accordion-button{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.3;box-shadow:none!important}
.accordion-button:hover{color:var(--gold-dark)}
.accordion-button::after{
content:"+";background-image:none;width:auto;height:auto;
font-family:var(--sans);font-size:20px;font-weight:300;color:var(--gold);
transform:none;line-height:1;
}
.accordion-button:not(.collapsed)::after{content:"−";transform:none}
.accordion-body{color:var(--muted);font-size:16px;line-height:1.78;padding-bottom:24px;max-width:790px}
/* ------------------------------------------------------------
17. CONTATO
------------------------------------------------------------ */
.contact{background:var(--graphite)}
.contact h2{color:#fff}
.contact .lead{color:#C2C8CD;font-size:17px;line-height:1.8}
.contact-item{padding:20px 0;border-bottom:1px solid var(--line-dark)}
.contact-item b{display:block;font-size:11.5px;font-weight:700;letter-spacing:2.3px;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px}
.contact-item span{font-family:var(--serif);font-size:21px;color:#EBEDEF}
.contact-form{background:#fff;color:var(--graphite);padding:40px 38px;border-top:2px solid var(--gold)}
/* ------------------------------------------------------------
18. RODAPÉ
------------------------------------------------------------ */
.site-footer{background:var(--graphite-deep);color:#9BA2A8;padding:70px 0 26px;border-top:1px solid var(--gold)}
.site-footer .mark{width:72px;margin-bottom:18px}
.site-footer .name{font-family:var(--serif);font-size:22px;color:#fff}
.site-footer .name .gold{color:var(--gold-light)}
.site-footer .tagline{display:block;font-size:9.5px;letter-spacing:2.6px;color:var(--gold);margin:5px 0 16px}
.site-footer p{font-size:14.5px;line-height:1.7;max-width:290px}
.site-footer h4{font-size:11.5px;font-weight:700;letter-spacing:2.3px;text-transform:uppercase;color:#fff;margin-bottom:18px}
.site-footer a,.site-footer .line{display:block;font-size:14.5px;padding:6px 0;color:#9BA2A8}
.site-footer a:hover{color:var(--gold-light)}
.copy{margin-top:48px;padding-top:22px;border-top:1px solid #2C3136;font-size:12px;letter-spacing:.8px;color:#798086}
/* ============================================================
INTRANET
============================================================ */
/* ---------- 19. Tela de acesso ---------- */
.auth-aside{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--graphite-deep) 0%,#23282D 55%,#1B1F23 100%);padding:64px 6vw}
.auth-aside::after{content:"";position:absolute;inset:auto -20% -50% 30%;height:460px;background:radial-gradient(closest-side,rgba(192,138,38,.20),transparent 72%);pointer-events:none}
.auth-aside > *{position:relative;z-index:1}
.auth-aside h1{font-size:clamp(32px,3.4vw,46px);color:#fff}
.auth-aside h1 em{font-style:normal;color:var(--gold-light)}
.auth-aside p{color:#C2C8CD;font-size:16.5px;max-width:430px}
@media (min-width:992px){.auth-aside{border-right:1px solid var(--gold)}}
@media (max-width:991.98px){.auth-aside{border-bottom:1px solid var(--gold)}}
.auth-main{background:var(--ivory);padding:48px 6vw}
.auth-card{width:min(420px,100%)}
.auth-card h2{font-size:34px;margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:15.5px}
.auth-back{display:inline-block;margin-bottom:26px;font-size:11.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.auth-back:hover{color:var(--gold-dark)}
/* ---------- 20. Estrutura do painel ---------- */
.side{background:var(--graphite-deep);border-right:1px solid var(--line-dark);padding:28px 0}
.side .brand{padding:0 26px 24px;border-bottom:1px solid var(--line-dark);margin-bottom:22px}
.side .brand .name{color:#fff}
.side .brand small{color:var(--gold)}
.side .nav-link{display:flex;align-items:center;gap:12px;padding:12px 26px;font-size:12.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#9BA2A8;border-left:2px solid transparent;transition:.22s}
.side .nav-link:hover{color:#fff;background:rgba(255,255,255,.03)}
.side .nav-link.active{color:var(--gold-light);border-left-color:var(--gold);background:rgba(192,138,38,.08)}
.side .nav-link i{width:6px;height:6px;background:currentColor;transform:rotate(45deg);flex:none;opacity:.65}
.side-sep{height:1px;background:var(--line-dark);margin:22px 26px}
/* menu duplo: seletor entre o menu do sistema e o da ferramenta aberta.
Só aparece dentro de ferramenta com mais de uma tela. */
.side-switch{display:flex;gap:1px;margin:0 26px 18px;background:var(--line-dark);border:1px solid var(--line-dark)}
.side-switch-botao{flex:1;min-width:0;padding:9px 6px;border:0;background:var(--graphite-deep);color:#9BA2A8;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;transition:.22s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-switch-botao:hover{color:#fff}
.side-switch-botao.is-ativo{background:var(--gold);color:#1C1305}
/* sininho das notificações — montado por app.js em toda .app-bar */
.sino-caixa{position:relative}
.sino{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.2s}
.sino:hover{color:var(--gold-dark);border-color:var(--gold)}
.sino-marca{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;background:var(--down);color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center}
.sino-painel{position:absolute;top:46px;right:0;width:min(340px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);z-index:1040}
.sino-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px}
.sino-lista{max-height:min(420px,60vh);overflow-y:auto}
.sino-item{display:block;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;transition:.18s}
.sino-item:hover{background:var(--sand)}
.sino-item.nao-lida{border-left:3px solid var(--gold);background:#FFFDF8}
.sino-item b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.sino-item span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.sino-item small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.sino-vazio{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px}
.sino-rodape{padding:12px 16px;border-top:1px solid var(--line)}
.sino-rodape:empty{display:none}
.sino-rodape small{font-size:11.5px;color:var(--muted);line-height:1.5}
/* barra lateral fixa a partir de lg; vira offcanvas abaixo disso */
@media (min-width:992px){
.side{position:sticky;top:0;height:100vh;overflow-y:auto}
}
.offcanvas.side{--bs-offcanvas-width:264px;--bs-offcanvas-bg:var(--graphite-deep);--bs-offcanvas-border-color:var(--line-dark);--bs-offcanvas-color:#9BA2A8}
.app-main{background:var(--ivory);min-height:100vh}
.app-bar{background:#fff;border-bottom:1px solid var(--line);padding:22px 40px;position:sticky;top:0;z-index:20}
.app-bar h1{font-size:30px}
.app-body{padding:40px}
@media (max-width:767.98px){
.app-bar,.app-body{padding-left:5vw;padding-right:5vw}
}
.who-text b{display:block;font-family:var(--serif);font-size:17px;font-weight:600}
.who-text span{font-size:10.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--graphite);color:var(--gold-light);font-family:var(--serif);font-size:19px;border:1px solid var(--gold)}
/* ---------- 21. Indicadores ---------- */
.stats{background:var(--line);border:1px solid var(--line);gap:1px!important}
.stat{background:#fff;padding:30px 28px;height:100%;position:relative;transition:.28s}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.35s}
.stat:hover{background:var(--sand)}
.stat:hover::before{transform:scaleX(1)}
.stat small{display:block;font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted)}
.stat strong{display:block;font-family:var(--serif);font-size:42px;font-weight:600;line-height:1.15;margin-top:8px}
/* ---------- 22. Painéis e tabelas ---------- */
.panel{background:#fff;border:1px solid var(--line);margin-bottom:28px}
.panel-head{padding:24px 28px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:24px}
.panel-body{padding:8px 0}
.panel-body.pad{padding:28px}
.table{--bs-table-color:var(--bs-body-color);--bs-table-bg:transparent;--bs-table-border-color:var(--line);
--bs-table-hover-bg:var(--sand);--bs-table-hover-color:var(--bs-body-color);margin-bottom:0}
.table > thead th{padding:14px 28px;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom-width:1px}
.table > tbody td{padding:18px 28px;font-size:15.5px;vertical-align:middle}
.table > tbody tr:last-child td{border-bottom-width:0}
td.serif{font-family:var(--serif);font-size:18px}
.empty{padding:44px 28px;text-align:center;color:var(--muted);font-size:15.5px}
/* Visualizador de documentos em modal.
position:relative porque o aviso de carregamento fica sobreposto —
se ele ocupasse espaço no fluxo, empurraria o iframe para fora. */
.visualizador{position:relative;background:var(--graphite-deep);min-height:78vh;display:flex;align-items:center;justify-content:center;overflow:auto}
.visualizador-quadro{width:100%;height:78vh;border:0;display:block;background:#fff}
.visualizador-imagem{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;margin:auto}
.visualizador-aviso{position:absolute;inset:0;color:#C2C8CD;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
@media (max-width:767.98px){
.visualizador,.visualizador-quadro{min-height:68vh;height:68vh}
.visualizador-imagem{max-height:68vh}
}
/* Título da tabela que abre a pré-visualização */
.titulo-doc{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.titulo-doc:hover{color:var(--gold-dark);text-decoration:underline}
/* Lista de dados rótulo/valor do painel do cliente */
.dado{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.dado:last-child{border-bottom:0}
.dado dt{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);flex:none}
.dado dd{margin:0;font-family:var(--serif);font-size:17px;text-align:right;word-break:break-word}
.tag{display:inline-block;padding:5px 13px;font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;border:1px solid var(--line)}
.tag-ok{color:var(--up);border-color:rgba(62,155,110,.4);background:#F2F8F5}
.tag-off{color:var(--down);border-color:rgba(192,91,78,.35);background:#FBF1EF}
.tag-gold{color:var(--gold-dark);border-color:rgba(192,138,38,.45);background:var(--sand)}
/* Modais e paginação no tema da marca */
.modal-content{--bs-modal-border-radius:0;border:0;border-top:2px solid var(--gold)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-title{font-family:var(--serif)}
.pagination{--bs-pagination-border-radius:0;--bs-pagination-color:var(--muted);--bs-pagination-border-color:var(--line);
--bs-pagination-hover-color:var(--gold-dark);--bs-pagination-hover-bg:var(--sand);--bs-pagination-hover-border-color:var(--line);
--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(192,138,38,.18);--bs-pagination-focus-bg:var(--sand);
--bs-pagination-active-bg:var(--graphite);--bs-pagination-active-border-color:var(--graphite);--bs-pagination-active-color:var(--gold-light)}
/* ---------- 23. Ajustes finos de seção ---------- */
@media (max-width:767.98px){
.section{padding:72px 0}
.about-panel,.sim-box,.contact-form{padding:32px 26px}
.service,.purpose{padding:32px 26px}
}
/* Senha gerada uma única vez — precisa ser fácil de ler e transcrever */
.senha-gerada{
font-size:30px;letter-spacing:3px;margin:18px 0;padding:16px;
background:var(--sand);border:1px solid var(--line);
user-select:all;word-break:break-all;
}
/* ============================================================
24. Treinamentos
============================================================ */
/* Cartão do catálogo. Segue a mesma régua de .service e .purpose:
fundo branco, borda fina e um filete dourado que só aparece no
hover — nada de sombra permanente, que destoaria das tabelas. */
.curso{background:#fff;border:1px solid var(--line);height:100%;display:flex;flex-direction:column;transition:.28s;position:relative}
.curso::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.35s}
.curso:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.curso:hover::before{transform:scaleX(1)}
.curso-capa{aspect-ratio:16/9;background:var(--graphite);object-fit:cover;width:100%;display:block}
.curso-capa-vazia{aspect-ratio:16/9;background:linear-gradient(150deg,var(--graphite-deep),#23282D);display:grid;place-items:center}
.curso-capa-vazia svg{width:64px;height:64px;opacity:.7}
.curso-corpo{padding:26px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.curso-corpo h3{font-size:21px;margin:0}
.curso-corpo p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0}
.curso-meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.curso-preco{font-family:var(--serif);font-size:22px;color:var(--gold-dark)}
/* Índice do curso: módulos e aulas. O contador em losango repete o
motivo da marca sem precisar de ícone novo. */
.modulo{border:1px solid var(--line);background:#fff;margin-bottom:18px}
.modulo-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.modulo-head h3{font-size:20px;margin:0}
.modulo-head p{font-size:14px;color:var(--muted);margin:6px 0 0}
.aula{display:flex;align-items:center;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;transition:.2s}
.aula:last-child{border-bottom:0}
.aula:hover{background:var(--sand)}
.aula.ativa{background:var(--sand);box-shadow:inset 2px 0 0 var(--gold)}
.aula-num{width:26px;height:26px;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);transform:rotate(45deg)}
.aula-num span{transform:rotate(-45deg)}
.aula.concluida .aula-num{border-color:var(--up);color:var(--up);background:#F2F8F5}
.aula-titulo{flex:1;font-family:var(--serif);font-size:17px;line-height:1.35}
.aula-tempo{font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* Player. O padding-bottom de 56,25% mantém 16:9 sem depender de
aspect-ratio, que ainda falha em WebView antigo do Android. */
/* 16:9 do vídeo + 46px da barra de controles do player-aula.html, que
fica abaixo do quadro. Manter em sincronia com a --barra de lá. */
.player{position:relative;width:100%;padding-bottom:calc(56.25% + 46px);background:var(--graphite-deep)}
/* Vimeo e Bunny usam o player nativo deles, sem a nossa barra — com a
altura extra sobraria faixa preta embaixo do vídeo. */
.player.sem-barra{padding-bottom:56.25%}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-vazio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#9BA2A8;font-size:14px;text-align:center;padding:24px}
/* Texto autoral da aula e da descrição do curso.
Escopo fechado: o HTML aqui vem do banco, e sem o escopo uma tag
solta redefiniria a tipografia do resto da intranet. */
.conteudo-rico{font-size:16px;line-height:1.8;color:var(--bs-body-color)}
.conteudo-rico > *:first-child{margin-top:0}
.conteudo-rico > *:last-child{margin-bottom:0}
.conteudo-rico h1,.conteudo-rico h2,.conteudo-rico h3,.conteudo-rico h4{margin:32px 0 14px;line-height:1.25}
.conteudo-rico h1{font-size:30px}
.conteudo-rico h2{font-size:25px}
.conteudo-rico h3{font-size:21px}
.conteudo-rico h4{font-size:18px}
.conteudo-rico p{margin:0 0 16px}
.conteudo-rico ul,.conteudo-rico ol{margin:0 0 18px;padding-left:22px}
.conteudo-rico li{margin-bottom:8px}
.conteudo-rico a{color:var(--gold-dark);border-bottom:1px solid rgba(192,138,38,.4)}
.conteudo-rico img{max-width:100%;height:auto;margin:18px 0}
.conteudo-rico blockquote{margin:22px 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);color:var(--muted);font-family:var(--serif);font-size:19px;line-height:1.6}
.conteudo-rico table{width:100%;margin:20px 0;border-collapse:collapse;font-size:15px}
.conteudo-rico th,.conteudo-rico td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.conteudo-rico th{background:var(--sand);font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.conteudo-rico pre{background:var(--graphite-deep);color:#DCE1E5;padding:18px 20px;overflow-x:auto;font-size:14px;margin:0 0 18px}
.conteudo-rico code{font-size:14px;background:var(--sand);padding:2px 6px}
.conteudo-rico pre code{background:none;padding:0;color:inherit}
.conteudo-rico details{border:1px solid var(--line);background:var(--sand);padding:16px 20px;margin:0 0 18px}
.conteudo-rico summary{font-weight:600;cursor:pointer;letter-spacing:.3px}
.conteudo-rico details[open] summary{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.conteudo-rico hr{border:0;border-top:1px solid var(--line);margin:28px 0}
/* Barra de progresso — retangular, como todo o resto do tema */
.progresso{height:4px;background:var(--line);overflow:hidden}
.progresso span{display:block;height:100%;background:var(--gold);transition:width .4s}
/* Questões de fixação */
.questao{border:1px solid var(--line);background:#fff;padding:24px 26px;margin-bottom:18px}
.questao-enunciado{font-family:var(--serif);font-size:19px;line-height:1.5;margin-bottom:18px}
.alternativa{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;padding:14px 16px;margin-bottom:9px;background:#fff;border:1px solid var(--line);font-size:15.5px;line-height:1.5;transition:.2s;cursor:pointer}
.alternativa:hover:not(:disabled){border-color:var(--gold);background:var(--sand)}
.alternativa:disabled{cursor:default}
.alternativa .letra{width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:700;border:1px solid var(--line);color:var(--muted)}
.alternativa.escolhida{border-color:var(--graphite)}
.alternativa.certa{border-color:var(--up);background:#F2F8F5}
.alternativa.certa .letra{border-color:var(--up);color:var(--up)}
.alternativa.errada{border-color:var(--down);background:#FBF1EF}
.alternativa.errada .letra{border-color:var(--down);color:var(--down)}
.questao-retorno{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.7;color:var(--muted)}
/* Pagamento PIX. O código precisa ser selecionável de uma vez: quem
vai copiar quer o payload inteiro, nunca um pedaço. */
.pix-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;word-break:break-all;user-select:all;background:var(--sand);border:1px solid var(--line);padding:16px;max-height:150px;overflow-y:auto}
.pix-aviso{font-size:13.5px;line-height:1.7}
/* Lista de materiais para baixar */
.material{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.material:last-child{border-bottom:0}
.material-nome{flex:1;font-size:15.5px;line-height:1.4}
.material-nome small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media (max-width:767.98px){
.curso-corpo{padding:22px 20px}
.questao{padding:20px 18px}
.aula{padding:14px 18px;gap:12px}
}
/* ------------------------------------------------------------
25. Modal rolável com