/* ═══════════════════════════════════════════════════════════════
   dark_base.css — shared across the public dark pages
   (index.html · consultoria.html · planos.html)
   Load BEFORE the per-page stylesheet.
   Generated by mockups/rebuild.py — edit the mockups, not this.
   ═══════════════════════════════════════════════════════════════ */
/*   EXISTING TOKENS (from static/css/index.css :root — unchanged)
   ═══════════════════════════════════════════════════════════════ */
:root{
    --primary:#00472D; --primary-light:#00794C; --primary-dark:#00251a;
    --secondary:#FFB74D; --secondary-dark:#F57C00;
    --text-light:#ffffff;
    --transition:all .3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   NEW — DARK THEME TOKENS  (--fx-*)
   Namespaced like --dx-* so nothing collides with :root or app CSS.
   ═══════════════════════════════════════════════════════════════ */
:root{
    /* grounds */
    --fx-ground:      #04120C;
    --fx-ground-2:    #071A11;
    --fx-ground-3:    #0A2318;
    /* surfaces & lines */
    --fx-surface:     rgba(255,255,255,.030);
    --fx-surface-2:   rgba(255,255,255,.055);
    --fx-line:        rgba(255,255,255,.085);
    --fx-line-soft:   rgba(255,255,255,.045);
    /* ink */
    --fx-ink:         #F2F7F4;
    --fx-muted:       rgba(242,247,244,.70);   /* V2: era .54 — 5.65:1 -> 8.87:1 */
    --fx-hint:        rgba(242,247,244,.52);   /* V2: era .30 — 2.53:1 reprovava AA -> 5.32:1 */
    /* brand on dark */
    --fx-green:       #00794C;
    --fx-green-lift:  #17B980;   /* NEW — brand green is too dark to read as data on near-black */
    --fx-amber:       #FFB74D;
    --fx-amber-deep:  #F57C00;
    --fx-violet:      #8B7CF6;   /* reserved for the IAlex section (sec. 3) */
    /* motion */
    --fx-ease:        cubic-bezier(.16,1,.3,1);
    --fx-radius:      14px;
}

*{box-sizing:border-box}
body{
    margin:0; background:var(--fx-ground); color:var(--fx-ink);
    font-family:'Poppins',sans-serif; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

/* ═══════════════════════════════════════════════════════════════

/* ── violet tokens (IAlex) ── */
:root{
    --fx-violet-ground: #0A0718;
    --fx-violet-2:      #150E33;
    --fx-violet-line:   rgba(139,124,246,.24);
    --fx-violet-soft:   rgba(139,124,246,.10);
    --fx-violet-ink:    #C9C0FF;
}


/* ── warm tokens (consultoria) ── */
:root{
    --cs-ground: #08140E;
    --cs-warm:   rgba(255,183,77,.07);
    --cs-line:   rgba(255,183,77,.20);
}


/* ═══ shared: section label ═══ */
.dk-label{font-size:10px;text-transform:uppercase;letter-spacing:.22em;font-weight:600;
    display:flex;align-items:center;gap:14px;margin-bottom:26px;color:rgba(255,183,77,.85)}
.dk-label::before{content:'';width:28px;height:1px;background:rgba(255,183,77,.4);display:block}
.dk-label--violet{color:rgba(139,124,246,.85)}
.dk-label--violet::before{background:rgba(139,124,246,.4)}
.fx-wrap,.wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
@media(max-width:991.98px){.fx-wrap,.wrap{padding:0 24px}}

/* ═══ NAVBAR ═══ */
/*   NAVBAR — unchanged from production
   ═══════════════════════════════════════════════════════════════ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1030;padding:20px 0;
    background:linear-gradient(180deg,rgba(0,25,16,.65) 0%,transparent 100%);
    transition:background .35s ease,backdrop-filter .35s ease,padding .35s ease,border-bottom .35s ease;
    border-bottom:1px solid transparent}
.navbar.navbar-scrolled{background:rgba(0,25,16,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.07);padding:14px 0}
.navbar-brand{padding:.25rem 0;display:flex;align-items:center;text-decoration:none}
.navbar-logo{height:40px;width:auto;display:block;transition:all .3s ease}
.navbar-scrolled .navbar-logo{height:34px}
.nav-link{color:rgba(255,255,255,.60)!important;font-weight:400;font-size:.9rem;margin:0 .25rem;
    padding:.4rem .65rem!important;border-radius:4px;transition:color .2s ease;letter-spacing:.01em}
.nav-link:hover{color:rgba(255,255,255,.92)!important;background:transparent}
.btn-nav-enter{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;
    font-size:.875rem;font-weight:600;padding:8px 20px;border-radius:9px;text-decoration:none;display:inline-block;
    transition:background .2s ease,border-color .2s ease}
.btn-nav-enter:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);color:#fff}
.btn-nav-register{background:var(--fx-amber);border:1px solid var(--fx-amber);color:#02220f;
    font-size:.875rem;font-weight:600;padding:8px 20px;border-radius:9px;text-decoration:none;display:inline-block;
    transition:background .2s ease}
.btn-nav-register:hover{background:#ffc978;color:#02220f}
/* self-contained nav layout (mockup only — production keeps Bootstrap's) */
.navbar .container{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:20px}
.navbar-collapse{display:flex;align-items:center;flex:1}
.navbar-nav{list-style:none;display:flex;align-items:center;gap:4px;margin:0 0 0 auto;padding:0}
.ms-lg-3{margin-left:12px}
@media(max-width:991.98px){
  .navbar .container{padding:0 24px;flex-wrap:wrap}
  .navbar-collapse{flex:0 0 100%}
  .navbar-nav{flex-direction:column;align-items:flex-start;gap:0;margin:0;width:100%}
  .navbar-nav .nav-link{padding:.6rem 0!important}
  .navbar-collapse.show,.navbar-collapse.collapsing{
      background:rgba(0,20,12,.96);margin:0 -12px;padding:12px 20px 20px;border-radius:0 0 12px 12px}
  .ms-lg-3{margin-left:0;margin-top:10px;display:inline-block}
}


/* ═══════════════════════════════════════════════════════════════

/* ═══ shared: reconciliation (home + consultoria) ═══ */
/* ── the reconciliation ── */
.cs-recon{padding:76px 0 40px}
.cs-recon-heads{display:grid;grid-template-columns:1fr 92px 1fr;gap:0;margin-bottom:26px;align-items:end}
.cs-rh{font-size:10px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--fx-hint);
    padding-bottom:12px;border-bottom:1px solid var(--fx-line-soft)}
.cs-rh--story{color:rgba(255,183,77,.8);border-bottom-color:var(--cs-line)}
.cs-rh--data{color:rgba(23,185,128,.85);border-bottom-color:rgba(23,185,128,.3);text-align:right}
.cs-rh--mid{border:none}

.cs-pair{display:grid;grid-template-columns:1fr 92px 1fr;gap:0;align-items:center;
    padding:22px 0;position:relative}
.cs-card{border-radius:12px;padding:18px 20px;border:1px solid var(--fx-line-soft);
    background:rgba(255,255,255,.022);opacity:0;transform:translateY(14px);
    transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease),
               border-color .5s ease,box-shadow .5s ease}
.cs-pair.is-on .cs-card{opacity:1;transform:none}
.cs-pair.is-on .cs-card--story{transition-delay:.05s}
.cs-pair.is-on .cs-card--data{transition-delay:.2s}

/* what a person said — Georgia, the display face already in the system */
.cs-card--story{border-color:var(--cs-line);background:var(--cs-warm)}
.cs-said{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;line-height:1.6;
    color:rgba(242,247,244,.92);margin:0}
.cs-who{font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
    color:rgba(255,183,77,.65);margin-top:12px}

/* what the data said — tabular, cold */
.cs-card--data{border-color:rgba(23,185,128,.24);background:rgba(23,185,128,.045)}
.cs-datarow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cs-num{font-size:22px;font-weight:200;letter-spacing:-.02em;color:var(--fx-ink);
    font-variant-numeric:tabular-nums}
.cs-tag{font-size:9px;text-transform:uppercase;letter-spacing:.13em;font-weight:600;
    padding:3px 8px;border-radius:100px;border:1px solid rgba(23,185,128,.35);
    color:rgba(23,185,128,.95);white-space:nowrap}
.cs-tag--bad{border-color:rgba(255,140,122,.4);color:#FF8C7A}
.cs-fact{font-size:13px;font-weight:300;line-height:1.65;color:var(--fx-muted);margin:11px 0 0}
.cs-fact strong{font-weight:400;color:rgba(242,247,244,.86)}

/* the seam between them */
.cs-seam{position:relative;height:100%;min-height:76px;display:flex;align-items:center;justify-content:center}
.cs-seam::before{content:'';position:absolute;left:50%;top:-22px;bottom:-22px;width:1px;
    background:rgba(255,255,255,.09)}
.cs-arrow{position:relative;z-index:2;width:66px;height:1px;background:rgba(255,255,255,.14)}
.cs-arrow::after{content:'';position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;
    background:var(--fx-amber);opacity:0;box-shadow:0 0 12px rgba(255,183,77,.9)}
.cs-pair.is-on .cs-arrow::after{animation:csTravelR 1.5s var(--fx-ease) .5s forwards}
.cs-pair[data-dir="left"].is-on .cs-arrow::after{animation-name:csTravelL}
.cs-pair[data-dir="left"] .cs-arrow::after{background:var(--fx-green-lift);box-shadow:0 0 12px rgba(23,185,128,.9)}
@keyframes csTravelR{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:60px;opacity:0}}
@keyframes csTravelL{0%{left:60px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}

.cs-verdict{grid-column:1 / -1;text-align:center;font-size:10px;text-transform:uppercase;
    letter-spacing:.2em;font-weight:600;color:var(--fx-hint);padding-top:16px;opacity:0;
    transition:opacity .6s var(--fx-ease) .9s}
.cs-pair.is-on .cs-verdict{opacity:1}
.cs-verdict b{font-weight:600;color:rgba(255,183,77,.85)}
.cs-pair[data-dir="left"] .cs-verdict b{color:rgba(23,185,128,.9)}

.cs-recon-more{text-align:center;margin:18px 0 0}
.cs-recon-more a{font-size:12.5px;font-weight:500;color:rgba(255,183,77,.9);text-decoration:none;
    border-bottom:1px solid rgba(255,183,77,.3);padding-bottom:2px;transition:all .25s ease}
.cs-recon-more a:hover{color:var(--fx-amber);border-color:var(--fx-amber)}
.cs-recon-note{margin:34px auto 0;max-width:60ch;text-align:center;font-size:15px;font-weight:300;
    line-height:1.85;color:var(--fx-muted)}
.cs-recon-note strong{font-weight:400;color:var(--fx-ink)}


/* ═══ shared: entry-point topics (home + consultoria) ═══ */
/* ── entry points (the six topics) ── */
.cs-topics{padding:96px 0 0;border-top:1px solid var(--fx-line-soft);margin-top:70px}
.cs-h3{font-size:38px;font-weight:200;letter-spacing:-.03em;line-height:1.12;margin:0 0 18px;color:var(--fx-ink)}
.cs-p{font-size:15.5px;font-weight:300;line-height:1.9;color:var(--fx-muted);margin:0 0 40px;max-width:56ch}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fx-line-soft);
    border:1px solid var(--fx-line-soft);border-radius:var(--fx-radius);overflow:hidden}
.cs-topic{background:var(--cs-ground);padding:28px 24px;transition:background .4s ease;position:relative}
.cs-topic:hover{background:rgba(255,183,77,.045)}
.cs-topic-n{font-size:9px;letter-spacing:.2em;font-weight:600;color:rgba(255,183,77,.6);margin-bottom:14px}
.cs-topic-t{font-size:17px;font-weight:400;letter-spacing:-.01em;color:var(--fx-ink);margin:0 0 10px;line-height:1.3}
.cs-topic-p{font-size:13px;font-weight:300;line-height:1.7;color:var(--fx-muted);margin:0}


/* ═══ shared: reviews marquee (home + consultoria) ═══ */
/* ── reviews — no cards; three columns drifting at different speeds ── */
.rv{position:relative;background:var(--cs-ground);padding:30px 0 96px}
.rv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;
    margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--fx-line-soft)}
.rv-title{font-size:38px;font-weight:200;letter-spacing:-.03em;line-height:1.12;margin:14px 0 0;
    color:var(--fx-ink);max-width:20ch}
.rv-score{display:flex;align-items:baseline;gap:12px}
.rv-score-n{font-size:38px;font-weight:200;letter-spacing:-.03em;color:var(--fx-amber);line-height:1;
    font-variant-numeric:tabular-nums}
.rv-score-m{font-size:12px;font-weight:300;line-height:1.6;color:var(--fx-muted)}
.rv-score-m strong{font-weight:500;color:var(--fx-ink)}

.rv-stage{position:relative;height:536px;display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:48px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.rv-col{position:relative;overflow:hidden}
.rv-track{display:flex;flex-direction:column;will-change:transform;
    animation:rvUp var(--dur,64s) linear infinite}
.rv-col--down .rv-track{animation-name:rvDown}
.rv-stage:hover .rv-track{animation-play-state:paused}
@keyframes rvUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes rvDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.rv-item{border-top:1px solid var(--fx-line-soft);padding:22px 0 26px;flex:none}
.rv-stars{display:flex;gap:2.5px;margin-bottom:12px}
.rv-stars svg{width:11px;height:11px;display:block}
.rv-quote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15.5px;line-height:1.62;
    color:rgba(242,247,244,.87);margin:0 0 15px}
.rv-who{display:flex;align-items:center;gap:10px}
.rv-face{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;display:grid;place-items:center;
    border:1px solid var(--cs-line);font-size:11px;font-weight:500;color:#02220f;letter-spacing:.02em;
    background:linear-gradient(150deg,rgba(255,183,77,.42),rgba(23,185,128,.3))}
.rv-name{font-size:12px;font-weight:400;color:var(--fx-ink);line-height:1.3}
.rv-role{font-size:10px;font-weight:300;color:var(--fx-hint);margin-top:2px;line-height:1.4}
.rv-hint{margin:22px 0 0;text-align:center;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
    font-weight:600;color:rgba(242,247,244,.22)}


/* ═══ shared: FAQ accordion (planos + consultoria) ═══ */
/* ── faq ── */
.fq{margin:110px 0 0;padding:44px 0 0;border-top:1px solid var(--fx-line-soft)}
.fq-t{font-size:32px;font-weight:200;letter-spacing:-.03em;margin:14px 0 30px;color:var(--fx-ink)}
.fq-i{border-bottom:1px solid var(--fx-line-soft)}
.fq-q{width:100%;text-align:left;font-family:inherit;background:none;border:none;cursor:pointer;
    padding:20px 40px 20px 0;font-size:15px;font-weight:300;color:var(--fx-ink);position:relative;
    transition:color .25s ease}
.fq-q:hover{color:var(--fx-amber)}
.fq-q::after{content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--fx-ease)}
.fq-i.open .fq-q::after{transform:translateY(-20%) rotate(225deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--fx-ease)}
.fq-a p{font-size:13.5px;font-weight:300;line-height:1.85;color:var(--fx-muted);margin:0 0 22px;max-width:70ch}


/* ═══ shared: navbar buttons — same language as the page CTAs ═══
   The `.navbar` prefix outranks Bootstrap's `.btn`, which otherwise
   re-imposes its own padding, radius, line-height and colour. ═══ */
.navbar .btn-nav-register,
.navbar .btn-nav-enter{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.2;
    padding:10px 22px;border-radius:10px;border:1px solid transparent;
    text-decoration:none;white-space:nowrap;transition:all .3s ease}
/* Amber-tinted glass rather than solid amber. Solid made this the single
   loudest element on the page, which is off-key for a site that otherwise
   speaks quietly — and it spent the consultancy colour on a link to the free
   app. The amber identity stays, the volume drops. Label 8.5:1, border 3.0:1. */
.navbar .btn-nav-register{background:rgba(255,183,77,.14);
    border-color:rgba(255,183,77,.45);color:var(--fx-amber)}
.navbar .btn-nav-register:hover{background:rgba(255,183,77,.24);
    border-color:rgba(255,183,77,.68);color:#FFC978;transform:translateY(-1px)}
.navbar .btn-nav-enter{background:transparent;border-color:var(--fx-line);color:var(--fx-muted)}
.navbar .btn-nav-enter:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3);color:var(--fx-ink)}
.navbar .btn-nav-register:focus-visible,.navbar .btn-nav-enter:focus-visible{
    outline:2px solid var(--fx-amber);outline-offset:3px}

/* ═══ shared: buttons ═══ */
.cta{font-size:13px;font-weight:600;text-decoration:none;padding:15px 28px;border-radius:10px;
    transition:all .3s ease;display:inline-flex;align-items:center;gap:9px;justify-content:center}
.cta--amber{background:var(--fx-amber);color:#02220f}
.cta--amber:hover{background:#FFC978;color:#02220f}
.cta--green{background:var(--fx-green-lift);color:#02220f}
.cta--green:hover{background:#2ED396;color:#02220f}
.cta--violet{background:var(--fx-violet-ink);color:#0A0718}
.cta--violet:hover{background:#DDD6FF;color:#0A0718}
.cta--ghost{border:1px solid var(--fx-line);color:var(--fx-muted)}
.cta--ghost:hover{border-color:rgba(255,255,255,.3);color:var(--fx-ink)}

/* ═══ FOOTER ═══ */
/* ── footer ── */
.fn-foot{background:#02100A;border-top:1px solid rgba(255,255,255,.06);padding:72px 0 0}
.fn-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px}
.fn-brand-logo{font-weight:200;letter-spacing:.18em;font-size:15px;color:#fff;text-transform:uppercase;
    margin-bottom:18px;display:block}
.fn-brand-p{font-size:13px;font-weight:300;line-height:1.8;color:var(--fx-hint);margin:0;max-width:34ch}
.fn-col-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.18em;font-weight:600;
    color:rgba(242,247,244,.42);margin-bottom:18px}
.fn-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fn-links a{font-size:13px;font-weight:300;color:var(--fx-muted);text-decoration:none;transition:color .25s ease}
.fn-links a:hover{color:var(--fx-ink)}
.fn-social{display:flex;gap:9px;margin-top:16px}
.fn-social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--fx-line-soft);
    display:grid;place-items:center;transition:all .3s ease}
.fn-social a:hover{border-color:var(--cs-line);background:rgba(255,183,77,.08)}
.fn-social svg{width:15px;height:15px;display:block;fill:rgba(242,247,244,.55);transition:fill .3s ease}
.fn-social a:hover svg{fill:var(--fx-amber)}

.fn-legal{border-top:1px solid rgba(255,255,255,.06);padding:26px 0 44px;display:flex;
    align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.fn-legal-p{font-size:11px;font-weight:300;line-height:1.75;color:rgba(242,247,244,.28);margin:0;max-width:70ch}
.fn-legal-links{display:flex;gap:20px;flex-wrap:wrap}
.fn-legal-links a{font-size:11.5px;font-weight:300;color:rgba(242,247,244,.4);text-decoration:none;
    transition:color .25s ease;white-space:nowrap}
.fn-legal-links a:hover{color:var(--fx-ink)}


/* ═══ shared: responsive for the shared components ═══ */
@media(max-width:1199.98px){
    .rv-title{font-size:32px}
    .rv-stage{column-gap:36px;height:500px}
}
@media(max-width:991.98px){
    .rv-title{font-size:27px;max-width:none}
    .rv-head{margin-bottom:28px}
    .rv-stage{grid-template-columns:1fr;height:430px}
    .rv-stage .rv-col:nth-child(n+2){display:none}
    .cs-recon-heads{display:none}
    .cs-pair{grid-template-columns:1fr;gap:0;padding:18px 0 26px}
    .cs-seam{min-height:0;height:42px;transform:rotate(90deg)}
    .cs-grid{grid-template-columns:1fr}
    .fn-cols{grid-template-columns:1fr 1fr;gap:36px;padding-bottom:44px}
    .fn-brand{grid-column:1 / -1}
    .fn-legal{padding-bottom:36px}
}
@media(max-width:575.98px){
    .rv-score-n{font-size:32px}
    .rv-quote{font-size:15.5px}
    .cs-said{font-size:15.5px}
    .cs-num{font-size:19px}
    .cs-card{padding:15px 16px}
    .cs-topic{padding:22px 18px}
    .fn-cols{grid-template-columns:1fr}
}

/* ═══ reduced motion ═══ */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
        transition-duration:.001ms!important}
    .cs-card,.cs-verdict,.rv-item{opacity:1;transform:none}
    .rv-track{animation:none}
    .rv-stage{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
/* ══ SHARED ADDITIONS — extracted back into dark_base by rebuild.py ══ */
/* ═══ shared: .cta on a <button> element ═══
   A bare <button> brings its own UA border, font and cursor. Scoped to the
   element so the anchor version is untouched. */
button.cta{border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2}
button.cta--ghost{border-color:var(--fx-line);background:transparent}
.cta:focus-visible{outline:2px solid var(--fx-amber);outline-offset:3px}

/* ═══ shared: navbar dropdowns (Serviços · Conteúdo) ═══
   Hover-opens on pointer devices, click-toggles everywhere (keyboard + touch).
   Not Bootstrap's dropdown — no JS dependency beyond the small toggle in
   dark_base.js, and no .dropdown-menu override. */
.nav-drop{position:relative}
.navbar .nav-drop-t{background:none;border:0;font-family:inherit;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px}
.nav-drop-c{width:5px;height:5px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .25s var(--fx-ease);opacity:.75}
.nav-drop.open .nav-drop-c{transform:rotate(225deg) translate(-2px,-2px)}
.nav-drop-m{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-6px);min-width:312px;
    background:#08200F;border:1px solid var(--fx-line);border-radius:12px;
    padding:7px;box-shadow:0 18px 44px rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s var(--fx-ease),transform .22s var(--fx-ease),visibility .22s;
    z-index:60}
.nav-drop.open .nav-drop-m{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(hover:hover) and (min-width:992px){
    /* hover-open lives in CSS so it cannot fight the JS click toggle */
    .nav-drop:hover .nav-drop-m{opacity:1;visibility:visible;transform:translate(-50%,0)}
    .nav-drop:hover .nav-drop-c{transform:rotate(225deg) translate(-2px,-2px)}
}
.nav-drop-i{display:block;padding:11px 13px;border-radius:8px;text-decoration:none;
    transition:background .2s ease}
.nav-drop-i:hover{background:rgba(255,255,255,.055)}
.nav-drop-n{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
    color:var(--fx-ink)}
.nav-drop-tag{font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
    color:var(--fx-green-lift);background:rgba(23,185,128,.13);
    border:1px solid rgba(23,185,128,.3);border-radius:999px;padding:2px 7px}
.nav-drop-d{display:block;font-size:11.5px;font-weight:300;color:var(--fx-muted);margin-top:3px}
/* IAlex is the only marked row: a violet wash plus a violet hairline. Type is
   identical to every other row — the ground does the work.
   Deliberately a TRANSLUCENT tint, not the opaque violet ground the IAlex
   section uses. Over the green menu the tint desaturates toward grey-blue,
   which is the point: an opaque violet block is louder than anything else in
   this nav, and the whole site speaks quietly. Hover stops at .22 — .26 pushes
   the description under 4.5:1. Rest 4.88:1, hover 4.62:1. */
.nav-drop-i[data-svc="ialex"]{
    background:linear-gradient(135deg,rgba(139,124,246,.16),rgba(139,124,246,.045));
    box-shadow:inset 0 0 0 1px var(--fx-violet-line)}
.nav-drop-i[data-svc="ialex"]:hover{
    background:linear-gradient(135deg,rgba(139,124,246,.22),rgba(139,124,246,.075));
    box-shadow:inset 0 0 0 1px rgba(139,124,246,.36)}
/* ═══ shared: in-page anchors clear the fixed navbar ═══
   Without this every nav jump lands with its heading tucked under the bar. */
[id]{scroll-margin-top:96px}

/* ═══ shared: form fields ═══
   Started life in the workshop modal; the auth pages use them too, so they
   belong here. Left in a page file they simply do not exist on /login and the
   inputs fall back to Bootstrap's white default on a black page. */
.form-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.15em;
    font-weight:600;color:var(--fx-muted);margin:0 0 7px}
.form-input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--fx-line);
    border-radius:10px;padding:12px 14px;color:var(--fx-ink);font-family:inherit;font-size:14px;
    font-weight:300;margin-bottom:18px;transition:border-color .2s ease}
.form-input:focus{outline:none;border-color:var(--fx-amber)}

/* ═══ shared: the two nav CTAs, wrapped so they move as one ═══ */
.navbar-cta{display:flex;align-items:center;gap:10px;margin-left:14px}

@media(max-width:991.98px){
    /* Below lg, Bootstrap leaves .navbar-collapse a CENTRED FLEX ROW, so the
       CTA block sat beside the menu list and overlapped it once the list grew
       tall enough. Stack the panel and let the buttons span it. */
    /* The mobile menu toggler. The navbar never sets data-bs-theme="dark" /
       .navbar-dark, so Bootstrap 5.3 paints its icon with a near-black stroke —
       rgba(33,37,41,.75), which measures 1.15:1 here. Invisible. Repainting the
       icon light is the real fix; the glass box gives it a body so it holds up
       over the hero artwork and over whatever it scrolls past.
       Everything lives inside this media query on purpose: a bare
       `.navbar .navbar-toggler{display:...}` outranks Bootstrap's
       `.navbar-expand-lg .navbar-toggler{display:none}` and puts a hamburger
       on the desktop navbar. */
    .navbar .navbar-toggler{
        width:46px;height:46px;padding:0;
        display:inline-flex;align-items:center;justify-content:center;
        border:1px solid rgba(255,255,255,.28);border-radius:12px;
        background:rgba(255,255,255,.09);
        backdrop-filter:blur(12px) saturate(140%);
        -webkit-backdrop-filter:blur(12px) saturate(140%);
        box-shadow:0 2px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
        transition:background .3s ease,border-color .3s ease}
    .navbar .navbar-toggler:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.42)}
    .navbar .navbar-toggler:focus{box-shadow:none;outline:2px solid var(--fx-amber);outline-offset:3px}
    .navbar .navbar-toggler-icon{width:21px;height:21px;background-size:21px;
        background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28242,247,244,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

    .navbar-collapse{flex-direction:column;align-items:stretch}
    /* The inherited panel is rgba(0,20,12,.96); 4% is enough for a 92px hero
       headline to ghost through behind the menu. Make it opaque. */
    .navbar-collapse.show,.navbar-collapse.collapsing{background:#03170E}
    .navbar-cta{margin:14px 0 0;width:100%}
    .navbar .btn-nav-register,.navbar .btn-nav-enter{flex:1;padding:12px 18px}

    .nav-drop-m{position:static;opacity:1;visibility:visible;transform:none!important;
        box-shadow:none;background:transparent;border:0;padding:0 0 6px 12px;
        min-width:0;display:none}
    .nav-drop.open .nav-drop-m{display:block}
    .navbar .nav-drop-t{padding:.6rem 0!important;width:100%;justify-content:space-between}
}


/* ═══ V2.1 · números grandes compartilhados — append only ═══
   .cs-num carrega os fatos da reconciliação ("R$ 5.000", "6 meses").
   A 22px/200 competia de igual para igual com o corpo ao lado. ── */
.cs-num{font-size:28px;font-weight:300}
@media(max-width:767.98px){.cs-num{font-size:23px}}


/* ═══════════════════════════════════════════════════════════════
   V2.3 · REVISÃO COMPLETA  —  append only
   Marca-texto no .dk-label (paridade com o index) e os quatro
   textos do rodapé/reviews que ainda reprovavam no AA.
   Aqui o traço é estático: só o index carrega o observer que
   anima a varredura.
   ═══════════════════════════════════════════════════════════════ */
.dk-label{
    display:inline-flex;align-items:center;gap:12px;
    font-size:12.5px;letter-spacing:.18em;font-weight:600;
    padding:4px 10px 4px 0;
    color:rgba(242,247,244,.96);
    background-repeat:no-repeat;background-position:46px 60%;
    background-size:calc(100% - 46px) 100%;
    background-image:linear-gradient(90deg,
    rgba(255,183,77,.06) 0%,rgba(255,183,77,.34) 3%,rgba(255,183,77,.40) 55%,
    rgba(255,183,77,.28) 95%,rgba(255,183,77,.07) 100%)}
.dk-label--violet{color:rgba(242,247,244,.96);background-image:linear-gradient(90deg,
    rgba(139,124,246,.07) 0%,rgba(139,124,246,.40) 3%,rgba(139,124,246,.46) 55%,
    rgba(139,124,246,.32) 95%,rgba(139,124,246,.09) 100%)}
.dk-label::before{width:34px;height:1px;background:rgba(255,183,77,.65)}
.dk-label--violet::before{background:rgba(139,124,246,.65)}

/* contraste — todos mediam abaixo de 4.5:1 sobre #04120C */
.rv-hint{color:var(--fx-hint)}           /* era .22 -> 1.89:1 */
.fn-legal-p{color:var(--fx-hint)}        /* era .28 -> 2.35:1 */
.fn-col-h{color:var(--fx-hint)}          /* era .42 -> 3.85:1 */
.fn-legal-links a{color:var(--fx-muted)} /* era .40 -> 3.60:1, e e link */

@media (max-width:767.98px){
    .dk-label{font-size:11.5px;letter-spacing:.16em;gap:10px;
        background-position:38px 60%;background-size:calc(100% - 38px) 100%}
    .dk-label::before{width:26px}
}


/* ═══════════════════════════════════════════════════════════════
   V2.5 · O REVEAL PASSA A VALER NAS QUATRO PÁGINAS  —  append only
   ───────────────────────────────────────────────────────────────
   O observer saiu de home_dark.js e foi para dark_base.js, que as
   quatro carregam. Aqui fica o estado inicial do .dk-label, que
   antes era estático. Tudo sob html.fx-reveal: sem JS o traço já
   nasce inteiro, nada some.
   ═══════════════════════════════════════════════════════════════ */
.fx-reveal .dk-label{opacity:0;transform:translateY(8px);background-size:0 100%;
    transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease),
               background-size .95s var(--fx-ease) .2s}
.fx-reveal .dk-label.is-rev{opacity:1;transform:none;background-size:calc(100% - 46px) 100%}
.fx-reveal .dk-label::before{width:0;transition:width .8s var(--fx-ease)}
.fx-reveal .dk-label.is-rev::before{width:34px}

@media (max-width:767.98px){
    .fx-reveal .dk-label{background-size:0 100%}
    .fx-reveal .dk-label.is-rev{background-size:calc(100% - 38px) 100%}
    .fx-reveal .dk-label.is-rev::before{width:26px}
}
@media (prefers-reduced-motion:reduce){
    .fx-reveal .dk-label{opacity:1;transform:none;background-size:calc(100% - 46px) 100%;transition:none}
    .fx-reveal .dk-label::before{width:34px;transition:none}
}