:root{ /* ---- Tema de cor (baseado na logo) ---- --cor-destaque muda conforme [data-tema] no ; --cor-destaque-clara é derivada automaticamente dela via color-mix(), então cada tema novo só precisa definir uma única cor. Os dois neutros abaixo são fixos — iguais nos 4 temas, como pedido. */ --cor-destaque:#FFCC29; --cor-destaque-clara: color-mix(in srgb, var(--cor-destaque) 78%, white); --cor-neutro-escuro:#5F6157; --cor-neutro-claro:#848688; --bg:#14120E; --bg-soft:#1B1812; --bg-card:#201C15; --ink:#F3EEDF; --ink-muted:#A89F88; --ink-faint:#6F6858; --teal:#2F6F62; --teal-bright:#4C9585; --line: color-mix(in srgb, var(--cor-destaque) 16%, transparent); --radius:2px; /* Cores fixas do Header/Footer — o FUNDO/TEXTO não mudam entre os temas claro/escuro do corpo da página (propositalmente), mas o acento sempre acompanha o --cor-destaque escolhido, igual ao resto do site. */ --chrome-bg-soft:#1B1812; --chrome-ink:#F3EEDF; --chrome-ink-muted:var(--cor-neutro-claro); --chrome-line: color-mix(in srgb, var(--cor-destaque) 16%, transparent); } /* As 4 variações de cor da logo. "amarelo" não precisa de regra própria: é o valor padrão já definido em :root acima. */ [data-tema="verde"]{ --cor-destaque:#00A859; } [data-tema="laranja"]{ --cor-destaque:#F6A13A; } [data-tema="azul"]{ --cor-destaque:#3E4095; } /* Tema claro: inverte só as cores do CORPO da página (fundo/texto). Header e Footer usam as variáveis --chrome-*, que não são redefinidas aqui, então permanecem escuros nos dois temas. */ body.tema-claro{ --bg:#F7F3E7; --bg-soft:#EFE7D3; --bg-card:#FFFFFF; --ink:#1C1912; --ink-muted:#5C5646; --ink-faint:#8A8371; --cor-destaque-clara: color-mix(in srgb, var(--cor-destaque) 70%, black); --line: color-mix(in srgb, var(--cor-destaque) 22%, transparent); } *{box-sizing:border-box;} body{ margin:0;background:var(--bg);color:var(--ink); font-family:'Inter',-apple-system,Segoe UI,Tahoma,Arial,sans-serif; -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; } a{color:inherit;text-decoration:none;} .mono{font-family:'IBM Plex Mono',monospace;} .container{max-width:1200px;margin:0 auto;padding:0 32px;} ::selection{background:var(--cor-destaque);color:#14120E;} /* Header — sempre escuro, independente do tema claro/escuro escolhido */ .topo{ position:sticky;top:0;z-index:50; background:rgba(20,18,14,0.94);backdrop-filter:blur(10px); border-bottom:1px solid var(--chrome-line); } .topo-conteudo{ display:flex;align-items:center;justify-content:space-between; padding:14px 32px;max-width:1200px;margin:0 auto;gap:24px;flex-wrap:wrap; } .logo{display:flex;align-items:center;} .logo img{height:74px;display:block;} .topo nav{display:flex;gap:28px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap;} .topo nav a{ font-size:13.5px;letter-spacing:0.03em;color:var(--chrome-ink-muted);font-weight:500;transition:color .2s; } .topo nav a:hover{color:var(--cor-destaque-clara);} .login-group{display:flex;gap:10px;align-items:center;} .btn-login{ font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;text-transform:uppercase; padding:9px 15px;border-radius:var(--radius);border:1px solid var(--chrome-line);color:var(--chrome-ink-muted); white-space:nowrap;transition:all .2s;background:transparent;cursor:pointer; } .btn-login.agencia{border-color:var(--cor-neutro-escuro);color:var(--cor-destaque-clara);} .btn-login.agencia:hover{background:var(--cor-destaque);color:#14120E;border-color:var(--cor-destaque);} .btn-login.viajante:hover{background:var(--teal);color:#0E1E1A;border-color:var(--teal);} /* Botão de "escolha de tipo de conta" (Agência/Pessoa Jurídica vs. Cliente/Pessoa Física) com título + subtítulo menor — usado no header (deslogado) e na tela de Login. */ .btn-login-duplo{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.35;gap:1px;} .btn-login-subtitulo{display:block;font-size:0.72em;opacity:0.7;font-weight:400;letter-spacing:0.03em;} /* Submenu do Admin (dropdown no header) */ .admin-dropdown{position:relative;} .admin-dropdown-menu{ display:none;position:absolute;top:calc(100% + 8px);right:0; background:#1B1812;border:1px solid var(--chrome-line);border-radius:4px; width:210px;max-width:calc(100vw - 24px);padding:6px;box-shadow:0 16px 32px rgba(0,0,0,0.45);z-index:60; } .admin-dropdown-menu a{ display:block;padding:9px 12px;font-size:13px;color:var(--chrome-ink-muted); border-radius:3px;white-space:nowrap;transition:all .15s; } .admin-dropdown-menu a:hover{background:color-mix(in srgb, var(--cor-destaque) 12%, transparent);color:var(--cor-destaque-clara);} .admin-dropdown:hover .admin-dropdown-menu, .admin-dropdown:focus-within .admin-dropdown-menu{display:block;} /* Switch discreto de tema claro/escuro */ .tema-toggle{ width:32px;height:32px;border-radius:50%;flex-shrink:0; border:1px solid var(--chrome-line);background:transparent;color:var(--chrome-ink-muted); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s; } .tema-toggle:hover{border-color:var(--cor-destaque);color:var(--cor-destaque-clara);} .tema-toggle svg{width:15px;height:15px;} .tema-toggle .icone-sol{display:none;} body.tema-claro .tema-toggle .icone-lua{display:none;} body.tema-claro .tema-toggle .icone-sol{display:block;} /* Botão de menu (hamburger) — só aparece no mobile, abre/fecha a nav */ .nav-toggle{display:none;} /* No desktop, esse wrapper "desaparece" do layout (display:contents), então o botão (escondido) e a