/* A página de planos (stockerracing.com/planos/), no desenho aprovado pelo dono em 2026-10-06.
   Spec: docs/superpowers/specs/2026-10-06-landing-planos-design.md.
   As fontes são as da landing (fonts/, com o ?v= que o landing.py põe). */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/space-grotesk-latin-400-normal.woff2?v=65fd17fc") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/space-grotesk-latin-500-normal.woff2?v=1b1a8131") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/space-grotesk-latin-600-normal.woff2?v=685bbbf6") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2?v=14425ba9") format("woff2"); }

/* Layout: configurador no estilo da loja da Apple, na identidade da landing. À esquerda, fixos, a pulseira, o nome do
   plano, o preço (o herói) e o botão. À direita, em cartões: para quem é (Piloto, Equipe, Categoria) e, abaixo, só
   o que vale para essa escolha (no fim do arquivo, a v2).
   No celular vira uma coluna, com uma barra fixa embaixo com o preço e o botão. Tema único escuro, igual à landing. */
:root {
  /* o toque (HIG da Apple): desce em 200 ms, saindo rápido e assentando mais lento; volta numa mola (amortecimento .8,
     resposta .35 s, ~1,5% de passada) que leva 600 ms. A mola entra pelo @supports
     do fim do arquivo; sem linear() a volta usa a curva da descida */
  --toque-desce: cubic-bezier(.33, 1, .68, 1);
  --toque-volta: cubic-bezier(.33, 1, .68, 1);

  --preto: #000;
  --branco: #fff;
  --violeta: #5A2BD8;
  --violeta-claro: #8B6BFF;
  --cinza-texto: #A3A3A3;
  --cinza-rotulo: #8A8A8A;
  --cinza-linha: #262626;
  --cartao: rgba(255,255,255,.035);
  --vidro-fundo: rgba(0,0,0,.12);
  --vidro-borda: rgba(255,255,255,.12);
  --ouro: #e8c879;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --margem: clamp(16px, 5.5vw, 88px);
  --saida: cubic-bezier(.2, .7, 0, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--preto); color: var(--branco); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--violeta-claro); outline-offset: 3px; }
.rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-rotulo); }
.rotulo--violeta { color: var(--violeta-claro); }
/* o atributo hidden vence qualquer display do autor (.op, .v-fund, .etapa e .painel têm o seu): sem isto um passo
   escondido continua na tela e o ponto dourado do fundador fica solto */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.luz { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; opacity: .5; }

.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--margem); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.topo .botao--pequeno { white-space: nowrap; }
html { scroll-padding-top: 84px; }
@media (max-width: 900px) { html { scroll-padding-bottom: 96px; } }
@media (max-width: 600px) { .topo .botao--pequeno { padding: 0 14px; font-size: 14px; } .topo__nav { gap: 6px; } }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
/* a marca no mesmo tamanho da landing (estilo.css): 28 a 38 px; 24 px até 767 px; 18 px até 420 px (no fim) */
a.marca img { display: block; height: clamp(28px, 2.6vw, 38px); width: auto; }
@media (max-width: 767px) {
  a.marca img { height: 24px; }
  .topo__nav { gap: 8px; }
}
.topo__nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); }
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--branco); text-decoration: none; font-size: 15px; font-weight: 500; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--violeta); color: var(--branco); text-decoration: none; font: inherit; font-weight: 500; font-size: 17px; letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(139,107,255,.6) inset, 0 0 28px rgba(90,43,216,.55); transition: box-shadow .25s ease, background-color .25s ease, scale .6s var(--toque-volta);
}
.botao:hover { background: #6634ec; box-shadow: 0 0 0 1px rgba(200,185,255,.8) inset, 0 0 42px rgba(139,107,255,.7); }
.botao:focus-visible { border-radius: 999px; }
.botao--pequeno { min-height: 44px; padding: 0 18px; font-size: 15px; }

main { position: relative; z-index: 1; padding: 0 var(--margem) 140px; }
.abertura { max-width: 1320px; margin: 0 auto; padding-top: clamp(24px, 5vh, 56px); display: grid; gap: 14px; }
.titulo { font-weight: 600; letter-spacing: -0.05em; line-height: .92; font-size: clamp(46px, 7.6vw, 120px); text-wrap: balance; }
.titulo em { font-style: normal; color: var(--violeta-claro); }
.lead { color: #dcdcdc; font-size: clamp(17px, 1.35vw, 20px); max-width: 34em; }

/* ---------- configurador ---------- */
.config { max-width: 1320px; margin: clamp(36px, 6vh, 72px) auto 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.vitrine { position: sticky; top: 92px; display: grid; gap: 0; justify-items: center; text-align: center; padding-bottom: 12px; }
.palco { width: 100%; perspective: 1400px; padding: 12px 0 8px; }
.pulseira { width: 100%; transform-style: preserve-3d; will-change: transform; }
.pulseira svg { display: block; width: 100%; height: auto; overflow: visible; }
.pulseira.entra { animation: entra .9s var(--saida) both; }
@keyframes entra { 0% { opacity: 0; transform: translateY(46px) rotateX(58deg) rotateZ(-9deg) scale(.92); } 100% { opacity: 1; transform: var(--pose); } }
.v-nome { margin-top: 18px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.v-de { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--cinza-rotulo); min-height: 1.4em; }
.v-de s { color: var(--cinza-rotulo); }
.v-preco { font-weight: 600; letter-spacing: -0.06em; line-height: .9; font-size: clamp(72px, 8.6vw, 132px); font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; justify-content: center; gap: .06em; }
.v-preco .moeda { font-size: max(18px, .3em); letter-spacing: -0.02em; margin-top: .22em; font-weight: 500; color: #dcdcdc; }
.v-preco small { font-size: max(13px, .16em); letter-spacing: 0; font-weight: 400; color: var(--cinza-rotulo); align-self: flex-end; margin-bottom: .55em; margin-left: .2em; }
.v-detalhe { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--cinza-rotulo); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; min-height: 1.4em; }
.v-cta { margin-top: 24px; min-width: min(340px, 100%); }
.v-nota { margin-top: 10px; font-size: 13px; color: var(--cinza-rotulo); min-height: 1.3em; }

.etapas { display: grid; gap: clamp(40px, 6vh, 64px); }
.etapa { display: grid; gap: 14px; }
.etapa[hidden] { display: none; }
.etapa h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.etapa h2 span { color: var(--cinza-rotulo); font-weight: 500; }
.opcoes { display: grid; gap: 12px; }
.op {
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  background: var(--cartao); border: 1px solid #2f2f35; border-radius: 14px; padding: 18px 20px; min-height: 76px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, scale .6s var(--toque-volta);
}
.op:hover { border-color: #4a4a55; }
.op[aria-checked="true"] { border-color: var(--violeta-claro); box-shadow: 0 0 0 1px var(--violeta-claro) inset, 0 0 24px rgba(139,107,255,.18); background: rgba(139,107,255,.06); }
.op:focus-visible { outline-offset: 2px; border-radius: 14px; }
.op__nome { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.op__sub { grid-column: 1; font-size: 14px; color: var(--cinza-texto); }
.op__preco { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 15px; color: #dcdcdc; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op__preco small { display: block; font-size: 12px; color: var(--cinza-rotulo); }
.op__tag { white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--violeta-claro); border: 1px solid rgba(139,107,255,.45); border-radius: 999px; padding: 1px 8px; }
.op__tag--ouro { color: var(--ouro); border-color: rgba(232,200,121,.5); }
.cor { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.cor--anual { background: linear-gradient(135deg, #ffe9a3, #b8862c); }
.cor--semestral { background: linear-gradient(135deg, #f4f5f8, #9aa0ac); }
.cor--mensal { background: #6a3be6; }
.grade3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade4 .op { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 16px 8px; }
.grade4 .op__preco { grid-row: auto; grid-column: auto; text-align: center; }
.grade3 .op { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 16px 10px; }
.grade3 .op__preco { grid-row: auto; grid-column: auto; text-align: center; }
.inclui { display: grid; gap: 8px; font-size: 15px; color: var(--cinza-texto); }
.inclui li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.inclui li::before { content: ""; width: 9px; height: 1px; margin-top: 12px; background: var(--violeta-claro); }

.op--ouro { border-color: rgba(232,200,121,.35); }
.op--ouro[aria-checked="true"] { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro) inset, 0 0 28px rgba(232,200,121,.22); background: linear-gradient(120deg, rgba(232,200,121,.12), rgba(232,200,121,.02) 70%); }
.op__preco s { color: var(--cinza-rotulo); font-size: 13px; margin-right: 6px; }
.op__preco b { font-weight: 600; color: #f3dc9a; }
.v-fund { margin-top: 14px; font-size: 14px; color: #f3dc9a; display: inline-flex; align-items: center; gap: 8px; }
.v-vagas { margin-top: 10px; width: min(300px, 80%); height: 4px; border-radius: 999px; background: rgba(232,200,121,.18); overflow: hidden; }
.v-vagas i { display: block; height: 100%; background: linear-gradient(90deg, #b8862c, #ffe9a3); box-shadow: 0 0 10px rgba(232,200,121,.7); }
.v-fund::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 10px rgba(232,200,121,.85); }
.prova { max-width: 1320px; margin: 96px auto 0; display: grid; gap: 10px; }
.prova__numero { font-weight: 600; letter-spacing: -0.05em; line-height: .9; font-size: clamp(64px, 9vw, 128px); font-variant-numeric: tabular-nums; color: var(--violeta-claro); }
.prova__texto { color: #dcdcdc; font-size: clamp(17px, 1.4vw, 21px); max-width: 34em; }
/* barra fixa no celular */
.barra { display: none; }

@media (max-width: 900px) {
  .config { grid-template-columns: 1fr; }
  .vitrine { position: static; }
  .v-cta, .v-nota { display: none; }
  .barra {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(8,8,12,.86);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--vidro-borda);
  }
  .barra__preco { font-weight: 600; font-size: 22px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .barra__preco small { font-size: 12px; font-weight: 400; color: var(--cinza-rotulo); letter-spacing: 0; }
  .barra__nome { font-size: 12px; color: var(--cinza-rotulo); }
  .barra .botao { min-height: 46px; padding: 0 20px; font-size: 15px; }
}

/* perguntas */
.perguntas { max-width: 1320px; margin: 88px auto 0; display: grid; }
.perguntas .rotulo { margin-bottom: 12px; }
.perguntas details { border-top: 1px solid var(--cinza-linha); padding: 16px 0; }
.perguntas details:last-child { border-bottom: 1px solid var(--cinza-linha); }
.perguntas summary { cursor: pointer; font-size: 18px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font-family: var(--mono); color: var(--violeta-claro); }
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { color: var(--cinza-texto); margin-top: 10px; max-width: 60ch; }

/* rodapé: o mesmo da landing (estilo.css); no celular, folga para a barra fixa */
.mono { font-family: var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.assinatura { font-weight: 400; letter-spacing: .01em; color: var(--cinza-texto); font-size: 15px; }
.rodape {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px 40px;
  padding: 36px var(--margem) 40px; border-top: 1px solid var(--cinza-linha); background: #000;
}
.rodape__logo { grid-column: 1 / -1; display: block; width: 100%; height: auto; margin: 0 0 clamp(28px, 4vw, 56px); opacity: .96; }
.rodape__marca { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.rodape__marca .assinatura { font-size: 14px; }
.rodape__links { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cinza-texto); text-decoration: none; font-size: 15px; }
.rodape__links a:hover { color: #fff; }
.rodape__direitos { font-size: 12px; color: var(--cinza-rotulo); }
@media (max-width: 767px) { .rodape { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 36px; } }
@media (max-width: 900px) { .rodape { padding-bottom: calc(36px + 84px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) {
  .pulseira.entra { animation: none; }
  .botao, .op, .link, .rodape__links a { transition: none; }
}

/* topo com três itens (Planos, Entrar, Criar conta) no celular estreito: cabe em 360 px, numa linha */
/* topo com Entrar e Preços no celular de 320 px, igual à landing: só o Entrar perde 2 px de cada lado */
@media (max-width: 359px) {
  .topo .link { padding: 0 4px; }
}


/* ---------- v2 (aprovada pelo dono em 2026-10-07): quem é, depois o que vale para essa escolha ---------- */

/* as etapas ficam mais juntas: o passo 2 é continuação do passo 1 */
.etapas { gap: clamp(32px, 5vh, 52px); }
.painel { display: grid; gap: clamp(32px, 5vh, 52px); }
.painel[hidden] { display: none; }
.surge { animation: surge .32s var(--saida) both; }
@keyframes surge { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* passo 1: três cartões curtos lado a lado, sem preço */
.publico { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.op--pub { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; padding: 14px 16px 15px; }
.op--pub .op__nome { font-size: 18px; }
.op--pub .op__sub { font-size: 13px; line-height: 1.35; }

/* opções em linha: nome à esquerda, preço à direita */
.op--linha { min-height: 60px; padding: 12px 18px; }
.op--linha .op__preco { grid-row: 1 / span 2; }
.op__preco .mes { font-size: 13px; color: var(--cinza-rotulo); margin-left: 1px; }
.op__preco b + .mes { color: #c9b27a; }
.cor--passe { background: linear-gradient(135deg, #b9a6ff, #7356ea); }
.cor--sessao { background: linear-gradient(135deg, #ffffff, #cfccc4); }

/* "Ou teste antes": linha fina com rótulo */
.divisor { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-rotulo); }
.divisor::after { content: ""; flex: 1; height: 1px; background: var(--cinza-linha); }

/* quantidades (pilotos e carros) mais baixas */
.grade4 .op, .grade3 .op { min-height: 56px; padding: 10px 8px; align-content: center; }
.grade4 .op__preco { font-size: 13px; color: var(--cinza-texto); }

/* Categoria: um bloco só */
.bloco-cat { display: grid; gap: 10px; padding: 22px 22px 24px; border: 1px solid #2f2f35; border-radius: 14px; background: var(--cartao); }
.bloco-cat__de { font-family: var(--mono); font-size: 13px; color: var(--cinza-rotulo); }
.bloco-cat__preco { font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-size: clamp(36px, 3.4vw, 48px); font-variant-numeric: tabular-nums; }
.bloco-cat__preco small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--cinza-rotulo); margin-left: 4px; }
.bloco-cat__texto { color: #dcdcdc; font-size: 15px; max-width: 36em; }
.bloco-cat .inclui { margin-top: 4px; }
.bloco-cat__cta { justify-self: start; margin-top: 8px; }

@media (max-width: 900px) {
  /* no celular, o bloco da Categoria já tem o botão; a barra fixa repete */
  .bloco-cat__cta { justify-self: stretch; }
}
@media (max-width: 600px) {
  .publico { gap: 8px; }
  .op--pub { padding: 12px 8px 13px; text-align: center; justify-items: center; }
  .op--pub .op__nome { font-size: 16px; }
  .op--pub .op__sub { font-size: 12px; }
  .op--linha { padding: 12px 14px; gap: 2px 12px; }
  .op--linha .op__nome { font-size: 17px; }
  .op__tag { font-size: 10px; padding: 1px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .surge { animation: none; }
}

/* perguntas: o alvo de toque é o resumo inteiro, com pelo menos 44 px (na página atual ele tem 27 px) */
.perguntas details { padding: 8px 0; }
.perguntas summary { min-height: 44px; align-items: center; }

/* ---------- refino das opções (2026-10-07, à luz da loja da Apple e das HIG) ----------
   mesma altura e respiro em cada família; borda de 1 px quieta no normal e 2 px nítida na escolhida, sem brilho;
   nome forte, detalhe calmo, preço na linha de base do nome; hover e pressionado discretos */
:root { --borda-op: #3a3a41; --borda-op-hover: #5c5c66; --raio-op: 12px; }
.opcoes { gap: 12px; }
.op {
  border: 1px solid var(--borda-op); border-radius: var(--raio-op); background: rgba(255,255,255,.025);
  box-shadow: none; padding: 0 20px; column-gap: 16px; row-gap: 3px;
  transition: border-color .15s ease, background-color .15s ease, scale .6s var(--toque-volta);
  -webkit-tap-highlight-color: transparent;
}
.op:hover { border-color: var(--borda-op-hover); background: rgba(255,255,255,.04); }
.op:active { background: rgba(255,255,255,.06); }
.op:focus-visible { border-radius: var(--raio-op); }
/* escolhida: 2 px (1 de borda + 1 por dentro, sem pular layout), cor plena, sem halo */
.op[aria-checked="true"] { border-color: var(--violeta-claro); box-shadow: 0 0 0 1px var(--violeta-claro) inset; background: rgba(139,107,255,.07); }
.op--ouro { border-color: rgba(232,200,121,.32); }
.op--ouro:hover { border-color: rgba(232,200,121,.55); }
.op--ouro[aria-checked="true"] { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro) inset; background: rgba(232,200,121,.07); }

.op__nome { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--branco); }
.op__sub { font-size: 13px; line-height: 1.35; color: var(--cinza-texto); }
.op__preco { font-size: 15px; font-weight: 500; color: #ececec; line-height: 1.25; }
.op__preco s { font-size: 13px; font-weight: 400; margin-right: 8px; }
.op__preco b { font-weight: 600; color: #f3dc9a; }
.op__preco .mes { font-size: 13px; font-weight: 400; color: var(--cinza-rotulo); }
.op__preco b + .mes { color: var(--cinza-rotulo); }
.op__tag { font-size: 10.5px; padding: 2px 8px; line-height: 1.3; }

/* linhas de acesso e duração: todas com 76 px, conteúdo no meio, preço na linha de base do nome */
.op--linha { min-height: 76px; padding: 14px 20px; align-content: center; align-items: baseline; }
.op--linha .op__nome { grid-column: 1; grid-row: 1; }
.op--linha .op__sub { grid-column: 1 / -1; grid-row: 2; }
.op--linha .op__preco { grid-column: 2; grid-row: 1; align-self: baseline; text-align: right; }
.op--linha .op__nome .cor { align-self: center; }

/* "Para quem é?": três cartões de 88 px, nome em cima e uma linha calma */
.publico { gap: 12px; }
.op--pub { min-height: 88px; padding: 16px 18px; align-content: center; row-gap: 4px; }
.op--pub .op__nome { font-size: 17px; }
.op--pub .op__sub { font-size: 13px; }

/* carros e pilotos: mesma altura, conteúdo centrado */
.grade3 .op, .grade4 .op { min-height: 68px; padding: 10px 8px; align-content: center; row-gap: 2px; }
.grade3 .op__nome, .grade4 .op__nome { justify-content: center; }
.grade4 .op__preco { font-size: 13px; font-weight: 400; color: var(--cinza-texto); }
.nota-passo { font-size: 13px; color: var(--cinza-texto); }

/* Categoria */
.bloco-cat { border-color: var(--borda-op); border-radius: var(--raio-op); padding: 24px; gap: 8px; }
.bloco-cat__preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bloco-cat__de { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--cinza-texto); }
.bloco-cat__texto { margin-top: 2px; }
.bloco-cat .inclui { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--cinza-linha); }

@media (max-width: 600px) {
  .opcoes, .publico { gap: 10px; }
  .op--linha { min-height: 72px; padding: 12px 16px; column-gap: 12px; }
  .op--linha .op__nome { font-size: 16px; }
  /* no celular a etiqueta de fundador desce para a linha de detalhe, e a altura não muda */
  .op--linha .op__nome .op__tag { flex-basis: 100%; margin-left: 24px; width: max-content; }
  .op--pub { min-height: 84px; padding: 12px 8px; }
  .op--pub .op__nome { font-size: 16px; }
  .op--pub .op__sub { font-size: 12px; }
  .grade3 .op, .grade4 .op { min-height: 64px; }
  .op__tag { font-size: 10px; padding: 1px 6px; }
}
/* o detalhe começa onde começa o nome (depois do quadradinho de cor), e os cartões de público alinham o nome no topo */
.op--linha .op__sub { padding-left: 24px; }
.op--pub { align-content: start; }

/* retorno no toque (HIG da Apple): igual à landing (estilo.css). O cartão de opção afunda menos que o botão: é maior */
.botao:active { scale: .975; transition: box-shadow .25s ease, background-color .25s ease, scale .2s var(--toque-desce); }
.op:active { scale: .985; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, scale .2s var(--toque-desce); }
.link:active, .rodape__links a:active { opacity: .6; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .topo, .barra { -webkit-backdrop-filter: none; backdrop-filter: none; background: #08080c; }
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --toque-volta: linear(0, 0.079, 0.248, 0.436, 0.608, 0.747, 0.851, 0.922, 0.968, 0.995, 1.009, 1.014, 1.015, 1.013, 1.01, 1.008, 1.005, 1.003, 1.002, 1.001, 1, 1, 1, 1, 1); }
}

/* ---------- o vidro (guideline da Apple; dono, 2026-10-07): o mesmo material da landing (estilo.css) ----------
   Conteúdo na lâmina fosca (os cartões de opção e o bloco da Categoria): fundo escuro translúcido, desfoque de 24 px,
   cantos iguais e borda de luz fixa, mais forte em cima à esquerda. Controles no vidro líquido (a cápsula do topo com
   Entrar e Preços, os botões): desfoque curto e saturado, brilho especular por dentro e, no Chrome, a lente na borda
   (planos.js). O topo perde a faixa escura de ponta a ponta e fica com a borda de rolagem; a barra do celular flutua
   na margem, como a faixa do passeio da landing. A escolhida segue com 2 px nítidos, violeta (ou ouro) */
:root {
  --lamina-fundo: rgba(16, 12, 28, .34);
  --lamina-blur: blur(24px) saturate(1.7);
  --lamina-sombra: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px rgba(0, 0, 0, .32);
  --lamina-luz: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .05) 46%,
    rgba(185, 160, 255, .12) 70%, rgba(185, 160, 255, .5));
  --raio-g: 28px; --raio-m: 22px; --raio-p: 16px;
}
.topo { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topo::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent);
}
/* controles: vidro líquido */
.topo__nav, .botao { position: relative; }
.topo__nav {
  padding: 4px 4px 4px 14px; border-radius: 999px; gap: 10px; background: rgba(18, 14, 30, .26);
  -webkit-backdrop-filter: blur(8px) saturate(1.9) brightness(1.06); backdrop-filter: blur(8px) saturate(1.9) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .2), inset 0 -1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
}
.botao {
  background: rgba(90, 43, 216, .8);
  -webkit-backdrop-filter: blur(8px) saturate(1.9); backdrop-filter: blur(8px) saturate(1.9);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .34), inset 0 -2px 6px rgba(30, 0, 90, .45), 0 0 28px rgba(90, 43, 216, .55);
}
.botao:hover { background: rgba(102, 52, 236, .88);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .42), inset 0 -2px 6px rgba(30, 0, 90, .4), 0 0 42px rgba(139, 107, 255, .7); }
/* conteúdo: lâmina fosca */
.op, .bloco-cat {
  position: relative; border: 0; background: var(--lamina-fundo); box-shadow: var(--lamina-sombra);
  -webkit-backdrop-filter: var(--lamina-blur); backdrop-filter: var(--lamina-blur);
}
.op, .op:focus-visible { border-radius: var(--raio-m); }
.grade3 .op, .grade4 .op, .grade3 .op:focus-visible, .grade4 .op:focus-visible { border-radius: var(--raio-p); }
.bloco-cat { border-radius: var(--raio-g); }
.op:hover { background: rgba(28, 22, 46, .44); }
.op:active { background: rgba(36, 28, 60, .5); }
.op[aria-checked="true"] { background: rgba(90, 60, 200, .18); box-shadow: inset 0 0 0 2px var(--violeta-claro), var(--lamina-sombra); }
.op--ouro { box-shadow: inset 0 0 0 1px rgba(232, 200, 121, .32), var(--lamina-sombra); }
.op--ouro:hover { box-shadow: inset 0 0 0 1px rgba(232, 200, 121, .55), var(--lamina-sombra); }
.op--ouro[aria-checked="true"] { background: rgba(232, 200, 121, .09); box-shadow: inset 0 0 0 2px var(--ouro), var(--lamina-sombra); }
/* a borda de luz: um anel de 1 px no raio da peça (nos controles o mesmo, em pílula) */
.op::after, .bloco-cat::after, .topo__nav::after, .botao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: var(--lamina-luz);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.op[aria-checked="true"]::after { opacity: .5; }
@media (max-width: 900px) {
  /* a barra fixa flutua na margem, a 14 px do chão (ou da área segura) */
  .barra {
    left: var(--margem); right: var(--margem); bottom: max(14px, env(safe-area-inset-bottom, 0px));
    padding: 10px 10px 10px 20px; border: 0; border-radius: var(--raio-m);
    background: rgba(10, 8, 18, .6); -webkit-backdrop-filter: var(--lamina-blur); backdrop-filter: var(--lamina-blur);
    box-shadow: var(--lamina-sombra);
  }
  .barra::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
    background: var(--lamina-luz);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .barra .botao { min-height: 46px; }
  .rodape { padding-bottom: calc(36px + 96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) { .topo__nav { padding: 3px 3px 3px 10px; gap: 6px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .op, .bloco-cat, .barra, .topo__nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 6, 14, .92); }
  .botao { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--violeta); }
  .topo::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: #000; }
}

/* ---------- revisão Apple (2026-10-07): o mesmo topo da landing e amostras de cor redondas ----------
   O topo tinha 12 px de respiro e o da landing tem 14 no computador e 10 no celular: ao passar de uma página para a
   outra o logo e a cápsula pulavam 2 px. E a amostra da cor do plano vira círculo, como as amostras de cor da Apple e
   os pontos das legendas da landing */
.topo { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 767px) { .topo { padding-top: 10px; padding-bottom: 10px; } }
.cor { border-radius: 50%; }
@media (min-width: 768px) and (max-height: 500px) and (orientation: landscape) { .topo { padding-top: 8px; padding-bottom: 8px; } }

/* ---------- a luz do palco (dono, 2026-10-07: "falta profundidade, uma luz atrás, para dar sentido às lâminas";
   refinado no jeito da Apple) ----------
   Vidro fosco sobre preto puro vira cartão escuro: não tem o que desfocar. Como nas páginas de produto da Apple, a luz
   tem fonte e a cor vem do produto, não do ambiente:
   - um refletor de estúdio, branco e suave, cai de cima sobre a pulseira; embaixo dela, a sombra de contato e um reflexo
     discreto na cor da pulseira (--amb, o planos.js troca em pintaPulseira), como o produto refletindo no chão;
   - atrás da coluna de cartões, só a luz da marca, baixa, e os fios de luz em movimento, que passam SÓ por trás das
     lâminas (a máscara do canvas), para o vidro desfocar luz viva como na landing; atrás do texto fica limpo;
   - a cor do plano aparece em detalhe (o reflexo, a borda da escolhida, o fio do meio), nunca como névoa na página */
@property --amb { syntax: "<color>"; inherits: true; initial-value: #d9a441; }
:root { --amb: #d9a441; transition: --amb 1.4s var(--saida); }
.config { position: relative; z-index: 0; }
.config::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -16% -6% -8%;
  background:
    radial-gradient(30% 34% at 29% 16%, rgba(255, 255, 255, .085), transparent 72%),
    radial-gradient(22% 5% at 29% 37%, color-mix(in srgb, var(--amb) 26%, transparent), transparent 70%),
    radial-gradient(34% 46% at 78% 38%, rgba(110, 72, 240, .16), transparent 72%);
  filter: blur(28px);
}
/* a pulseira assenta: sombra de contato escura e curta, e um resto da cor dela no chão */
.pulseira svg { filter: drop-shadow(0 26px 18px rgba(0, 0, 0, .55)) drop-shadow(0 40px 40px color-mix(in srgb, var(--amb) 16%, transparent)); }
/* os fios só atrás da coluna de cartões (no computador); no celular, baixos */
.luz { opacity: .9; -webkit-mask: linear-gradient(to right, transparent 46%, #000 60%); mask: linear-gradient(to right, transparent 46%, #000 60%); }
@media (max-width: 900px) {
  .luz { opacity: .3; -webkit-mask: none; mask: none; }
  .config::before { inset: -4% -10% -4%;
    background:
      radial-gradient(70% 14% at 50% 6%, rgba(255, 255, 255, .085), transparent 72%),
      radial-gradient(42% 3% at 50% 17%, color-mix(in srgb, var(--amb) 26%, transparent), transparent 70%),
      radial-gradient(80% 26% at 50% 62%, rgba(110, 72, 240, .14), transparent 74%); }
}
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }
/* a borda de rolagem do topo mais firme: aqui o texto da página passa por baixo do logo (na landing é a maquete escura) */
.topo::before { inset: 0 0 -36px; background: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }