/* ==========================================================================
   AcessaRemoto — site (tema claro)
   Sem framework e sem dependência: a página carrega antes da paciência de
   quem chegou pelo Google.
   ========================================================================== */
:root {
  --bg:#ffffff;
  --bg-2:#f6f8fb;
  --bg-3:#eef2f7;
  --painel:#ffffff;
  --linha:#e3e8ef;
  --linha-forte:#cfd6e0;
  --fg:#0f172a;
  --fg-2:#475569;
  --fg-3:#7c8798;
  --acento:#2563eb;
  --acento-2:#1d4ed8;
  --acento-claro:#eff5ff;
  --ok:#16a34a;
  --alerta:#d97706;
  --raio:12px;
  --raio-g:18px;
  --sombra-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --sombra:0 4px 6px -2px rgba(15,23,42,.05), 0 12px 28px -8px rgba(15,23,42,.12);
  --sombra-lg:0 20px 50px -18px rgba(15,23,42,.28);
}

* { box-sizing:border-box; margin:0; padding:0; }

/**
 * O atributo hidden precisa vencer qualquer display de classe.
 *
 * A folha do navegador define [hidden] como display:none, mas uma regra de
 * classe com display:flex tem especificidade maior e anula o atributo — o
 * elemento fica "escondido" e continua ocupando espaço. Foi exatamente o que
 * aconteceu com o "Carregando sua conta…" do painel, que permanecia na tela
 * atrás do conteúdo já carregado.
 */
[hidden] { display:none !important; }

/**
 * A classe .hidden acompanha o atributo.
 *
 * Ela era usada em quatro lugares e NUNCA tinha sido definida nesta folha —
 * o que deixava o modal de assinatura sempre aberto, o aviso do painel sempre
 * visível e o campo "Nome" aparecendo no modo de login. Um seletor faltando
 * e três bugs visíveis.
 */
.hidden { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }

body {
  background:var(--bg);
  color:var(--fg);
  font-family:Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fundo suave no topo: dá profundidade sem imagem e sem peso. */
.fundo-luz {
  position:absolute; top:0; left:0; right:0; height:760px; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(37,99,235,.10), transparent 62%),
    radial-gradient(700px 380px at 10% 6%,  rgba(99,102,241,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

.faixa { width:100%; max-width:1140px; margin:0 auto; padding:0 24px; }
.faixa.estreita { max-width:780px; }
.centro { text-align:center; }

h1, h2, h3 { line-height:1.2; letter-spacing:-.022em; font-weight:680; color:var(--fg); }
h2 { font-size:clamp(27px, 3.6vw, 40px); }
h3 { font-size:17.5px; font-weight:620; }
p { color:var(--fg-2); }
.mini { font-size:13px; color:var(--fg-3); }
a { color:inherit; text-decoration:none; }
em { font-style:normal; color:var(--fg); font-weight:500; }

/* ---------------------------------------------------------------- botões */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--raio);
  font-weight:600; font-size:15px; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .14s cubic-bezier(.2,.8,.3,1), background .16s, box-shadow .16s, border-color .16s;
}
.btn svg { width:18px; height:18px; flex:none; transition:transform .16s; }
.btn:hover svg { transform:translateX(3px); }
.btn.sem-deslocar:hover svg { transform:translateY(2px); }

.btn-primario {
  background:var(--acento); color:#fff;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.55);
}
.btn-primario:hover { background:var(--acento-2); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(37,99,235,.55); }
.btn-primario:active { transform:translateY(0); }

.btn-vazado { background:#fff; border-color:var(--linha-forte); color:var(--fg); box-shadow:var(--sombra-sm); }
.btn-vazado:hover { border-color:var(--acento); color:var(--acento); transform:translateY(-2px); }

.btn-suave { background:var(--acento-claro); color:var(--acento); }
.btn-suave:hover { background:#e2edff; transform:translateY(-2px); }

.btn-grande { padding:15px 30px; font-size:16px; }
.btn-pequeno { padding:9px 16px; font-size:14px; }
.bloco { width:100%; }
.link-suave { color:var(--fg-2); font-size:14.5px; font-weight:500; }
.link-suave:hover { color:var(--acento); }

/* ------------------------------------------------------------------ topo */
.topo {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
.topo.rolou { border-bottom-color:var(--linha); box-shadow:0 1px 12px rgba(15,23,42,.05); }
.topo-linha { display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px; }
.marca { display:inline-flex; align-items:center; gap:9px; font-weight:680; font-size:17.5px; letter-spacing:-.02em; }
.marca svg { width:26px; height:26px; color:var(--acento); flex:none; }
.menu { display:flex; gap:26px; font-size:14.5px; }
.menu a { color:var(--fg-2); position:relative; padding:5px 0; font-weight:500; }
.menu a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  border-radius:2px; background:var(--acento);
  transition:right .22s cubic-bezier(.2,.8,.3,1);
}
.menu a:hover { color:var(--fg); }
.menu a:hover::after { right:0; }
.topo-acoes { display:flex; align-items:center; gap:12px; }
@media (max-width:940px) { .menu { display:none; } }
@media (max-width:560px) { .link-suave { display:none; } }

/* ------------------------------------------------- barra superior no celular
 *
 * Medido a 375px: marca 159 + seletor de idioma 84 + botão 109 = 352, mais os
 * dois intervalos de 24. Não cabe nos ~343 úteis, e o botão "Criar conta"
 * saía cortado pela borda direita.
 *
 * Em vez de esconder coisas, cada peça encolhe até caber: o seletor vira só a
 * bandeira (o nome do idioma já está na página), a marca perde alguns pontos
 * de tamanho, e os intervalos apertam. Assim ninguém perde acesso a nada —
 * esconder o seletor num site de nove idiomas seria esconder justamente o que
 * o visitante estrangeiro procura primeiro.
 *
 * A barra também baixa de 70 para 56: num celular, 70px de barra fixa comem
 * quase 9% da tela em toda rolagem.
 */
@media (max-width:560px) {
  .topo-linha { height:56px; gap:10px; }

  .marca { font-size:15.5px; gap:7px; }
  .marca svg { width:22px; height:22px; }

  /* Só a bandeira: a sigla e a seta somam 40px e não dizem nada que a
     bandeira já não diga. O menu continua abrindo no toque. */
  .idioma-atual { padding:6px 8px; }
  .idioma-sigla, .idioma-seta { display:none; }

  .topo-acoes { gap:8px; }
  .topo-acoes .btn { padding:8px 13px; font-size:13.5px; }
}

/* Abaixo de 400px o nome da conta no painel empurra o botão Sair para fora.
   Cortar com reticências mantém os dois visíveis e legíveis. */
@media (max-width:400px) {
  .painel-usuario {
    max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}


/* ----------------------------------------------------------------- herói */
.heroi { padding:80px 0 92px; position:relative; }
.heroi-grade { display:grid; gap:54px; grid-template-columns:1fr; align-items:center; }
@media (min-width:980px) { .heroi-grade { grid-template-columns:1.02fr .98fr; gap:44px; } }

.selo {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 10px; margin-bottom:24px;
  border-radius:999px; background:#fff;
  border:1px solid var(--linha); box-shadow:var(--sombra-sm);
  font-size:13px; color:var(--fg-2); font-weight:500;
}
.pisca {
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0% { box-shadow:0 0 0 0 rgba(22,163,74,.5); }
  70% { box-shadow:0 0 0 9px rgba(22,163,74,0); }
  100% { box-shadow:0 0 0 0 rgba(22,163,74,0); }
}

.heroi h1 { font-size:clamp(36px, 5.4vw, 60px); margin-bottom:20px; letter-spacing:-.03em; }
.realce {
  display:block;
  background:linear-gradient(100deg, var(--acento) 0%, #4f8bff 55%, #7aa7ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chamada { font-size:clamp(16.5px, 1.6vw, 19px); max-width:56ch; margin-bottom:30px; }
.heroi-acoes { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }

.heroi-provas { list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; }
.heroi-provas li { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--fg-3); }
.heroi-provas li::before {
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  background:rgba(22,163,74,.12);
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.4);
}

/* ------------------------------------------- maquete animada do aplicativo */
.heroi-arte { position:relative; }
.janela {
  border-radius:var(--raio-g); overflow:hidden;
  background:#fff; border:1px solid var(--linha);
  box-shadow:var(--sombra-lg);
  transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
  transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.heroi-arte:hover .janela { transform:perspective(1400px) rotateY(-3deg) rotateX(1deg); }

.janela-topo {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--bg-2);
  border-bottom:1px solid var(--linha);
}
.bolotas { display:flex; gap:6px; }
.bolotas i { width:9px; height:9px; border-radius:50%; background:var(--linha-forte); }
.url {
  flex:1; text-align:center; font-size:11.5px; color:var(--fg-3);
  background:#fff; border:1px solid var(--linha); border-radius:6px; padding:4px 10px;
}

.app-barra {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; background:#fff; border-bottom:1px solid var(--linha);
}
.app-esq { display:flex; align-items:center; gap:9px; min-width:0; }
.ponto-vivo { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.app-nome { font-size:12.5px; font-weight:600; }
.app-sub { font-size:10.5px; color:var(--fg-3); }
.app-centro { display:flex; gap:5px; }
.app-btn { width:26px; height:22px; border-radius:6px; background:var(--bg-3); }
.app-chip {
  font-size:10px; color:var(--acento); padding:3px 9px; font-weight:600;
  border-radius:999px; background:var(--acento-claro);
}

.app-tela {
  position:relative; height:250px; padding:18px;
  background:linear-gradient(180deg, #f2f5fa 0%, #e8edf5 100%);
  overflow:hidden;
}
.mini-janela {
  position:absolute; border-radius:8px;
  background:#fff; border:1px solid rgba(15,23,42,.07);
  box-shadow:var(--sombra-sm);
}
.j1 { left:18px; top:18px; width:46%; height:96px; animation:flutuar 7s ease-in-out infinite; }
.j2 { right:18px; top:52px; width:38%; height:120px; animation:flutuar 7s ease-in-out infinite 1.6s; }
@keyframes flutuar { 50% { transform:translateY(-6px); } }

.linhas { position:absolute; left:18px; bottom:20px; right:18px; display:flex; flex-direction:column; gap:8px; }
.linhas i { height:7px; border-radius:4px; background:rgba(15,23,42,.08); }

.cursor-falso {
  position:absolute; width:22px; height:22px;
  filter:drop-shadow(0 2px 4px rgba(15,23,42,.25));
  animation:passear 9s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes passear {
  0%   { left:20%; top:70%; }
  22%  { left:62%; top:28%; }
  38%  { left:62%; top:28%; }
  58%  { left:33%; top:52%; }
  72%  { left:33%; top:52%; }
  100% { left:20%; top:70%; }
}

.cartao-flutuante {
  position:absolute; display:flex; flex-direction:column; gap:1px;
  padding:11px 16px; border-radius:12px;
  background:#fff; border:1px solid var(--linha); box-shadow:var(--sombra);
}
.cartao-flutuante strong { font-size:17px; font-weight:680; }
.cartao-flutuante span { font-size:10.5px; color:var(--fg-3); }
.f1 { left:-18px; bottom:52px; animation:flutuar 6s ease-in-out infinite; }
.f2 { right:-14px; top:34px; animation:flutuar 6s ease-in-out infinite 2s; }
@media (max-width:980px) {
  .janela { transform:none; }
  .cartao-flutuante { display:none; }
}

/* ---------------------------------------------------------------- seções */
.secao { padding:92px 0; }
.secao.cinza { background:var(--bg-2); border-block:1px solid var(--linha); }
.titulo-secao { max-width:62ch; margin:0 auto 44px; text-align:center; }
.etiqueta-secao {
  display:inline-block; margin-bottom:14px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acento);
}
.titulo-secao .sub { margin-top:14px; font-size:16.5px; }

.grade-3 { display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:820px) { .grade-3 { grid-template-columns:repeat(3,1fr); } }

.cartao {
  padding:28px 24px; border-radius:var(--raio-g);
  background:#fff; border:1px solid var(--linha); box-shadow:var(--sombra-sm);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.cartao:hover { transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--linha-forte); }
.icone-caixa {
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  display:grid; place-items:center; color:var(--acento);
  background:var(--acento-claro);
}
.icone-caixa svg { width:22px; height:22px; }
.cartao h3 { margin-bottom:8px; }
.cartao p { font-size:14.8px; }

/* -------------------------------------------------------------- download */
.download { padding:78px 0; }
.download-caixa {
  display:grid; gap:26px; grid-template-columns:1fr; align-items:center;
  padding:38px 34px; border-radius:22px;
  background:linear-gradient(135deg, #f3f7ff 0%, #ffffff 60%);
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
@media (min-width:860px) { .download-caixa { grid-template-columns:1.4fr 1fr; gap:40px; } }
.download h2 { font-size:clamp(24px, 3vw, 32px); margin-bottom:10px; }
.download p { font-size:16px; }
.download-acao { display:flex; flex-direction:column; gap:10px; }
.download-obs { font-size:12.5px; color:var(--fg-3); text-align:center; line-height:1.5; }

.duas-portas { display:grid; gap:14px; grid-template-columns:1fr; margin-top:34px; }
@media (min-width:760px) { .duas-portas { grid-template-columns:repeat(2,1fr); } }
.porta {
  padding:24px; border-radius:var(--raio-g);
  background:#fff; border:1px solid var(--linha); box-shadow:var(--sombra-sm);
}
.porta-etiqueta {
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acento); margin-bottom:8px; display:block;
}
.porta h3 { margin-bottom:6px; }
.porta p { font-size:14.5px; margin-bottom:16px; }

/* ---------------------------------------------------------------- passos */
.passos { list-style:none; display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto; }
.passos li {
  display:flex; gap:20px; align-items:flex-start;
  padding:24px; border-radius:var(--raio-g);
  background:#fff; border:1px solid var(--linha); box-shadow:var(--sombra-sm);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.passos li:hover { border-color:var(--acento); transform:translateX(4px); box-shadow:var(--sombra); }
.passo-num {
  flex:none; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; font-weight:700; font-size:15px;
  color:#fff; background:var(--acento);
}
.passo-corpo h3 { margin-bottom:5px; }
.passo-corpo p { font-size:14.8px; }

/* -------------------------------------------------------------- recursos */
.grade-recursos { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:720px)  { .grade-recursos { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .grade-recursos { grid-template-columns:repeat(3,1fr); } }
.recurso {
  padding:24px; border-radius:var(--raio);
  border:1px solid var(--linha); background:#fff;
  position:relative; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.recurso::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--acento); transform:scaleY(0); transform-origin:top;
  transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.recurso:hover { border-color:var(--linha-forte); box-shadow:var(--sombra); }
.recurso:hover::before { transform:scaleY(1); }
.recurso h3 { margin-bottom:7px; }
.recurso p { font-size:14.5px; }

/* --------------------------------------------------------------- números */
.numeros { padding:70px 0; }
.numero { text-align:center; }
.numero b {
  display:block; font-size:clamp(40px, 6vw, 56px); font-weight:720;
  letter-spacing:-.04em; line-height:1; color:var(--acento);
}
.numero span { display:block; margin-top:8px; font-size:14px; color:var(--fg-3); }

/* ---------------------------------------------------------------- planos */
.grade-planos { display:grid; gap:16px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:700px)  { .grade-planos { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px) { .grade-planos { grid-template-columns:repeat(4,1fr); } }

/* --------------------------------------------------------- faixa do grátis */
/* O grátis fica FORA da grade de propósito. Como quinta coluna ele roubava
   largura dos quatro planos pagos e fazia o texto de todos quebrar em duas
   linhas — e ele não é um degrau da escada de preços, é a porta de entrada. */
.faixa-gratis {
  display:grid; gap:18px 28px; align-items:center;
  grid-template-columns:minmax(0,1fr) auto auto;
  padding:22px 24px; margin-bottom:16px;
  background:var(--painel); border:1px solid var(--linha);
  border-radius:var(--raio-g); box-shadow:var(--sombra-sm);
}
.fg-titulo { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.fg-titulo h3 { font-size:19px; font-weight:650; letter-spacing:-.2px; }
.fg-etiqueta {
  font-size:11.5px; font-weight:600; color:var(--acento);
  background:var(--acento-claro); padding:4px 9px; border-radius:99px;
}
.fg-texto p { font-size:13.5px; color:var(--fg-2); max-width:52ch; line-height:1.55; }

.fg-limites {
  display:flex; flex-wrap:wrap; gap:8px 22px;
  list-style:none; padding:0; margin:0;
  font-size:13px; color:var(--fg-2); white-space:nowrap;
}
.fg-limites b { color:var(--fg); font-weight:650; }

@media (max-width:980px) {
  .faixa-gratis { grid-template-columns:minmax(0,1fr); }
  .fg-limites { white-space:normal; }
}

.plano {
  position:relative; display:flex; flex-direction:column;
  padding:28px 22px; border-radius:var(--raio-g);
  background:#fff; border:1px solid var(--linha); box-shadow:var(--sombra-sm);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.plano:hover { transform:translateY(-5px); box-shadow:var(--sombra); }
.plano.destaque { border-color:var(--acento); box-shadow:0 0 0 3px rgba(37,99,235,.09), var(--sombra); }
.fita {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  padding:5px 13px; border-radius:999px; white-space:nowrap;
  background:var(--acento); color:#fff; font-size:11px; font-weight:700;
}
.plano h3 { font-size:16px; margin-bottom:5px; }
.plano-para { font-size:12.8px; color:var(--fg-3); min-height:34px; margin-bottom:14px; }
.plano-preco { margin-bottom:20px; }
/* O preço acompanha a largura do cartão. Em 37px fixos, "R$ 349,90" ocupava
   214 de 215 pixels disponíveis na coluna — cabia por um pixel, e qualquer
   variação de renderização de fonte jogava o "/mês" para a linha de baixo. */
.plano-preco b {
  font-size:clamp(29px, 2.5vw, 37px);
  font-weight:720; letter-spacing:-.035em;
}
/* Impede a quebra entre o valor e o "/mês", que é o que mais chamou atenção. */
.plano-preco { white-space:nowrap; }
.plano-preco span { font-size:15px; color:var(--fg-3); }
.plano ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; flex:1; }
.plano li { font-size:14.2px; color:var(--fg-2); padding-left:24px; position:relative; }
.plano li b { color:var(--fg); font-weight:600; }
.plano li::before {
  content:""; position:absolute; left:2px; top:7px;
  width:12px; height:6px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}
.nota-preco { text-align:center; margin-top:28px; font-size:13.5px; color:var(--fg-3); }

/* --------------------------------------------------------------- dúvidas */
.perguntas { display:flex; flex-direction:column; }
details { border-bottom:1px solid var(--linha); }
details summary {
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 2px; font-size:16.5px; font-weight:560;
  transition:color .16s;
}
details summary::-webkit-details-marker { display:none; }
details summary::after {
  content:""; flex:none; width:11px; height:11px;
  border-right:2px solid var(--fg-3); border-bottom:2px solid var(--fg-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .24s cubic-bezier(.2,.8,.3,1), border-color .2s;
}
details[open] summary::after { transform:rotate(-135deg) translateY(-2px); border-color:var(--acento); }
details summary:hover { color:var(--acento); }
details > div {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.2,.8,.3,1);
}
details[open] > div { grid-template-rows:1fr; }
details > div > * { overflow:hidden; }
details p { font-size:15.2px; padding-bottom:6px; }
details p:last-child { padding-bottom:20px; }
details p + p { padding-top:10px; }

/* ----------------------------------------------------------------- fecho */
.fecho {
  padding:104px 0;
  background:linear-gradient(180deg, var(--bg-2) 0%, #e9eff9 100%);
  border-top:1px solid var(--linha);
}
.fecho h2 { margin-bottom:12px; }
.fecho p { margin-bottom:28px; font-size:16.5px; }

/* ---------------------------------------------------------------- rodapé */
.rodape { padding:44px 0 52px; border-top:1px solid var(--linha); background:#fff; }
.rodape-linha {
  display:flex; flex-wrap:wrap; gap:26px;
  justify-content:space-between; align-items:flex-start; margin-bottom:26px;
}
.rodape .marca { margin-bottom:6px; }
.rodape-links { display:flex; gap:22px; font-size:14.5px; }
.rodape-links a { color:var(--fg-3); }
.rodape-links a:hover { color:var(--acento); }
.aviso-marcas { max-width:72ch; line-height:1.6; }

/* ------------------------------------------------------------- animações */
.animar {
  opacity:0;
  transition:opacity .62s cubic-bezier(.2,.8,.3,1), transform .62s cubic-bezier(.2,.8,.3,1);
  will-change:opacity, transform;
}
.animar[data-animar="subir"]  { transform:translateY(26px); }
.animar[data-animar="lado"]   { transform:translateX(-26px); }
.animar[data-animar="escala"] { transform:scale(.965); }
.animar.visivel { opacity:1; transform:none; }

/* Quem pede menos movimento recebe o conteúdo pronto, não uma tela vazia. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .animar { opacity:1 !important; transform:none !important; transition:none; }
  .cursor-falso, .j1, .j2, .f1, .f2, .pisca { animation:none; }
  .janela { transform:none; }
}

/* ==========================================================================
   Entrar / criar conta
   ========================================================================== */
.pagina-acesso {
  min-height:100vh; display:grid; grid-template-columns:1fr;
}
@media (min-width:940px) { .pagina-acesso { grid-template-columns:1fr 1fr; } }

.acesso-form {
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 24px; background:#fff;
}
.acesso-caixa { width:100%; max-width:400px; margin:0 auto; }
.acesso-caixa > .marca { margin-bottom:34px; }
.acesso-caixa h1 { font-size:28px; margin-bottom:8px; }
.acesso-caixa .sub { font-size:15px; margin-bottom:28px; }

.campo { margin-bottom:16px; }
label {
  display:block; font-size:13px; font-weight:600;
  color:var(--fg); margin-bottom:7px;
}
input[type=text], input[type=email], input[type=password] {
  width:100%; padding:12px 14px;
  background:#fff; color:var(--fg);
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  font-size:15px; font-family:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder { color:#a6b0bf; }
input:focus { border-color:var(--acento); box-shadow:0 0 0 3px rgba(37,99,235,.14); }

.senha-caixa { position:relative; }
.senha-caixa input { padding-right:46px; }
.olho {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--fg-3);
  cursor:pointer; padding:6px; border-radius:7px; line-height:0;
}
.olho:hover { color:var(--acento); background:var(--acento-claro); }
.olho svg { width:19px; height:19px; }

.linha-campo {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:22px;
}
.lembrar { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fg-2); cursor:pointer; font-weight:400; margin:0; }
.lembrar input { width:16px; height:16px; accent-color:var(--acento); cursor:pointer; }
.esqueci { font-size:14px; color:var(--acento); font-weight:500; }
.esqueci:hover { text-decoration:underline; }

.aviso-form {
  margin-top:16px; padding:12px 14px; border-radius:var(--raio);
  font-size:14px; line-height:1.5;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
}
.aviso-form:empty { display:none; }

.separador {
  display:flex; align-items:center; gap:14px;
  margin:26px 0; font-size:13px; color:var(--fg-3);
}
.separador::before, .separador::after {
  content:""; flex:1; height:1px; background:var(--linha);
}

.acesso-rodape { margin-top:26px; font-size:14.5px; color:var(--fg-2); text-align:center; }
.acesso-rodape a { color:var(--acento); font-weight:600; }
.acesso-rodape a:hover { text-decoration:underline; }

/* Painel lateral com a prova social / benefícios */
.acesso-lado {
  display:none; padding:56px 44px;
  background:linear-gradient(160deg, #f2f7ff 0%, #e7eefb 100%);
  border-left:1px solid var(--linha);
  flex-direction:column; justify-content:center;
}
@media (min-width:940px) { .acesso-lado { display:flex; } }
.acesso-lado h2 { font-size:30px; margin-bottom:16px; max-width:15ch; }
.acesso-lado > p { font-size:16.5px; max-width:44ch; margin-bottom:30px; }
.lista-beneficios { list-style:none; display:flex; flex-direction:column; gap:16px; max-width:44ch; }
.lista-beneficios li { display:flex; gap:12px; align-items:flex-start; }
.beneficio-ico {
  flex:none; width:28px; height:28px; border-radius:9px;
  background:#fff; color:var(--acento);
  display:grid; place-items:center; box-shadow:var(--sombra-sm);
}
.beneficio-ico svg { width:15px; height:15px; }
.lista-beneficios strong { display:block; font-size:15px; font-weight:620; }
.lista-beneficios span { font-size:14px; color:var(--fg-2); }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-heroi { padding:72px 0 44px; text-align:center; }
.blog-heroi h1 { font-size:clamp(32px, 4.6vw, 46px); margin-bottom:14px; }
.blog-heroi p { font-size:17px; max-width:56ch; margin:0 auto; }

.lista-posts { display:grid; gap:18px; grid-template-columns:1fr; padding-bottom:96px; }
@media (min-width:820px) { .lista-posts { grid-template-columns:repeat(3,1fr); } }

.post-cartao {
  display:flex; flex-direction:column; gap:10px;
  padding:26px 24px; border-radius:var(--raio-g);
  background:#fff; border:1px solid var(--linha); box-shadow:var(--sombra-sm);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.post-cartao:hover { transform:translateY(-4px); border-color:var(--acento); box-shadow:var(--sombra); }
.post-tema {
  align-self:flex-start; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--acento);
}
.post-cartao h2 { font-size:19px; line-height:1.35; }
.post-cartao p { font-size:14.5px; flex:1; }
.post-meta { font-size:12.5px; color:var(--fg-3); }

.artigo { padding:52px 0 96px; }
.migalhas { font-size:13.5px; color:var(--fg-3); margin-bottom:26px; }
.migalhas a:hover { color:var(--acento); }
.artigo-topo { margin-bottom:38px; }
.artigo-topo h1 { font-size:clamp(29px, 4.2vw, 42px); margin:12px 0 14px; }
.artigo-resumo { font-size:17.5px; color:var(--fg-2); }
.artigo-meta { margin-top:18px; font-size:13px; color:var(--fg-3); }

.corpo { font-size:17px; line-height:1.78; }
.corpo > * + * { margin-top:22px; }
.corpo h2 { font-size:26px; margin-top:44px; }
.corpo h3 { font-size:19.5px; margin-top:32px; }
.corpo p { color:var(--fg-2); }
.corpo strong { color:var(--fg); font-weight:620; }
/* O :not(.btn) não é preciosismo: .corpo a tem especificidade maior que
   .btn-primario e vem depois no arquivo, então pintava o texto do botão de
   azul sobre fundo azul — o botão ficava visível e o texto não. */
.corpo a:not(.btn) { color:var(--acento); text-decoration:underline; text-underline-offset:3px; }
.corpo a:not(.btn):hover { color:var(--acento-2); }
.corpo ul, .corpo ol { padding-left:24px; color:var(--fg-2); }
.corpo li + li { margin-top:9px; }
.corpo li::marker { color:var(--fg-3); }

.destaque-caixa {
  padding:22px 24px; border-radius:var(--raio);
  background:var(--acento-claro); border:1px solid #cddffd;
  border-left:3px solid var(--acento);
}
.destaque-caixa p { color:var(--fg); }
.destaque-caixa p + p { margin-top:10px; }

.tabela-envolve { overflow-x:auto; }
.corpo table { width:100%; border-collapse:collapse; font-size:15px; }
.corpo th, .corpo td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--linha); }
.corpo th { color:var(--fg); font-weight:620; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.corpo td { color:var(--fg-2); }

/* ------------------------------------------------- conectar, dentro do painel
 *
 * Fica no topo do painel de propósito: quem entra na conta quase sempre entra
 * para atender alguém, não para ver o plano. Deixar a ação principal abaixo do
 * cartão de assinatura seria organizar a tela pela nossa cobrança em vez de
 * pelo trabalho de quem usa.
 */
.conectar-agora { display:grid; gap:16px; }
.conectar-texto h2 { font-size:22px; margin:2px 0 6px; }
.conectar-texto p { color:var(--fg-2); font-size:15px; }

.conectar-form { display:flex; gap:10px; flex-wrap:wrap; }
.conectar-form input {
  flex:1 1 180px; min-width:0;
  padding:13px 16px; border:1px solid var(--linha-forte); border-radius:var(--raio);
  font-family:inherit; font-size:20px; font-weight:600; letter-spacing:.08em;
  background:#fff; color:var(--fg);
}
.conectar-form input:focus {
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-claro);
}
.conectar-form .btn { flex:0 0 auto; }
.conectar-nota { font-size:13.5px; color:var(--fg-3); }

@media (min-width:720px) {
  /* 40px entre as colunas: com 16 o formulário encostava no texto e a linha
     de descrição parecia legenda do campo, e não frase independente. */
  .conectar-agora { grid-template-columns:1fr auto; align-items:center; gap:14px 40px; }
  .conectar-form { min-width:340px; }
  /* A nota volta para baixo do formulário, na segunda coluna. */
  .conectar-nota { grid-column:2; margin-top:-8px; }
}

.chamada-artigo {
  margin-top:52px; padding:32px 28px; border-radius:var(--raio-g);
  background:var(--bg-2); border:1px solid var(--linha); text-align:center;
}
.chamada-artigo h3 { font-size:21px; margin-bottom:8px; }
.chamada-artigo p { margin-bottom:20px; font-size:15.5px; }

.leia-mais { margin-top:52px; padding-top:32px; border-top:1px solid var(--linha); }
.leia-mais h3 { font-size:15px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.09em; margin-bottom:16px; }
.leia-mais ul { list-style:none; display:flex; flex-direction:column; gap:12px; padding:0; }
.leia-mais a { font-size:16.5px; color:var(--fg); }
.leia-mais a:hover { color:var(--acento); }

/* -------------------------------------------------------------- idiomas */
.idiomas { position:relative; }

.idioma-atual {
  display:flex; align-items:center; gap:7px;
  padding:6px 9px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid transparent;
  color:var(--fg-2); font:600 12.5px/1 inherit; font-family:inherit;
  transition:background .15s, border-color .15s, color .15s;
}
.idioma-atual:hover { background:var(--painel); border-color:var(--linha); color:var(--fg); }
.idioma-atual[aria-expanded="true"] { background:var(--painel); border-color:var(--linha); }
.idioma-sigla { letter-spacing:.4px; }
.idioma-seta { width:12px; height:12px; color:var(--fg-3); transition:transform .18s; }
.idioma-atual[aria-expanded="true"] .idioma-seta { transform:rotate(180deg); }

/* A bandeira tem borda porque o branco da bandeira dos EUA desaparece no
   fundo claro do cabeçalho sem ela. */
.bandeira {
  display:block; width:20px; height:14px; flex:none;
  border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(15,23,42,.14);
}
.bandeira svg { display:block; width:100%; height:100%; }

.idioma-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:184px; padding:6px;
  background:var(--painel); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra);
  animation:cai-menu .14s ease-out;
}
.idioma-menu[hidden] { display:none; }
@keyframes cai-menu {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:none; }
}

.idioma-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:var(--fg-2); text-decoration:none;
  transition:background .14s, color .14s;
}
.idioma-item:hover { background:var(--bg-2); color:var(--fg); }
.idioma-item.ativo { color:var(--acento); font-weight:620; }
.idioma-item.ativo::after {
  content:''; margin-left:auto; width:6px; height:6px;
  border-radius:50%; background:var(--acento);
}

/* ------------------------------------------------- sugestão de idioma */
/* Faixa, e nunca redirecionamento automático: o Googlebot rastreia de IPs
   americanos com Accept-Language inglês, e redirecionar por idioma detectado
   faria ele NUNCA ver a versão em português — destruindo o ranqueamento do
   .com.br para ganhar conveniência. */
.sugestao-idioma {
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:70; display:flex; align-items:center; gap:14px;
  max-width:calc(100vw - 32px);
  padding:12px 14px 12px 16px;
  background:var(--painel); border:1px solid var(--linha);
  border-radius:99px; box-shadow:var(--sombra);
  font-size:13.5px; color:var(--fg-2);
  animation:sobe-sugestao .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes sobe-sugestao {
  from { opacity:0; transform:translate(-50%, 12px); }
  to   { opacity:1; transform:translate(-50%, 0); }
}
.sugestao-idioma .bandeira { width:22px; height:15px; }
.sugestao-idioma a {
  padding:7px 14px; border-radius:99px;
  background:var(--acento); color:#fff; font-weight:600; font-size:13px;
  text-decoration:none; white-space:nowrap;
}
.sugestao-idioma a:hover { background:var(--acento-2); }
.sugestao-fechar {
  width:26px; height:26px; flex:none; padding:0; cursor:pointer;
  background:transparent; border:0; border-radius:50%;
  color:var(--fg-3); display:grid; place-items:center;
}
.sugestao-fechar:hover { background:var(--bg-2); color:var(--fg); }
.sugestao-fechar svg { width:13px; height:13px; }

@media (max-width:520px) {
  .sugestao-idioma { border-radius:var(--raio-g); gap:10px; padding:12px; }
  .sugestao-texto { font-size:12.5px; }
}

/* ------------------------------------------------- download, duas opções */
/* O segundo botão é alternativa, não repetição: estilo vazado, e a legenda de
   cada um cabe em UMA linha. A explicação da diferença mora na nota abaixo,
   onde há largura — sob o botão, virava um parágrafo centralizado de quatro
   linhas que ninguém lia. */
.download-acao .btn-vazado { margin-top:12px; }

.nota-portatil {
  display:grid; gap:10px;
  margin-top:20px; padding:20px 24px;
  font-size:14.5px; line-height:1.65; color:var(--fg-2);
  background:var(--bg-2); border:1px solid var(--linha);
  border-radius:var(--raio-g);
}
.nota-portatil p { font-size:inherit; }
.nota-portatil strong { color:var(--fg); font-weight:620; }

/* Em tela larga, os dois parágrafos ficam lado a lado: é uma comparação, e
   comparação lê-se melhor em colunas que em blocos empilhados. */
@media (min-width:860px) { .nota-portatil { grid-template-columns:1fr 1fr; gap:10px 32px; } }

/* ==========================================================================
   PAINEL DA CONTA
   ========================================================================== */
.corpo-painel { background:var(--bg-2); min-height:100vh; }
.topo-painel { background:rgba(255,255,255,.9); border-bottom:1px solid var(--linha); }
.painel-usuario { font-size:14px; color:var(--fg-2); font-weight:500; }
@media (max-width:520px) { .painel-usuario { display:none; } }

.painel { padding:32px 0 64px; }

/* Estado de carregamento explícito: sem ele a tela pula de vazia para cheia,
   e quem tem conexão lenta acha que o painel está quebrado. */
.painel-carregando {
  display:flex; align-items:center; gap:12px; justify-content:center;
  padding:70px 0; font-size:14.5px; color:var(--fg-3);
}
.girando {
  width:17px; height:17px; flex:none; border-radius:50%;
  border:2px solid var(--linha-forte); border-top-color:var(--acento);
  animation:gira .7s linear infinite;
}
@keyframes gira { to { transform:rotate(360deg); } }

.cartao-painel {
  background:var(--painel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:26px 28px; box-shadow:var(--sombra-sm);
}
.rotulo-painel {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.9px; color:var(--fg-3); margin-bottom:6px;
}

.destaque-plano {
  display:grid; gap:24px; align-items:center; margin-bottom:16px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px) { .destaque-plano { grid-template-columns:minmax(0,1fr) auto; } }
.destaque-plano h1 { font-size:clamp(26px,3.4vw,34px); letter-spacing:-.03em; }
.plano-detalhe { font-size:14px; color:var(--fg-2); margin-top:4px; }

.uso { display:flex; gap:34px; }
.uso dt { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--fg-3); }
.uso dd { font-size:14px; color:var(--fg-3); margin-top:3px; }
.uso dd b { font-size:23px; color:var(--fg); font-weight:680; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------- avisos */
.aviso-painel {
  padding:13px 16px; margin-bottom:16px; border-radius:var(--raio);
  font-size:14px; border:1px solid transparent;
}
.aviso-painel.info     { background:var(--acento-claro); border-color:#d6e4ff; color:#1e40af; }
.aviso-painel.ok       { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.aviso-painel.atencao  { background:#fffbeb; border-color:#fcd34d; color:#92400e; }
.aviso-painel.erro     { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }

/* ------------------------------------------------------------- seções */
.secao-painel { margin-top:34px; }
.secao-painel h2 { font-size:clamp(20px,2.4vw,25px); margin-bottom:6px; }
.sub-painel { font-size:14px; color:var(--fg-2); max-width:62ch; }

.cabeca-secao {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:20px;
}

.abas-ciclo { display:flex; gap:3px; padding:4px; background:var(--bg-3); border-radius:11px; }
.aba-ciclo {
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--fg-2);
  font:600 13.5px/1 inherit; font-family:inherit; white-space:nowrap;
  transition:background .15s, color .15s;
}
.aba-ciclo:hover { color:var(--fg); }
.aba-ciclo.ativa { background:var(--painel); color:var(--acento); box-shadow:var(--sombra-sm); }
.desconto {
  font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:99px;
  background:#f0fdf4; color:#15803d;
}

/* ------------------------------------------------------------- planos */
.grade-painel { display:grid; gap:14px; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:680px)  { .grade-painel { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px) { .grade-painel { grid-template-columns:repeat(4,1fr); } }

.plano-painel {
  position:relative; display:flex; flex-direction:column;
  padding:24px 20px; border-radius:var(--raio-g);
  background:var(--painel); border:1px solid var(--linha);
  box-shadow:var(--sombra-sm);
}
.plano-painel.destaque { border-color:var(--acento); box-shadow:0 8px 24px -10px rgba(37,99,235,.35); }

/* O plano atual fica visivelmente inativo: um botão clicável no plano que a
   pessoa já tem convida a pagar duas vezes. */
.plano-painel.atual { background:var(--bg-2); border-style:dashed; }

.plano-painel h3 { font-size:17px; margin-bottom:4px; }
.plano-painel .plano-para { font-size:12.5px; color:var(--fg-3); min-height:34px; }
.plano-painel .plano-preco { margin:12px 0 0; white-space:nowrap; }
.plano-painel .plano-preco b { font-size:clamp(24px,2.1vw,30px); font-weight:720; letter-spacing:-.035em; }
.plano-painel .plano-preco span { font-size:13.5px; color:var(--fg-3); }
.equivale { font-size:11.5px; color:var(--fg-3); min-height:18px; margin-bottom:14px; }

.plano-painel ul { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px; flex:1; }
.plano-painel li { font-size:13.5px; color:var(--fg-2); padding-left:21px; position:relative; }
.plano-painel li::before {
  content:''; position:absolute; left:0; top:.45em;
  width:11px; height:6px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}

/* ---------------------------------------------------------- pagamentos */
.tabela-painel { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--painel); }
.tabela-painel th {
  text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.7px; color:var(--fg-3); padding:12px 16px;
  border-bottom:1px solid var(--linha);
}
.tabela-painel td { padding:13px 16px; border-bottom:1px solid var(--bg-3); color:var(--fg-2); }
.tabela-painel tr:last-child td { border-bottom:0; }
.tabela-painel .num { text-align:right; font-variant-numeric:tabular-nums; }
.tabela-envolve {
  overflow:auto; border:1px solid var(--linha); border-radius:var(--raio-g);
  box-shadow:var(--sombra-sm);
}

/* --------------------------------------------------------------- modal */
.modal-fundo {
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:20px;
  background:rgba(15,23,42,.45); backdrop-filter:blur(3px);
  animation:aparece .15s ease-out;
}
@keyframes aparece { from { opacity:0; } to { opacity:1; } }

.modal-caixa {
  width:min(440px,100%); padding:26px;
  background:var(--painel); border-radius:var(--raio-g);
  box-shadow:var(--sombra-lg);
  animation:sobe-modal .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sobe-modal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.modal-caixa h3 { font-size:19px; margin-bottom:5px; }
.modal-resumo { font-size:14px; color:var(--fg-2); margin-bottom:20px; }

.campo-painel { display:block; margin-bottom:16px; }
.campo-painel > span { display:block; font-size:13px; font-weight:600; color:var(--fg); margin-bottom:6px; }
.campo-painel small { display:block; font-size:11.5px; color:var(--fg-3); margin-top:5px; }
.campo-painel input, .campo-painel select {
  width:100%; padding:11px 13px;
  background:var(--painel); color:var(--fg);
  border:1px solid var(--linha-forte); border-radius:var(--raio);
  font:inherit; font-size:14.5px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.campo-painel input:focus, .campo-painel select:focus {
  border-color:var(--acento); box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

.modal-erro {
  font-size:13px; color:#b91c1c; background:#fef2f2;
  border:1px solid #fecaca; border-radius:var(--raio);
  padding:10px 12px; margin-bottom:14px;
}
.modal-acoes { display:flex; gap:10px; justify-content:flex-end; }