/* Camada de apresentação: página inicial e autenticação */

/* ===== Tokens da apresentação (home, autenticação e 404). base.css é compartilhado com o /app: não editar lá. ===== */
:root {
  /* Cores: 4 tons, nada além */
  --preto: #0a0a0a;
  --grafite: #292524;            /* hover de preto */
  --cinza-texto: #57534e;        /* 7,6:1 no branco; 7,0:1 no papel */
  --cinza-linha: #e7e5e4;
  --cinza-tracejado: #a8a29e;    /* só borda tracejada da linha do Grátis */
  --papel: #f5f5f4;
  --branco: #ffffff;
  --sobre-preto-suave: rgba(255, 255, 255, 0.72); /* texto secundário em fundo preto, cerca de 11:1 */
  --sobre-preto-linha: rgba(255, 255, 255, 0.18);

  /* Tipografia: 6 tamanhos de texto, mais display e preço */
  --t-display: clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem);   /* H1. Plus Jakarta Sans 700, lh 1.05, -0.025em (375px: cerca de 38px; 1280px: cerca de 67px) */
  --t-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);       /* H2. Plus Jakarta Sans 700, lh 1.12 */
  --t-h3: 1.25rem;                                        /* H3. Inter 600, lh 1.3 */
  --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* subtítulos, lh 1.55 */
  --t-corpo: 1rem;                                        /* lh 1.6 */
  --t-peq: 0.875rem;                                      /* legendas, chips, listas, rodapé (mínimo para conteúdo) */
  --t-rotulo: 0.75rem;                                    /* sobretítulos em caixa alta, selos. Só caixa alta ou números */
  --t-preco: clamp(2.25rem, 2rem + 1vw, 2.75rem);         /* Plus Jakarta Sans 700, lh 1, tabular-nums */

  /* Espaço (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --secao: clamp(64px, 3rem + 4vw, 112px);  /* padding vertical de toda seção */
  --cab-gap: clamp(32px, 4vw, 48px);        /* cabeçalho da seção até o conteúdo */

  /* Grade */
  --largura: 1160px;        /* contêiner */
  --largura-texto: 680px;   /* cabeçalhos e FAQ */
  --gutter: clamp(16px, 4vw, 24px);
  --nav-altura: 64px;

  /* Forma */
  --raio-p: 8px;            /* botões, chips, campos */
  --raio-cartao: 12px;      /* cartões, player compacto */
  --raio-capa: 6px;         /* capas pretas (igual ao app) */
  --raio-selo: 4px;         /* selos retangulares */
  --raio-celular: 44px;     /* moldura do celular (desktop) */
  --raio-pilula: 999px;
  --sombra-celular: 0 40px 80px -20px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.08);
  /* --sombra e --sombra-forte vêm de base.css */

  /* Foco: anel duplo, visível em fundo branco e preto */
  --anel: 0 0 0 2px #ffffff, 0 0 0 4px #0a0a0a;
  --anel-inverso: 0 0 0 2px #0a0a0a, 0 0 0 4px #ffffff;

  /* Movimento */
  --dur-rapida: 150ms;
  --dur-media: 200ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 640px) { :root { --nav-altura: 56px; } }

/* ===== Foco e acessibilidade base ===== */
html { scroll-padding-top: calc(var(--nav-altura) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Substitui o outline de base.css (que some no preto) por anel duplo. O outline transparente preserva o modo de alto contraste do Windows. */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--anel); border-radius: var(--raio-p); }
.plano-destaque :focus-visible, .cta-final :focus-visible { box-shadow: var(--anel-inverso); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 8px; top: -100px; z-index: 50; padding: 12px 16px; border-radius: var(--raio-p); background: var(--preto); color: var(--branco); font-weight: 600; text-decoration: none; }
.pular:focus { top: 8px; }

/* ===== Botões (acréscimos a base.css) ===== */
.btn { min-height: 48px; padding: 0 22px; font-size: var(--t-corpo); line-height: 1.2; text-align: center; }
.btn-grande { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn-pequeno { min-height: 44px; padding: 0 16px; font-size: var(--t-peq); }
.btn-fantasma:active { background: var(--papel); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.link-texto { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--preto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link-texto:hover { text-decoration-thickness: 2px; }

/* ===== Seções (regras gerais) ===== */
.dentro { max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: var(--secao); }
.secao-borda { border-top: 1px solid var(--cinza-linha); }
.secao-alt { background: var(--papel); border-block: 1px solid var(--cinza-linha); }
.secao-cab { max-width: var(--largura-texto); margin-bottom: var(--cab-gap); }
.secao-cab-centro { margin-inline: auto; text-align: center; }
.secao-cab h2 { margin: 12px 0 0; font-size: var(--t-h2); line-height: 1.12; }
.secao-sub { margin: 16px 0 0; font-size: var(--t-lead); line-height: 1.55; color: var(--cinza-texto); }
.sobretitulo { margin: 0; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza-texto); }

/* ===== Nav ===== */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cinza-linha); }
.nav-dentro { display: flex; align-items: center; gap: 24px; height: var(--nav-altura); }
.nav-links { display: flex; gap: 4px; margin-left: 16px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: var(--t-peq); font-weight: 500; color: var(--cinza-texto); text-decoration: none; }
.nav-links a:hover { color: var(--preto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-entrar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: var(--t-peq); font-weight: 600; color: var(--preto); text-decoration: none; }
.nav-entrar:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) { .nav-links { display: none; } }
@media (max-width: 640px) { .nav-dentro { gap: 12px; } .marca { font-size: 1rem; } .marca-simbolo { height: 28px; } }
/* Celular: no topo só "Entrar"; a chamada principal fica no hero e, depois dele, na barra fixa */
@media (max-width: 640px) { .nav-acoes .btn { display: none; } }

/* ===== Hero: grade com áreas, para o player ficar entre o subtítulo e o CTA no celular e à direita no desktop ===== */
.heroi { padding-block: 56px 72px; }
.heroi-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  grid-template-areas: ". palco" "sobre palco" "titulo palco" "sub palco" "ctas palco" "micro palco" ". palco";
  column-gap: 64px;
}
.heroi-sobre { grid-area: sobre; }
.heroi h1 { grid-area: titulo; margin: 12px 0 20px; font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.025em; }
.heroi h1 em { font-style: normal; color: var(--acento); }  /* só a palavra "lei" em azul */
.heroi-sub { grid-area: sub; max-width: 32em; margin: 0 0 32px; font-size: var(--t-lead); line-height: 1.55; color: var(--cinza-texto); }
.heroi-ctas { grid-area: ctas; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.heroi-micro { grid-area: micro; margin: 20px 0 0; font-size: var(--t-peq); color: var(--cinza-texto); }
.amostra-palco { grid-area: palco; align-self: center; display: grid; gap: 12px; }

@media (max-width: 1023px) {
  .heroi { padding-block: 32px 56px; }
  .heroi-grade { max-width: calc(640px + 2 * var(--gutter)); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sobre" "titulo" "sub" "palco" "ctas" "micro"; }
  .heroi-sub { margin-bottom: 20px; }
  .amostra-palco { margin-bottom: 20px; }
}
.so-celular { display: none; }
@media (max-width: 640px) {
  .so-celular { display: inline; }
  .heroi { padding-block: 32px 48px; }
  .heroi h1 { margin: 12px 0 16px; font-size: 2.75rem; line-height: 1.08; }
  .heroi-sub { margin-bottom: 28px; }
  .amostra-palco { margin-bottom: 24px; }
  .heroi-ctas .btn { width: 100%; }
  .heroi-ctas .link-texto { display: none; }   /* no celular o player já está acima do CTA; preços estão a uma rolagem */
  .heroi-micro { margin-top: 12px; text-align: center; }
  .amostra-legenda { display: none; }
}

/* ===== Player (.amostra) ===== */
/* Capa preta (vocabulário do app; app.css não é carregado na home) */
.capa { position: relative; overflow: hidden; display: grid; align-content: space-between; background: var(--preto); color: var(--branco); border-radius: var(--raio-capa); }
.capa-sigla { position: relative; z-index: 1; font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.capa-art { position: relative; z-index: 1; font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.05; }

/* Cartão do player: a mesma ordem em todas as telas, com o botão azul "Ouvir agora" como ação óbvia */
.amostra {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "topo topo topo" "capa info info" "prog prog prog" "play play play" "status status ver" "acao acao acao" "texto texto texto";
  align-items: center; gap: 10px 12px;
  padding: 14px; background: var(--branco); border: 1px solid var(--cinza-linha); border-radius: var(--raio-cartao); box-shadow: var(--sombra);
}
.amostra-topo { grid-area: topo; display: flex; justify-content: space-between; margin: 0; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza-texto); }
.amostra-capa { grid-area: capa; width: 56px; height: 56px; padding: 7px; }
.amostra-capa .capa-sigla { font-size: 0.9375rem; }   /* decorativo, aria-hidden */
.amostra-capa .capa-art { font-size: 0.6875rem; }     /* decorativo, aria-hidden */
.amostra-info { grid-area: info; min-width: 0; }
.amostra-titulo { margin: 0; font-size: var(--t-corpo); font-weight: 600; line-height: 1.3; }
.amostra-norma { margin: 2px 0 0; font-size: var(--t-peq); color: var(--cinza-texto); }

.amostra-play { grid-area: play; width: 100%; min-height: 54px; border: 0; border-radius: var(--raio-pilula); background: var(--acento); color: var(--branco); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; transition: background var(--dur-rapida), transform var(--dur-rapida); }
.amostra-play:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .amostra-play:hover { background: #0857d1; } }
.amostra-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.amostra-play .i-pause, .amostra-play .i-carregando { display: none; }
.amostra[data-estado="tocando"] .i-play, .amostra[data-estado="carregando"] .i-play { display: none; }
.amostra[data-estado="tocando"] .i-pause { display: block; }
.amostra[data-estado="carregando"] .i-carregando { display: block; }
.i-carregando { width: 22px; height: 22px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.amostra-progresso { grid-area: prog; }
.onda { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.onda i { flex: 0 0 3px; border-radius: 3px; background: var(--cinza-tracejado); transition: background var(--dur-rapida); }
.onda i.tocada { background: var(--acento); }
.amostra[data-estado="tocando"] .onda i.viva { animation: pulsar-onda 0.6s ease-in-out infinite alternate; }
.amostra[data-estado="tocando"] .onda i.viva:nth-child(2n) { animation-delay: -0.3s; }
@keyframes pulsar-onda { from { transform: scaleY(0.7); } to { transform: scaleY(1.2); } }
.amostra-tempos { display: none; }

.amostra-status { grid-area: status; margin: 0; min-height: 1.4em; font-size: var(--t-peq); font-weight: 500; color: var(--cinza-texto); }
.amostra[data-estado="erro"] .amostra-status { color: var(--perigo); }
.amostra-ver { grid-area: ver; justify-self: end; min-height: 44px; padding: 0 4px; border: 0; background: none; font-size: var(--t-peq); font-weight: 600; color: var(--preto); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.amostra-acao { grid-area: acao; display: flex; flex-wrap: wrap; gap: 8px; }
.amostra-acao[hidden] { display: none; }

.amostra-texto { grid-area: texto; position: relative; margin: 0; padding: 0; list-style: none; font-size: var(--t-peq); line-height: 1.5; color: var(--cinza-texto); }
.amostra-texto li { padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; transition: background var(--dur-media), color var(--dur-media); }
.amostra-texto li.lendo { background: var(--acento-suave); border-left-color: var(--acento); color: var(--preto); }
/* Compacto: só o trecho atual, até 2 linhas, até a pessoa tocar em "Ver texto" */
.amostra:not(.texto-aberto) .amostra-texto li:not(.atual) { display: none; }
.amostra:not(.texto-aberto) .amostra-texto li.atual { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-block: 0; margin-block: 6px; } /* sem padding: ele deixaria aparecer a 3ª linha cortada */
.amostra-legenda { margin: 0; font-size: var(--t-peq); color: var(--cinza-texto); text-align: center; }

/* Celular: cartão mais limpo. O botão já diz o que fazer, e o texto só abre em "Ver texto" */
@media (max-width: 640px) {
  .amostra { grid-template-areas: "capa info info" "prog prog prog" "play play play" "status status ver" "acao acao acao" "texto texto texto"; gap: 0 12px; padding: 16px 16px 6px; }
  /* Margens em vez de gap: linhas vazias (ação e texto fechado) não deixam sobra no fim do cartão */
  .amostra-progresso, .amostra-play { margin-top: 14px; }
  .amostra-status, .amostra-ver { margin-top: 4px; }
  .amostra-acao { margin: 4px 0 10px; }
  .amostra-texto { margin-bottom: 10px; }
  .amostra-topo { display: none; }
  .amostra-status { font-size: 0.8125rem; }
  .amostra:not(.texto-aberto) .amostra-texto { display: none; }
}

/* Computador: o mesmo cartão, maior, com o tempo e o texto sempre à vista */
@media (min-width: 1024px) {
  .amostra { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px 16px; padding: 20px; }
  .amostra-capa { width: 72px; height: 72px; padding: 9px; }
  .amostra-capa .capa-sigla { font-size: 1.25rem; }
  .amostra-capa .capa-art { font-size: 0.8125rem; }
  .amostra-titulo { font-size: 1.125rem; }
  .amostra-tempos { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: var(--t-rotulo); color: var(--cinza-texto); font-variant-numeric: tabular-nums; }
  .amostra-ver { display: none; }
  .amostra-status { grid-column: 1 / -1; }
  .amostra-texto { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
  .amostra:not(.texto-aberto) .amostra-texto li:not(.atual) { display: block; }
  .amostra:not(.texto-aberto) .amostra-texto li.atual { display: block; overflow: visible; }
}

/* ===== Normas ===== */
.normas-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.normas-abas[hidden] { display: none; }
.normas-abas button { min-height: 44px; padding: 0 16px; border: 1px solid var(--cinza-linha); border-radius: var(--raio-pilula); background: var(--branco); color: var(--cinza-texto); font-size: var(--t-peq); font-weight: 600; transition: background var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida); }
.normas-abas button:hover { border-color: var(--preto); color: var(--preto); }
.normas-abas button[aria-selected="true"] { background: var(--preto); border-color: var(--preto); color: var(--branco); }
.grupos { display: grid; gap: 32px; }
.grupo[hidden] { display: none; }
.grupo-titulo { margin: 0 0 8px; font-family: var(--fonte); font-size: var(--t-peq); font-weight: 600; color: var(--cinza-texto); }
.normas-com-abas .grupo-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* a aba já diz o nome do grupo */
.normas-com-abas .grupos { min-height: 208px; }
.lista-normas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cinza-linha); }
.lista-normas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--cinza-linha); font-weight: 500; line-height: 1.35; }
.norma-gratis { flex: none; font-size: var(--t-peq); font-weight: 600; color: var(--acento); }
@media (max-width: 767px) { .lista-normas { grid-template-columns: 1fr; } .normas-com-abas .grupos { min-height: 0; } }

/* ===== Como funciona ===== */
.artigos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.artigo { padding-top: 20px; border-top: 1px solid var(--preto); }
.artigo-num { margin: 0; font-family: var(--fonte-titulo); font-size: var(--t-corpo); font-weight: 600; color: var(--cinza-texto); }
.artigo h3 { margin: 8px 0; font-size: var(--t-h3); }
.artigo p:last-child { margin: 0; max-width: 34em; color: var(--cinza-texto); }
.artigos-nota { margin: 32px 0 0; font-size: var(--t-peq); color: var(--cinza-texto); }
@media (max-width: 767px) { .artigos { grid-template-columns: 1fr; gap: 24px; } }

/* ===== Planos ===== */
/* Alternador de ciclo (rádios nativos: setas do teclado funcionam sozinhas) */
.ciclo { display: inline-flex; min-inline-size: 0; margin: 28px 0 0; padding: 4px; border: 1px solid var(--cinza-linha); border-radius: var(--raio-pilula); background: var(--branco); }
.ciclo-opcao { position: relative; display: inline-flex; }
.ciclo-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ciclo-opcao > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--raio-pilula); font-weight: 600; color: var(--cinza-texto); transition: background var(--dur-rapida), color var(--dur-rapida); }
.ciclo-opcao input:checked + span { background: var(--preto); color: var(--branco); }
.ciclo-opcao input:focus-visible + span { box-shadow: var(--anel); }
.ciclo-selo { padding: 2px 8px; border-radius: var(--raio-pilula); background: var(--papel); color: var(--preto); font-size: var(--t-rotulo); }
.ciclo-opcao input:checked + span .ciclo-selo { background: var(--branco); }

/* Cartões */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plano { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--cinza-linha); border-radius: var(--raio-cartao); background: var(--branco); }
@media (hover: hover) and (pointer: fine) { .plano:not(.plano-destaque):hover { border-color: var(--preto); } }
.plano h3 { margin: 0; font-size: var(--t-h3); }
.plano-selo { align-self: flex-start; margin: 0 0 12px; padding: 4px 8px; border-radius: var(--raio-selo); background: var(--branco); color: var(--preto); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.plano-desc { min-height: 2.8em; margin: 6px 0 20px; font-size: var(--t-peq); color: var(--cinza-texto); }
.plano-preco { display: flex; align-items: baseline; gap: 4px; margin: 0; font-family: var(--fonte-titulo); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.preco-moeda { align-self: flex-start; margin-top: 0.3em; font-size: 1.125rem; }
.preco-valor { font-size: var(--t-preco); }
.preco-per { font-family: var(--fonte); font-size: var(--t-peq); font-weight: 500; color: var(--cinza-texto); }
.plano-cobranca { min-height: 1.5em; margin: 8px 0 20px; font-size: var(--t-peq); color: var(--cinza-texto); font-variant-numeric: tabular-nums; }
.plano-horas { margin: 0 0 20px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--papel); font-size: var(--t-peq); }
.plano-resumo { display: none; margin: 0 0 20px; font-size: var(--t-peq); color: var(--cinza-texto); }
.plano-lista { flex: 1; display: grid; align-content: start; gap: 10px; margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--cinza-linha); list-style: none; }
.plano-lista li { position: relative; padding-left: 26px; font-size: var(--t-peq); color: var(--cinza-texto); }
.plano-lista li b { color: var(--preto); }
.plano-lista li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--preto); border-bottom: 2px solid var(--preto); transform: rotate(-45deg); }
.plano-lista li.em-breve::before { top: 0.7em; width: 10px; height: 0; border-left: 0; border-bottom: 2px solid var(--cinza-linha); transform: none; }  /* traço, não check */
.tag-em-breve { margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; border-radius: var(--raio-selo); font-size: var(--t-rotulo); font-weight: 600; }
.plano-comparacao { margin: -8px 0 20px; padding: 10px 12px; border-radius: var(--raio-p); font-size: var(--t-peq); font-weight: 500; }
.plano .btn { margin-top: auto; }

/* Destaque (pipoca: o mais caro em preto) */
.plano-destaque { border-color: var(--preto); background: var(--preto); color: var(--branco); box-shadow: var(--sombra-forte); }
.plano-destaque .plano-desc, .plano-destaque .plano-cobranca, .plano-destaque .preco-per, .plano-destaque .plano-lista li { color: var(--sobre-preto-suave); }
.plano-destaque .plano-lista { border-top-color: var(--sobre-preto-linha); }
.plano-destaque .plano-lista li b { color: var(--branco); }
.plano-destaque .plano-lista li::before { border-color: var(--branco); }
.plano-destaque .plano-horas, .plano-destaque .plano-comparacao { background: rgba(255, 255, 255, 0.12); }
.plano-destaque .btn-destaque { background: var(--branco); color: var(--preto); }
.plano-destaque .btn-destaque:hover { background: var(--papel); }
@media (min-width: 1024px) { .plano-destaque { transform: translateY(-12px); } }

/* Linha do Grátis, aviso e garantia */
.planos-gratis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 760px; margin: 40px auto 0; padding: 20px 24px; border: 1px dashed var(--cinza-tracejado); border-radius: var(--raio-cartao); }
.planos-gratis p { flex: 1 1 320px; margin: 0; font-size: var(--t-peq); color: var(--cinza-texto); }
.planos-gratis b { color: var(--preto); }
.planos-aviso { max-width: 640px; margin: 20px auto 0; font-size: var(--t-peq); color: var(--cinza-texto); text-align: center; }
.planos-garantia { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; font-size: var(--t-peq); font-weight: 500; text-align: center; }
.planos-garantia svg { width: 20px; height: 20px; }

/* Até tablet: uma coluna, Aprovação primeiro, Plus e Essencial compactos */
@media (max-width: 1023px) {
  .planos { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; }
  .plano-destaque { order: 1; }
  .plano[data-plano="plus"] { order: 2; }
  .plano[data-plano="essencial"] { order: 3; }
  .plano:not(.plano-destaque) .plano-lista { display: none; }
  .plano:not(.plano-destaque) .plano-resumo { display: block; }
  .plano:not(.plano-destaque) .plano-desc { min-height: 0; }
}
@media (max-width: 640px) {
  .plano { padding: 24px 20px; }
  .ciclo-opcao > span { padding: 0 14px; }
  .planos-gratis { padding: 20px; }
  .planos-gratis .btn { width: 100%; }
}

/* ===== Dúvidas ===== */
.dentro-texto { max-width: calc(var(--largura-texto) + 2 * var(--gutter)); }
.faq-grupo { margin: 32px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--preto); font-family: var(--fonte); font-size: var(--t-peq); font-weight: 700; }
.faq-grupo:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--cinza-linha); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 0; font-size: var(--t-corpo); font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--cinza-linha); border-radius: 50%; font-size: 1.125rem; font-weight: 400; line-height: 1; transition: transform var(--dur-media); }
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .faq summary:hover { text-decoration: underline; text-underline-offset: 4px; } }
.faq-resposta { padding: 0 44px 20px 0; color: var(--cinza-texto); }
.faq-resposta p { margin: 0; }
.faq-resposta a { color: var(--preto); font-weight: 600; }

/* ===== CTA final ===== */
.cta-final { padding-block: var(--secao); background: var(--preto); color: var(--branco); text-align: center; }
.cta-final h2 { max-width: 16em; margin: 0 auto 16px; font-size: var(--t-h2); }
.cta-final p { margin: 0 0 32px; font-size: var(--t-lead); color: var(--sobre-preto-suave); }
.cta-final .btn-destaque { background: var(--branco); color: var(--preto); }
.cta-final .btn-destaque:hover { background: var(--papel); }

/* ===== Rodapé ===== */
.rodape { border-top: 1px solid var(--cinza-linha); }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px 48px; padding-block: 56px 40px; }
.rodape-marca p { margin: 12px 0 0; font-size: var(--t-peq); font-weight: 500; color: var(--cinza-texto); }
.rodape-coluna { display: grid; align-content: start; justify-items: start; gap: 2px; }
.rodape-titulo { margin: 0 0 8px; font-size: var(--t-peq); font-weight: 700; color: var(--preto); }
.rodape-coluna a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-peq); color: var(--cinza-texto); text-decoration: none; }
.rodape-coluna a:hover { color: var(--preto); text-decoration: underline; text-underline-offset: 4px; }
.rodape-legal { padding-block: 24px 32px; border-top: 1px solid var(--cinza-linha); font-size: 0.8125rem; line-height: 1.6; color: var(--cinza-texto); }
.rodape-legal p { max-width: 80ch; margin: 0 0 12px; }
.rodape-legal .rodape-empresa { display: flex; flex-wrap: wrap; gap: 4px 24px; max-width: none; margin: 0; }
@media (max-width: 640px) { .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 40px 32px; } .rodape-marca { grid-column: 1 / -1; } .rodape-coluna a { min-height: 44px; } }

/* ===== CTA fixo no celular ===== */
.cta-fixo { display: none; }
@media (max-width: 640px) {
  .cta-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--cinza-linha); transform: translateY(100%); transition: transform var(--dur-media) var(--curva); }
  .cta-fixo.visivel { transform: none; }
  .cta-fixo .btn { flex: 1; min-height: 52px; }
  .cta-fixo-audio { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--cinza-linha); border-radius: 50%; background: var(--branco); color: var(--preto); }
  .cta-fixo-audio[hidden] { display: none; }
  .cta-fixo-audio svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
  .cta-fixo-audio .i-pause { display: none; }
  .cta-fixo[data-audio="tocando"] .cta-fixo-audio .i-play { display: none; }
  .cta-fixo[data-audio="tocando"] .cta-fixo-audio .i-pause { display: block; }
  .com-aviso-cookies .cta-fixo { display: none; }   /* P11: não disputar espaço com o aviso de cookies */
}

/* ---------- Autenticação ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-lado {
  position: relative; overflow: hidden; padding: 40px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--marca); color: var(--sobre-marca);
}
.auth-lado .marca { color: var(--sobre-marca); }
.auth-citacao { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; max-width: 14em; margin: 0; }
.auth-citacao-fonte { margin-top: 14px; opacity: 0.7; font-size: 0.95rem; }
.auth-lado .ondas { height: 56px; color: var(--sobre-marca); margin-bottom: 20px; }
.auth-lado .ondas i { width: 4px; }

.auth-form-area { display: grid; place-items: center; padding: 40px 20px; }
.auth-cartao { width: 100%; max-width: 400px; }
.auth-voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); text-decoration: none; font-size: 0.9rem; margin-bottom: 28px; }
.auth-voltar svg { width: 18px; height: 18px; }
.auth-cartao h1 { font-size: 2.1rem; margin: 0 0 8px; }
.auth-cartao > p { color: var(--texto-suave); margin: 0 0 24px; }

.abas { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 10px; background: var(--fundo-alt); margin-bottom: 24px; }
.abas button { border: 0; background: none; padding: 10px; border-radius: 7px; font-weight: 600; color: var(--texto-suave); }
.abas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.campo input {
  width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); font: inherit;
}
.campo input:focus { outline: none; border-color: var(--borda-forte); box-shadow: 0 0 0 3px var(--fundo-alt); }
.campo-linha { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 20px; font-size: 0.9rem; }
.campo-linha label { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); }
.campo-linha a { color: var(--texto); }

.divisor { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: 0.85rem; margin: 22px 0; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.sociais { display: grid; gap: 10px; }

.campo-linha a { margin-left: auto; }
.sociais [hidden] { display: none; }
.logo-social { width: 20px; height: 20px; stroke: none; }
.auth-msg { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid #f3c6c6; background: #fdf2f2; color: var(--perigo); font-size: 0.9rem; line-height: 1.45; }
.auth-msg[data-tipo="ok"] { border-color: #bcd6ff; background: var(--acento-suave); color: var(--preto); }
.auth-msg[hidden] { display: none; }
.so-redefinir { display: none; }
.redefinindo .so-redefinir { display: block; }
.redefinindo .so-entrar, .redefinindo .so-criar, .redefinindo .abas, .redefinindo #form, .redefinindo #sociaisBloco, .redefinindo .intencao { display: none; }
.so-criar { display: none; }
.criando .so-criar { display: block; }
.criando .so-entrar { display: none; }

/* Intenção vinda da home (plano escolhido) */
.intencao { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--preto); border-radius: var(--raio-p); font-size: var(--t-peq); line-height: 1.5; }
.intencao[hidden] { display: none !important; }   /* .criando .so-* não pode reexibir */

/* ---------- Responsivo (autenticação) ---------- */
@media (max-width: 1000px) {
  .auth { grid-template-columns: 1fr; }
  .auth-lado { display: none; }
}

/* Página de erro (404) */
.pagina-erro { max-width: 560px; margin: 0 auto; padding: 18vh 24px 48px; }
.pagina-erro .marca { margin-bottom: 40px; }
.pagina-erro h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 10px 0 12px; }
.pagina-erro > p { color: var(--texto-suave); margin: 0 0 28px; }

/* ===== Aviso de cookies (P11: só aparece com o Pixel ligado) ===== */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; max-width: 720px; margin-inline: auto; padding: 16px; border: 1px solid var(--preto); border-radius: var(--raio-cartao); background: var(--branco); box-shadow: var(--sombra-forte); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.aviso-cookies p { flex: 1 1 280px; margin: 0; font-size: var(--t-peq); }
.aviso-cookies a { color: var(--preto); font-weight: 600; }
.aviso-cookies-acoes { display: flex; gap: 8px; }

/* ===== Movimento reduzido (sempre no fim) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .i-carregando { border-style: dotted; }
}