/* =============================================================================
   Ativa Maps · estilo das paginas de conta
   (entrar, criar conta, recuperar senha, redefinir senha, minha conta)

   Mesmos tokens do catalogo, de proposito: quem entra por aqui cai no catalogo
   logo em seguida e as duas telas precisam parecer o mesmo produto. A casca e
   neutra; a cor vem do mascote, como nos cartoes do catalogo ela vem da
   ilustracao da materia.

   Dois layouts de corpo:
     body.solo  cartao unico centralizado na tela (entrar, cadastro, senha)
     body.page  coluna de secoes com barra no topo (minha conta)
   ============================================================================= */

/* ---------------- tokens: claro (padrao) ---------------- */
:root{
  --bg:#F6F6F4;
  --surface:#FFFFFF;
  --surface-2:#F1F0ED;
  --surface-hover:#FBFBFA;
  --border:#E4E2DE;
  --border-strong:#D6D3CD;
  --text:#1B1917;
  --text-muted:#6E6862;
  --text-faint:#9A938B;
  --accent:#C2410C;
  --accent-hover:#9A3412;
  --accent-soft:#FDF0E7;
  --accent-ring:rgba(194,65,12,.20);
  --danger:#B91C1C;
  --danger-soft:#FDECEC;
  --ok:#15803D;
  --ok-soft:#E9F6EE;

  --shadow-sm:0 1px 2px rgba(28,25,23,.05), 0 1px 3px rgba(28,25,23,.04);
  --shadow-md:0 2px 4px rgba(28,25,23,.04), 0 8px 20px rgba(28,25,23,.07);
  --shadow-lg:0 4px 8px rgba(28,25,23,.05), 0 16px 36px rgba(28,25,23,.11);

  --r-sm:8px; --r-md:12px; --r-lg:16px;
}
/* escuro automatico (nao sobrescreve quem escolheu claro na mao) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E10; --surface:#17171A; --surface-2:#202024; --surface-hover:#1D1D21;
    --border:#2A2A30; --border-strong:#3A3A42;
    --text:#ECECEE; --text-muted:#A0A0A8; --text-faint:#76767E;
    --accent:#FB923C; --accent-hover:#FDBA74;
    --accent-soft:rgba(251,146,60,.13); --accent-ring:rgba(251,146,60,.30);
    --danger:#F87171; --danger-soft:rgba(248,113,113,.14);
    --ok:#4ADE80; --ok-soft:rgba(74,222,128,.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 2px 6px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.32);
    --shadow-lg:0 6px 14px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.42);
  }
}
/* escolha manual sempre vence */
:root[data-theme="dark"]{
  --bg:#0E0E10; --surface:#17171A; --surface-2:#202024; --surface-hover:#1D1D21;
  --border:#2A2A30; --border-strong:#3A3A42;
  --text:#ECECEE; --text-muted:#A0A0A8; --text-faint:#76767E;
  --accent:#FB923C; --accent-hover:#FDBA74;
  --accent-soft:rgba(251,146,60,.13); --accent-ring:rgba(251,146,60,.30);
  --danger:#F87171; --danger-soft:rgba(248,113,113,.14);
  --ok:#4ADE80; --ok-soft:rgba(74,222,128,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.32);
  --shadow-lg:0 6px 14px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.42);
}

/* rótulo que só o leitor de tela enxerga: quando o placeholder já faz a
   pergunta visualmente (Concursos de interesse), o <label> continua exigido
   pra quem usa lupa de tela ou navega por Tab, só não pode ocupar espaço. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* scrollbar-gutter reserva o espaco da barra de rolagem antes de precisar
   dela - mesmo ajuste do app/index.html (ago/2026). Sem isto, a tela de
   login (ou a de "Carregando" por cima dela) desloca alguns pixels quando a
   barra aparece/some entre o login e a troca de pagina. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:'cv11' 1,'ss01' 1;
  background:var(--bg);color:var(--text);line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;position:relative;overflow-x:hidden;
}
::selection{background:var(--accent-ring);color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}

/* ---------------- corpo: cartao unico centralizado ---------------- */
body.solo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
}
/* luz quente vindo de cima: da profundidade ao fundo sem desenhar nada nele */
body.solo::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(680px 380px at 50% -6%, var(--accent-soft), transparent 70%);
}
body.solo main{position:relative;z-index:1;width:100%;max-width:404px}

/* ---------------- corpo: pagina com barra no topo ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:0 24px;height:60px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
/* `text-align:center` centra o titulo sobre o subtitulo, que e a linha mais
   larga das duas. Nao e capricho: e o que o catalogo faz, e la sai de graca
   porque a marca e um <button>, que ja vem centrado pelo navegador (ver
   .brand em catalog/catalog.css - e repare que os outros botoes de la pedem
   text-align:left explicito, entao deixar este centrado foi escolha). Aqui a
   marca e um <a>, que vem alinhado a esquerda, e sem esta linha o titulo
   encosta na esquerda enquanto o do catalogo fica centrado. */
.topbar .brandlink{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  padding:6px 8px;margin-left:-8px;border-radius:var(--r-md);
  text-align:center;
  transition:background-color .15s ease;
}
.topbar .brandlink:hover{background:var(--surface-2);text-decoration:none}
.topbar .brandlink:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.topbar .brandlink .bmark{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  background:#FFF0E0;border:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
}
/* aqui vive o CEREBRO com nos (viewBox 28x18, bem mais largo que alto):
   height:auto para nao achatar, e 21px para bater com o catalogo e com o
   .homelink do motor - ver a nota em catalog/catalog.css */
.topbar .brandlink .bmark svg,
.topbar .brandlink .bmark img{width:21px;height:auto;display:block}
/* `display:block` nao e decoracao: sem ele o <b> continua inline e o line-height
   de 1.1 daqui nao manda na altura da linha - quem manda e o strut do <span>,
   que herda o line-height:1.5 do body (24px em vez de 17px). A linha da marca
   ficava ~7px mais alta que a do catalogo, jogando o titulo pra cima e o
   subtitulo pra baixo em relacao ao mascote. No catalogo isso nao acontece
   porque la o titulo e um <h1> (bloco por natureza) - ver .brand h1 em
   catalog/catalog.css. */
.topbar .brandlink b{
  display:block;
  font-size:15.5px;font-weight:640;letter-spacing:-.015em;line-height:1.1;
}
.topbar .brandlink small{
  display:block;font-size:10.5px;font-weight:500;letter-spacing:.04em;
  color:var(--text-faint);text-transform:uppercase;margin-top:1px;
}
.topbar .back{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:550;color:var(--text);text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:6px 12px;
  transition:background-color .15s ease, border-color .15s ease;
}
.topbar .back:hover{background:var(--surface-hover);border-color:var(--border-strong);text-decoration:none}
.topbar .back:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.topbar .back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

body.page .wrap{max-width:560px;margin:0 auto;padding:30px 24px 64px}
body.page h1.pagetit{font-size:24px;font-weight:680;letter-spacing:-.025em;margin-bottom:4px}
body.page p.pagesub{font-size:13.5px;color:var(--text-muted);margin-bottom:26px}
body.page .card{margin-bottom:16px}
body.page .card h2{
  font-size:15px;font-weight:620;letter-spacing:-.012em;margin-bottom:3px;
}
body.page .card .cardsub{font-size:14px;color:var(--text-muted);margin-bottom:18px}

/* rótulo de grupo (Perfil, Segurança) acima de um ou mais cartões - substitui
   o h2 que cada cartão tinha antes; a página se lê como duas seções, não uma
   lista de cartões soltos. */
.sectiontit{
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-faint);margin:28px 0 10px;
}
.sectiontit:first-of-type{margin-top:22px}

/* laranja suave pra Senha, vermelho suave pro cartão de exclusão. Os tokens
   -soft já são recalculados por tema, então não precisa de regra extra pro
   escuro. */
.card.tint-orange{background:var(--accent-soft);border-color:var(--accent-soft)}
.card.tint-red{background:var(--danger-soft);border-color:var(--danger-soft)}

/* ---------------- documento legal (termos, privacidade) ----------------
   Mesma casca das outras paginas de conta; so o miolo e prosa longa, entao
   ganha medida de linha mais curta e hierarquia de titulo propria. */
body.doc .wrap{max-width:720px}
body.doc .card{padding:34px 34px 30px}
body.doc .card h1{font-size:24px;font-weight:680;letter-spacing:-.025em;line-height:1.25}
body.doc .updated{font-size:12.5px;color:var(--text-faint);margin-top:6px;margin-bottom:26px}
body.doc .card h2{
  font-size:15px;font-weight:620;letter-spacing:-.012em;color:var(--text);
  margin:30px 0 10px;padding-top:18px;border-top:1px solid var(--border);
}
body.doc .card h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
body.doc .card p,
body.doc .card li{font-size:14px;color:var(--text-muted);line-height:1.68;margin-bottom:11px}
body.doc .card strong{color:var(--text);font-weight:600}
body.doc .card ul{padding-left:20px;margin-bottom:12px}
body.doc .card li{margin-bottom:6px}
body.doc .card li::marker{color:var(--text-faint)}
body.doc .tablewrap{overflow-x:auto;margin:12px 0 20px}
body.doc table{
  width:100%;border-collapse:collapse;font-size:13px;min-width:460px;
}
body.doc th,body.doc td{
  text-align:left;padding:10px 12px;vertical-align:top;
  border-bottom:1px solid var(--border);color:var(--text-muted);line-height:1.55;
}
body.doc th{
  color:var(--text);font-weight:600;background:var(--surface-2);
  font-size:12px;letter-spacing:.01em;
}
body.doc tr:last-child td{border-bottom:none}

/* ---------------- botao de tema (mesmo do catalogo) ---------------- */
.themebtn{
  width:44px;height:44px;border-radius:var(--r-md);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;color:var(--text-muted);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.solo .themebtn{position:fixed;top:16px;right:16px;z-index:10}
.themebtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.themebtn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.themebtn .i-sun{display:none}
.themebtn .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .i-sun{display:block}
  :root:not([data-theme="light"]) .themebtn .i-moon{display:none}
}
:root[data-theme="dark"] .themebtn .i-sun{display:block}
:root[data-theme="dark"] .themebtn .i-moon{display:none}
:root[data-theme="light"] .themebtn .i-sun{display:none}
:root[data-theme="light"] .themebtn .i-moon{display:block}

/* ---------------- cartao ---------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:34px 34px 30px;
}
body.page .card{box-shadow:var(--shadow-sm);padding:22px 22px 24px}

/* marca: mesmo par chip pastel + ilustracao dos cartoes do catalogo */
/* Sem o chip pastel dos cartoes do catalogo: o creme do chip e o corpo do Otto
   sao quase a mesma cor, e o fundo acabava engolindo o desenho em vez de
   destaca-lo. Solto e maior, ele respira. */
.brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.brand .mark{display:flex;align-items:center;justify-content:center}
.brand .mark svg,
.brand .mark img{width:66px;height:auto;display:block}
.brand h1{
  font-size:20px;font-weight:660;letter-spacing:-.022em;line-height:1.2;
  color:var(--text);margin-top:15px;
}
.brand p{font-size:13.5px;color:var(--text-muted);margin-top:5px;max-width:31ch}

/* ---------------- avisos ---------------- */
.msg{
  display:none;gap:9px;align-items:flex-start;
  font-size:13px;line-height:1.5;border-radius:var(--r-md);
  padding:11px 13px;margin-top:22px;
}
.msg.show{display:flex}
.msg svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg.err{background:var(--danger-soft);color:var(--danger)}
/* sucesso nos tons da marca, nao no verde generico: e a mesma paleta do
   botao e dos links, entao o aviso pertence a pagina em vez de parecer
   colado de outro site */
.msg.ok{background:var(--accent-soft);color:var(--accent)}
:root[data-theme="dark"] .msg.ok{background:rgba(251,146,60,.14)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .msg.ok{background:rgba(251,146,60,.14)}
}
body.page .msg{margin-top:0;margin-bottom:16px}

/* ---------------- formulario ---------------- */
form{margin-top:26px}
body.page form{margin-top:0}
.field{margin-bottom:16px}
.field .lab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
label{font-size:14px;font-weight:550;color:var(--text)}
.lab a{font-size:12.5px;font-weight:500}
.inwrap{position:relative;display:flex;align-items:center}
input{
  width:100%;font-family:inherit;font-size:14.5px;font-weight:450;color:var(--text);
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-md);
  padding:11px 13px;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
input::placeholder{color:var(--text-faint);font-weight:450}
input:hover{background:var(--surface-hover);border-color:var(--border)}
input:focus{
  outline:none;background:var(--surface);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);
}
input:disabled{color:var(--text-faint);cursor:not-allowed}
input:disabled:hover{background:var(--surface-2);border-color:transparent}
input[type="password"]{padding-right:74px}
.peek{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-height:44px;display:flex;align-items:center;
  cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:550;color:var(--text-muted);
  background:none;border:none;padding:6px 8px;border-radius:var(--r-sm);
}
.peek:hover{color:var(--accent);background:var(--accent-soft)}
.peek:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hint{font-size:14px;color:var(--text-faint);margin-top:6px;line-height:1.5}

/* ---- aviso de senha ----
   Uma linha sob o campo, no laranja da marca: senha curta ou senha fraca.
   Fica oculta ate a pessoa sair do campo, para nao acusar "senha curta" na
   primeira letra digitada. */
.pwmsg{
  display:none;align-items:flex-start;gap:6px;
  margin-top:7px;font-size:14px;line-height:1.5;color:var(--accent);
}
.pwmsg.show{display:flex}
.pwmsg::before{
  content:'';flex:0 0 14px;width:14px;height:14px;margin-top:1px;
  background:no-repeat center/14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.2v.1'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .pwmsg::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FB923C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.2v.1'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pwmsg::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FB923C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16.2v.1'/%3E%3C/svg%3E");
  }
}

/* "Esqueci minha senha" abaixo do campo, alinhado a direita */
.underfield{margin-top:7px;text-align:right;font-size:12.5px}

/* acao oferecida logo abaixo de uma mensagem de erro, como o reenvio do
   link de confirmacao: e um botao de verdade, mas com cara de link */
.msgact{margin:-6px 0 16px}
.linkbtn{
  font-family:inherit;font-size:13px;font-weight:600;color:var(--accent);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
}
.linkbtn:hover{color:var(--accent-hover)}
.linkbtn:disabled{color:var(--text-faint);cursor:default;text-decoration:none}
.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* O atributo `hidden` tem de ganhar de qualquer `display` nosso.
   Sem isto, `.btn{display:flex}` (logo abaixo) vence a regra do navegador e o
   botao marcado como hidden continua na tela - foi o que aconteceu em
   /meu-plano ate 30/07/2026: "Encerrar a renovacao" aparecia para quem ja
   tinha cancelado e para quem nem assinatura tinha, e "Ver os planos"
   aparecia para quem estava com o plano ativo. A logica de mostrar/esconder
   existia e estava certa; era o CSS que a ignorava.

   Vale para a pagina inteira, e nao so para .btn, porque o mesmo vale para
   qualquer elemento que receba display de uma classe nossa. */
[hidden]{display:none !important}

.btn{
  width:100%;margin-top:8px;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:#fff;
  background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-md);
  padding:12px 16px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
/* Texto escuro no modo escuro só faz sentido no botão SÓLIDO (fundo --accent,
   laranja claro). As variantes com fundo próprio (.ghost escuro, .tinted,
   .solid-danger, .light-orange) definem a própria cor e ficam de fora daqui —
   sem o :not(), esta regra pintava o texto delas de quase-preto sobre fundo
   escuro, deixando "Redefinir senha" e "Excluir minha conta" ilegíveis. */
:root[data-theme="dark"] .btn:not(.ghost):not(.tinted):not(.solid-danger):not(.light-orange){color:#17130F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn:not(.ghost):not(.tinted):not(.solid-danger):not(.light-orange){color:#17130F} }
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-md)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.62;cursor:default;box-shadow:none}
.btn .spin{
  display:none;width:15px;height:15px;flex:0 0 15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:sp .7s linear infinite;
}
.btn.busy .spin{display:block}
@keyframes sp{to{transform:rotate(360deg)}}

/* botao secundario: sair da conta, acoes que nao sao a principal da tela */
.btn.ghost{
  background:var(--surface);border-color:var(--border);color:var(--text);
}
.btn.ghost:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger)}

/* laranja sólido com texto escuro no tema escuro: --accent é recalculado por
   tema, então fica visível em claro e escuro sem regra extra. */
.btn.tinted{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn.tinted{color:#17130F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.tinted{color:#17130F} }
.btn.tinted:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* vermelho sólido, sem borda: só a exclusão de conta usa isto - precisa
   destoar do laranja da marca (que aqui significaria "ação normal") sem
   cair no vermelho escuro de --danger, que é pensado pra texto/ghost, não
   pra preencher um botão inteiro. Cor fixa (não var(--danger)) porque o
   tom precisa ser o MESMO nos dois temas. */
.btn.solid-danger{background:#EF4444;border-color:transparent;color:#fff}
.btn.solid-danger:hover{background:#DC2626}

/* "Salvar dados" sem nada pra salvar: mesmo tom do cartão (--accent-soft),
   texto laranja - lido como "disponível, mas não há o que fazer ainda", em
   vez do cinza opaco de :disabled genérico. opacity:1 pisa por cima do
   `.btn:disabled{opacity:.62}` de propósito, senão a cor ficava lavada. */
.btn.light-orange{background:var(--accent-soft);border-color:transparent;color:var(--accent);box-shadow:none}
.btn.light-orange:disabled{opacity:1;cursor:not-allowed}

/* ...e quando HÁ o que salvar, vira laranja sólido (o mesmo do .tinted): a
   mudança de tom é o aviso de que existe alteração pendente. Fica de fora da
   regra geral de texto escuro (o :not(.light-orange) lá em cima), por isso a
   cor do tema escuro é declarada aqui. */
.btn.light-orange:not(:disabled){
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--shadow-sm);
}
:root[data-theme="dark"] .btn.light-orange:not(:disabled){color:#17130F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.light-orange:not(:disabled){color:#17130F} }
.btn.light-orange:not(:disabled):hover{background:var(--accent-hover);border-color:var(--accent-hover)}

.alt{
  margin-top:22px;padding-top:19px;border-top:1px solid var(--border);
  font-size:13.5px;color:var(--text-muted);text-align:center;
}
.alt a{font-weight:600}

/* Passo a passo numerado (usado em /obrigado, depois do pagamento).
   Os numeros sao desenhados pelo contador do CSS e nao pelo marcador padrao
   da <ol> porque precisam de circulo colorido - e continuam sendo uma lista
   ordenada de verdade no HTML, entao o leitor de tela anuncia "1 de 3". */
.passos{list-style:none;counter-reset:passo;margin:4px 0 0}
.passos li{
  counter-increment:passo;position:relative;
  padding:0 0 18px 40px;
}
.passos li::before{
  content:counter(passo);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.passos li b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.passos li span{display:block;font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* Enquanto a sessao nao foi verificada, o miolo fica invisivel (mas ja ocupa o
   espaco: `visibility`, nao `display`, para a pagina nao "pular" ao aparecer).
   Sem isto, quem abre /meu-plano sem sessao valida via a tela montada por um
   instante antes de ser mandado ao login. */
body.page.booting .wrap{visibility:hidden}

/* ---------------- menu do icone da conta ----------------
   Mesmo menu do topo do catalogo, para a pessoa aprender UM caminho so: o
   icone de gente leva a Meu plano, Configuracoes e Sair, esteja ela onde
   estiver. O markup e montado por conta.js (ver o porque la); aqui fica so a
   aparencia. A pagina atual e marcada com aria-current="page" - o CSS se
   pendura nisso, e nao numa classe, para o estado visual e o anunciado pelo
   leitor de tela nunca divergirem.

   Existia antes uma faixa de abas abaixo do titulo, que fazia a mesma
   navegacao: eram dois caminhos para o mesmo lugar, e a faixa ainda empurrava
   o conteudo da pagina para baixo. */
.acctwrap{position:relative;flex:0 0 auto}
.acctmenu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  width:min(216px, calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:6px;
}
.acctmenu[hidden]{display:none}
.acctmenu .am-head{
  padding:9px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:5px;
}
.acctmenu .am-nome{
  display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acctmenu .am-mail{
  display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acctmenu .am-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;font:inherit;font-size:13px;
  font-weight:500;color:var(--text);text-decoration:none;
  padding:9px 10px;border-radius:var(--r-md);
  transition:background-color .12s ease, color .12s ease;
}
.acctmenu .am-item:hover{background:var(--surface-2);text-decoration:none}
.acctmenu .am-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.acctmenu .am-item[aria-current="page"]{color:var(--accent);font-weight:600}
.acctmenu .am-item svg{
  width:16px;height:16px;flex:0 0 16px;color:var(--text-muted);
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.acctmenu .am-item:hover svg{color:var(--text)}
.acctmenu .am-item[aria-current="page"] svg{color:var(--accent)}
/* Sair separado por uma linha: e o unico item destrutivo, e o unico que nao
   leva a uma pagina. */
.acctmenu .am-sep{height:1px;background:var(--border);margin:5px 0}
.acctmenu .am-item.danger{color:var(--danger)}
.acctmenu .am-item.danger svg{color:var(--danger)}
.acctmenu .am-item.danger:hover{background:var(--danger-soft)}

/* ---------------- campos lado a lado ----------------
   CEP + cidade + estado, numero + complemento: campos curtos que, sozinhos
   numa linha cada, faziam o cadastro parecer o dobro do que e. `auto-fit` com
   minimo em ch deixa a quebra acontecer sozinha no telefone, sem media query.
   Os modificadores existem para os casos em que a largura natural do dado
   e muito diferente da do vizinho (numero e bem mais curto que complemento). */
.row{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.row.r-cep{grid-template-columns:minmax(120px,.55fr) minmax(150px,1fr)}
.row.r-num{grid-template-columns:minmax(90px,.45fr) minmax(150px,1fr)}
.row.r-cidade{grid-template-columns:minmax(150px,1fr) minmax(90px,.4fr)}
@media (max-width:440px){
  .row,.row.r-cep,.row.r-num,.row.r-cidade{grid-template-columns:1fr}
}

/* rotulo do que nao e obrigatorio: sem isso, um cadastro com dez campos
   parece dez exigencias, e a pessoa abandona no meio */
.lab .opt{font-size:11.5px;font-weight:500;color:var(--text-faint)}

/* divisao dentro de um cartao que ficou longo (Endereco, Concursos). Nao vira
   cartao proprio porque e o MESMO formulario, com um botao Salvar so: quebrar
   em tres cartoes daria a impressao de tres gravacoes independentes. */
.subtit{
  font-size:13px;font-weight:620;letter-spacing:-.008em;color:var(--text);
  margin:24px 0 14px;padding-top:18px;border-top:1px solid var(--border);
}
textarea.curta{min-height:76px}

/* ---------------- campos longos (contato) ----------------
   Herdam a aparencia de `input` porque sao o mesmo objeto para quem preenche;
   o que muda e so a altura e o redimensionamento. */
textarea,select{
  width:100%;font-family:inherit;font-size:14.5px;font-weight:450;color:var(--text);
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-md);
  padding:11px 13px;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:150px;line-height:1.6;resize:vertical;display:block}
textarea::placeholder{color:var(--text-faint);font-weight:450}
textarea:hover,select:hover{background:var(--surface-hover);border-color:var(--border)}
textarea:focus,select:focus{
  outline:none;background:var(--surface);
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);
}
select{cursor:pointer;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8178' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
/* contador de caracteres da mensagem */
.count{font-size:11.5px;color:var(--text-faint);font-weight:500;font-variant-numeric:tabular-nums}
.count.near{color:var(--danger)}

/* ---------------- escolha de plano ----------------
   Cartoes clicaveis em vez de <select>: sao poucas opcoes e a diferenca entre
   elas (preco por mes, economia, periodo) e o que decide a compra - num
   select isso ficaria escondido atras de um clique. */
.planos{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.plano{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 15px;background:var(--surface-2);
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.plano:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.plano input{position:absolute;opacity:0;pointer-events:none}
/* o :has segue o radio marcado; navegador antigo so perde o destaque, e o
   proprio radio continua dizendo qual esta escolhido */
.plano:has(input:checked){
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-ring);
}
.plano:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.plano .p-nome{display:block;font-size:13px;font-weight:620;color:var(--text)}
.plano .p-preco{display:block;font-size:20px;font-weight:680;letter-spacing:-.02em;margin-top:5px}
.plano .p-preco small{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.plano .p-nota{display:block;font-size:11.5px;color:var(--text-muted);margin-top:4px}
.plano .p-selo{
  display:inline-block;margin-top:8px;font-size:10.5px;font-weight:650;
  letter-spacing:.03em;text-transform:uppercase;
  background:var(--accent);color:#FFF;padding:2px 7px;border-radius:999px;
}
:root[data-theme="dark"] .plano .p-selo{color:#17130F}

/* ---------------- assinaturas ---------------- */
.assinaturas{list-style:none;display:flex;flex-direction:column;gap:9px}
.assin{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:12px 14px;background:var(--surface-2);
}
.assin .a-nome{font-size:13.5px;font-weight:600;color:var(--text)}
.assin .a-per{font-size:12px;color:var(--text-muted);width:100%;margin-top:-4px}
.assin .a-val{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.selo{
  font-size:10.5px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--surface-hover);color:var(--text-muted);
}
.selo.ativa{background:var(--ok-soft);color:var(--ok)}
.selo.cancelada{background:var(--danger-soft);color:var(--danger)}

/* aceite de cobranca recorrente: caixa e texto alinhados pelo topo, porque o
   texto tem varias linhas e um checkbox centralizado nele flutuaria no meio */
.aceite{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.aceite input{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;accent-color:var(--accent);
}
.aceite span{font-size:12.5px;color:var(--text-muted);line-height:1.55}

/* ---------------- maquete ----------------
   Faixa listrada: um formulario de pagamento que PARECE pronto e nao esta
   ligado a nada e um convite a digitar cartao onde ele nao vai a lugar
   nenhum. O aviso e a listra existem para que ninguem - nem o time, nem um
   aluno numa demonstracao - confunda a maquete com a tela pronta. */
.maquete{
  border:1px dashed var(--border-strong);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:18px;
  background:repeating-linear-gradient(135deg,
    var(--surface-2), var(--surface-2) 10px,
    var(--surface-hover) 10px, var(--surface-hover) 20px);
  font-size:12.5px;color:var(--text-muted);line-height:1.55;
}
.maquete b{color:var(--text);font-weight:620}
/* campos da maquete: desligados, e visivelmente desligados */
.maquete-campos{opacity:.62;pointer-events:none;user-select:none}

/* ---------------- estado "ainda nao tem nada aqui" ----------------
   Usado pelo Meu plano enquanto o conteudo definitivo nao
   chega. E deliberadamente uma frase honesta, e nao um grafico de mentira:
   numero inventado numa tela de progresso vira reclamacao no suporte. */
.soonbox{text-align:center;padding:34px 18px 30px}
.soonbox svg{
  width:38px;height:38px;color:var(--text-faint);
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.soonbox h3{font-size:15px;font-weight:620;margin:12px 0 5px;letter-spacing:-.012em}
.soonbox p{font-size:13px;color:var(--text-muted);line-height:1.62;max-width:42ch;margin:0 auto}

/* ---------------- rodape (fora do cartao) ---------------- */
.foot{
  margin-top:20px;text-align:center;
  font-size:11.5px;color:var(--text-faint);line-height:1.8;
}
body.page .foot{margin-top:30px}
.foot a{color:var(--text-muted);font-weight:450}
.foot a:hover{color:var(--accent)}
.foot .sep{opacity:.5;margin:0 6px}

/* ---------------- responsivo ---------------- */
@media (max-width:440px){
  body.solo{padding:28px 16px;justify-content:flex-start;padding-top:8vh}
  .card{padding:28px 22px 26px}
  .brand .mark svg,
  .brand .mark img{width:58px}
  .topbar{padding:0 16px;gap:10px}
  .topbar .brandlink small{display:none}
  body.page .wrap{padding:22px 16px 48px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}