/* Lithos: landing no estilo da plataforma (IBM Carbon + Oxocarbon). Todo conteúdo vive dentro de cards do Lithos,
   que o orbe da IA cria: um mini card voa do orbe, pousa, abre e os campos se preenchem. */
:root {
  --bg: #161616; --surface: #262626; --subtle: #1e1e1e; --hover: #2e2e2e; --borda: #393939; --borda-forte: #525252;
  --texto: #f2f4f8; --forte: #ffffff; --suave: #c6c6c6; --apagado: #8d8d8d;
  --verde: #42be65; --verde-btn: #42be65; --verde-btn-txt: #161616; --verde-bg: rgba(66, 190, 101, .15);
  --azul: #78a9ff; --violeta: #be95ff; --magenta: #ee5396; --teal: #3ddbd9; --rosa: #ff7eb6; --laranja: #ff832b;
  --azul-bg: rgba(120, 169, 255, .15); --violeta-bg: rgba(190, 149, 255, .15); --magenta-bg: rgba(238, 83, 150, .15); --teal-bg: rgba(8, 189, 186, .15);
  --grade: rgba(255, 255, 255, .045); --fantasma: rgba(255, 255, 255, .05); --fantasma-borda: rgba(255, 255, 255, .08);
  --sombra: 0 18px 40px rgba(0, 0, 0, .5);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --topo-h: 48px;
  --wa-fundo: #0b141a; --wa-desenho: rgba(255, 255, 255, .04); --wa-topo: #202c33; --wa-sai: #005c4b; --wa-entra: #202c33; --wa-txt: #e9edef; --wa-sub: #8696a0; --wa-icone: #aebac1; --wa-tique: #53bdeb; --wa-campo: #2a3942;
  --azul-btn: #78a9ff; --azul-btn-txt: #161616; --portal: radial-gradient(130% 90% at 50% 108%, #002d9c 0%, #001141 38%, #161616 78%);
  --modo: escuro; color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --wa-fundo: #efeae2; --wa-desenho: rgba(0, 0, 0, .05); --wa-topo: #ffffff; --wa-sai: #d9fdd3; --wa-entra: #ffffff; --wa-txt: #111b21; --wa-sub: #667781; --wa-icone: #54656f; --wa-tique: #53bdeb; --wa-campo: #ffffff;
  --azul-btn: #0f62fe; --azul-btn-txt: #ffffff; --portal: radial-gradient(130% 90% at 50% 108%, #a6c8ff 0%, #d0e2ff 30%, #edf5ff 62%, #f4f4f4 100%);
  --bg: #f2f2f2; --surface: #ffffff; --subtle: #f4f4f4; --hover: #e8e8e8; --borda: #d0d0d0; --borda-forte: #a8a8a8;
  --texto: #161616; --forte: #000000; --suave: #525252; --apagado: #6f6f6f;
  --verde: #198038; --verde-btn: #198038; --verde-btn-txt: #ffffff; --verde-bg: #defbe6;
  --azul: #0f62fe; --violeta: #6929c4; --magenta: #9f1853; --teal: #007d79; --rosa: #ff7eb6; --laranja: #ba4e00;
  --azul-bg: #edf5ff; --violeta-bg: #f6f2ff; --magenta-bg: #fff0f7; --teal-bg: #d9fbfb;
  --grade: rgba(0, 0, 0, .05); --fantasma: rgba(0, 0, 0, .035); --fantasma-borda: rgba(0, 0, 0, .07);
  --sombra: 0 14px 34px rgba(0, 0, 0, .12); --modo: claro; color-scheme: light; } }
:root[data-theme="light"] {
  --wa-fundo: #efeae2; --wa-desenho: rgba(0, 0, 0, .05); --wa-topo: #ffffff; --wa-sai: #d9fdd3; --wa-entra: #ffffff; --wa-txt: #111b21; --wa-sub: #667781; --wa-icone: #54656f; --wa-tique: #53bdeb; --wa-campo: #ffffff;
  --azul-btn: #0f62fe; --azul-btn-txt: #ffffff; --portal: radial-gradient(130% 90% at 50% 108%, #a6c8ff 0%, #d0e2ff 30%, #edf5ff 62%, #f4f4f4 100%);
  --bg: #f2f2f2; --surface: #ffffff; --subtle: #f4f4f4; --hover: #e8e8e8; --borda: #d0d0d0; --borda-forte: #a8a8a8;
  --texto: #161616; --forte: #000000; --suave: #525252; --apagado: #6f6f6f;
  --verde: #198038; --verde-btn: #198038; --verde-btn-txt: #ffffff; --verde-bg: #defbe6;
  --azul: #0f62fe; --violeta: #6929c4; --magenta: #9f1853; --teal: #007d79; --rosa: #ff7eb6; --laranja: #ba4e00;
  --azul-bg: #edf5ff; --violeta-bg: #f6f2ff; --magenta-bg: #fff0f7; --teal-bg: #d9fbfb;
  --grade: rgba(0, 0, 0, .05); --fantasma: rgba(0, 0, 0, .035); --fantasma-borda: rgba(0, 0, 0, .07);
  --sombra: 0 14px 34px rgba(0, 0, 0, .12); --modo: claro; color-scheme: light; }
html, body { background: var(--bg); color: var(--texto); }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
canvas.camada { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#portal { z-index: 0; } #fundo { z-index: 1; } #linhas { z-index: 3; }
main, footer { position: relative; z-index: 2; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- orbe */
#orbe { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; width: var(--tam, 120px); height: var(--tam, 120px);
  transform: translate3d(var(--x, 50vw), var(--y, 30vh), 0) translate(-50%, -50%); will-change: transform; }
#orbe canvas { position: absolute; inset: -40%; width: 180%; height: 180%; }
#orbe .pulso { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--violeta); opacity: 0; animation: pulso 3s cubic-bezier(.2, .6, .3, 1) infinite; }
#orbe .pulso:nth-of-type(2) { animation-delay: 1s; border-color: var(--verde); }
#orbe .pulso:nth-of-type(3) { animation-delay: 2s; border-color: var(--azul); }
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(var(--alcance, 2)); opacity: 0; } }

/* ---------- barra do topo (UI shell do Carbon) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.shell { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 9; height: var(--topo-h); background: var(--surface);
  border-bottom: 1px solid var(--borda); display: flex; align-items: stretch; transition: transform .35s ease;
  padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); }
.shell.escondida { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.shell, .gaveta { transition: transform .35s ease, background-color .5s ease; }
.shell .marca { display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 600; font-size: 15px; color: var(--forte); text-decoration: none; border-right: 1px solid var(--borda); }
.shell .marca b { font-weight: 400; color: var(--suave); }
.mini-orbe { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#0f62fe, #be95ff, #ff7eb6, #ee5396, #08bdba, #42be65, #0f62fe); animation: girar 6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.abas { display: flex; align-items: stretch; margin-left: 8px; }
.abas a { display: flex; align-items: center; padding: 0 16px; color: var(--suave); text-decoration: none; font-size: 14px; border-bottom: 2px solid transparent; }
.abas a:hover { background: var(--hover); color: var(--texto); }
.abas a[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }
.shell .dir { margin-left: auto; display: flex; align-items: stretch; }
.icone { width: 48px; display: grid; place-items: center; background: transparent; border: 0; border-left: 1px solid var(--borda); color: var(--texto); cursor: pointer; padding: 0; }
.icone:hover { background: var(--hover); }
.icone svg { width: 18px; height: 18px; }
.icone .lua { display: none; } :root[data-modo="claro"] .icone .sol { display: none; } :root[data-modo="claro"] .icone .lua { display: block; }
.entrar { display: flex; align-items: center; padding: 0 18px; color: var(--texto); text-decoration: none; font-size: 14px; border-left: 1px solid var(--borda); }
.entrar:hover { background: var(--hover); }
.comecar { display: flex; align-items: center; padding: 0 22px; background: var(--verde-btn); color: var(--verde-btn-txt); text-decoration: none; font-size: 14px; font-weight: 600; }
.menu { display: none; }
.gaveta { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--topo-h)); left: 0; right: 0; z-index: 9; background: var(--surface); border-bottom: 1px solid var(--borda); display: grid; }
.gaveta a { padding: 14px max(16px, env(safe-area-inset-left, 0px)); color: var(--texto); text-decoration: none; border-top: 1px solid var(--borda); }
.gaveta a[aria-current="page"] { color: var(--verde); font-weight: 600; box-shadow: inset 3px 0 0 var(--verde); }
@media (max-width: 860px) { .abas, .entrar { display: none; } .menu { display: grid; } }
@media (max-width: 420px) { .comecar { padding: 0 14px; } }

/* ---------- área de conteúdo: coluna à direita do orbe */
.faixa { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.col { margin-left: 30vw; max-width: 780px; }
@media (max-width: 900px) { .col { margin-left: 0; } }
/* o orbe fica no meio do espaço livre entre a barra e o card: 64 px acima e 64 px abaixo (28 do gap + 36 da margem) */
.abre { padding-block: calc(var(--topo-h) + 64px) 8vh; display: grid; justify-items: center; gap: 28px; }
#lugar-orbe { width: 120px; height: 120px; }
.abre #lugar-orbe { margin-bottom: 36px; }

/* ---------- o card do Lithos (tudo o que se lê está dentro de um) */
.lc { position: relative; background: var(--surface); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px 16px; display: grid; gap: 12px;
  box-shadow: var(--sombra); min-width: 0; transform-origin: 30% 20%; }
.js .lc[data-card] { opacity: 0; transform: scale(.35) rotate(-8deg); filter: none; }
.js .lc[data-card].aberto { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.2, 1.25, .3, 1), opacity .3s ease; }
.lc-topo { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--apagado); }
.lc-fase { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; color: var(--suave); }
.lc-fase i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--verde)); }
.lc h1 { font-family: var(--cond); font-weight: 700; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; margin: 0; letter-spacing: -0.01em; color: var(--forte); text-wrap: balance; }
.lc h2 { font-family: var(--cond); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; margin: 0; color: var(--forte); text-wrap: balance; }
.lc h3 { font-size: 19px; font-weight: 600; margin: 0; line-height: 1.3; color: var(--forte); }
.lc p { margin: 0; color: var(--suave); font-size: 15.5px; line-height: 1.6; }
.lc-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; padding-top: 12px; border-top: 1px solid var(--borda); }
.lc-campo { display: grid; gap: 2px; min-width: 0; }
.lc-rot { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.lc-val { font-size: 14px; color: var(--texto); }
.lc-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--cb, var(--verde-bg)); color: var(--cc, var(--verde)); }
.ia { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--violeta); }
.ia::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(#0f62fe, #be95ff, #ff7eb6, #ee5396, #08bdba, #42be65, #0f62fe); }
.avs { margin-left: auto; display: flex; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--c); border: 2px solid var(--surface); margin-left: -6px; }
.acoes { display: flex; flex-wrap: wrap; gap: 1px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 64px 0 16px; font-size: 14px; text-decoration: none; position: relative; }
.btn::after { content: "→"; position: absolute; right: 16px; }
.btn.prim { background: var(--verde-btn); color: var(--verde-btn-txt); font-weight: 600; }
.btn.sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda-forte); }
.heroi { width: min(880px, 100%); }
.heroi .lc-campos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* letras dentro dos cards: o card abre e os campos se preenchem */
.js .lc [data-escrever] .ch { opacity: 0; }
.js .lc [data-escrever] .ch.on { opacity: 1; transition: opacity .12s; }
.ch.cursor::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.12em; background: var(--verde); animation: piscar .9s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.pal { white-space: nowrap; }

/* mini card que voa do orbe até o lugar do card */
.voador { position: fixed; left: 0; top: 0; z-index: 6; width: 64px; height: 46px; pointer-events: none; will-change: transform, opacity;
  background: var(--surface); border: 1px solid var(--borda-forte); border-radius: 7px; box-shadow: var(--sombra); display: grid; gap: 4px; padding: 7px 8px; align-content: start; }
.voador i { display: block; height: 4px; border-radius: 2px; background: var(--apagado); opacity: .55; }
.voador i:first-child { width: 42%; background: var(--c, var(--verde)); opacity: 1; }
.voador i:nth-child(2) { width: 88%; } .voador i:nth-child(3) { width: 64%; }
.voador b { position: absolute; right: 7px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--verde)); }

/* ---------- seções */
.secao { padding-block: 10vh; }
.pilha { display: grid; gap: 22px; }
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 700px) { .par { grid-template-columns: 1fr; } }
.palco-wrap { position: relative; height: 210vh; }
.palco { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.palco .cab { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--topo-h) + 22px); transform: translateX(-50%); width: min(640px, calc(100% - 32px)); z-index: 7; }
.palco .cab .lc { padding: 14px 18px 12px; gap: 8px; }
.palco .cab h2 { font-size: clamp(20px, 2.2vw, 28px); }
.orbita { position: absolute; left: 0; top: 0; width: clamp(220px, 19vw, 270px); will-change: transform, opacity; background: var(--surface); border: 1px solid var(--borda);
  border-radius: 12px; padding: 14px 15px 12px; display: grid; gap: 7px; box-shadow: var(--sombra); }
.orbita .lc-topo { font-size: 11px; } .orbita h3 { font-size: 16px; } .orbita p { font-size: 13px; line-height: 1.5; color: var(--suave); margin: 0; }
@media (max-width: 700px) { .orbita { width: 180px; padding: 11px; } .orbita p { display: none; } }

/* telefones da Central: tela no jeito do WhatsApp (sem o logo), clara ou escura conforme o tema.
   A mensagem da empresa (escrita pela IA) é a que sai, em verde, à direita; a do contato chega à esquerda. */
.fone { position: absolute; left: 0; top: 0; width: clamp(150px, 12.5vw, 184px); aspect-ratio: 9 / 18.5; z-index: 5; color: var(--wa-txt);
  transform: translate(-50%, -50%) scale(var(--e, 1)); opacity: var(--o, 1); background: #161616; border: 1px solid #393939; border-radius: 28px; padding: 7px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.fone .tela { height: 100%; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--wa-fundo);
  background-image: radial-gradient(var(--wa-desenho) 1px, transparent 1.4px), radial-gradient(var(--wa-desenho) 1px, transparent 1.4px);
  background-size: 18px 18px; background-position: 0 0, 9px 9px; }
.fone .topo { padding: 9px 8px 7px 6px; background: var(--wa-topo); display: flex; align-items: center; gap: 6px; }
.fone .topo svg { width: 12px; height: 12px; flex: none; color: var(--wa-icone); }
.fone .av2 { width: 24px; height: 24px; border-radius: 50%; background: var(--c); flex: none; display: grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 600; }
.fone .quem { font-size: 11px; font-weight: 600; line-height: 1.2; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--wa-txt); }
.fone .quem small { display: block; font-weight: 400; color: var(--wa-sub); font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.fone .icones-wa { display: flex; gap: 7px; }
.fone .msgs { flex: 1; padding: 8px 7px; display: grid; gap: 5px; align-content: start; overflow: hidden; }
.fone .dia { justify-self: center; font-size: 8.5px; color: var(--wa-sub); background: var(--wa-entra); padding: 2px 7px; border-radius: 6px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.bolha { position: relative; font-size: 10.5px; line-height: 1.38; padding: 5px 7px 13px; border-radius: 7.5px; max-width: 88%; min-width: 58px; color: var(--wa-txt); box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.bolha::after { content: attr(data-hora); position: absolute; right: 6px; bottom: 2px; font-size: 7.5px; color: var(--wa-sub); }
.bolha.da-ia { background: var(--wa-sai); justify-self: end; border-top-right-radius: 0; }
.bolha.da-ia::after { content: attr(data-hora) "  \2713\2713"; color: var(--wa-sub); }
.bolha.da-ia.lida::after { color: var(--wa-tique); }
.bolha.resposta { background: var(--wa-entra); justify-self: start; border-top-left-radius: 0; }
.fone .barra-wa { display: flex; align-items: center; gap: 5px; padding: 6px; }
.fone .campo-wa { flex: 1; background: var(--wa-campo); color: var(--wa-sub); border-radius: 999px; padding: 5px 9px; font-size: 9.5px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.fone .mic-wa { width: 24px; height: 24px; border-radius: 50%; background: #00a884; display: grid; place-items: center; flex: none; }
.fone .mic-wa svg { width: 11px; height: 11px; color: #fff; }
.js .bolha.resposta { opacity: 0; transition: opacity .4s; } .js .bolha.resposta.on { opacity: 1; }
.js .fone [data-escrever] .ch { opacity: 0; } .js .fone [data-escrever] .ch.on { opacity: 1; }
@media (max-width: 700px) { .fone { width: 108px; border-radius: 17px; padding: 4px; } .fone .tela { border-radius: 13px; } .bolha { font-size: 7.6px; padding: 3px 5px 10px; min-width: 40px; }
  .bolha::after { font-size: 6px; } .fone .quem { font-size: 8.5px; } .fone .quem small, .fone .icones-wa, .fone .barra-wa { display: none; } }

footer { padding: 22px max(16px, env(safe-area-inset-right, 0px)) 36px max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--borda); color: var(--apagado); font-size: 13px; background: var(--surface); }
body.saindo main { opacity: 0; transition: opacity .22s; }
@media (prefers-reduced-motion: reduce) { #orbe .pulso, .mini-orbe { animation: none; } .js .lc[data-card] { opacity: 1; transform: none; } .js .lc [data-escrever] .ch { opacity: 1; } }

/* cards que são links e o case */
a.lc { text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
a.lc:hover { border-color: var(--verde); }
.ir { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--verde); }
.ir::after { content: " →"; }
.lc-case { max-width: 560px; }
.lc-case h3 { font-size: 16px; }
.lc-case p { font-size: 14px; }

/* ---------- produtos: cada um com a sua cor e o seu selo (Athena verde, Heimdall azul) */
[data-produto="athena"] { --prod: var(--verde); --prod-bg: var(--verde-bg); }
[data-produto="heimdall"] { --prod: var(--azul); --prod-bg: var(--azul-bg); --prod-txt: var(--azul-btn-txt); --verde-btn: var(--azul-btn); --verde-btn-txt: var(--azul-btn-txt); }
[data-produto] .lc { border-top: 3px solid var(--prod); }
[data-produto] .lc-fase i { background: var(--prod); }
.produto { padding: 28px 28px 22px; gap: 16px; background: linear-gradient(135deg, var(--prod-bg), var(--surface) 55%); }
.produto-nome { display: flex; align-items: center; gap: 16px; }
.selo { width: 56px; height: 56px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--prod); color: #fff; }
.selo svg { width: 32px; height: 32px; }
.produto-nome h2 { font-size: clamp(34px, 4vw, 52px); }
.produto-nome small { display: block; font-family: var(--mono); font-size: 13px; color: var(--prod); letter-spacing: .02em; }
.produto-mapa { display: flex; flex-wrap: wrap; gap: 8px; }
.produto-mapa span { font-size: 13px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--surface); color: var(--texto); }
.dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 700px) { .dois { grid-template-columns: 1fr; } }
.escolha { border-top: 3px solid var(--prod) !important; }

/* ---------- formulários (contato e login) */
.pagina-form { min-height: 100vh; min-height: 100dvh; padding-block: calc(var(--topo-h) + 60px) 60px; display: grid; justify-items: center; align-content: start; gap: 26px; }
.form-card { width: min(620px, 100%); }
.campo-f { display: grid; gap: 6px; }
.campo-f label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--suave); }
.campo-f label em { font-style: normal; color: var(--magenta); }
.campo-f input, .campo-f select, .campo-f textarea { font: inherit; font-size: 15px; color: var(--texto); background: var(--subtle); border: 0; border-bottom: 1px solid var(--borda-forte);
  padding: 12px 14px; border-radius: 0; width: 100%; min-width: 0; }
.campo-f textarea { min-height: 84px; resize: vertical; }
.campo-f input:focus, .campo-f select:focus, .campo-f textarea:focus { outline: 2px solid var(--verde); outline-offset: -2px; }
.campo-f input[aria-invalid="true"] { outline: 2px solid var(--magenta); outline-offset: -2px; }
.campo-f .ajuda { font-size: 12px; color: var(--apagado); }
.grade-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .grade-f { grid-template-columns: 1fr; } }
.erro-f { font-size: 13px; color: var(--magenta); background: var(--magenta-bg); padding: 10px 12px; border-left: 3px solid var(--magenta); }
/* opções de interesse: cartões com o ícone e a cor de cada produto */
.prod-escolha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .prod-escolha { grid-template-columns: 1fr; } }
.prod-escolha .opcao { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 14px 13px; border: 1px solid var(--borda-forte); border-radius: 10px;
  cursor: pointer; background: var(--surface); color: var(--texto); font-size: 14px; font-weight: 400; letter-spacing: 0; transition: border-color .15s, background .15s, box-shadow .15s; }
.prod-escolha .opcao:hover { border-color: var(--oc); }
.prod-escolha .opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; pointer-events: none; }
.prod-escolha .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--oc-bg); color: var(--oc); margin-bottom: 6px; }
.prod-escolha .ic svg { width: 22px; height: 22px; }
.prod-escolha b { font-weight: 600; font-size: 14.5px; color: var(--forte); }
.prod-escolha small { font-size: 12.5px; line-height: 1.4; color: var(--suave); }
.prod-escolha .opcao::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--borda-forte);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.prod-escolha .opcao:has(input:checked) { border-color: var(--oc); box-shadow: inset 0 0 0 1px var(--oc); background: var(--oc-bg); }
.prod-escolha .opcao:has(input:checked) .ic { background: var(--oc); color: #fff; }
.prod-escolha .opcao:has(input:checked)::after { content: "\2713"; background: var(--oc); border-color: var(--oc); }
.prod-escolha .opcao:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }
button.btn { border: 0; cursor: pointer; font: inherit; font-size: 14px; }
.aviso-previa { font-family: var(--mono); font-size: 12px; color: var(--apagado); }

/* login: marca à esquerda, formulário à direita */
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.login-marca { position: relative; padding: 48px max(28px, env(safe-area-inset-left, 0px)) 40px; display: grid; align-content: space-between; gap: 32px; border-right: 1px solid var(--borda); }
.login-marca .logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 20px; color: var(--forte); text-decoration: none; }
.login-marca .logo .mini-orbe { width: 22px; height: 22px; }
.login-meio { display: grid; gap: 22px; justify-items: start; }
.login-produtos { display: grid; gap: 14px; width: min(520px, 100%); }
.login-produtos .lc { padding: 14px 16px; gap: 6px; }
.login-lado { display: grid; place-items: center; padding: 48px max(16px, env(safe-area-inset-right, 0px)) 48px 16px; background: var(--subtle); }
.login-lado .lc { width: min(420px, 100%); }
.login-lado .entrar-btn { width: 100%; justify-content: flex-start; }
.login .rodape-l { font-size: 12px; color: var(--apagado); font-family: var(--mono); }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-marca { border-right: 0; border-bottom: 1px solid var(--borda); } }

/* ---------- rodapé (padrão Carbon: marca, colunas e linha de baixo) */
footer.rodape { padding: 0; background: var(--surface); border-top: 1px solid var(--borda); color: var(--suave); font-size: 14px; }
.pe-grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px;
  padding: 48px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); max-width: 1280px; margin: 0 auto; }
.pe-marca { display: grid; gap: 14px; align-content: start; max-width: 380px; }
.pe-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--forte); text-decoration: none; }
.pe-logo .mini-orbe { width: 20px; height: 20px; }
.pe-marca p { margin: 0; line-height: 1.55; }
.pe-selos { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font-weight: 600; font-size: 13px; }
.pe-selo svg { width: 18px; height: 18px; color: var(--oc); }
.pe-col { display: grid; gap: 10px; align-content: start; }
.pe-tit { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.pe-col a { color: var(--texto); text-decoration: none; width: fit-content; }
.pe-col a:hover { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.pe-base { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; border-top: 1px solid var(--borda); font-family: var(--mono); font-size: 12px; color: var(--apagado);
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); max-width: 1280px; margin: 0 auto; }
.pe-topo { margin-left: auto; color: var(--texto); text-decoration: none; }
.pe-topo::after { content: " ↑"; }
@media (max-width: 860px) { .pe-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pe-marca { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 480px) { .pe-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pe-casa { font-family: var(--mono); font-size: 12px; color: var(--apagado); margin-top: -8px; }
.pe-casa b { font-weight: 500; color: var(--texto); }


/* ---------- portal do Heimdall: o céu azul-noite se abre em círculo a partir do orbe */
#portal { position: fixed; inset: 0; pointer-events: none; clip-path: circle(0px at 50% 50%);
  background: var(--portal); }
/* a barra do topo também escurece quando se está no mundo do Heimdall */
html.em-h .abas a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--azul); }
html.em-h .comecar { background: var(--azul-btn); color: var(--azul-btn-txt); }
@media (prefers-color-scheme: light) { html.em-h:not([data-theme="dark"]) .shell, html.em-h:not([data-theme="dark"]) .gaveta, html.em-h:not([data-theme="dark"]) body::before {
  --surface: #0f62fe; --borda: rgba(255, 255, 255, .22); --texto: #ffffff; --suave: rgba(255, 255, 255, .85); --forte: #fff; --hover: #0353e9; --azul: #ffffff; --azul-btn: #ffffff; --azul-btn-txt: #0f62fe; } }
html.em-h[data-theme="light"] .shell, html.em-h[data-theme="light"] .gaveta, html.em-h[data-theme="light"] body::before {
  --surface: #0f62fe; --borda: rgba(255, 255, 255, .22); --texto: #ffffff; --suave: rgba(255, 255, 255, .85); --forte: #fff; --hover: #0353e9; --azul: #ffffff; --azul-btn: #ffffff; --azul-btn-txt: #0f62fe; }

/* ---------- Heimdall fala em mensagens, não em cards */
.h-abre { padding-block: 26vh 12vh; }
.conversa { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.conversa-topo { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); }
.conversa-topo .selo { width: 46px; height: 46px; } .conversa-topo .selo svg { width: 26px; height: 26px; }
.conversa-topo b { display: block; font-size: 18px; color: var(--forte); }
.conversa-topo small { font-family: var(--mono); font-size: 12px; color: var(--apagado); }
.online { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(66, 190, 101, .6); animation: online 2s infinite; }
@keyframes online { 70% { box-shadow: 0 0 0 10px rgba(66, 190, 101, 0); } 100% { box-shadow: 0 0 0 0 rgba(66, 190, 101, 0); } }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: min(88%, 680px); min-width: 0; }
.msg-voce { margin-left: auto; flex-direction: row-reverse; }
.msg-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: conic-gradient(#0f62fe, #be95ff, #ff7eb6, #ee5396, #08bdba, #42be65, #0f62fe);
  box-shadow: 0 0 14px rgba(15, 98, 254, .35); animation: girar 6s linear infinite; }
.msg-corpo { background: var(--surface); border: 1px solid var(--borda); border-radius: 18px 18px 18px 4px; padding: 12px 16px 14px; display: grid; gap: 8px; min-width: 0; box-shadow: var(--sombra); }
.msg-voce .msg-corpo { background: var(--prod); border-color: transparent; border-radius: 18px 18px 4px 18px; color: var(--prod-txt); font-weight: 500; }
.msg-quem { font-family: var(--mono); font-size: 11.5px; color: var(--apagado); }
.msg-voce .msg-quem { color: var(--prod-txt); opacity: .7; }
.msg h2 { font-family: var(--cond); font-weight: 700; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; margin: 0; color: var(--forte); text-wrap: balance; }
.msg h3 { font-size: 18px; font-weight: 600; margin: 0; color: var(--forte); }
.msg p { margin: 0; color: var(--suave); font-size: 15.5px; line-height: 1.6; }
.msg-grande { max-width: min(96%, 760px); }
.msg-dados { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; }
.msg-dados span { color: var(--apagado); margin-right: 6px; } .msg-dados b { font-weight: 500; color: var(--texto); }
.respostas { display: flex; flex-wrap: wrap; gap: 8px; }
.respostas span { border: 1px solid var(--prod); color: var(--prod); border-radius: 999px; padding: 6px 13px; font-size: 13px; }
.js .msg[data-card], .js .conversa-topo[data-card] { opacity: 0; transform: translateY(18px) scale(.9); transform-origin: 0 100%; }
.js .msg-voce[data-card] { transform-origin: 100% 100%; }
.js .msg[data-card].aberto, .js .conversa-topo[data-card].aberto { opacity: 1; transform: none; transition: transform .55s cubic-bezier(.2, 1.25, .3, 1), opacity .25s ease; }
.js .msg [data-escrever] .ch { opacity: 0; } .js .msg [data-escrever] .ch.on { opacity: 1; transition: opacity .12s; }
.palco .cab .msg { margin: 0 auto; }
.voador-msg { width: 60px; height: 34px; border-radius: 14px 14px 14px 4px; background: var(--surface); border-color: var(--azul); padding: 8px 9px; }
.voador-msg b { display: none; }
@media (prefers-reduced-motion: reduce) { .js .msg[data-card], .js .conversa-topo[data-card] { opacity: 1; transform: none; } .js .msg [data-escrever] .ch { opacity: 1; } .online, .msg-av { animation: none; } }

/* ---------- login: o lado do formulário ganha fundo (pontos, brilho, anéis e peças da marca flutuando atrás) */
.login-lado { position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--subtle);
  background-image: radial-gradient(var(--fantasma-borda) 1.2px, transparent 1.6px),
    radial-gradient(60% 50% at 20% 15%, var(--verde-bg), transparent 70%),
    radial-gradient(55% 45% at 85% 90%, var(--azul-bg), transparent 70%);
  background-size: 22px 22px, 100% 100%, 100% 100%; }
.login-lado > .lc { position: relative; z-index: 2; }
.atras { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.anel { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; border: 1px dashed var(--borda-forte); opacity: .6; animation: girar 80s linear infinite; }
.anel2 { width: 760px; height: 760px; margin: -380px 0 0 -380px; border-style: solid; border-color: var(--borda); animation-duration: 140s; animation-direction: reverse; }
.atras-a, .atras-h, .atras-c { position: absolute; display: grid; gap: 9px; align-content: start; padding: 18px; box-shadow: var(--sombra); animation: flutua 9s ease-in-out infinite alternate; }
.atras i { display: block; height: 7px; border-radius: 4px; background: var(--borda); }
.atras-a { width: 300px; height: 190px; left: 6%; top: 9%; transform: rotate(-9deg); background: var(--surface); border: 1px solid var(--borda); border-top: 3px solid var(--verde); border-radius: 12px; }
.atras-a i:first-child { width: 40%; background: var(--verde); opacity: .6; } .atras-a i:nth-child(2) { width: 85%; } .atras-a i:nth-child(3) { width: 70%; } .atras-a i:nth-child(4) { width: 55%; }
.atras-a b, .atras-c b { position: absolute; right: 16px; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); opacity: .5; }
.atras-h { width: 270px; height: 110px; right: 5%; bottom: 11%; transform: rotate(7deg); background: var(--azul-btn); border: 0; border-radius: 20px 20px 20px 5px; animation-delay: -3s; }
.atras-h i { background: var(--azul-btn-txt); opacity: .35; } .atras-h i:first-child { width: 35%; opacity: .8; } .atras-h i:nth-child(2) { width: 90%; } .atras-h i:nth-child(3) { width: 60%; }
.atras-c { width: 210px; height: 130px; right: 9%; top: 7%; transform: rotate(10deg); background: var(--surface); border: 1px solid var(--borda); border-top: 3px solid var(--violeta); border-radius: 12px; opacity: .8; animation-delay: -6s; }
.atras-c i:first-child { width: 45%; background: var(--violeta); opacity: .6; } .atras-c i:nth-child(2) { width: 80%; }
@keyframes flutua { from { translate: 0 -8px; } to { translate: 0 10px; } }
@media (max-width: 860px) { .atras-a { left: -40px; } .atras-c { display: none; } }
@media (prefers-reduced-motion: reduce) { .anel, .atras-a, .atras-h, .atras-c { animation: none; } }
[data-produto="heimdall"] .selo { color: var(--prod-txt); }

/* ---------- login: logo e botão de tema no topo; Heimdall fala em balão de conversa */
.login-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tema-login { width: 40px; height: 40px; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--surface); }
.login-msg { max-width: min(520px, 100%); }
.login-msg .msg-corpo { border-top: 0; }
.login-msg p { font-size: 15px; color: var(--texto); }

/* login no celular: logo e tema no alto, o formulário logo em seguida, e a apresentação dos produtos depois */
@media (max-width: 860px) {
  .login-marca { display: contents; }
  .login-topo { order: 0; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); position: relative; z-index: 2; }
  .login-lado { order: 1; padding-top: 20px; padding-bottom: 36px; }
  .login-meio { order: 2; padding: 36px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); position: relative; z-index: 2; }
  .login .rodape-l { order: 3; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); position: relative; z-index: 2; }
}

/* login: sem corte entre os lados. O fundo do lado do formulário (pontos e brilhos) entra num degradê largo,
   e a grade de linhas do lado da marca continua visível por baixo até sumir aos poucos. */
.login-marca { border-right: 0; }
.login-lado { background: transparent; }
.login-lado::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--subtle);
  background-image: radial-gradient(var(--fantasma-borda) 1.2px, transparent 1.6px),
    radial-gradient(60% 50% at 30% 15%, var(--verde-bg), transparent 70%),
    radial-gradient(55% 45% at 85% 90%, var(--azul-bg), transparent 70%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .35) 18%, #000 48%);
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, .35) 18%, #000 48%); }
/* os anéis passam por cima da emenda e ligam os dois lados */
.login-lado { overflow: visible; }
.login { overflow: hidden; }
.anel { left: 30%; }
@media (max-width: 860px) {
  .login-lado::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .anel { left: 50%; }
}
.login-marca { position: relative; z-index: 2; } /* os anéis passam por baixo dos cards da marca */



/* ---------- orbe interativo */
#orbe { pointer-events: auto; cursor: pointer; border-radius: 50%; }
#orbe canvas, #orbe .pulso { pointer-events: none; }
#orbe:focus-visible { outline: 2px solid var(--verde); outline-offset: 8px; }
#orbe.perto .pulso { animation-duration: 1.5s; }
#orbe.ativo .pulso { animation: none; opacity: 0; }   /* com a conversa aberta, os pulsos param e ficam os satélites */
#orbe-dica { position: fixed; left: 0; top: 0; z-index: 8; max-width: 240px; padding: 9px 13px; font-size: 13.5px; line-height: 1.4; color: var(--texto);
  background: var(--surface); border: 1px solid var(--borda); border-radius: 14px 14px 14px 4px; box-shadow: var(--sombra); pointer-events: none;
  opacity: 0; transition: opacity .2s ease; min-height: 1em; }
#orbe-dica.on { opacity: 1; }
.sat { position: fixed; left: 0; top: 0; z-index: 3; width: 46px; height: 32px; padding: 6px 7px; display: grid; gap: 3px; align-content: start; pointer-events: none;
  background: var(--surface); border: 1px solid var(--borda-forte); border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); will-change: transform, opacity;
  transition: border-radius .45s ease, background-color .45s ease, border-color .45s ease, width .45s ease, height .45s ease; }
.sat i { display: block; height: 3px; border-radius: 2px; background: var(--apagado); opacity: .5; }
.sat i:first-child { width: 45%; background: var(--c, var(--verde)); opacity: 1; } .sat i:nth-child(2) { width: 88%; } .sat i:nth-child(3) { width: 62%; }
html.em-h .sat { width: 52px; height: 30px; border-radius: 13px 13px 13px 3px; background: var(--azul-btn); border-color: transparent; }
html.em-h .sat i { background: var(--azul-btn-txt); opacity: .35; } html.em-h .sat i:first-child { opacity: .8; } html.em-h .sat i:nth-child(3) { display: none; }
#orbe-chat { position: fixed; left: 0; top: 0; z-index: 8; width: min(340px, calc(100vw - 32px)); max-height: min(460px, 72vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface); color: var(--texto); border: 1px solid var(--borda); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden;
  opacity: 0; scale: .92; transition: opacity .22s ease, scale .28s cubic-bezier(.2, 1.2, .3, 1); }
#orbe-chat.on { opacity: 1; scale: 1; }
.oc-topo { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--borda); }
.oc-topo b { display: block; font-size: 14px; color: var(--forte); } .oc-topo small { font-family: var(--mono); font-size: 11px; color: var(--apagado); }
.oc-fecha { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--texto); cursor: pointer; }
.oc-fecha:hover { background: var(--hover); } .oc-fecha svg { width: 16px; height: 16px; }
.oc-msgs { overflow-y: auto; padding: 14px; display: grid; gap: 8px; align-content: start; }
.oc-b { max-width: 86%; padding: 9px 12px; font-size: 14px; line-height: 1.5; background: var(--subtle); border: 1px solid var(--borda); border-radius: 14px 14px 14px 4px; justify-self: start; }
.oc-b.voce { justify-self: end; background: var(--verde-btn); color: var(--verde-btn-txt); border-color: transparent; border-radius: 14px 14px 4px 14px; }
html.em-h .oc-b.voce { background: var(--azul-btn); color: var(--azul-btn-txt); }
.oc-ir { display: block; margin-top: 8px; font-weight: 600; color: var(--verde); text-decoration: none; } .oc-ir::after { content: " →"; }
html.em-h .oc-ir { color: var(--azul); }
.oc-dig { display: flex; gap: 4px; padding: 12px 14px; }
.oc-dig i { width: 6px; height: 6px; border-radius: 50%; background: var(--apagado); animation: digita 1s infinite ease-in-out; }
.oc-dig i:nth-child(2) { animation-delay: .15s; } .oc-dig i:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.oc-opcoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--borda); }
.oc-op { font: inherit; font-size: 13px; color: var(--texto); background: transparent; border: 1px solid var(--borda-forte); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-align: left; }
.oc-op:hover { border-color: var(--verde); color: var(--verde); }
.oc-opcoes.espera .oc-op { opacity: .5; pointer-events: none; }
@media (max-width: 599px) { #orbe-chat { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { #orbe-chat { transition: none; } .oc-dig i { animation: none; } }