/* ═══════════════════════════════════════════════════════════════════════════
   PLANOS — uselota.com.br/planos
   ═══════════════════════════════════════════════════════════════════════════

   Folha própria, carregada só nesta página: o `secoes.css` tem 1.400 linhas da
   home, e misturar as duas faria qualquer visita à home baixar o CSS de uma
   página que ela não abriu.

   O QUE NÃO ESTÁ AQUI é de propósito. `.secao`, `.secao--peach`, `.container`,
   `.eyebrow`, `.chamada`, `.card`, `.btn`, `.tiques`, `.ico-caixa`,
   `.link-seta`, `.selo` e `.sr` vêm do `base.css` — redesenhá-los aqui criaria
   uma segunda versão de cada um, que é como um site passa a ter cinco botões
   parecidos e nenhum igual.

   Nenhuma cor escrita à mão: tudo sai dos tokens. No dia em que a marca mudar
   de laranja, esta página muda junto, sem ninguém se lembrar dela.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFIA DA PÁGINA ── */

.pl-h1 {
    font-size: clamp(29px, 3.4vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--lota-black);
    margin: 0 0 16px;
    text-wrap: balance;
}

.pl-h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--lota-black);
    margin: 0 0 14px;
    text-wrap: balance;
}

.pl-centro   { text-align: center; }
.pl-centro-p { margin-inline: auto; margin-bottom: 36px; }

/* ── ABERTURA ──
   O respiro do topo é menor que o das outras seções: o preço é o que a pessoa
   veio ver, e cada pixel antes dele é rolagem entre a intenção e a resposta. */

/* ── A ZONA DE ABERTURA ──

   O topo e os cartões dividem um fundo só. O degradê desce do bege ao branco ao
   longo dos DOIS, e termina onde os cartões terminam: quando cada um tinha o
   seu, o do primeiro morria numa linha reta no meio da tela, e o corte das
   manchas (que `overflow: hidden` faz a régua) aparecia inteiro sobre o bege. */
.pl-abertura {
    position: relative;
    overflow: hidden;
    /* ── COMO A HOME FAZ ──

       Medi o hero da home pixel a pixel antes de escrever isto: o fundo dela é
       BRANCO PURO na maior parte, e o calor vem de uma mancha concentrada no
       alto à direita, atrás da imagem — nunca de uma faixa bege atravessando a
       tela. O tom mais quente que ela alcança é o próprio `--lota-peach`.

       A diferença não é de cor, é de distribuição: faixa chapada tem duas
       bordas, e borda entre dois tons parecidos é o que se lê como corte.
       Mancha radial não tem borda nenhuma — ela acaba onde ninguém repara. */
    background:
        radial-gradient(980px 620px at 76% 6%,
            var(--lota-peach) 0%, rgba(255, 247, 243, 0) 66%),
        radial-gradient(760px 420px at 8% 96%,
            var(--lota-peach) 0%, rgba(255, 247, 243, 0) 70%),
        var(--lota-white);
}

.pl-hero {
    /* SEM SOMAR A ALTURA DO CABEÇALHO. Ele é `position: sticky`, e sticky NÃO
       SAI DO FLUXO: os 84px dele já estão acima desta seção. Somá-los ao
       padding abria 190px de vazio entre o menu e a primeira palavra — numa
       página cujo assunto é o preço, que a pessoa veio ver. */
    padding-block: 44px 40px;
}

/* Texto à esquerda e a mockup à direita. */
.pl-hero-g {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px 40px;
}

.pl-hero-i {
    width: 100%;
    max-width: 680px;
    height: auto;
    justify-self: end;
    /* A sombra vem do RECORTE, e não de uma caixa: a mockup tem fundo
       transparente, e `box-shadow` desenharia um retângulo em volta dela. */
    filter: drop-shadow(0 26px 50px rgba(17, 18, 24, .16));
}

.pl-chamada { margin: 0; }

/* A linha de benefícios herda `.tiques` — o componente já traz o tique laranja,
   o espaçamento e a quebra. */
.pl-tiques { margin: 24px 0 0; color: var(--lota-text); }

/* ── O SELETOR DE CICLO ──

   Pílula segmentada, centralizada acima dos cartões: a escolha precisa estar
   visível para ser comparada, porque é o desconto de cada ciclo que convence —
   e desconto escondido atrás de um menu não convence ninguém. */

.pl-ciclos {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    margin: 0 auto 26px;
    padding: 5px;
    background: var(--lota-light-gray);
    border-radius: var(--raio-pill);
}

.pl-ciclo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 0;
    border-radius: var(--raio-pill);
    background: none;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lota-gray);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transicao), color var(--transicao);
}

.pl-ciclo:hover { color: var(--lota-black); }

.pl-ciclo.on {
    background: var(--lota-orange);
    color: var(--lota-white);
    box-shadow: 0 2px 8px var(--lota-orange-18);
}

/* O desconto é o argumento, então ele tem corpo próprio e não some no botão
   escolhido — ali ele inverte, para continuar legível sobre o laranja. */
.pl-ciclo em {
    padding: 2px 7px;
    border-radius: var(--raio-pill);
    background: var(--lota-orange-10);
    color: var(--lota-orange);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.pl-ciclo.on em { background: rgba(255, 255, 255, .22); color: var(--lota-white); }

/* ── O PREÇO DE TABELA E A ECONOMIA ──

   O desconto só é percebido como desconto quando há com o quê comparar: "R$ 398"
   sozinho é um preço; ao lado de "R$ 497" riscado, é uma oferta. E o valor em
   reais vem junto porque porcentagem não se sente — "R$ 1.188", sim. */

.pl-oferta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -10px 0 8px;
    /* A altura fica reservada: no mensal os dois somem, e sem isto a fileira de
       cartões sobe e desce a cada clique no seletor. */
    min-height: 24px;
}

.pl-oferta s {
    font-size: 15px;
    color: var(--lota-gray);
    text-decoration-thickness: 1.5px;
}

.pl-econ {
    padding: 3px 10px;
    border-radius: var(--raio-pill);
    background: var(--verde-claro);
    color: var(--verde);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* VERDE É A COR CERTA AQUI, e só aqui nesta página: é dinheiro que fica no
   bolso de quem lê, não um estado do sistema. Na tabela comparativa o tique é
   laranja pelo motivo oposto — lá a célula diz "está incluído", não "você
   ganhou". */
.pl-econ.vazio,
.pl-convite.vazio { display: none; }

/* A FRASE DO CICLO SEM DESCONTO. Cinza e sem peso: ela não é oferta nem
   convite — é a condição do plano, dita uma vez. Em laranja competiria com o
   preço logo acima, e a página passaria a ter dois destaques no mesmo lugar. */
.pl-convite {
    font-size: 13px;
    color: var(--lota-gray);
}

/* Quanto sai do bolso naquela cobrança. Vazio no mensal — ali o valor por mês já
   é o total —, e a altura fica reservada para a fileira não dançar na troca. */
/* SEM ALTURA RESERVADA AQUI. A linha de cima (`.pl-oferta`) já guarda o espaço
   da troca de ciclo, e reservar nas duas deixava sessenta pixels de branco no
   mensal — um buraco entre o preço e o resto do cartão, que parece coisa
   faltando. */
.pl-total {
    margin: -8px 0 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--lota-gray);
}

/* A fidelidade é dita no cartão do plano que a tem, antes de assinar. Em âmbar e
   não em vermelho: é uma condição do negócio, não um erro nem um perigo. */
.pl-fidelidade {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--amarelo-claro);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--amarelo);
}

.pl-fidelidade svg { flex: 0 0 auto; margin-top: 1px; }

/* ── A GRADE DOS CARTÕES ── */

/* Os cartões ficam dentro da zona de abertura: o respiro de cima é o do hero. */
.pl-secao-grade { padding-block: 4px clamp(56px, 6vw, 88px); }

/* MAIS AR ENTRE OS ASSUNTOS. São sete seções seguidas, e com o respiro padrão
   elas encostam umas nas outras: a página vira uma rolagem contínua em que nada
   marca que o assunto mudou. */
.pl-completa,
.pl-escolha,
.pl-comp,
.pl-duvidas { padding-block: clamp(64px, 7vw, 104px); }

.pl-grade {
    display: grid;
    gap: 20px;
    /* `stretch`, e não `start`: os três cartões ficam da MESMA ALTURA, e os
       preços, os botões e os blocos de capacidade alinham entre colunas. Com
       alturas diferentes o olho tem de reencontrar cada campo em cada cartão, e
       é isso que torna a comparação cansativa. */
    align-items: stretch;
    /* `minmax(min(100%, 300px), 1fr)` e não `1fr`: uma lista longa dentro de um
       cartão estoura a coluna com `1fr`, porque o mínimo dela vira o conteúdo. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    max-width: 1120px;
    margin: 0 auto;
}

/* Canto maior e sombra baixa: o cartão deixa de ser um retângulo com borda e
   passa a ser um objeto pousado na página — que é o que separa uma grade de
   preços de uma tabela. */
.pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-2);
}

/* O DESTAQUE NÃO CRESCE, SÓ MARCA. Um cartão maior que os vizinhos desalinha os
   preços, e preço desalinhado é o que cansa quem veio comparar.

   A SOMBRA É QUASE NEUTRA, com um fio de laranja. Em .18 ela virava um halo
   aceso em volta do cartão — o laranja da marca espalhado por 40px sobre fundo
   claro lê como brilho, não como profundidade, e brilho é o que o site evita
   por escrito. Quem marca o cartão é a borda e o selo; a sombra só o levanta. */
.pl-card-destaque {
    border-color: var(--lota-orange);
    box-shadow: 0 10px 28px rgba(255, 79, 10, .09);
}

.pl-selo {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lota-orange);
    color: var(--lota-white);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
}

.pl-nome {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--lota-black);
    margin: 0 0 6px;
}

/* A descrição é a única frase que diz PARA QUEM o plano é, e em cinza claro ela
   some entre o nome e o preço — justamente a decisão que ela deveria ajudar. */
.pl-desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--lota-text);
    margin: 0 0 18px;
    /* Alinha os preços entre os cartões da fileira. Some no celular, onde eles
       ficam um embaixo do outro e isto viraria um vão em branco. */
    min-height: 3em;
}

/* ── O PREÇO ── */

.pl-preco {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.pl-valor {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--lota-black);
    line-height: 1;
    /* Os preços alinham na vertical entre os cartões: dígitos de larguras
       diferentes fazem R$ 247 e R$ 397 começarem em pontos distintos. */
    font-variant-numeric: tabular-nums;
}

/* "Sob consulta" não cabe no corpo de 40px — vira duas linhas e empurra o
   cartão inteiro para baixo, desalinhando a fileira. */
.pl-sob { font-size: 27px; letter-spacing: -.02em; }

.pl-por { font-size: 15px; color: var(--lota-gray); }

/* ── O LIMITE QUE MAIS DECIDE ──
   Sobe do meio da lista para junto do preço: "quanto custa" e "até quanto dá"
   são a mesma pergunta, e quem lê quer as duas no mesmo olhar. */

.pl-bloco {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--lota-light-gray);
    border-radius: 12px;
    padding: 15px 16px;
    margin-bottom: 16px;
}

.pl-card-destaque .pl-bloco { background: var(--lota-soft-orange); }

.pl-bloco-i { display: flex; color: var(--lota-orange); flex: 0 0 auto; }
.pl-bloco-i svg { stroke-width: 1.5; }

.pl-bloco b {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--lota-black);
}

.pl-bloco small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--lota-gray);
    /* DUAS LINHAS SEMPRE, mesmo quando o texto ocupa uma. Sem isto o cartão cujo
       perfil quebra em duas empurra o próprio botão para baixo, e os três CTAs
       param de ficar na mesma altura. */
    min-height: 2.9em;
}

/* ── O TESTE GRÁTIS ── */

.pl-trial {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--lota-gray);
    /* A ALTURA FICA RESERVADA mesmo em quem não tem teste: sem ela, o cartão sem
       trial puxa o próprio botão para cima e a fileira de CTAs desalinha. */
    min-height: 22px;
}

.pl-trial svg { color: var(--lota-orange); flex: 0 0 auto; }
.pl-trial b   { color: var(--lota-black); font-weight: 600; }
.pl-trial i   { width: 1px; height: 13px; background: var(--lota-border); }
.pl-trial-vazio { visibility: hidden; }

.pl-btn { width: 100%; justify-content: center; }

/* ── A CAPACIDADE, EM TABELA ──
   Rótulo à esquerda, número à direita. Em texto corrido os valores começam em
   pontos diferentes a cada linha, e comparar dois cartões vira leitura. */

.pl-cap-tit {
    margin: 22px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--lota-border);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--lota-gray);
}

/* UM BLOCO SÓ, com divisórias finas por dentro — e não cinco caixas empilhadas.
   Cada linha com canto e fundo próprios vira cinco objetos separados, e o olho
   para em cada um; a lista inteira é UMA informação, e se lê de uma vez. */
.pl-cap {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--lota-light-gray);
    border-radius: 12px;
    overflow: hidden;
}

/* A CAPACIDADE É CINZA EM TODOS OS CARTÕES, inclusive no destacado. Ela é DADO —
   a mesma leitura nos três —, e um fundo bege ali faz o olho ler os números do
   Pro como se fossem de outra natureza. O destaque fica onde é argumento: a
   borda, o selo, o bloco de contatos e o botão. */
.pl-cap li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    font-size: 14.5px;
    line-height: 1.3;
    border-bottom: 1px solid rgba(255, 79, 10, .09);
}

.pl-cap li:last-child { border-bottom: 0; }

/* O ícone é o que faz a linha ser VARRIDA em vez de lida: ele diz de que
   assunto é a linha antes de a palavra ser processada. Pequeno demais, vira
   enfeite, e a lista volta a ser texto corrido com números no fim. */
.pl-cap-i { display: flex; color: var(--lota-orange); flex: 0 0 auto; }
.pl-cap-n { color: var(--lota-text); }

.pl-cap b {
    margin-left: auto;
    font-weight: 700;
    color: var(--lota-black);
    /* Os números alinham entre as linhas e entre os cartões. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Sem limite" não é número e não compete com os números: ganha a pílula, para
   o olho achar de longe em que linha o plano deixa de ter teto. */
.pl-cap-inf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--raio-pill);
    background: var(--lota-orange-10);
    color: var(--lota-orange) !important;
    font-size: 12.5px;
    font-weight: 600;
}

.pl-cap-inf svg { flex: 0 0 auto; }

/* Lista simples — o ramo que desenha um arquivo do gerador antigo. */
.pl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pl-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--lota-text); }
.pl-lista svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--lota-orange); margin-top: 1px; }

/* ── SEM PLANOS PUBLICADOS ── */

.pl-vazio {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 26px;
    border: 1px solid var(--lota-border);
    border-radius: var(--raio-grande);
    background: var(--lota-white);
}

.pl-vazio h2 { font-size: 24px; font-weight: 700; color: var(--lota-black); margin: 0 0 10px; }
.pl-vazio p  { font-size: 16px; color: var(--lota-gray); margin: 0 0 24px; }

/* O caminho para a comparação, logo abaixo dos cartões. */
.pl-ir-comp { margin: 26px 0 0; text-align: center; }
.pl-ir-comp .btn { padding: 12px 22px; font-size: 15px; }
.pl-ir-comp svg { transition: transform var(--transicao); }
.pl-ir-comp .btn:hover svg { transform: translateY(2px); }

/* ── AS ZONAS DA PÁGINA ──

   `.secao--peach` do site é um gradiente branco → peach → branco: ele dá um
   brilho no meio e termina branco nas duas pontas, o que numa página de SETE
   seções seguidas faz todas parecerem a mesma. Quem rola perde a noção de ter
   mudado de assunto.

   Aqui a faixa é CHAPADA e tem borda nas duas pontas: o bloco começa e termina
   num lugar visível, e a alternância branco / bege passa a ser legível de
   relance. O tom continua baixo — é separação, não decoração. */
/* As seções com calor seguem a mesma regra: branco de base e uma mancha de um
   lado, alternando o lado a cada seção para a rolagem não ficar simétrica. Sem
   `overflow: hidden` — não há o que recortar, e era o recorte das manchas que
   desenhava a linha reta. */
.pl-faixa { position: relative; background: var(--lota-white); }

.pl-completa {
    background:
        radial-gradient(900px 560px at 6% 24%,
            var(--lota-peach) 0%, rgba(255, 247, 243, 0) 68%),
        var(--lota-white);
}

.pl-comp {
    background:
        radial-gradient(900px 560px at 94% 76%,
            var(--lota-peach) 0%, rgba(255, 247, 243, 0) 68%),
        var(--lota-white);
}

/* O conteúdo fica ACIMA da camada de manchas, que é `z-index: 0`. */
.pl-acima { position: relative; z-index: 1; }

/* AS MANCHAS, no tamanho e na posição de cada seção — é como o site já as usa
   no hero e no `desafio`. Elas dão profundidade sem desenhar nada: a página
   deixa de ser uma pilha de retângulos brancos sem virar uma página ilustrada. */
/* AS MANCHAS DESFOCADAS SAEM. O `radial-gradient` do fundo faz o mesmo trabalho
   sem precisar de `overflow: hidden` — e era o recorte delas, não o fundo, que
   desenhava a linha reta onde cada seção começava. Duas camadas do mesmo tom no
   mesmo canto também dobravam a saturação, que é o "neon" que apareceu. */
.pl-abertura .camada-blobs,
.pl-faixa .camada-blobs { display: none; }

/* ── A PLATAFORMA INTEIRA ── */

.pl-blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 18px;
}

/* O TÍTULO É A PRIMEIRA CÉLULA. Cinco grupos em três colunas deixam um buraco
   na segunda linha; com o título dentro são seis células, e a grade fecha. */
.pl-completa-t { padding: 4px 10px 4px 0; align-self: center; }
.pl-completa-t .pl-h2 {
    margin-bottom: 12px;
    /* MENOR QUE OS OUTROS TÍTULOS porque aqui ele divide a linha com os
       cartões: no corpo da seção cheia ele quebrava em quatro linhas e
       deixava "completa." sozinha na última. */
    font-size: clamp(23px, 2.3vw, 30px);
}

.pl-bloco-grupo {
    background: var(--lota-white);
    border: 1px solid var(--lota-border);
    border-radius: var(--raio);
    padding: 22px 20px;
}

.pl-bloco-cab {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.pl-bloco-cab h3 {
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--lota-black);
    margin: 0;
}

.pl-bloco-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.pl-bloco-lista li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--lota-text);
}

.pl-bloco-lista svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--lota-orange); margin-top: 2px; }

/* O QUE AINDA NÃO ESTÁ NO AR fica em cinza, com a etiqueta ao lado. Listar sem
   marcar seria prometer o que a conta nasce sem; esconder seria não dizer para
   onde o produto vai. */
.pl-breve, .pl-breve svg { color: var(--lota-gray); }

.pl-breve em {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: var(--raio-pill);
    background: var(--lota-light-gray);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--lota-gray);
    white-space: nowrap;
}

/* ── QUAL É O MEU ── */

.pl-escolha-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 18px;
    align-items: stretch;
}

.pl-escolha-c {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    border-radius: var(--raio);
}

.pl-escolha-c .ico-caixa { margin-bottom: 16px; }

.pl-escolha-c h3 {
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--lota-black);
    margin: 0 0 7px;
}

.pl-escolha-c p {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--lota-gray);
    margin: 0 0 18px;
}

/* O botão desce para o pé do cartão: os três ficam na mesma altura mesmo com
   textos de tamanhos diferentes. */
.pl-escolha-b { margin-top: auto; align-self: flex-start; padding: 12px 20px; font-size: 15px; }

/* ── COMPARATIVO ── */

.pl-comp-chamada { margin-bottom: 28px; }

/* A rolagem é DESTE contêiner. Sem isso a tabela larga empurra a página inteira
   para o lado, e o cabeçalho e o rodapé passam a rolar junto. */
/* A TABELA NÃO OCUPA A LARGURA TODA. Em 1.280px cada linha fica com um palmo de
   vazio entre o nome do recurso e o primeiro valor, e o olho perde a linha no
   caminho — é por isso que tabela larga se lê com o dedo na tela.

   O PADDING DE CIMA É ONDE A PÍLULA MORA. `overflow-x: auto` corta tudo o que
   sai da caixa de conteúdo, e a pílula precisa subir acima da primeira linha:
   o espaço reservado aqui é o que a deixa existir sem ser recortada. */
.pl-comp-rola {
    overflow-x: auto;
    max-width: 1080px;
    margin: 0 auto;
    padding-block: 26px 16px;
    -webkit-overflow-scrolling: touch;
}

/* A moldura é DA TABELA, para a pílula poder atravessá-la. `separate` com
   `spacing: 0` em vez de `collapse`: com as bordas colapsadas, o raio do
   contorno não alcança as células do canto e a tabela sai com quatro quinas
   quadradas dentro de uma caixa arredondada. */
.pl-tabela {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--lota-white);
    border: 1px solid var(--lota-border);
    border-radius: var(--raio);
    font-size: 13.5px;
}

/* AS TRÊS COLUNAS DE PLANO FICAM COM 60% e a do recurso com o resto. Sem isto a
   primeira come quase metade da tabela — o nome do recurso é o texto mais longo
   de cada linha — e os números, que são o que se compara, ficam espremidos em
   três faixas estreitas na beirada. */
.pl-tabela thead th:not(:first-child) { width: 24%; }

/* LINHAS BAIXAS. A tabela tem onze linhas e o assunto de cada uma cabe em uma
   palavra: altura de parágrafo faz a vista pular de uma para a outra e perder a
   coluna no meio do caminho. Comparar é varrer, e varrer pede densidade — a
   linha inteira tem de caber num movimento do olho, sem a cabeça acompanhar. */
.pl-tabela th,
.pl-tabela td {
    padding: 7px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(17, 18, 24, .05);
    vertical-align: middle;
}

.pl-tabela tbody tr:last-child th,
.pl-tabela tbody tr:last-child td { border-bottom: 0; }

.pl-tabela thead th:first-child { border-top-left-radius: var(--raio); }
.pl-tabela thead th:last-child  { border-top-right-radius: var(--raio); }

/* A primeira coluna é o nome do recurso: alinhada à esquerda, porque é texto
   que se lê, e não valor que se compara. */
.pl-tabela thead th:first-child,
.pl-tabela tbody th { text-align: left; font-weight: 500; color: var(--lota-gray); }

.pl-tabela thead th {
    position: relative;
    padding-block: 13px 11px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lota-black);
    background: var(--lota-light-gray);
    white-space: nowrap;
}

/* A PÍLULA ATRAVESSA A BORDA DE CIMA, metade dentro e metade fora. Dentro da
   célula ela era só mais uma linha de texto do cabeçalho; sobreposta à moldura,
   ela vira uma etiqueta pregada na coluna — e é isso que faz a faixa bege ser
   lida como uma coluna inteira, em vez de um fundo que mudou de cor no meio da
   tabela. */
/* A PÍLULA FICA ACIMA DA CÁPSULA, só encostando nela. Metade enterrada, ela
   parecia parte do fundo; pousada em cima, é uma etiqueta — e é a etiqueta que
   diz que a coluna foi escolhida, não a cor. */
.pl-tabela thead th em {
    position: absolute;
    z-index: 2;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 11px;
    border-radius: var(--raio-pill);
    background: var(--lota-orange);
    color: var(--lota-white);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 0 2px 8px rgba(255, 79, 10, .28);
}

.pl-tabela tbody td { color: var(--lota-black); font-weight: 500; }

/* A COLUNA DO RECOMENDADO em tom, não em borda: borda dentro de uma tabela vira
   uma grade concorrente e briga com as linhas que separam os recursos. */
.pl-col-on { background: var(--lota-soft-orange); }

/* O cabeçalho da coluna cresce para caber a pílula com folga, e o pé ganha a
   mesma sobra: a faixa bege passa a ter começo e fim próprios, visivelmente
   fora da moldura da tabela. */
/* ── A COLUNA DO RECOMENDADO É UMA CÁPSULA ──

   Ela sobe acima do cabeçalho e desce abaixo da última linha, em vez de começar
   e terminar junto com as células. A diferença não é enfeite: uma coluna que
   começa e acaba DENTRO da tabela é lida como células que calharam de ter o
   mesmo fundo; uma que atravessa as duas bordas é lida como uma coluna inteira,
   escolhida, com a etiqueta pregada em cima.

   Feito com pseudo-elementos, e não com padding: padding aqui aumentaria a
   altura da primeira e da última linha, e elas têm de medir o mesmo que as
   outras — é o alinhamento das linhas que faz a tabela ser varrida. */
/* OPACA. `--lota-orange-10` é `rgba(..., .10)`: a cápsula deixava ver a borda da
   tabela passando por trás dela, e uma linha cinza atravessando a faixa bege
   desmancha justamente a ideia de coluna inteira. Duas camadas empilhadas dão o
   mesmo tom sem transparência nenhuma — e sem inventar uma cor fora da paleta. */
.pl-tabela thead th.pl-col-on {
    background:
        linear-gradient(var(--lota-orange-10), var(--lota-orange-10)),
        var(--lota-soft-orange);
}
.pl-tabela tbody .pl-col-on   { position: relative; }

.pl-tabela thead th.pl-col-on::before,
.pl-tabela tbody tr:last-child .pl-col-on::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 15px;
}

/* A TAMPA DESCE 2px A MAIS do que sobe: ela precisa cobrir a borda de cima da
   tabela, senão a linha de 1px reaparece cortando a cápsula na largura da
   coluna — o defeito some quando a tampa passa por cima dela. */
.pl-tabela thead th.pl-col-on::before {
    top: -16px;
    height: 18px;
    background:
        linear-gradient(var(--lota-orange-10), var(--lota-orange-10)),
        var(--lota-soft-orange);
    border-radius: 14px 14px 0 0;
}

.pl-tabela tbody tr:last-child .pl-col-on::after {
    bottom: -16px;
    height: 18px;
    background: var(--lota-soft-orange);
    border-radius: 0 0 14px 14px;
}

/* O TIQUE É LARANJA, não verde. Verde é a cor de "deu certo", e aqui não deu
   certo nada: a célula diz que o plano INCLUI o recurso. A tabela inteira é da
   marca, e um verde no meio dela parece status de outro sistema. */
.pl-sim svg { width: 16px; height: 16px; color: var(--lota-orange); display: block; margin: 0 auto; }
.pl-nao { color: var(--lota-gray); }

/* O QUE TODOS OS PLANOS TÊM nasce recolhido: são mais de vinte linhas de tiques
   iguais, e abrir a tabela com elas esconderia as oito que decidem a compra. */
.pl-tr-comum { display: none; }
.pl-tabela.mostrar-comuns .pl-tr-comum { display: table-row; }

.pl-comp-mais { margin: 34px 0 0; text-align: center; }
.pl-comp-mais .btn { padding: 11px 20px; font-size: 14.5px; }
.pl-comp-mais svg { transition: transform var(--transicao); }
.pl-comp-mais .btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── DÚVIDAS ── */

.pl-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 0 36px;
    max-width: 1020px;
    margin: 0 auto;
}

.pl-faq-item { border-bottom: 1px solid var(--lota-border); }

.pl-faq-bt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 18px 2px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--lota-black);
    text-align: left;
    cursor: pointer;
    transition: color var(--transicao);
}

.pl-faq-bt:hover { color: var(--lota-orange); }
.pl-faq-item.aberto > .pl-faq-bt { color: var(--lota-orange); }

/* O sinal é desenhado em CSS: um "+" que vira "−" ao abrir. Dois ícones
   trocados por JS piscariam no meio da animação. */
.pl-faq-sinal { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }

.pl-faq-sinal::before,
.pl-faq-sinal::after {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 16px; height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--transicao), opacity var(--transicao);
}

.pl-faq-sinal::after { transform: rotate(90deg); }
.pl-faq-item.aberto .pl-faq-sinal::after { transform: rotate(0deg); opacity: 0; }

/* A sanfona anima pela GRADE: `height: auto` não faz transição, e medir a
   altura no JS quebra quando a fonte carrega depois. */
.pl-faq-corpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(.22, .61, .36, 1);
}

.pl-faq-item.aberto .pl-faq-corpo { grid-template-rows: 1fr; }
.pl-faq-corpo > div { min-height: 0; overflow: hidden; }

.pl-faq-corpo p {
    margin: 0;
    padding: 0 2px 20px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--lota-gray);
    max-width: 62ch;
}

/* ── TABLET ── */

@media (max-width: 1000px) {
    .pl-hero-g { grid-template-columns: 1fr; text-align: center; }
    .pl-hero-t .chamada { margin-inline: auto; }
    .pl-tiques { justify-content: center; }
    .pl-hero-i { justify-self: center; max-width: 560px; }
}

/* ── CELULAR ── */

@media (max-width: 700px) {
    .pl-hero { padding-block: calc(var(--altura-topo) + 20px) 28px; }
    .pl-tiques { gap: 10px 20px; font-size: 14px; }
    .pl-hero-i { max-width: 100%; }

    /* O seletor quebra em duas linhas em vez de rolar de lado: três botões
       escondidos fora da tela são três opções que ninguém descobre. */
    .pl-ciclos { flex-wrap: wrap; border-radius: var(--raio); }
    .pl-ciclo  { padding: 8px 14px; font-size: 14px; }

    .pl-card { padding: 24px 18px; }
    /* AS ALTURAS RESERVADAS SAEM: elas existem para alinhar os cartões na
       fileira, e aqui eles ficam um embaixo do outro — ali viram vão em branco. */
    .pl-desc,
    .pl-bloco small { min-height: 0; }
    .pl-trial-vazio { display: none; }

    .pl-bloco-grupo,
    .pl-escolha-c { padding: 20px 17px; }
    .pl-completa-t { padding: 0 0 4px; }

    /* A TABELA ROLA DE LADO, e isso é dito com um empurrão visual: a borda
       arredondada sozinha não avisa que há mais coluna à direita. */
    .pl-comp-rola {
        background:
            linear-gradient(90deg, var(--lota-white) 30%, transparent),
            linear-gradient(270deg, var(--lota-white) 30%, transparent) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(17, 18, 24, .12), transparent),
            radial-gradient(farthest-side at 100% 50%, rgba(17, 18, 24, .12), transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .pl-tabela { min-width: 540px; font-size: 14px; }
    .pl-tabela th,
    .pl-tabela td { padding: 12px 14px; }

    .pl-faq { grid-template-columns: 1fr; }
    .pl-faq-bt { font-size: 15.5px; padding: 16px 2px; }
}

/* Quem pediu menos movimento não recebe a sanfona animada — ela continua
   abrindo, só que de uma vez. */
@media (prefers-reduced-motion: reduce) {
    .pl-faq-corpo,
    .pl-comp-mais svg,
    .pl-faq-sinal::before,
    .pl-faq-sinal::after { transition: none; }
}