/* Mesa de Agentes, site. Fundo claro (como os líderes do setor), azul de ação, zinco nos textos e uma cor para cada agente.
   Títulos grandes em IBM Plex Sans 700, números e rótulos em IBM Plex Mono. Animações com Motion (site.js);
   para quem pede menos movimento, tudo aparece parado. */
:root {
  --fundo: #FFFFFF; --fundo-2: #F7F8FA; --fundo-3: #EEF1F6; --cartao: #FFFFFF;
  --linha: #E3E6EC; --linha-2: #CBD1DB;
  --tinta: #14181F; --tinta-2: #4A5362; --tinta-3: #6B7585;
  --acento: #2459E0; --acento-2: #1B46B8; --acento-fundo: #EAF0FD;
  --ouro: #A9772A; --ouro-fundo: #F8F0E1;
  --urgente: #D6453A; --atencao: #C98A13; --em-dia: #1F9D6C;
  --c-vigia: #2459E0; --c-controla: #B7791F; --c-guardia: #0E7490; --c-mensa: #7C3AED; --c-arq: #4D7C0F; --c-radar: #C2410C; --c-fin: #BE185D; --c-and: #047857;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --raio: 16px; --sombra: 0 1px 2px rgba(20, 24, 31, .05), 0 10px 30px -12px rgba(20, 24, 31, .14);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 66px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 { font-size: 18px; letter-spacing: -0.012em; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
.faixa { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.estreita { max-width: 820px; }
.olho { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--mono); color: var(--acento); letter-spacing: .02em; }
.olho::before { content: ""; width: 18px; height: 1.5px; background: currentColor; }
.ouro { color: var(--acento); }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo .faixa { display: flex; align-items: center; gap: 28px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 18px; white-space: nowrap; }
.marca i { width: 28px; height: 28px; border-radius: 8px; background: var(--tinta); position: relative; flex: none; }
.marca i::after { content: "M"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 15px var(--sans); }
.topo nav { display: flex; gap: 26px; margin-left: 8px; }
.topo nav a { text-decoration: none; font-size: 15px; color: var(--tinta-2); font-weight: 500; }
.topo nav a:hover { color: var(--tinta); }
.acoes { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lnk { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--tinta-2); }
.lnk:hover { color: var(--tinta); }
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--acento); background: var(--acento); color: #fff; padding: 10px 20px; border-radius: 999px; font: 600 15px var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--acento-2); border-color: var(--acento-2); box-shadow: 0 8px 22px -10px rgba(36, 89, 224, .7); }
.btn:active { transform: translateY(1px); }
.btn.linha { background: transparent; color: var(--tinta); border-color: var(--linha-2); }
.btn.linha:hover { background: var(--fundo-2); border-color: var(--tinta-3); box-shadow: none; }
.btn.grande { padding: 14px 28px; font-size: 16px; }
.btn[disabled] { opacity: .6; cursor: default; }
@media (max-width: 860px) { .topo nav { display: none; } .topo .faixa { gap: 12px; } }

/* ---------- abertura ---------- */
.abertura { position: relative; padding: 56px 0 72px; background: radial-gradient(900px 480px at 78% 8%, #E6EEFF 0%, rgba(230, 238, 255, 0) 70%), linear-gradient(#fff, var(--fundo-2)); overflow: hidden; }
.abertura .faixa { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.abertura .lead { margin-top: 22px; font-size: 19px; color: var(--tinta-2); max-width: 54ch; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.nota { margin-top: 16px; font-size: 14px; color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.nota span::before { content: "✓ "; color: var(--em-dia); font-weight: 700; }
.fontes { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--tinta-3); }
.fontes b { font: 500 12px var(--mono); border: 1px solid var(--linha); background: #fff; border-radius: 999px; padding: 4px 10px; color: var(--tinta-2); }
@media (max-width: 980px) { .abertura .faixa { grid-template-columns: 1fr; gap: 40px; } .abertura { padding-top: 36px; } }

/* a mesa: console dos agentes (animado pelo Motion) */
.console { background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra), 0 40px 80px -40px rgba(36, 89, 224, .25); overflow: hidden; }
.console-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); background: var(--fundo-2); font-size: 13px; color: var(--tinta-3); }
.console-topo .pontos { display: flex; gap: 6px; } .console-topo .pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--linha-2); }
.console-topo b { color: var(--tinta); font-weight: 600; } .console-topo .hora { margin-left: auto; font: 500 12px var(--mono); }
.agentes-lista { padding: 10px; display: grid; gap: 6px; position: relative; }
.linha-agente { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: #fff; }
.linha-agente .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font: 700 16px var(--sans); color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.linha-agente b { display: block; font-weight: 600; font-size: 15px; } .linha-agente span.o-que { font-size: 13px; color: var(--tinta-3); }
.linha-agente .estado { font: 500 11px var(--mono); color: var(--tinta-3); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.linha-agente.ativa { border-color: color-mix(in srgb, var(--c) 40%, #fff); background: color-mix(in srgb, var(--c) 5%, #fff); }
.linha-agente.ativa .estado { color: var(--c); border-color: color-mix(in srgb, var(--c) 40%, #fff); background: #fff; }
.prazo-card { margin: 4px 10px 12px; border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; background: var(--fundo-2); display: grid; gap: 4px; }
.prazo-card .cnj { font: 500 12px var(--mono); color: var(--tinta-3); } .prazo-card b { font-size: 15px; font-weight: 600; }
.prazo-card .vence { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); } .prazo-card .vence i { width: 9px; height: 9px; border-radius: 50%; background: var(--urgente); }
.ficha { position: absolute; left: 1px; top: 0; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--acento); font-size: 0; color: transparent; overflow: hidden; pointer-events: none; box-shadow: 0 0 0 4px rgba(36, 89, 224, .18), 0 0 14px 2px rgba(36, 89, 224, .55); opacity: 0; }

/* ---------- faixa de números ---------- */
.numeros { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: #fff; }
.numeros .faixa { display: grid; grid-template-columns: repeat(4, 1fr); }
.numeros .n { padding: 26px 20px; border-left: 1px solid var(--linha); } .numeros .n:first-child { border-left: 0; }
.numeros .n b { display: block; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; font-weight: 700; } .numeros .n span { font-size: 14px; color: var(--tinta-2); }
@media (max-width: 760px) { .numeros .faixa { grid-template-columns: 1fr 1fr; } .numeros .n:nth-child(3) { border-left: 0; } .numeros .n:nth-child(n+3) { border-top: 1px solid var(--linha); } }

/* ---------- seções ---------- */
.secao { padding: 92px 0; }
.secao.fundo { background: var(--fundo-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.cabeca { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: 46px; }
.cabeca > p { color: var(--tinta-2); font-size: 17px; }
@media (max-width: 860px) { .cabeca { grid-template-columns: 1fr; } .secao { padding: 64px 0; } }
.equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.agente { position: relative; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, box-shadow .2s, transform .2s; overflow: hidden; }
.agente::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px 160px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.agente:hover { border-color: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: var(--sombra); transform: translateY(-3px); } .agente:hover::before { opacity: 1; }
.agente .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 18px var(--sans); color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.agente p { color: var(--tinta-2); font-size: 14.5px; } .agente .faz { margin-top: auto; font: 500 12px var(--mono); color: var(--c); padding-top: 6px; }
@media (max-width: 1040px) { .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .equipe { grid-template-columns: 1fr; } }

/* um dia na mesa */
.dia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.dia::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: var(--linha); }
.dia .progresso { position: absolute; left: 0; top: 17px; height: 2px; width: 100%; background: var(--acento); transform-origin: left center; transform: scaleX(0); }
.dia li { position: relative; padding: 46px 22px 0 0; } .dia li::before { content: ""; position: absolute; top: 10px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--acento); }
.dia time { font: 600 13px var(--mono); color: var(--acento); } .dia h3 { margin: 6px 0; } .dia p { color: var(--tinta-2); font-size: 14.5px; }
@media (max-width: 820px) { .dia { grid-template-columns: 1fr; gap: 28px; } .dia::before, .dia .progresso { display: none; } .dia li { padding: 0 0 0 34px; } .dia li::before { top: 4px; } }

/* a tela */
.janela { background: #fff; border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden; }
.janela-barra { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--linha); background: var(--fundo-2); font-size: 13px; color: var(--tinta-3); }
.janela-barra .pontos { display: flex; gap: 6px; } .janela-barra .pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--linha-2); } .janela-barra b { color: var(--tinta); } .janela-barra .end { margin-left: auto; font: 500 12px var(--mono); }
.janela-corpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mes { padding: 20px; border-right: 1px solid var(--linha); } .mes-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--tinta-3); } .legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.u { --k: var(--urgente); } .a { --k: var(--atencao); } .g { --k: var(--em-dia); } .legenda i.u, .ev.u i { background: var(--urgente); } .legenda i.a, .ev.a i { background: var(--atencao); } .legenda i.g, .ev.g i { background: var(--em-dia); }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .cal > div { min-height: 78px; border: 1px solid var(--linha); border-radius: 10px; padding: 6px; background: #fff; }
.cal .dsem { min-height: 0; border: 0; background: none; font: 500 11px var(--mono); color: var(--tinta-3); text-transform: uppercase; padding: 0 2px; }
.cal .n { font: 500 11px var(--mono); color: var(--tinta-3); display: block; margin-bottom: 4px; } .cal .hoje { border-color: var(--acento); background: var(--acento-fundo); } .cal .fer { background: var(--fundo-2); }
.ev { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.25; margin-top: 3px; padding: 3px 5px; border-radius: 6px; background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--tinta); } .ev i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .ev.sel { outline: 2px solid var(--acento); }
.detalhe { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .detalhe .cnj { font: 500 12px var(--mono); color: var(--tinta-3); } .detalhe h4 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.detalhe .orig { font-size: 13px; color: var(--tinta-2); border-left: 3px solid var(--linha-2); padding-left: 12px; font-style: italic; }
.conta { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 7px; } .conta li { display: flex; justify-content: space-between; gap: 12px; color: var(--tinta-2); border-bottom: 1px dashed var(--linha); padding-bottom: 7px; } .conta b { color: var(--tinta); font-weight: 600; } .conta li.fim { border: 0; color: var(--urgente); } .conta li.fim b { color: var(--urgente); }
.resp { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-3); margin-top: auto; }
.legenda-tela { margin-top: 12px; font-size: 13px; color: var(--tinta-3); text-align: center; }
@media (max-width: 860px) { .janela-corpo { grid-template-columns: 1fr; } .mes { border-right: 0; border-bottom: 1px solid var(--linha); } .cal { grid-template-columns: repeat(2, 1fr); } .cal .dsem { display: none; } }

/* recursos e confiança */
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recurso { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; transition: box-shadow .2s, transform .2s; } .recurso:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.recurso .tag { display: inline-block; font: 500 12px var(--mono); color: var(--acento); background: var(--acento-fundo); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; } .recurso p { margin-top: 8px; color: var(--tinta-2); font-size: 14.5px; }
@media (max-width: 960px) { .recursos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .recursos { grid-template-columns: 1fr; } }
.confianca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; overflow: hidden; }
.confianca > div { padding: 24px; border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); } .confianca > div:nth-child(-n+3) { border-top: 0; } .confianca > div:nth-child(3n+1) { border-left: 0; }
.confianca p { margin-top: 6px; color: var(--tinta-2); font-size: 14.5px; }
@media (max-width: 860px) { .confianca { grid-template-columns: 1fr; } .confianca > div { border-left: 0; border-top: 1px solid var(--linha); } .confianca > div:first-child { border-top: 0; } }
.seta { display: inline-block; margin-top: 22px; color: var(--acento); font-weight: 600; text-decoration: none; } .seta::after { content: " →"; } .seta:hover { text-decoration: underline; }

/* planos */
.alterna { display: inline-flex; background: var(--fundo-3); border-radius: 999px; padding: 4px; margin: 0 0 30px; }
.alterna button { border: 0; background: transparent; font: 600 14px var(--sans); color: var(--tinta-2); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; } .alterna button[aria-pressed="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(20, 24, 31, .15); }
.alterna .desc { font: 600 11px var(--mono); color: var(--em-dia); margin-left: 6px; }
.planos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plano { background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.plano.destaque { border: 2px solid var(--acento); box-shadow: 0 24px 50px -24px rgba(36, 89, 224, .45); }
.plano .selo { position: absolute; top: -12px; left: 24px; background: var(--acento); color: #fff; font: 600 11px var(--mono); border-radius: 999px; padding: 4px 12px; }
.plano .quem { color: var(--tinta-3); font-size: 14px; } .plano .preco { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; margin-top: 12px; line-height: 1; } .plano .preco small { font-size: 15px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }
.plano .cobra { font-size: 13px; color: var(--tinta-3); min-height: 40px; margin-top: 6px; } .plano .cobra b { color: var(--em-dia); font-weight: 600; }
.plano ul { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--tinta-2); } .plano li { display: flex; gap: 10px; } .plano li::before { content: "✓"; color: var(--em-dia); font-weight: 700; flex: none; } .plano .btn { margin-top: auto; }
.nota-planos { margin-top: 22px; font-size: 14px; color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 6px 22px; } .nota-planos span::before { content: "✓ "; color: var(--em-dia); font-weight: 700; }
@media (max-width: 1100px) { .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 580px) { .planos { grid-template-columns: 1fr; } }
.modulos { margin-top: 56px; } .modulos h3 { font-size: 22px; letter-spacing: -0.02em; } .modulos > p { color: var(--tinta-2); margin-top: 6px; max-width: 70ch; }
.mods { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mod { background: var(--cartao); border: 1px dashed var(--linha-2); border-radius: var(--raio); padding: 20px; display: flex; flex-direction: column; gap: 6px; } .mod b { font-size: 15px; font-weight: 600; } .mod .p { font: 600 20px var(--sans); letter-spacing: -0.02em; margin-top: 4px; } .mod .p small { font: 500 12px var(--sans); color: var(--tinta-3); } .mod p { font-size: 13.5px; color: var(--tinta-2); }
.mod .breve { align-self: flex-start; font: 600 10.5px var(--mono); color: var(--ouro); background: var(--ouro-fundo); border-radius: 999px; padding: 3px 9px; margin-top: auto; }
@media (max-width: 1000px) { .mods { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mods { grid-template-columns: 1fr; } }

/* dúvidas */
.duvidas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 56px; } @media (max-width: 860px) { .duvidas { grid-template-columns: 1fr; gap: 28px; } }
details { border-bottom: 1px solid var(--linha); padding: 4px 0; } details summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; } details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font: 400 24px var(--sans); color: var(--tinta-3); line-height: 1; transition: transform .2s; } details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 18px; color: var(--tinta-2); max-width: 64ch; } details a { color: var(--acento); }

/* cadastro */
.cad { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } @media (max-width: 920px) { .cad { grid-template-columns: 1fr; gap: 32px; } }
.cad .txt h2 { margin: 14px 0 16px; } .cad .txt > p { color: var(--tinta-2); font-size: 17px; }
.passos { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 14px; } .passos li { counter-increment: p; display: flex; gap: 14px; align-items: center; color: var(--tinta-2); } .passos li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; background: var(--acento-fundo); color: var(--acento); display: grid; place-items: center; font: 600 13px var(--mono); flex: none; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; padding: 28px; box-shadow: var(--sombra); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .campos label.cheia { grid-column: 1 / -1; } @media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--tinta-2); }
input, select { font: 16px var(--sans); color: var(--tinta); background: #fff; border: 1px solid var(--linha-2); border-radius: 10px; padding: 11px 13px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aceite { flex-direction: row; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 13.5px; font-weight: 400; } .aceite input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--acento); } .aceite a { color: var(--acento); }
.erro { color: var(--urgente); font-size: 14px; min-height: 22px; margin: 12px 0 6px; }
.cartao .btn { width: 100%; } .cartao h3 { font-size: 22px; margin-bottom: 8px; } .cartao > form > p, .cartao #fim p { color: var(--tinta-2); }
.cartao #fim .btn { margin-top: 18px; }

/* final e rodapé */
.final { background: linear-gradient(#fff, #EAF0FD); padding: 88px 0; text-align: center; border-top: 1px solid var(--linha); } .final p { color: var(--tinta-2); font-size: 18px; margin: 14px auto 28px; max-width: 54ch; }
.rodape { border-top: 1px solid var(--linha); padding: 30px 0; background: #fff; font-size: 14px; color: var(--tinta-3); } .rodape .faixa { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .rodape nav { display: flex; gap: 22px; flex-wrap: wrap; } .rodape nav a { text-decoration: none; } .rodape nav a:hover { color: var(--tinta); }

/* páginas de texto (termos, privacidade, segurança, entrar, 404) */
.texto { padding-top: 48px; padding-bottom: 72px; } .texto h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; } .texto h2 { font-size: 22px; margin: 34px 0 10px; letter-spacing: -0.02em; } .texto p, .texto li { color: var(--tinta-2); max-width: 72ch; } .texto p + p { margin-top: 12px; } .texto ul { padding-left: 20px; } .texto a { color: var(--acento); }
.texto form.cartao label + label { margin-top: 14px; }

/* movimento: o Motion anima; sem JS ou com "menos movimento", tudo já aparece */
.js .anima { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .anima { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } .agente:hover, .recurso:hover { transform: none; } }
@media print { .topo { position: static; } .js .anima { opacity: 1 !important; transform: none !important; } }

@media (max-width: 560px) { .topo .faixa { height: 60px; } .topo .lnk { display: none; } .topo .btn { padding: 9px 14px; font-size: 14px; } .marca { font-size: 16px; } }

/* Hector: cartão azul-marinho com detalhe dourado */
.hector { display: grid; justify-items: center; gap: 10px; padding: 44px 24px 40px; border-radius: 22px; background: radial-gradient(ellipse at 50% 30%, #12274A 0%, #0B1A33 60%, #070F1F 100%); color: #EDEFF5; box-shadow: 0 30px 60px -34px rgba(11, 26, 51, .6); }
.h-orbe { position: relative; width: 120px; height: 120px; margin-bottom: 6px; }
.h-orbe i { position: absolute; inset: 0; border-radius: 50%; }
.h-orbe i:nth-child(1) { background: radial-gradient(circle at 36% 32%, #7F9BD0 0%, #1F3A6E 48%, #0B1A33 100%); box-shadow: inset 0 0 0 2px rgba(201, 162, 75, .7); }
.h-orbe i:nth-child(2) { inset: -14px; border: 1.5px solid rgba(201, 162, 75, .5); }
.h-orbe i:nth-child(3) { inset: -28px; border: 1px solid rgba(201, 162, 75, .25); }
.h-estado { margin: 0; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(201, 162, 75, .95); }
.h-ouvido { margin: 0; min-height: 1.5em; font-style: italic; color: rgba(237, 239, 245, .7); text-align: center; max-width: 60ch; }
.h-fala { margin: 0; min-height: 4.4em; max-width: 54ch; text-align: center; font: 400 clamp(18px, 2.2vw, 22px)/1.5 Georgia, "Times New Roman", serif; }