/* ============================================================
   FroX — Plano Grátis, Plano Frotas e matriz de recursos
   Escrito em 21/09/2026 a partir de "frox-site-plano-gratis-pro.md"
   (v2, decisões do responsável pelo produto), que trocou o teste de
   15 dias por um plano gratuito permanente + teste de 7 dias com
   cartão e cobrança automática.

   Composição (doutrina responsivo-de-cara):
   - planos: cada um na largura inteira no celular, lado a lado a
     partir de 64rem, com o pago mais largo (ele carrega a calculadora,
     que não cabe em meia tela de 360px);
   - lista do Grátis: 2 colunas no celular, para o cartão não virar
     uma pilha de linhas curtas;
   - matriz: no celular cada linha vira cartão com os DOIS planos lado
     a lado; nada de rolagem horizontal, que o Victor vetou em 15/09.
   ============================================================ */

/* ---------------------------------------------------------- planos */
/* minmax(0, 1fr) e o min-width: 0 nos filhos não são enfeite: o alternador de
   ciclo tem `width: max-content`, então, numa coluna `auto`, ele esticava a
   coluna inteira e o cartão de preço saía 58px para fora da tela em 360px. */
.planos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.plano--gratis {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.plano__head h3 { font-size: var(--t-2xl); letter-spacing: var(--tr-tight); }
.plano__sub { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--ink-3); }

.plano__valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin: 0;
}
.plano__moeda { font-size: var(--t-lg); font-weight: 700; color: var(--ink-3); }
.plano__num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--ink);
}
.plano__periodo { font-size: var(--t-sm); color: var(--ink-4); }

/* Grade automática: 2 colunas onde couber (desktop e tablet), 1 no celular.
   Medido em 390px: forçar 2 colunas aqui deixou o cartão 66px MAIS ALTO, porque
   estes itens têm 40–65 caracteres e passavam a quebrar em 4–5 linhas. */
.plano__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.plano__lista li {
  position: relative;
  min-width: 0;
  padding-left: 1.5rem;
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--ink-2);
}
.plano__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  rotate: -45deg;
}

.plano__nota {
  margin: 0;
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--ink-4);
}

/* O cartão pago já tem estilo próprio (.price-card); aqui só a coluna */
.plano--frotas { display: grid; gap: var(--s-5); min-width: 0; }
.plano--frotas > * { min-width: 0; }

/* Linha do teste de 7 dias: o link é a ação secundária e o aviso
   obrigatório vem colado nele, nunca em outra parte da página. */
.price-card__teste {
  margin-top: var(--s-3);
  text-align: center;
}
.price-card__teste-link {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 0.5rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.price-card__teste-aviso {
  display: block;
  margin-top: -0.15rem;
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--ink-4);
  text-wrap: balance;
}

/* Selo de recurso pago, ao lado de um título ou rótulo */
.selo-plano {
  display: inline-block;
  padding: 0.2em 0.55em;
  border: 1px solid oklch(var(--brand-l) var(--brand-c) var(--brand-h) / 0.35);
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  vertical-align: 0.15em;
  white-space: nowrap;
}
.section--dark .selo-plano,
.cta .selo-plano {
  border-color: var(--dark-line);
  background: transparent;
  color: var(--brand-on-dark);
}

/* ---------------------------------------------------------- matriz */
.matriz-wrap { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.matriz-t {
  margin-bottom: var(--s-4);
  font-size: var(--t-xl);
  letter-spacing: var(--tr-tight);
  text-align: center;
}
.matriz-box { border-top: 1px solid var(--line); }
.matriz { width: 100%; border-collapse: collapse; }

/* Celular: cada linha é um cartão — nome do recurso em cima, os dois
   planos lado a lado embaixo, cada valor com o nome da coluna. */
.matriz thead {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}
/* O cabeçalho continua no HTML (semântica da tabela), mas clipado em 1px. Ele
   NÃO pode herdar a grade do corpo: viraria uma grade de colunas de 0px, e a
   varredura acusa isso como texto que não cabe. */
.matriz thead tr,
.matriz thead th { display: block; }
.matriz tbody tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.matriz tbody th[scope="row"] {
  grid-column: 1 / -1;
  min-width: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.matriz tbody td { min-width: 0; padding: 0; }
.matriz tbody td::before {
  content: attr(data-rotulo);
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.matriz__v {
  display: block;
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.matriz__v.is-sim { color: var(--ink); font-weight: 600; }
.matriz__v.is-nao { color: var(--ink-4); }

/* A especificidade precisa empatar com `.matriz tbody tr`, senão a grade do
   corpo vence e as 7 linhas extras aparecem mesmo com o botão dizendo "+7". */
.matriz tbody tr.matriz__extra { display: none; }
.matriz__chk:checked ~ .matriz-box .matriz tbody tr.matriz__extra { display: grid; }

.matriz__ver {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--s-4);
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
/* O checkbox NÃO pode ser `hidden` nem `display:none`: assim ele sai da ordem
   de tabulação e quem usa teclado não consegue abrir as 7 linhas extras
   (seção 13 do documento: "conteúdo funciona em celular e por teclado").
   Escondido por opacidade, ele continua focável, e o anel de foco aparece no
   rótulo logo abaixo. */
.matriz__chk {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.matriz__ver-menos { display: none; }
.matriz__chk:checked ~ .matriz__ver .matriz__ver-mais { display: none; }
.matriz__chk:checked ~ .matriz__ver .matriz__ver-menos { display: inline; }
.matriz__chk:focus-visible ~ .matriz__ver { box-shadow: var(--focus); }

.matriz__rodape {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--ink-4);
}

/* Tablet e acima: tabela de verdade, com todas as linhas à vista */
@media (min-width: 48rem) {
  .matriz thead {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
  .matriz thead tr { display: table-row; border-bottom: 2px solid var(--line-2); }
  .matriz thead th { display: table-cell; }
  .matriz thead th {
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-display);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
  }
  .matriz tbody tr { display: table-row; padding: 0; }
  .matriz tbody th[scope="row"] { display: table-cell; padding: var(--s-3) var(--s-4); }
  .matriz tbody td { display: table-cell; padding: var(--s-3) var(--s-4); vertical-align: top; }
  .matriz tbody td::before { display: none; }
  .matriz tbody tr { border-bottom: 1px solid var(--line); }
  .matriz tbody tr.matriz__extra { display: table-row; }
  .matriz__ver { display: none; }
  .matriz-box { border-top: 0; }
  .matriz-t { text-align: left; }
}

/* Desktop: os dois planos lado a lado, o pago mais largo por causa
   da calculadora. Abaixo disso a calculadora ficaria com ~150px. */
@media (min-width: 64rem) {
  .planos {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.28fr);
    gap: var(--s-8);
  }
  .pricing { display: block; }
}

/* ------------------------------------------------- alvo de toque no celular
   A seção 13 do documento exige que o conteúdo funcione no celular. A varredura
   achou links de 19 a 28 px de altura tocável (mínimo 44): os links dentro das
   respostas do FAQ e as duas listas do rodapé. `inline-block` + padding cresce
   a caixa tocável e a linha junto, então não há duas áreas se sobrepondo.
   Só no celular: o desktop fica idêntico. */
@media (max-width: 47.99rem) {
  .faq__body a,
  .footer__cols a,
  .footer__mais a {
    display: inline-block;
    padding-block: 0.65rem;
  }
  .footer__cols a { min-height: 44px; }
}