/* =============================================================
   ALASKA BLUE DARK THEME — Master Stylesheet
   Versão: 2.8.0
   
   ÍNDICE:
   01. Custom Properties (Variáveis Globais)
   02. Base & Reset
   03. Acessibilidade
   04. Layout & Scrollbar
   05. Componentes: Header / Nav
   06. Componentes: Side Menu
   07. Componentes: Footer
   08. Componentes: Cards & Glass
   09. Componentes: Inputs & Forms
   10. Componentes: Checkboxes & Sliders
   11. Tipografia: Gradientes & Animações
   12. Spotlights & Backgrounds
   13. Páginas Específicas
   14. Light Mode — Engine Completa
   15. Media Queries
   ============================================================= */


/* ─────────────────────────────────────────────
   01. CUSTOM PROPERTIES
   ───────────────────────────────────────────── */
:root {
    /* Cores do tema dark */
    --ak-bg:          #050b14;
    --ak-bg-deep:     #02040a;
    --ak-bg-void:     #02040a;
    --ak-bg-card:     #0a192f;
    --ak-bg-card-2:   #112240;
    --ak-bg-glass:    rgba(15, 23, 42, 0.4);

    /* Marca */
    --ak-cyan:        #64ffda;
    --ak-cyan-dim:    rgba(100, 255, 218, 0.1);
    --ak-cyan-glow:   rgba(100, 255, 218, 0.3);

    /* Textos */
    --ak-text:        #8892b0;
    --ak-text-dim:    #475569;
    --ak-text-bright: #ffffff;
    --ak-text-muted:  #94a3b8;

    /* Bordas */
    --ak-border:      rgba(255, 255, 255, 0.05);
    --ak-border-md:   rgba(255, 255, 255, 0.1);
    --ak-border-hi:   rgba(100, 255, 218, 0.3);

    /* Transições */
    --ak-transition:  0.3s ease-in-out;
    --ak-transition-spring: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Raios */
    --ak-radius-sm:   0.5rem;
    --ak-radius-md:   1rem;
    --ak-radius-lg:   2rem;

    /* Simuladores pos3 */
    --cyan:     #00d4f5;
    --cyan-bg:  rgba(0, 212, 245, 0.08);
    --cyan-bd:  rgba(0, 212, 245, 0.2);
    --green:    #00e87a;
    --green-bg: rgba(0, 232, 122, 0.08);
    --green-bd: rgba(0, 232, 122, 0.2);
    --red:      #ff3d5a;
    --amber:    #ffb020;
    --card:     rgba(10, 16, 30, 0.85);
    --border:   rgba(255, 255, 255, 0.07);
    --border-hi:rgba(0, 212, 245, 0.22);
    --muted:    #4a6080;
    --r:        14px;
    --mono:     'DM Mono', 'IBM Plex Mono', monospace;

    /* Simulador pos2 */
    --border-glass: rgba(255, 255, 255, 0.1);
    --card-bg:      rgba(13, 18, 30, 0.7);
}


/* ─────────────────────────────────────────────
   02. BASE & RESET
   ───────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--ak-bg);
    color: var(--ak-text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    transition: background-color 0.5s ease, color 0.5s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Transição suave em todos os elementos interativos */
body *,
.glass,
section,
div, h1, h2, h3, p, span, a, button {
    transition-duration: 0.3s;
    transition-property: background-color, color, border-color, box-shadow;
    transition-timing-function: ease-in-out;
}

/* Scrollbar global fina */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--ak-bg-card); }
::-webkit-scrollbar-thumb { background: var(--ak-bg-card-2); border-radius: 4px; }

/* Fundo global void */
.bg-void { background-color: var(--ak-bg-void); }


/* ─────────────────────────────────────────────
   03. ACESSIBILIDADE
   ───────────────────────────────────────────── */

/* Skip navigation */
.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ak-cyan);
    color: var(--ak-bg);
    padding: 8px 16px;
    font-weight: bold;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-nav:focus { top: 0; }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Contraste WCAG AA — corrige text-gray-500 (#6b7280 falha, slate-400 passa) */
.bg-\[\#050b14\] .text-gray-500,
.bg-\[\#0a192f\] .text-gray-500,
.bg-\[\#050b14\] .text-slate-500,
.bg-\[\#0a192f\] .text-slate-500 {
    color: var(--ak-text-muted) !important;
}


/* ─────────────────────────────────────────────
   04. LAYOUT & SCROLLBAR
   ───────────────────────────────────────────── */

/* Scrollbar da seção legal */
.legal-content::-webkit-scrollbar       { width: 6px; }
.legal-content::-webkit-scrollbar-track { background: #0f172a; }
.legal-content::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }


/* ─────────────────────────────────────────────
   05. COMPONENTES: HEADER / NAV
   ───────────────────────────────────────────── */
.glass {
    background: rgba(5, 11, 20, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ak-border);
}


/* ─────────────────────────────────────────────
   06. COMPONENTES: SIDE MENU
   ───────────────────────────────────────────── */
#sideMenu {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    z-index: 1000;
    background: var(--ak-bg-card-2);
    transition: transform var(--ak-transition-spring);
}

.menu-closed { transform: translateX(100%); }
.menu-open   { transform: translateX(0) !important; }


/* ─────────────────────────────────────────────
   07. COMPONENTES: FOOTER
   ───────────────────────────────────────────── */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgba(17, 34, 64, 0.5);
    color: var(--ak-cyan);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--ak-transition);
}
.social-icon:hover {
    background: var(--ak-cyan);
    color: var(--ak-bg-card);
    border-color: var(--ak-cyan);
    transform: translateY(-3px);
}


/* ─────────────────────────────────────────────
   08. COMPONENTES: CARDS & GLASS
   ───────────────────────────────────────────── */

/* Card de vidro padrão */
.glass-card {
    background: var(--ak-bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    border-color: var(--ak-border-hi);
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 20px 40px -10px var(--ak-cyan-dim);
    transform: translateY(-5px);
}

/* Card de ferramenta / página simuladores */
.tool-card {
    transition: all var(--ak-transition-spring);
    border: 1px solid var(--ak-border);
    background: var(--ak-bg-glass);
}
.tool-card:hover {
    border-color: var(--ak-cyan);
    transform: translateY(-5px);
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 20px 40px -10px var(--ak-cyan-dim);
}

/* Badges de status */
.badge-live {
    background: var(--ak-cyan-dim);
    color: var(--ak-cyan);
    border: 1px solid var(--ak-border-hi);
}
.badge-dev {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ak-text-muted);
    border: 1px solid var(--ak-border);
}

/* Card produto selecionável (proposta) */
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--ak-border);
}
.product-card:hover {
    background: rgba(100, 255, 218, 0.05);
    border-color: var(--ak-border-hi);
    transform: translateY(-2px);
}
.product-card.selected {
    background: var(--ak-cyan-dim);
    border-color: var(--ak-cyan);
    box-shadow: 0 0 20px var(--ak-cyan-dim);
}
.product-card .icon-svg       { color: #64748b; transition: color 0.3s; }
.product-card.selected .icon-svg { color: var(--ak-cyan); }

/* Simulador pos2 */
.sim-card {
    background: var(--card-bg);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s;
}
.sim-card:hover { border-color: rgba(0, 243, 255, 0.2); }

/* Simulador pos3 — cards */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 0.2s;
    padding: 24px;
}
.card:hover        { border-color: rgba(0, 212, 245, 0.13); }
.card + .card      { margin-top: 18px; }
.card-glow         { border-color: var(--border-hi) !important; box-shadow: 0 0 40px rgba(0, 212, 245, 0.06); }


/* ─────────────────────────────────────────────
   09. COMPONENTES: INPUTS & FORMS
   ───────────────────────────────────────────── */

/* Input Líquido (proposta, simulador-pos) */
.input-liquid {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--ak-border-md);
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Space Grotesk', monospace;
    border-radius: var(--ak-radius-md);
}
.input-liquid:focus {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--ak-cyan);
    box-shadow: 0 0 0 4px var(--ak-cyan-dim);
    outline: none;
}
.input-liquid::placeholder { color: #475569; }

/* Estado de sucesso */
.input-success {
    border-color: var(--ak-cyan) !important;
    box-shadow: 0 0 15px var(--ak-cyan-dim) !important;
}

/* Simulador pos2 */
.sim-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #334155;
    color: white;
    padding: 16px;
    border-radius: 10px;
    font-family: 'Space Grotesk', monospace;
    font-size: 15px;
    transition: all 0.3s;
}
.sim-input:focus {
    border-color: #00f3ff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
    outline: none;
    background: rgba(0, 0, 0, 0.6);
}
.sim-input:disabled { opacity: 0.6; cursor: not-allowed; }

select.sim-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300f3ff' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.2em;
    padding-right: 3rem;
    cursor: pointer;
}
select.sim-input option { background-color: #02040a; color: white; padding: 12px; }

/* Label tech */
.label-tech {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #00f3ff;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
    opacity: 0.9;
}

/* Simulador pos3 — inputs */
.inp {
    width: 100%;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.22s, box-shadow 0.22s;
}
.inp::placeholder { color: #2a3d55; }
.inp:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 245, 0.1);
    background: rgba(0, 0, 0, 0.55);
}
.inp:disabled { opacity: 0.42; cursor: not-allowed; }
.inp.ok  { border-color: var(--green) !important; box-shadow: 0 0 12px rgba(0, 232, 122, 0.1) !important; }
.inp.err { border-color: var(--red) !important; }

select.inp {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300d4f5' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 1.1em;
    padding-right: 42px;
    cursor: pointer;
}
select.inp option   { background: #05080f; color: #fff; }
select.inp optgroup { color: var(--cyan); font-size: 11px; }

.inp-fat {
    text-align: right;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 15px 18px;
}

/* Labels pos3 */
.lbl {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 7px;
    display: block;
}
.lbl-hi { color: var(--cyan); }


/* ─────────────────────────────────────────────
   10. COMPONENTES: CHECKBOXES & SLIDERS
   ───────────────────────────────────────────── */

/* Checkbox tech redondo */
.custom-checkbox {
    appearance: none;
    background-color: rgba(17, 34, 64, 0.5);
    border: 1px solid var(--ak-border-md);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.3s;
}
.custom-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--ak-bg-void);
    background-color: var(--ak-bg-void);
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.custom-checkbox:checked {
    background-color: var(--ak-cyan);
    border-color: var(--ak-cyan);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.custom-checkbox:checked::before { transform: scale(1); }

/* Checkbox nativo */
input[type=checkbox] {
    accent-color: var(--ak-cyan);
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Slider */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--ak-border-md);
    border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--ak-cyan);
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 0 10px var(--ak-cyan);
    border: 2px solid rgba(255, 255, 255, 0.55);
    transition: transform 0.15s;
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }


/* ─────────────────────────────────────────────
   11. TIPOGRAFIA: GRADIENTES & ANIMAÇÕES
   ───────────────────────────────────────────── */

/* Efeito flow — dark mode */
.text-flow {
    background: linear-gradient(90deg, #ffffff 0%, #64ffda 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Texto Platina */
.text-platinum {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 50%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Texto Metálico Escovado */
.text-steel {
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 50%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Texto Metal Simples */
.text-metal {
    background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Título metálico (simuladores) */
.title-metal {
    background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(0, 243, 255, 0.15);
}

/* Texto Cyber (escrow) */
.text-cyber {
    background: linear-gradient(90deg, #fff 0%, #64ffda 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Efeito Glitch — 404 */
.glitch {
    position: relative;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--ak-bg-void);
}
.glitch::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-1 5s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
    0%   { clip: rect(30px, 9999px, 10px, 0); }
    20%  { clip: rect(80px, 9999px, 90px, 0); }
    40%  { clip: rect(10px, 9999px, 50px, 0); }
    60%  { clip: rect(60px, 9999px, 20px, 0); }
    80%  { clip: rect(20px, 9999px, 70px, 0); }
    100% { clip: rect(90px, 9999px, 30px, 0); }
}
@keyframes glitch-anim-2 {
    0%   { clip: rect(15px, 9999px, 60px, 0); }
    20%  { clip: rect(65px, 9999px, 30px, 0); }
    40%  { clip: rect(85px, 9999px, 10px, 0); }
    60%  { clip: rect(10px, 9999px, 90px, 0); }
    80%  { clip: rect(50px, 9999px, 50px, 0); }
    100% { clip: rect(35px, 9999px, 75px, 0); }
}

/* Animações misc */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(0, 212, 245, 0.4); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 212, 245, 0); }
}
@keyframes gp {
    0%, 100% { text-shadow: 0 0 14px rgba(0, 232, 122, 0.22); }
    50%      { text-shadow: 0 0 36px rgba(0, 232, 122, 0.5); }
}

.spin { animation: spin 0.8s linear infinite; }
.hr   { height: 1px; background: var(--border); margin: 18px 0; }


/* ─────────────────────────────────────────────
   12. SPOTLIGHTS & BACKGROUNDS
   ───────────────────────────────────────────── */

/* Spotlight: Capital & Mercado */
.market-spotlight {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.08) 0%, rgba(100, 200, 255, 0.05) 40%, rgba(2, 4, 10, 0) 70%);
}

/* Spotlight: Escrow + Giro */
.vault-glow,
.giro-spotlight {
    background: radial-gradient(circle at 50% 50%, rgba(100, 255, 218, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Spotlight: Financiamento */
.project-spotlight {
    background: radial-gradient(circle at 50% 50%, rgba(200, 220, 255, 0.1) 0%, rgba(0, 0, 0, 0) 60%);
}

/* Spotlight: Home Equity */
.equity-spotlight {
    background: radial-gradient(circle at 50% 50%, rgba(100, 200, 255, 0.12) 0%, rgba(2, 4, 10, 0) 70%);
}

/* Spotlight: POS */
.pos-spotlight {
    background: radial-gradient(circle at 50% 50%, rgba(120, 100, 255, 0.15) 0%, rgba(100, 255, 218, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
}

/* Linha de scan (POS) */
.swipe-line {
    width: 100%;
    height: 2px;
    background: var(--ak-cyan);
    position: absolute;
    top: 20%;
    left: 0;
    box-shadow: 0 0 10px var(--ak-cyan);
    animation: scan 3s ease-in-out infinite;
}
@keyframes scan {
    0%, 100% { top: 20%; opacity: 0; }
    50%       { top: 80%; opacity: 1; }
}


/* ─────────────────────────────────────────────
   13. PÁGINAS ESPECÍFICAS
   ───────────────────────────────────────────── */

/* ── Legal / Privacidade ── */
.legal-text       { color: var(--ak-text-muted); font-size: 0.95rem; line-height: 1.8; text-align: justify; }
.legal-text h2    { color: #fff; font-size: 2rem; margin: 4rem 0 1.5rem; font-family: 'Space Grotesk', monospace; letter-spacing: -0.02em; padding-bottom: 1rem; border-bottom: 1px solid var(--ak-border-md); }
.legal-text h3    { color: var(--ak-cyan); font-size: 1.1rem; margin: 2.5rem 0 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.legal-text p     { margin-bottom: 1.5rem; }
.legal-text ul    { list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
.legal-text li    { position: relative; padding-left: 1.5rem; color: #cbd5e1; margin-bottom: 0.5rem; }
.legal-text li::before { content: '>'; position: absolute; left: 0; color: var(--ak-cyan); font-family: monospace; font-weight: bold; }
.legal-text strong { color: #fff; font-weight: 600; }

.nav-link              { transition: all 0.3s ease; border-left: 2px solid transparent; }
.nav-link:hover        { color: #fff; padding-left: 1rem; }
.nav-link.active       { color: var(--ak-cyan); border-left-color: var(--ak-cyan); background: linear-gradient(90deg, rgba(100, 255, 218, 0.05), transparent); padding-left: 1rem; }

/* ── Proposta — Steps ── */
.step-content        { display: none; animation: fadeIn 0.6s ease; }
.step-content.active { display: block; }

/* ── Simulador POS2 ── */
.alaska-flow-container {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, #0f172a 0%, #02040a 70%);
    position: relative;
    padding-top: 140px;
    padding-bottom: 100px;
    z-index: 1;
}

/* ── Simulador POS3 — Layout ── */
.sim-wrap {
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0, 229, 255, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 90% 80%, rgba(0, 255, 135, 0.04) 0%, transparent 50%),
        #050812;
    padding-top: 130px;
    padding-bottom: 120px;
    position: relative;
    z-index: 1;
}

/* sim-card pos3 */
.sim-card {
    background: var(--bg-card, rgba(10, 16, 35, 0.75));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: var(--radius, 16px);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.3s;
}
.sim-card:hover    { border-color: var(--border-cyan, rgba(0,229,255,0.25)); }
.sim-card-glow     { border-color: var(--border-cyan, rgba(0,229,255,0.25)); box-shadow: 0 0 40px rgba(0, 229, 255, 0.08); }

/* alaska-sim wrapper (pos3 main) */
.alaska-sim {
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 100% 50% at 50% -5%,  rgba(0, 212, 245, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse  40% 25% at  0% 100%, rgba(0, 232, 122, 0.04) 0%, transparent 50%),
        #05080f;
    padding-top: 120px;
    padding-bottom: 100px;
}

/* Sim layout 2 colunas */
.sim-layout {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 22px;
    align-items: start;
}

/* Card head */
.card-head {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cyan);
    margin-bottom: 20px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-head-n { opacity: 0.38; }

/* Grid helpers pos3 */
.g2  { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.gap { margin-top: 15px; }

/* Mix row */
.mix-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.mix-val { color: var(--cyan); font-weight: 600; }

/* Taxas */
.taxa-wrap    { position: relative; }
.taxa-prefix  { position: absolute; left: 12px; top: 15px; font-family: var(--mono); font-size: 9px; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.inp-taxa     { padding-left: 52px; text-align: center; font-size: 18px; font-weight: 700; color: var(--red); }

/* Alíquota box */
.aliq-box     { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 212, 245, 0.04); border: 1px solid rgba(0, 212, 245, 0.13); border-radius: 10px; padding: 12px 16px; }
.aliq-num     { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }

/* Faixa badges */
.faixa-badge  { display: inline-flex; align-items: center; gap: 5px; padding: 4px 13px; border-radius: 999px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid; }
.f1 { background: rgba(0,212,245,0.07);  border-color: rgba(0,212,245,0.25);  color: var(--cyan); }
.f2 { background: rgba(0,232,122,0.07);  border-color: rgba(0,232,122,0.25);  color: var(--green); }
.f3 { background: rgba(255,176,32,0.07); border-color: rgba(255,176,32,0.25); color: var(--amber); }
.f4 { background: rgba(255,61,90,0.07);  border-color: rgba(255,61,90,0.25);  color: var(--red); }
.f5 { background: rgba(255,215,0,0.07);  border-color: rgba(255,215,0,0.25);  color: #ffd700; }

/* CNPJ Status */
#cnpj-status { font-family: var(--mono); font-size: 11px; min-height: 16px; color: var(--muted); margin-top: 5px; }

/* Projeção */
.proj-card { padding: 30px 28px; background: radial-gradient(ellipse 140% 90% at 50% -20%, rgba(0,212,245,0.07) 0%, transparent 65%), var(--card); position: relative; overflow: hidden; }
.proj-card::before { content: ''; position: absolute; top: 0; right: 0; width: 160px; height: 160px; background: radial-gradient(circle, rgba(0,212,245,0.06), transparent 65%); pointer-events: none; }
.proj-lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
.proj-val { font-size: 50px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--green); animation: gp 2.6s ease-in-out infinite; }
.proj-margem { display: inline-flex; align-items: center; gap: 8px; padding: 5px 15px; background: var(--green-bg); border: 1px solid var(--green-bd); border-radius: 999px; font-family: var(--mono); font-size: 11px; color: var(--green); margin-top: 14px; }

/* Anual row */
.anual-row    { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; }
.anual-lbl    { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 4px; }
.anual-val    { font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: #fff; }
.rbt12-val    { font-family: var(--mono); font-size: 14px; color: var(--amber); font-weight: 500; text-align: right; }

/* Gráfico */
.chart-card   { padding: 24px; }
.chart-hdr    { display: flex; justify-content: space-between; align-items: start; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
.chart-title  { font-weight: 700; font-size: 17px; color: #fff; }
.chart-totals { display: flex; gap: 18px; font-family: var(--mono); font-size: 11px; flex-shrink: 0; }
.ct-item { text-align: right; }
.ct-lbl  { color: var(--muted); margin-bottom: 2px; }
.ct-red  { color: var(--red);  font-weight: 700; font-size: 13px; }
.ct-cyan { color: var(--cyan); font-weight: 700; font-size: 13px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.leg-item { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: #4a6080; }
.leg-dot  { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.chart-wrap { height: 300px; position: relative; }
.chart-eq { margin-top: 13px; padding: 10px 15px; background: rgba(0,0,0,0.3); border-radius: 9px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: center; letter-spacing: 0.04em; line-height: 1.8; }

/* Nota box */
.nota { display: flex; gap: 12px; padding: 14px 16px; background: rgba(0,0,0,0.3); border-radius: 10px; border-left: 3px solid var(--cyan); }
.nota-dim { border-left-color: rgba(255,255,255,0.1); }
.nota-text  { font-size: 13px; color: #4a6080; line-height: 1.65; }
.nota-title { color: #7a9ab8; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 4px; }

/* LGPD */
.lgpd-row  { display: flex; align-items: start; gap: 12px; margin-bottom: 18px; }
.lgpd-text { font-size: 13px; color: #4a6080; line-height: 1.65; }
.lgpd-text a       { color: var(--cyan); text-decoration: none; }
.lgpd-text a:hover { text-decoration: underline; }

/* Botão enviar */
#btnEnviar { width: 100%; padding: 18px; border-radius: 11px; font-family: var(--mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); color: #2a3d55; cursor: not-allowed; transition: all 0.25s; }
#btnEnviar.ready { background: var(--cyan); color: #05080f; border-color: transparent; box-shadow: 0 0 36px rgba(0,212,245,0.35); cursor: pointer; }
#btnEnviar.ready:hover { background: #fff; box-shadow: 0 0 50px rgba(255,255,255,0.2); transform: translateY(-1px); }
.btn-sub { text-align: center; font-family: var(--mono); font-size: 10px; color: #1e2f42; margin-top: 10px; }

/* Hero badge pos3 */
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px; border: 1px solid var(--cyan-bd); border-radius: 999px; background: var(--cyan-bg); margin-bottom: 28px; }
.hero-badge span { font-family: var(--mono); color: var(--cyan); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: dot-pulse 1.8s ease-in-out infinite; }
.hero-title { font-weight: 800; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 18px; background: linear-gradient(165deg, #ffffff 20%, #5a7a9a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { color: #4a6080; font-size: 16px; line-height: 1.65; max-width: 520px; margin: 0 auto; }
.hero { max-width: 700px; margin: 0 auto 56px; padding: 0 24px; text-align: center; }


/* ─────────────────────────────────────────────
   14. LIGHT MODE — ENGINE MATADORA INTEGRADA
   ───────────────────────────────────────────── */

/* 1. Reset Global de Transição e Cor do Body */
body.light-mode,
body.light-mode .bg-void,
body.light-mode .bg-\[\#050b14\],
body.light-mode .bg-\[\#050a14\],
body.light-mode div[class*="bg-void"],
body.light-mode div[class*="bg-[#050b14]"] {
    background-color: #f8fafc !important;
    background-image: none !important;
    color: #334155 !important;
}

/* 2. Correção de Gradientes Fantasmas de Fundo (Capital, Giro, Equity) */
body.light-mode .from-\[\#02040a\],
body.light-mode .from-\[\#050b14\],
body.light-mode [class*="from-black"],
body.light-mode [class*="from-[#02040a]"] {
    --tw-gradient-from: #f8fafc !important;
    --tw-gradient-to: rgba(248, 250, 252, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(248, 250, 252, 0.9) 60%, var(--tw-gradient-to) !important;
}
body.light-mode .via-\[\#02040a\]\/90,
body.light-mode .via-\[\#050b14\]\/90 {
    --tw-gradient-stops: #f8fafc, rgba(248, 250, 252, 0.95) 70%, transparent !important;
}
body.light-mode .to-\[\#0a1525\],
body.light-mode .to-transparent {
    --tw-gradient-to: #f1f5f9 !important;
}

/* 3. Voltar o Header para Escuro Nativo no Light Mode (Visual Premium) */
body.light-mode nav.glass {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(100, 255, 218, 0.15) !important;
}
body.light-mode nav.glass a, 
body.light-mode nav.glass span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.light-mode nav.glass a:hover {
    color: #64ffda !important;
}

/* 4. Títulos Visíveis e Blindagem de Gradientes de Texto Metálicos */
body.light-mode section h1,
body.light-mode section h2,
body.light-mode section h3,
body.light-mode section h4,
body.light-mode .text-platinum,
body.light-mode .text-metal,
body.light-mode .text-cyber,
body.light-mode .text-steel {
    background: none !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* 5. Parágrafos, Itens de Lista e Subtítulos */
body.light-mode section p,
body.light-mode section li,
body.light-mode section span:not(.relative),
body.light-mode .text-\[\#8892b0\],
body.light-mode .text-gray-400,
body.light-mode .text-gray-500,
body.light-mode .text-\text-slate-400 {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

/* 6. Força TODOS os cards do ecossistema a ficarem brancos */
body.light-mode section .bg-\[\#0a192f\],
body.light-mode section .bg-\[\#112240\]\/30,
body.light-mode section .bg-\[\#0a1525\],
body.light-mode section .glass-card,
body.light-mode a[href*="escrow"],
body.light-mode .bg-\[\#0a192f\][href*="escrow"] {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05) !important;
}

/* Hover Unificado (Borda Verde + Elevação Sutil) */
body.light-mode section .bg-\[\#0a192f\]:hover,
body.light-mode section .bg-\[\#112240\]\/30:hover,
body.light-mode section .bg-\[\#112240\]:hover,
body.light-mode section .bg-\[\#0a1525\]:hover,
body.light-mode section .glass-card:hover,
body.light-mode a[href*="escrow"]:hover,
body.light-mode .bg-\[\#0a192f\][href*="escrow"]:hover {
    border-color: #059669 !important;
    box-shadow: 0 20px 40px -15px rgba(5, 150, 105, 0.12) !important;
    transform: translateY(-4px) !important;
}

/* 7. Mudança Dinâmica das Cores Ciano para Verde Dinheiro */
body.light-mode section .text-\[\#64ffda\],
body.light-mode section .text-cyan {
    color: #059669 !important;
    -webkit-text-fill-color: #059669 !important;
}
body.light-mode section .bg-\[\#64ffda\] {
    background-color: #059669 !important;
    color: #ffffff !important;
}
body.light-mode section .bg-\[\#64ffda\]\/10 {
    background-color: rgba(5, 150, 105, 0.08) !important;
}
body.light-mode section .border-\[\#64ffda\] {
    border-color: #059669 !important;
}

/* 8. Estilização Segura do Footer (Chumbo Corporativo) */
body.light-mode footer {
    margin-top: 0 !important;
    padding-top: 5rem !important;
    background-color: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}
body.light-mode footer *,
body.light-mode footer h3,
body.light-mode footer p,
body.light-mode footer span {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}
body.light-mode footer h3.text-cyan {
    color: #64ffda !important;
    -webkit-text-fill-color: #64ffda !important;
}
body.light-mode footer a:hover {
    color: #64ffda !important;
}

/* =============================================================
   REMOÇÃO COMPLETA DO HIGHLIGHT DO ESCROW NO LIGHT MODE
   ============================================================= */

/* Alvo exclusivo: Apenas o CARD do Escrow na grade de soluções */
body.light-mode section a[href*="escrow"].group,
body.light-mode section .bg-\[\#0a192f\][href*="escrow"] {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05) !important;
}

/* Hover correto para o Card do Escrow */
body.light-mode section a[href*="escrow"].group:hover,
body.light-mode section .bg-\[\#0a192f\][href*="escrow"]:hover {
    border-color: #059669 !important;
    box-shadow: 0 20px 40px -15px rgba(5, 150, 105, 0.12) !important;
    transform: translateY(-4px) !important;
}

/* Textos internos do CARD do Escrow (Título grafite e parágrafo chumbo) */
body.light-mode section a[href*="escrow"].group h3,
body.light-mode section a[href*="escrow"].group p,
body.light-mode section a[href*="escrow"].group span {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    background: none !important;
    text-shadow: none !important;
}

body.light-mode section a[href*="escrow"].group h3 {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Desativa o cofre escuro dentro do card */
body.light-mode section a[href*="escrow"].group img {
    opacity: 0.15 !important;
    mix-blend-mode: multiply !important;
    filter: grayscale(100%) !important;
}

body.light-mode section a[href*="escrow"].group .bg-gradient-to-b {
    background: linear-gradient(to bottom, transparent, #ffffff 98%) !important;
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   RESET DO FOOTER: Isola os links simples do rodapé de qualquer regra do Escrow
   ───────────────────────────────────────────────────────────── */
body.light-mode footer a[href*="escrow"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
    color: #475569 !important; /* Cor cinza padrão dos links do seu footer claro */
    -webkit-text-fill-color: #475569 !important;
}

body.light-mode footer a[href*="escrow"]:hover {
    color: #059669 !important; /* Verde padrão no hover dos links */
    -webkit-text-fill-color: #059669 !important;
    background: transparent !important;
}

/* 10. Imagens em Marca d'Água de Fundo */
body.light-mode section img.mix-blend-screen,
body.light-mode section img.mix-blend-luminosity {
    mix-blend-mode: multiply !important;
    opacity: 0.12 !important;
    filter: grayscale(100%) !important;
}

/* 11. Correção dos Botões Brancos de Inversão */
body.light-mode section .bg-white {
    background-color: #0f172a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 12. Fluxo de Animação do Texto Principal */
body.light-mode .text-flow {
    background: linear-gradient(90deg, #0f172a 0%, #059669 50%, #0f172a 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: shine-light 5s linear infinite !important;
}
@keyframes shine-light { to { background-position: 200% center; } }


/* ─────────────────────────────────────────────
   15. MEDIA QUERIES
   ───────────────────────────────────────────── */

/* Simulador pos3 */
@media (max-width: 880px) {
    .alaska-sim { padding-top: 90px; padding-bottom: 70px; }
    .sim-layout { grid-template-columns: 1fr; max-width: 560px; }
    .hero-title { font-size: clamp(30px, 8vw, 44px); }
    .proj-val   { font-size: 40px; }
    .anual-row  { flex-direction: column; gap: 14px; padding: 18px; }
    .chart-totals { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
    .hero, .sim-layout { padding: 0 14px; }
    .card { padding: 18px; }
    .proj-card { padding: 22px 18px; }
    .proj-val  { font-size: 32px; }
    .g2 { grid-template-columns: 1fr 1fr; }
}

/* Simulador pos3 copy */
@media (max-width: 900px) {
    .sim-wrap > div:last-child { grid-template-columns: 1fr !important; }
    .sim-wrap > div:last-child > div { grid-column: 1 / 2 !important; }
}