/* Visual da marca Transitou: grafite e branco com azul de destaque, tipografia Sora, vidro fosco discreto. Só tokens nos componentes. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fontes/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fontes/sora-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;
  --fundo: #f5f6f8;
  --tinta: #0e0f12;
  --tinta-suave: #5a5f6b;
  --marca: #2f5bff;
  --marca-forte: #1f45d6;
  --sobre-marca: #ffffff;
  --marca-veu: rgba(47, 91, 255, 0.08);
  --acento: #1f8a5b;
  --perigo: #c2362f;
  --vidro: rgba(255, 255, 255, 0.62);
  --vidro-forte: rgba(255, 255, 255, 0.88);
  --borda: rgba(47, 91, 255, 0.18);
  --linha: rgba(14, 15, 18, 0.1);
  --luz-1: rgba(47, 91, 255, 0.12);
  --luz-2: rgba(91, 140, 255, 0.1);
  --luz-3: rgba(14, 15, 18, 0.05);
  --sombra: 0 1px 2px rgba(14, 15, 18, 0.05), 0 14px 40px rgba(14, 15, 18, 0.06);
  --sombra-forte: 0 1px 2px rgba(14, 15, 18, 0.06), 0 22px 60px rgba(14, 15, 18, 0.12);
  --desfoque: 14px;
  --raio: 14px;
  --raio-p: 8px;
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 52px;
  --e8: 88px;
  --t-mini: 0.8125rem;
  --t-p: 0.9375rem;
  --t-n: 1.0625rem;
  --t-g: 1.4rem;
  --t-h2: clamp(1.6rem, 2.8vw, 2.25rem);
  --t-h1: clamp(2.1rem, 5vw, 3.6rem);
  --largura: 1080px;
  --lateral: 250px;
  --titulo: 'Sora', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --fonte: 'Sora', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --logo: url('/img/logo-claro.svg');
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e0f12;
    --tinta: #f5f6f8;
    --tinta-suave: #a3a8b4;
    --marca: #5b8cff;
    --marca-forte: #8aacff;
    --sobre-marca: #0e0f12;
    --marca-veu: rgba(91, 140, 255, 0.12);
    --acento: #5fd39b;
    --perigo: #ff8a80;
    --vidro: rgba(245, 246, 248, 0.04);
    --vidro-forte: rgba(245, 246, 248, 0.075);
    --borda: rgba(91, 140, 255, 0.22);
    --linha: rgba(245, 246, 248, 0.1);
    --luz-1: rgba(47, 91, 255, 0.2);
    --luz-2: rgba(91, 140, 255, 0.12);
    --luz-3: rgba(245, 246, 248, 0.03);
    --sombra: 0 14px 40px rgba(0, 0, 0, 0.35);
    --sombra-forte: 0 22px 60px rgba(0, 0, 0, 0.5);
    --logo: url('/img/logo-escuro.svg');
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-size: var(--t-n);
  font-weight: 400;
  line-height: 1.65;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(70vw 55vh at 0% 0%, var(--luz-1), transparent 65%),
    radial-gradient(55vw 50vh at 100% 15%, var(--luz-2), transparent 65%),
    radial-gradient(65vw 60vh at 55% 105%, var(--luz-3), transparent 65%),
    var(--fundo);
  background-attachment: fixed;
}
h1, h2, h3 { font-variant-numeric: lining-nums; font-family: var(--titulo); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 700; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-g); line-height: 1.2; }
h1 em, h2 em { font-style: normal; color: var(--marca); }
p { margin: 0; }
strong { font-weight: 500; }
a { color: var(--marca-forte); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: var(--e1); }
.suave { color: var(--tinta-suave); font-weight: 400; }
.pequeno { font-size: var(--t-p); }
.centro { text-align: center; }
.oculto { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Painel de vidro fosco */
.vidro {
  background: var(--vidro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  backdrop-filter: blur(var(--desfoque));
  -webkit-backdrop-filter: blur(var(--desfoque));
  padding: var(--e5);
}
.vidro.forte { background: var(--vidro-forte); box-shadow: var(--sombra-forte); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 46px; padding: 0 var(--e5);
  border-radius: var(--raio-p); border: 1px solid var(--marca);
  font: inherit; font-size: var(--t-p); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  background: var(--marca); color: var(--sobre-marca);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.botao:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.botao.fantasma { background: transparent; color: var(--tinta); border-color: var(--linha); }
.botao.fantasma:hover { background: var(--marca-veu); border-color: var(--marca); color: var(--marca-forte); }
.botao.cheio { width: 100%; }
.botao[disabled] { opacity: 0.6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } }

.selo {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e3); border-radius: 999px;
  font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--borda); color: var(--marca-forte);
}
.selo.alerta { color: var(--acento); border-color: var(--acento); }
.selo.erro { color: var(--perigo); border-color: var(--perigo); }
.selo.neutro { color: var(--tinta-suave); border-color: var(--linha); }

.campo { display: grid; gap: var(--e2); }
.campo label { font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.campo input {
  width: 100%; min-height: 48px; padding: 0 var(--e4);
  font: inherit; font-weight: 400; color: var(--tinta);
  background: var(--vidro-forte); border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.campo input:focus { border-color: var(--marca); }
.aviso { padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--marca-veu); border: 1px solid var(--borda); font-weight: 400; }
.aviso.erro { color: var(--perigo); }

.pilha { display: grid; gap: var(--e4); }
.pilha.larga { gap: var(--e6); }
.pilha > .selo, .pilha > .botao { justify-self: start; }
.pilha.centro > * { justify-self: center; }
.linha { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.entre { justify-content: space-between; }
.grade { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade.contadores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Site de venda */
.topo { position: sticky; top: var(--e3); z-index: 5; margin: var(--e3) auto 0; width: min(var(--largura), calc(100% - 2 * var(--e4))); padding: var(--e3) var(--e5); }
.topo nav { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.topo .links { display: flex; gap: var(--e6); }
.topo .links a { color: var(--tinta-suave); text-decoration: none; font-weight: 400; font-size: var(--t-mini); letter-spacing: 0.14em; text-transform: uppercase; }
.topo .links a:hover { color: var(--marca-forte); }
.marca { display: inline-block; width: 158px; height: 24px; background: var(--logo) no-repeat left center / contain; color: transparent; font-size: 0; line-height: 0; overflow: hidden; text-decoration: none; flex-shrink: 0; }
.marca i { display: none; }
.secao { width: min(var(--largura), calc(100% - 2 * var(--e4))); margin: 0 auto; padding: var(--e8) 0 0; }
.heroi { padding-top: var(--e8); display: grid; gap: var(--e7); grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.heroi p.chamada { font-size: 1.2rem; max-width: 50ch; }
.conversa { display: grid; gap: var(--e3); }
.fala { padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--vidro-forte); border: 1px solid var(--linha); max-width: 92%; font-size: var(--t-p); font-weight: 400; }
.fala.voce { justify-self: end; background: var(--marca-veu); border-color: var(--borda); }
.fala strong { display: block; font-size: var(--t-mini); letter-spacing: 0.14em; text-transform: uppercase; color: var(--marca-forte); }
.passo b { display: block; font-family: var(--titulo); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--marca); margin-bottom: var(--e3); }
.plano { display: grid; gap: var(--e4); align-content: start; }
.plano > .linha { min-height: var(--e6); }
.plano.destaque { border-color: var(--marca); box-shadow: var(--sombra-forte); }
.plano .preco { font-family: var(--fonte); font-size: var(--t-h2); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.plano ul, .lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.plano li, .lista li { padding-left: var(--e4); position: relative; }
.plano li::before, .lista li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--marca); }
details { border-bottom: 1px solid var(--linha); padding: var(--e4) 0; }
details summary { cursor: pointer; font-family: var(--titulo); font-size: 1.1rem; font-weight: 600; }
details p { margin-top: var(--e3); color: var(--tinta-suave); font-weight: 400; }
.rodape { width: min(var(--largura), calc(100% - 2 * var(--e4))); margin: var(--e8) auto var(--e6); padding-top: var(--e5); border-top: 1px solid var(--linha); }

/* Entrar e criar conta */
.portao { min-height: 100vh; display: grid; place-items: center; padding: var(--e5) var(--e4); }
.portao .vidro { width: min(420px, 100%); padding: var(--e6); }

/* Área logada */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--e5) var(--e4); display: flex; flex-direction: column; gap: var(--e5); border-radius: 0; border-width: 0 1px 0 0; box-shadow: none; }
.lateral .cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.lateral .cabeca .marca { width: 132px; height: 20px; }
.botao.sair { padding: var(--e1) var(--e3); font-size: var(--t-mini); min-height: 32px; }
.lateral nav { display: grid; gap: 2px; }
.lateral nav a { padding: var(--e2) var(--e3); font-size: var(--t-p); border-radius: var(--raio-p); color: var(--tinta-suave); text-decoration: none; font-weight: 400; }
.lateral nav a[aria-current='page'] { background: var(--marca-veu); color: var(--marca-forte); }
.lateral nav a:hover { color: var(--marca-forte); }
.lateral .pe { margin-top: auto; display: grid; gap: var(--e3); }
.conteudo { padding: var(--e7) var(--e6) var(--e8); width: min(960px, 100%); }
.conteudo h1 { font-size: var(--t-h2); }
.contador .numero { font-family: var(--fonte); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--marca); }
.item-calculo { display: grid; gap: var(--e3); }
.item-calculo h3 { overflow-wrap: anywhere; font-family: var(--fonte); font-size: var(--t-n); font-weight: 500; letter-spacing: 0.02em; }
.codigo { font-family: var(--mono); font-size: 0.875rem; padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--vidro-forte); border: 1px solid var(--linha); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.barra { height: 3px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.esqueleto { min-height: 96px; opacity: 0.5; }
.barra[data-p='0'] span { width: 0; } .barra[data-p='10'] span { width: 10%; } .barra[data-p='20'] span { width: 20%; }
.barra[data-p='30'] span { width: 30%; } .barra[data-p='40'] span { width: 40%; } .barra[data-p='50'] span { width: 50%; }
.barra[data-p='60'] span { width: 60%; } .barra[data-p='70'] span { width: 70%; } .barra[data-p='80'] span { width: 80%; }
.barra[data-p='90'] span { width: 90%; } .barra[data-p='100'] span { width: 100%; }

@media (max-width: 860px) {
  .heroi { grid-template-columns: 1fr; padding-top: var(--e7); }
  .topo { padding: var(--e3) var(--e4); }
  .topo .links { display: none; }
  .app { grid-template-columns: 1fr; }
  .lateral .cabeca { width: 100%; }
  .lateral .cabeca .marca { width: 150px; height: 23px; }
  .lateral { position: static; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-width: 0 0 1px 0; padding: var(--e3) var(--e4); gap: var(--e3); }
  .lateral nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; }
  .lateral nav a { padding: var(--e2) var(--e3); font-size: var(--t-p); }
  .lateral .pe { display: none; }
  .lateral .pe .cota { display: none; }
  .conteudo { padding: var(--e5) var(--e4) var(--e7); }
}

/* Detalhe, perfil, suporte e administração */
.campo textarea, .campo select {
  width: 100%; min-height: 48px; padding: var(--e3) var(--e4);
  font: inherit; font-weight: 400; color: var(--tinta);
  background: var(--vidro-forte); border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.campo textarea { min-height: 140px; resize: vertical; }
.definicoes { margin: 0; display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--e2) var(--e5); }
.definicoes dt { font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); padding-top: var(--e1); }
.definicoes dd { margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-p); font-weight: 400; }
.tabela th { text-align: left; font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha); }
.tabela td { padding: var(--e3); border-bottom: 1px solid var(--linha); vertical-align: middle; overflow-wrap: anywhere; }
.rolavel { overflow-x: auto; }
.tabela select { min-height: 36px; padding: 0 var(--e2); font: inherit; color: var(--tinta); background: var(--vidro-forte); border: 1px solid var(--linha); border-radius: var(--raio-p); }
.conversa .fala { max-width: 80%; white-space: pre-wrap; }
.texto-longo { width: min(720px, calc(100% - 2 * var(--e4))); margin: 0 auto; padding: var(--e8) 0; }
.texto-longo h2 { font-size: var(--t-g); margin-top: var(--e5); }
.texto-longo p, .texto-longo li { font-weight: 400; }
@media (max-width: 860px) { .definicoes { grid-template-columns: 1fr; gap: 0; } .definicoes dd { margin-bottom: var(--e3); } }

/* Assistente */
.chat { display: grid; gap: var(--e3); }
.chat .fala { max-width: 86%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-n); }
.chat .fala.voce { justify-self: end; }
.corpo-email { white-space: pre-wrap; overflow-wrap: anywhere; }
.item-email { text-decoration: none; color: inherit; gap: var(--e1); }
.escolhas:empty { display: none; }
.escolhas .pergunta { flex-basis: 100%; margin: 0; }
.escolhas form input[type=date] { width: auto; }
.escolhas .botao { font-size: var(--t-p); }
.andamento { font-size: var(--t-p); color: var(--tinta-suave); min-height: 1.6em; }
.envio { display: grid; grid-template-columns: 1fr auto; gap: var(--e3); align-items: end; position: sticky; bottom: var(--e3); }
.envio textarea { min-height: 56px; max-height: 220px; }
.solta { border: 1px dashed var(--marca); border-radius: var(--raio); padding: var(--e6) var(--e5); text-align: center; background: var(--marca-veu); }
.solta input[type='file'] { font: inherit; max-width: 100%; }