/* ==========================================================================
   PREÇOS — reprodução de loomty.com/preco.

   Segunda versão. Na primeira eu vesti a página com a paleta do resto do site
   (laranja, cartão escuro no plano destacado) e errei: a tabela de preços tem
   linguagem PRÓPRIA na referência, ancorada no verde, e é ela que precisa ser
   reproduzida. Todos os valores abaixo saíram do CSS computado da página no
   ar — tamanhos, cores, raios, sombras e tempos de transição.

   O verde `--green` (#007a40) já é token do projeto: é o mesmo da referência,
   então a paridade visual não custou nenhuma cor nova.
   ========================================================================== */

/* ---------- abertura ----------
   O HERÓI ENCOLHEU DE PROPÓSITO (13/09/2026). Ele carregava título + lista de
   6 itens + nota + CTA; agora é só selo + frase de impacto + subtítulo curto.
   O motivo: a tabela de planos deixou de vir depois dele — `.pr-controles` e
   `.pr-planos`, logo abaixo, não pintam mais fundo próprio (ver as duas
   regras no fim deste bloco) e herdam este `var(--ink)`, então o herói e os
   cartões formam UMA superfície escura contínua. Quem abre a página vê a
   tabela sem rolar por uma lista antes. A lista de "o que já é gratuito" não
   sumiu: mudou de endereço para `.pr-base-gratis`, depois dos cartões — ver
   ali por quê. */
.pr-hero {
  background: var(--ink);
  padding: 150px var(--gutter) 64px;
  display: flex;
  justify-content: center;
}
.pr-hero__inner { width: var(--content); max-width: 100%; }
.pr-hero__title { margin-top: 11px; color: var(--paper-fa); }
.pr-hero__title .em { color: var(--orange); }
.pr-hero__sub { margin-top: 20px; max-width: 46ch; color: var(--text-grey-a1); }

/* ---------- a base gratuita, como lista de duas colunas ----------
   PORTE do `.tracos` da folha do site novo, com os mesmos números: recuo de
   22px, corpo 15/1,55, e o marcador que lá é uma BARRA de 12×1,5px — não um
   travessão de texto.

   Duas colunas com `grid-auto-flow: column` e três linhas fixas, em vez do
   `columns: 2` da origem: com fluxo de coluna a ordem de leitura é a mesma
   (1-2-3 à esquerda, 4-5-6 à direita) e nenhum item corre o risco de ser
   partido no meio entre uma coluna e outra.

   A cor do marcador e do texto é a base — pensada para a superfície ESCURA
   onde esta lista morou até 13/09/2026. `--clara`, logo abaixo, é a única
   diferença de quando ela passou a viver numa seção branca: mesma grade,
   texto escuro em vez de claro. */
.pr-gratis {
  width: var(--content); max-width: 100%;
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 56px;
}
.pr-gratis li {
  position: relative;
  padding-left: 22px;
  padding-block: 5px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-grey-a1);
}
.pr-gratis li::before {
  content: "";
  position: absolute; left: 0; top: 15px;
  width: 12px; height: 1.5px;
  background: var(--paper-fa);
}
.pr-gratis__nota {
  width: var(--content); max-width: 72ch;
  font-size: 14.5px; line-height: 1.62;
  color: var(--text-grey-a1);
}
.pr-gratis__nota strong { color: var(--paper-fa); font-weight: 700; }

/* variante clara: mesma lista, superfície branca (`.pr-base-gratis`, depois
   dos cartões). Só a cor troca — texto claro→escuro, barra clara→escura —
   nada na grade ou no espaçamento. */
.pr-gratis--clara li { color: var(--text-grey); }
.pr-gratis--clara li::before { background: var(--ink); }
.pr-gratis__nota--clara { color: var(--text-grey); }
.pr-gratis__nota--clara strong { color: var(--ink); }

/* título da seção reposicionada: mesmo `.em` do herói, cor idêntica — a
   ênfase em laranja funciona em claro ou escuro sem ajuste. */
.pr-base-gratis__title .em { color: var(--orange); }
.pr-base-gratis__cta { margin-top: 4px; }

/* ---------- controles ----------
   Branca, e a faixa preta termina no herói. Em algum momento de 13/09/2026 eu
   tirei este fundo para emendar herói e cartões num bloco escuro só — decisão
   minha, não pedida, e revertida no mesmo dia: a faixa preta é o HERÓI, e a
   tabela mora na seção branca que começa aqui. O que o pedido queria era a
   tabela LOGO ABAIXO do herói, sem a lista do que é grátis no meio (essa
   mudou para `.pr-base-gratis`, depois dos cartões) — ordem, não cor. */
.pr-controles { background: var(--paper); padding: 72px var(--gutter) 0; display: flex; justify-content: center; }
/* A LARGURA TOTAL da fileira de seletores precisa fechar exatamente com a
   largura do bloco de planos logo abaixo (var(--content)) — antes cada
   pastilha tinha uma largura própria em px (302×3, 148×2) que somava perto
   de 1280 mas não igual, e "perto" bastava para as bordas ficarem em
   colunas diferentes conforme a largura da tela. Aqui o par de pastilhas
   mora num wrapper com a MESMA largura do .pr-grade, e cada pastilha recebe
   uma fração dela (flex) em vez de uma medida fixa — a soma fecha sempre,
   em qualquer viewport. */
.pr-controles__row { width: var(--content); max-width: 100%; display: flex; gap: 16px; }
.pr-seg--abas { flex: 3; }
.pr-seg--ciclo { flex: 1; }
/* A seleção é uma PASTILHA QUE DESLIZA, não um fundo que pula de botão em
   botão. O indicador é um ::before do container, posicionado por variáveis que
   o JS mede do botão ativo; a transição roda em left/width, então o preto
   percorre o caminho entre as duas opções em vez de reaparecer do outro lado.
   Os botões ficam transparentes e só trocam a cor do texto. */
.pr-seg {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid #eaeaea;
  border-radius: var(--radius-16);
  background: var(--paper-f2);
}
.pr-seg::before {
  content: "";
  position: absolute;
  left: var(--seg-left, 4px);
  top: var(--seg-top, 4px);
  width: var(--seg-width, 0);
  height: var(--seg-height, calc(100% - 8px));
  border-radius: 12px;
  background: var(--ink);
  pointer-events: none;
}
/* a transição só entra depois que o JS mediu a primeira posição: sem isso a
   pastilha nasceria em zero e deslizaria sozinha no carregamento */
/* os quatro eixos entram na transição, não só left/width: abaixo de 860px as
   abas empilham em coluna, e sem top/height a pastilha ficaria presa na
   primeira opção enquanto o texto branco aparecia na terceira */
.pr-seg.is-pronto::before {
  transition: left .36s cubic-bezier(.16, 1, .3, 1),
              top .36s cubic-bezier(.16, 1, .3, 1),
              width .36s cubic-bezier(.16, 1, .3, 1),
              height .36s cubic-bezier(.16, 1, .3, 1);
}
/* DUAS ABAS, LADO A LADO (13/09/2026)
   "Para empresas" saiu da tabela e virou a porta da gaveta — sobraram as duas
   que respondem por quase toda a receita. Duas colunas iguais, e a fileira
   inteira continua dividida com a chave de ciclo pelo `flex` logo acima. */
.pr-seg--abas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* CONTAGEM VARIÁVEL DE PLANOS (13/09/2026)
   A grade nasceu fixa em quatro colunas e virou fixa em três. Fica variável:
   quem decide é o `--pr-cols` que o `preco.js` escreve na própria grade a cada
   troca de aba, com o número de planos do grupo. Hoje as duas portas têm três
   cada, mas a regra não volta a ser fixa — foi a contagem fixa que quebrou nas
   duas vezes anteriores. Abaixo de 860px a faixa rolável (`display:flex`)
   segue valendo: `display` não é sobrescrito aqui. */
.pr-3portas .pr-grade { grid-template-columns: repeat(var(--pr-cols, 3), minmax(0, 1fr)); }

/* ====================== A PORTA DAS EMPRESAS ======================
   Uma linha de texto entre os cartões e a matriz. Não é cartão de propósito:
   cartão pede comparação, e esta oferta não se compara com as outras — ela
   cobra por candidato, não por relatório. Fundo `--paper-f2`, o mesmo da
   moldura da grade logo acima, para ler como continuação e não como faixa
   promocional; sem borda, sem sombra, sem ícone. O peso vem do link. */
.pr-empresas {
  /* `background` não é decoração aqui: o <body> desta página é escuro e cada
     seção pinta o próprio fundo (ver .pr-controles e .pr-planos, ambas
     --paper). Sem esta linha o bloco flutuava numa faixa preta entre os
     cartões e a matriz. */
  background: var(--paper);
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) 88px;
}
.pr-empresas__txt {
  width: var(--content);
  max-width: 100%;
  margin: 0;
  padding: 22px 28px;
  border-radius: var(--radius-16);
  background: var(--paper-f2);
  font-size: 15px;
  line-height: 24px;
  color: var(--text-grey);
  text-wrap: pretty;
}
.pr-empresas__txt strong { color: var(--ink); font-weight: 700; }
.pr-empresas__link {
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pr-empresas__link span { display: inline-block; transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.pr-empresas__link:hover span { transform: translateX(3px); }
@media (max-width: 860px) {
  .pr-empresas { padding: 0 20px 40px; }
  .pr-empresas__txt { padding: 18px 20px; font-size: 14.5px; line-height: 23px; }
  .pr-empresas__link { display: block; margin: 8px 0 0; }
}

/* A PASTILHA DE ABA VOLTOU AO TAMANHO CHEIO (13/09/2026)
   Ela encolheu em 11/09 porque eram duas abas sem subtítulo dividindo a linha
   com uma chave de ciclo oculta — 640px para dez caracteres. Agora são três
   abas COM subtítulo e a chave voltou a aparecer, que é exatamente o cenário
   para o qual a fileira foi desenhada: `flex: 3` para as abas, `flex: 1` para
   a chave, borda esquerda alinhada com a grade e fecho na borda direita.
   Por isso não há mais override aqui: valem as regras base de `.pr-seg--abas`
   e `.pr-seg__btn`. */
/* A FILEIRA DE CONTROLES É UM SISTEMA SÓ (13/09/2026, revisto no mesmo dia)
   A primeira tentativa separou a chave de cobrança das abas por COR e por
   FORMA ao mesmo tempo: pista em pílula, fundo branco, borda clara, verde no
   selecionado, Plus Jakarta no lugar da Tanker e uma segunda linha de texto.
   Seis diferenças de uma vez, e o resultado foi o oposto do pretendido — o
   controle secundário ficou mais alto, mais saturado e mais chamativo que o
   primário, e a fileira virou dois sistemas gráficos empilhados.

   A correção não é diferenciar menos: é diferenciar por UMA coisa só. As duas
   pastilhas voltam a compartilhar a casca inteira — mesma pista, mesmo raio,
   mesma borda, mesmo fundo, mesma família, mesmo preto no selecionado, mesma
   altura. O que separa é ESCALA: a aba fala em 19.5px e a chave em 15px, e na
   fileira a aba ocupa três quartos da largura contra um quarto. Hierarquia por
   tamanho é o que um sistema de design faz; hierarquia por paleta paralela é o
   que ele evita.

   O verde não sumiu, mudou de posto: saiu do fundo do botão e virou o selo de
   desconto, que é a única informação ali que precisa saltar. */
.pr-seg--ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-seg--ciclo .pr-seg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 14px;
}
.pr-seg--ciclo .pr-seg__btn strong {
  display: inline;
  font-size: 15px;
  line-height: 24px;
}

/* O SELO DE DESCONTO
   Mono, como todo rótulo técnico do sistema, e em caixa alta com o mesmo
   tracking dos eyebrows. Verde sobre o verde-claro dos "incluídos" enquanto o
   botão está apagado; no selecionado ele inverte para branco sobre uma
   lavagem da própria pastilha preta, porque verde sobre preto perderia
   contraste e brigaria com o rótulo ao lado. */
.pr-seg__eco {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eaf9f0;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: .9px;
  color: var(--green);
  transition: background .25s, color .25s;
}
.pr-seg__btn[aria-checked="true"] .pr-seg__eco {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.pr-seg__btn {
  position: relative;
  z-index: 1;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  /* mesma curva e mesmos tempos da referência */
  transition: color .25s, transform .22s cubic-bezier(.16, 1, .3, 1);
}
/* font-weight: 400 explícito, e não omitido: é um <strong>, e a folha do
   navegador dá bold a ele. Como a Tanker existe só no peso 400 (ver
   fonts.css), esse bold vira negrito SINTÉTICO — o navegador engrossa o
   contorno do desenho, e a letra sai inflada, como se tivesse stroke. */
.pr-seg__btn strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18.5px;
  line-height: 18.5px;
  color: var(--text-secondary);
}
/* o <span> é sempre emitido pelo JS, vazio quando não há subtítulo — e um
   bloco vazio com margin-top continuaria empurrando a altura do botão */
.pr-seg__btn span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--text-grey-a3);
  transition: color .25s;
}
.pr-seg__btn span:empty { display: none; }
/* AS ABAS PERDERAM O SUBTÍTULO (13/09/2026): o rótulo absorveu o que ele
   dizia ("Para você que joga", "Para quem conduz jovens"). Sem a segunda
   linha, o botão fica baixo demais para a fileira — o padding compensa, e o
   texto centra, porque alinhar à esquerda só fazia sentido com duas linhas. */
.pr-seg--abas .pr-seg__btn { padding: 20px 18px; text-align: center; }
.pr-seg--abas .pr-seg__btn strong { font-size: 19.5px; line-height: 24px; }
.pr-seg__btn:hover { transform: translateY(-1px); }
.pr-seg__btn[aria-selected="true"] strong,
.pr-seg__btn[aria-checked="true"] strong { color: #fff; }
.pr-seg__btn[aria-selected="true"] span,
.pr-seg__btn[aria-checked="true"] span { color: rgba(255, 255, 255, .62); }
.pr-seg__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pr-seg--ciclo .pr-seg__btn { text-align: center; }

/* ---------- grade ----------
   .pr-grade É a moldura agora — mesma convenção de .layers__grid e
   .delivers__cards: o pai DIRETO dos cards carrega o fundo, o raio e o
   padding de 8px. Antes havia um .pr-shell por fora só para isso, e
   .pr-plano.parentElement era .pr-grade (sem fundo) — o cards-reveal.js
   descobre a moldura a animar olhando o parentElement de cada card, então
   com o wrapper extra ele nunca via nada para revelar. Sem o wrapper, os
   planos entram exatamente como os cards das outras seções: em cascata,
   com a moldura surgindo por trás quando o último already está se
   assentando — não mais um fade solto do bloco inteiro de uma vez. */
/* branca, como `.pr-controles` logo acima: as duas formam a seção da tabela,
   e daqui até o rodapé a página inteira é clara. O bottom padding é 40 e não
   56 porque `.pr-base-gratis`, a seguir, abre com os 120px próprios de
   `.layers` — somados, folga de sobra sem duplicar o respiro na emenda. */
.pr-planos { background: var(--paper); padding: 24px var(--gutter) 40px; display: flex; justify-content: center; }
.pr-grade {
  width: var(--content);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border-radius: var(--radius-16);
  background: var(--paper-f2);
}

/* ---------- cartão ---------- */
.pr-plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border-radius: 10px;
  background: var(--paper-fa);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), background .25s, border-color .25s, box-shadow .25s;
}
/* mesmo hover de .layer/.pr-regra: sobe 4px e ganha a mesma sombra — os
   cards de plano respondem ao passar do mouse igual a qualquer outro card
   claro do sistema */
.pr-plano:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 12, 12, .08); }
/* o destaque é um filete verde no topo mais uma sombra da mesma cor: o cartão
   continua claro como os outros, e é o acento que o separa */
/* O filete de topo é um pseudo-elemento absoluto, não um border-top real: um
   border de verdade soma à caixa (box-sizing: border-box) e empurra o
   conteúdo 3px para baixo só neste card — foi o que quebrava o alinhamento
   horizontal com os outros três, cujo padding-top começa exatamente no
   início da caixa. Com o filete por cima, o padding é idêntico em todos. */
.pr-plano--pop {
  box-shadow: 0 14px 32px rgba(0, 122, 64, .1);
}
.pr-plano--pop::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: var(--green);
}
.pr-plano__selo {
  position: absolute;
  top: 0;
  right: 24px;
  padding: 5px 12px;
  border-radius: 0 0 5px 5px;
  background: var(--green);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff;
}

.pr-plano__cab { margin-bottom: 0; }
.pr-plano__tier {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.pr-plano--pop .pr-plano__tier { color: var(--green); }

.pr-plano__nome {
  margin-bottom: 6px;
  /* dentro do bloco equalizado o texto some por baixo; o align garante que a
     linha extra de altura sobre para o rodapé do bloco, e não para o topo,
     que empurraria tier/nome/aud para longe do preço */

  font-family: var(--display);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -.32px;
  color: var(--ink);
}
/* 20px, metade dos 40 que havia entre o selo e os créditos (16 da nota +
   24 daqui, medidos em 13/09/2026 — pedido do Márcio de reduzir à metade).
   Agora é o único respiro depois do selo: a nota não tem mais margem
   embaixo, e o selo só tem a de cima. */
.pr-plano__precobloco { margin-bottom: 20px; }

.pr-plano__preco { display: flex; gap: 4px; margin-bottom: 6px; }
.pr-plano__meta { margin-bottom: 22px; }
/* o "R$" desce 10px para alinhar pela base do numeral, que é 4× maior */
.pr-plano__preco .cur { margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--text-grey); }
.pr-plano__preco .amt {
  font-family: var(--display);
  font-size: 54.6px;
  line-height: 54.6px;
  letter-spacing: -1.092px;
  color: var(--ink);
}
.pr-plano--pop .pr-plano__preco .amt { color: var(--green); }
.pr-plano__preco .per { margin-left: 2px; align-self: flex-end; font-family: var(--mono); font-size: 13px; color: var(--text-grey-a3); }
.pr-plano__preco .contato { font-family: var(--display); font-size: 32px; line-height: 54.6px; color: var(--ink); }

.pr-plano__nota {
  margin: -2px 0 0;
  /* DUAS LINHAS, SEMPRE (13/09/2026)
     40px = 2 × line-height. Não é só reserva: as nove notas (seis planos,
     dois ciclos) foram escritas entre 33 e 47 caracteres para preencherem
     de fato as duas linhas nas duas larguras de cartão — 252px de texto no
     desktop, 203px no celular. Uma nota de uma linha só deixaria meia linha
     branca no meio do bloco, que é exatamente o buraco que o Márcio marcou
     em 13/09. Acima de ~50 caracteres a nota vira três linhas no celular e
     desalinha a pílula abaixo dela. */
  min-height: 40px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 1.32px;
  color: var(--text-grey-a3);
}
/* O SELO, EM LINHA PRÓPRIA E EM TODO CARTÃO (13/09/2026, terceira revisão)
   Já foi bloco condicional (só quem tinha economia anual) e já foi span
   inline dentro da frase da nota. O bloco condicional deixava vão morto em
   quem não tinha selo; o inline grudava no texto e, quando a pílula não
   cabia na última linha, esticava a nota de 2 para 5 linhas.

   Agora é bloco em todo plano — `saveLabel` no anual, `badgeLabel` no resto,
   ver blocoPreco() em preco.js — e `inline-block` só para a pílula abraçar o
   próprio rótulo em vez de atravessar o cartão. Como o <p> anterior é bloco,
   ela já nasce em linha própria; os 10px de `margin-top` são o respiro entre
   a frase e a pílula que o inline não tinha como dar. */
.pr-plano__economia {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf9f0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--green);
}

.pr-plano__creditos { margin-bottom: 6px; font-size: 13px; color: var(--text-grey); }
/* dentro do bloco de meta equalizado, rollover e o campo de quantidade não
   levam mais margem própria — quem abre o respiro até o divisor é o próprio
   .pr-plano__meta, uma vez só */
.pr-plano__creditos strong { font-weight: 700; color: var(--ink); }
/* CRÉDITO E CONDIÇÃO NUMA LINHA SÓ (13/09/2026)
   Eram dois parágrafos com tratamentos diferentes — um sans com número em
   negrito, outro mono com marcador de bolinha — um terceiro vocabulário de
   ênfase dentro do mesmo cartão, competindo com o selo de economia (pílula) e
   com os ✓ dos destaques (ícone). Viraram UMA frase, separada por ' · ', no
   mesmo padrão que a Iara já fala no chat (preco-chat.js/fichaDoPlano). O
   parágrafo é .pr-plano__creditos, dois blocos acima. */

.pr-plano__divisor { height: 1px; margin-bottom: 18px; background: #eaeaea; }

/* ---------- quantidade ---------- */
.pr-qtd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  height: 46px;
  margin-bottom: 0;
  border: 1.5px solid #eaeaea;
  border-radius: var(--radius-8);
  overflow: hidden;
}
.pr-qtd__rot {
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.pr-qtd__campo {
  height: 100%;
  border: 0;
  border-left: 1.5px solid #eaeaea;
  background: transparent;
  font-family: var(--display);
  font-size: 18.6px;
  text-align: center;
  color: var(--ink);
}
.pr-qtd__campo:focus { outline: none; background: var(--paper); }

/* ---------- recursos ----------
   O ícone é máscara, não caractere: um SVG de círculo com tique recortando a
   cor de fundo. Assim o mesmo desenho serve para incluído (verde) e ausente
   (cinza) trocando só a cor, e nada depende de fonte de ícone. */
/* OS TRÊS DESTAQUES (13/09/2026)
   Ficam fora do acordeão e um degrau acima do resto: 13px contra 12px, e a
   cor do ink em vez do cinza de leitura. São os três argumentos de venda do
   plano, não uma amostra da lista — por isso não levam título de grupo. */
.pr-destaques { margin-bottom: 18px; }
.pr-destaques .pr-feat { margin-top: 9px; font-size: 13px; line-height: 18px; color: var(--ink); }
.pr-destaques .pr-feat:first-child { margin-top: 0; }

/* O ACORDEÃO
   <details> nativo: sem JS, e por isso imune à recriação dos cartões a cada
   troca de aba. O marcador padrão sai (`::-webkit-details-marker`) e entra um
   chevron que gira — o mesmo gesto do FAQ logo abaixo na página, para não
   inventar um segundo vocabulário de "abrir" na mesma tela. */
.pr-mais { flex: 1 1 auto; margin-bottom: 24px; border-top: 1px solid #eaeaea; }
.pr-mais__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--text-grey);
  transition: color .2s;
}
.pr-mais__btn::-webkit-details-marker { display: none; }
.pr-mais__btn:hover { color: var(--ink); }
.pr-mais__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.pr-mais__ic {
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}
.pr-mais[open] .pr-mais__ic { transform: translateY(1px) rotate(-135deg); }
.pr-mais[open] .pr-mais__btn { color: var(--ink); }
.pr-mais .pr-feats { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .pr-mais__ic { transition: none; } }

.pr-feats { flex: 1 1 auto; margin-bottom: 24px; }
.pr-feats__grupo {
  margin-bottom: 2px;
  padding-top: 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 13.2px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
}
.pr-feats__grupo:first-child { padding-top: 0; }
.pr-feat {
  position: relative;
  padding-left: 26px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 17.04px;
  color: #514d45;
}
.pr-feat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  background: var(--green);
  -webkit-mask: var(--icone-ok) center/16px 16px no-repeat;
  mask: var(--icone-ok) center/16px 16px no-repeat;
}
.pr-feat--no { color: var(--text-grey-a3); }
.pr-feat--no::before {
  background: #d4d4d4;
  -webkit-mask-image: var(--icone-no);
  mask-image: var(--icone-no);
}
:root {
  --icone-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icone-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

/* ---------- ação ---------- */
/* medida única de botão (--btn-*, em styles.css): eram 46 × 18. A família
   também era desvio: mono (JetBrains), quando a referência (.nav-cta e todo
   .btn) é --sans (Plus Jakarta) — nenhum outro botão do sistema usa mono. */
.pr-plano__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border: 1.5px solid #eaeaea;
  border-radius: var(--radius-8);
  background: transparent;
  font-family: var(--sans);
  font-weight: var(--btn-fw);
  font-size: var(--btn-fs);
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background .22s, color .22s, border-color .22s, transform .22s cubic-bezier(.16, 1, .3, 1);
}
.pr-plano__cta:hover { transform: translateY(-1px); border-color: var(--ink); }
.pr-plano--pop .pr-plano__cta { background: var(--green); border-color: var(--green); color: #fff; }
.pr-plano--pop .pr-plano__cta:hover { background: #006936; border-color: #006936; }

/* ---------- fluxo · regras · faq (gramática do projeto) ---------- */
.pr-fluxo__grade {
  width: var(--content);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  background: var(--card-escuro-moldura);
  border-radius: var(--radius-16);
  padding: 8px;
}
/* cartão escuro do sistema (--card-escuro-*, no :root do styles.css). Antes
   este bloco estava invertido em relação à referência: o cartão vinha em
   #171717 sobre uma moldura #0c0c0c, ou seja, mais CLARO que ela — o oposto
   da escada do .deliver, onde a moldura é o tom mais fundo. */
.pr-passo {
  background: var(--card-escuro);
  border-radius: var(--radius-8);
  padding: 26px 22px;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.pr-passo:hover {
  transform: translateY(-4px);
  background: var(--card-escuro-hover);
  box-shadow: var(--card-escuro-anel);
}
.pr-passo__num { font-family: var(--display); font-size: 33.09px; line-height: 33.4px; letter-spacing: -.662px; color: var(--accent); }
.pr-passo__ttl { margin-top: 14px; font-family: var(--display); font-size: 19px; text-transform: uppercase; color: var(--paper-fa); }
/* .64, e não .6: é a tinta de corpo do cartão escuro de referência
   (.deliver__text) — o mesmo tom em .stat__value */
.pr-passo__dsc { margin-top: 8px; font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, .64); }

.pr-regras__grade {
  width: var(--content);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: var(--paper-f2);
  border-radius: var(--radius-16);
  padding: 8px;
}
.pr-regra {
  background: var(--paper-fa);
  border-radius: var(--radius-8);
  padding: 26px 24px;
  /* mesmo tratamento de .layer (o card claro do sistema): sobe 4px e ganha
     sombra no hover */
  transition: transform .25s ease, box-shadow .25s ease;
}
.pr-regra:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 12, 12, .08); }
.pr-regra__num { font-family: var(--mono); font-weight: 700; font-size: 10.339px; letter-spacing: 1.527px; text-transform: uppercase; color: var(--accent); }
.pr-regra__ttl { margin-top: 12px; font-family: var(--display); font-size: 19px; text-transform: uppercase; color: var(--ink); }
.pr-regra__txt { margin-top: 10px; font-size: 13.5px; line-height: 21px; color: var(--text-grey); }
.pr-regra__txt strong { font-weight: 800; color: var(--ink); }

/* Cada pergunta é um BLOCO com contorno próprio — a mesma cor e espessura
   que antes desenhava a linha entre itens (1px #eaeaea) agora desenha a
   borda do bloco em repouso. O cinza preenche pergunta E resposta juntas.

   O acordeão NÃO usa <details>/<summary>: nativo, ele some/aparece de
   estalo (sem transição possível de altura) e não sabe "fechar os outros
   quando um abre" sem JS por cima mesmo assim — então aqui é só um botão
   controlando um painel via aria-expanded, com a altura animada pelo GSAP
   (ver o bloco FAQ em preco.js), que já sabe animar até height:'auto' sem
   plugin extra. */
.pr-faq { width: var(--content); max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.pr-faq-item {
  border: 1px solid #eaeaea;
  border-radius: var(--radius-8);
  background: var(--paper);
  overflow: hidden;
  transition: background-color .22s ease, border-color .22s ease;
}
.pr-faq-item:hover,
.pr-faq-item.is-aberto { background: var(--paper-f5); border-color: #e0e0e0; }

.pr-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16.5px;
  line-height: 24px;
  color: var(--ink);
}
.pr-faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* O ícone é duas barras sobrepostas formando um "+"; a de baixo (vertical)
   colapsa a altura a zero para virar "−". Girar 45° ao mesmo tempo (a
   primeira tentativa) transformava a barra restante numa diagonal solta
   ("\"), não num traço reto — sem rotação o resultado é sempre um traço só. */
.pr-faq-ic {
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--green), var(--green)) center/13px 1.6px no-repeat,
    linear-gradient(var(--green), var(--green)) center/1.6px 13px no-repeat;
  /* mesma duração do painel (ver abre()/fecha() em preco.js): sinal e
     conteúdo terminam de se mover juntos, não um esperando o outro */
  transition: background-size .28s cubic-bezier(.16, 1, .3, 1);
}
.pr-faq-item.is-aberto .pr-faq-ic { background-size: 13px 1.6px, 1.6px 0; }

/* O painel nasce com altura 0 e overflow escondido — é nele que o GSAP anima
   a altura. O padding mora no filho (.pr-faq-a__in), não aqui: padding
   embutido no elemento que vai a height:0 cria um respiro residual feio no
   instante final do fechamento, porque a caixa nunca chega a "zero" de
   verdade enquanto tem padding vertical somando à altura mínima. */
.pr-faq-a { height: 0; overflow: hidden; }
.pr-faq-a__in { padding: 0 24px 24px; font-size: 14.5px; line-height: 23px; color: var(--text-grey); }

/* O VÃO ENTRE A EMPRESA E A MATRIZ É UM SÓ (11/09/2026)
   `.pr-empresas` fecha com 88px e `.layers` abre com 120: somados, 208px de
   branco entre a linha de empresas e o selo da matriz — duas faixas brancas
   seguidas, o mesmo problema que motivou este ajuste. As duas seções tratam
   do MESMO assunto — o cartão decide, a matriz confere — então o respiro
   entre elas é o de um bloco para o próximo dentro do mesmo tema, não o de
   um tema para outro.

   ATÉ 13/09/2026 quem antecedia a matriz era `.pr-planos` (também branco na
   época); meio-dia daquele dia `.pr-planos` escureceu (ver `.pr-hero`, no
   topo do arquivo) e a costura branco-sobre-branco passou a ser entre
   `.pr-empresas` e `#comparar`, que é a que este ajuste mira agora. O escopo
   é a página nova (`.pr-3portas`) e a seção (`#comparar`), para não encolher
   o respiro das outras faixas claras nem o do clone congelado. */
.pr-3portas .pr-empresas { padding-bottom: 32px; }
#comparar { padding-top: 64px; }
@media (max-width: 860px) {
  .pr-3portas .pr-empresas { padding-bottom: 24px; }
  #comparar { padding-top: 48px; }
}

/* ---------- a matriz de recursos ----------
   Nenhum valor novo: a moldura é a de `.pr-grade` (--paper-f2, canto 16,
   8px de folga), a mesa é o cartão (--paper-fa, canto 8), o cabeçalho é a
   régua de rótulo de grupo dos cartões (mono 11/1,32px, --text-grey-a3) e o
   ✓ é o `--icone-ok` verde que o cartão já desenha. A linha divisória é a
   mesma #eaeaea das bordas de FAQ.

   A primeira coluna tem largura fixa porque é a única com texto corrido: as
   seis de plano dividem o resto em partes iguais, e é isso que mantém os
   marcadores em colunas alinhadas de cima a baixo. */
.pr-matriz__moldura {
  width: var(--content); max-width: 100%;
  background: var(--paper-f2);
  border-radius: var(--radius-16);
  padding: 8px;
}
.pr-matriz__rolo { border-radius: var(--radius-8); background: var(--paper-fa); overflow-x: auto; }
/* min-width: a sétima coluna de plano entrou em 13/09 (Empresa). Com oito
   colunas e `table-layout: fixed`, sem piso as células de marcador ficavam
   estreitas demais e o cabeçalho em mono (que é `nowrap`) vazava por cima da
   borda em vez de acionar a rolagem. Com o piso, `.pr-matriz__rolo` rola. */
.pr-matriz { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.pr-matriz__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pr-matriz thead th {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 13.2px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--text-grey-a3);
  text-align: center;
  padding: 18px 10px;
  border-bottom: 1px solid #eaeaea;
  white-space: nowrap;
}
/* `table-layout: fixed` resolve as larguras pela PRIMEIRA linha, que é o
   cabeçalho — largura posta no `tbody th` era ignorada, as sete colunas
   saíam iguais (14,3% cada) e o rótulo de recurso quebrava em duas linhas
   enquanto as colunas de marcador sobravam de espaço. */
.pr-matriz thead th:first-child { width: 30%; text-align: left; padding-left: 22px; }

.pr-matriz tbody th {
  padding: 15px 18px 15px 22px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 20px;
  color: var(--ink);
  text-align: left;
}
.pr-matriz tbody tr + tr th,
.pr-matriz tbody tr + tr td { border-top: 1px solid #eaeaea; }

.pr-matriz__c { padding: 15px 10px; text-align: center; vertical-align: middle; }
/* valor no lugar do marcador: mesma cor do ✓, para a leitura da coluna não
   trocar de significado no meio do caminho */
.pr-matriz__v {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 18px;
  color: var(--green);
  white-space: nowrap;
}
.pr-matriz__ok,
.pr-matriz__no { display: inline-block; vertical-align: middle; }
.pr-matriz__ok {
  width: 16px; height: 16px;
  background: var(--green);
  -webkit-mask: var(--icone-ok) center/16px 16px no-repeat;
  mask: var(--icone-ok) center/16px 16px no-repeat;
}
/* o "não" é traço, não ✗: ver o comentário da seção no HTML */
.pr-matriz__no { width: 12px; height: 1.5px; background: #d4d4d4; }

@media (max-width: 1180px) {
  .pr-matriz thead th:first-child { width: 26%; }
  .pr-matriz thead th { padding: 16px 8px; }
  .pr-matriz__c { padding: 13px 8px; }
}
/* abaixo de 860 a tabela rola na horizontal dentro da moldura, como a faixa
   de cartões de plano faz — e a largura mínima garante que role em vez de
   comprimir as colunas até o marcador encostar no vizinho */
@media (max-width: 860px) {
  .pr-matriz { min-width: 720px; }
  .pr-matriz thead th:first-child { width: 200px; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .pr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-seg--abas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-fluxo__grade, .pr-regras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pr-hero { padding: 130px 24px 48px; }
  .pr-gratis { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .pr-3portas .pr-seg--abas { flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* "Para quem conduz" com o subtítulo não cabe em uma linha na metade de
     337px — pedido do Márcio, 11/09 e 13/09/2026: lado a lado mesmo assim, com o
     texto encolhendo e quebrando em duas linhas em vez de estourar a
     pastilha. `white-space` volta a `normal` (o padrão do .pr-seg__btn é
     `nowrap`, pensado para a pastilha de três abas antiga, larga o
     bastante para uma linha só). */
  .pr-3portas .pr-seg__btn { padding: 10px 8px; white-space: normal; line-height: 1.15; }
  .pr-3portas .pr-seg__btn strong { font-size: 12.5px; line-height: 15px; }
  .pr-controles { padding: 48px 24px 0; }
  .pr-planos { padding: 20px 0 40px; }
  /* abaixo de 860 as duas pastilhas empilham em vez de dividir a mesma
     linha por fração — lado a lado ficariam estreitas demais para o texto.
     .pr-3portas é a exceção acima: só duas abas, e o Márcio prefere lado
     a lado com o texto menor a empilhado. */
  /* EMPILHADAS, E DA MESMA ALTURA (13/09/2026)
     Empilhadas some a divisão 3/1 que dava a hierarquia na fileira. A primeira
     tentativa compensou encolhendo a chave nos DOIS eixos — largura e altura —
     e as duas faixas passaram a ter alturas diferentes, que é justamente o que
     desalinha uma pilha.

     A hierarquia aqui é só de LARGURA: a chave abraça o próprio rótulo e
     centra, enquanto as abas ocupam a linha inteira. A altura volta a ser a
     mesma nas duas.

     `grid` com `grid-auto-rows: 1fr` no lugar de `flex-direction: column`
     porque é ele que iguala as faixas sem número mágico: numa grade de altura
     automática, `1fr` resolve para a altura da MAIOR linha. Vale mesmo quando
     "Para quem conduz jovens" quebra em duas linhas num aparelho estreito —
     um padding calculado à mão quebraria ali. */
  .pr-controles__row {
    display: grid;
    grid-auto-rows: 1fr;
    justify-items: stretch;
  }
  .pr-seg--ciclo {
    justify-self: center;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, max-content));
  }
  .pr-seg--ciclo .pr-seg__btn { padding: 10px 18px; gap: 7px; }
  .pr-seg--ciclo .pr-seg__btn strong { font-size: 13.5px; line-height: 18px; }
  .pr-seg__eco { padding: 2px 7px; font-size: 9.5px; }
  .pr-seg--abas { grid-template-columns: minmax(0, 1fr); }
  .pr-3portas .pr-seg--abas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-grade { margin: 0 24px; width: auto; }
  /* faixa rolável com encaixe: quatro colunas de 80px seriam ilegíveis, e
     empilhar quatro cartões altos obrigaria a rolar meia página para comparar
     dois planos */
  .pr-grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .pr-plano { flex: 0 0 84%; scroll-snap-align: center; }
  .pr-fluxo__grade, .pr-regras__grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- troca de conjunto ----------
   Quem dá a sensação de transição ao trocar de aba/ciclo é a entrada de cada
   card (revelaCards() em preco.js — mesma cascata do cards-reveal.js
   compartilhado), não mais um fade da grade inteira por cima disso. */
@media (prefers-reduced-motion: reduce) {
  .pr-seg.is-pronto::before { transition: none; }
}

/* ---------- respiro da seção escura ----------
   .delivers nasce com 100px em cima e só 4px embaixo — o suficiente na home,
   onde a próxima seção também é escura e o corte é proposital. Aqui a seção
   seguinte é clara (.layers), então o fim precisa do mesmo respiro do início:
   120px nos dois lados, como iara.html já faz para o mesmo componente. */
#fluxo.delivers { padding: 120px 0; align-items: center; justify-content: center; }
#fluxo .delivers__block { gap: 0; }

/* ==========================================================================
   ERRO DO CHECKOUT — dentro do cartão, embaixo do botão
   --------------------------------------------------------------------------
   A primeira versão punha o aviso acima da grade. Como a grade é um grid, o
   bloco virava uma COLUNA e a página ganhava um retângulo vazio à esquerda
   dos planos. Aqui a mensagem nasce colada no botão que a provocou, que é
   para onde quem clicou está olhando.
   ========================================================================== */

.pr-plano__erro {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(204, 51, 0, .3);
  border-radius: 8px;
  background: rgba(204, 51, 0, .06);
  color: #8c2400;
  font-size: 13px;
  line-height: 1.45;
}

/* enquanto o checkout abre, o botão diz isso e para de aceitar clique */
.pr-plano__cta.is-ocupado {
  opacity: .7;
  pointer-events: none;
}