/* =========================================================================
   AKROS — Seção 9 · Escolha o grau de autonomia

   Veio da landing page do Akros (`akros_landing_page`, componente Planos.tsx
   + customizacao/conteudo/planos.json). O CONTEÚDO é o de lá, número por
   número — é a fonte única que espelha o billing da plataforma. O DESENHO é
   o daqui: a lima (#DEF080) da landing não existe neste site, e trazê-la
   junto criaria uma segunda marca dentro da mesma página. Quem acende o
   cartão em destaque é o azul #0A80E2, o mesmo dos seis cartões da seção 7 e
   do fio do olho de todo cabeçalho.

   POR QUE ESTA SEÇÃO É ESCURA (a tabela mora em bandas.css):
   a 7 é tinta e a 9 é branca, então o claro dos dois lados já estava tomado.
   Mas a razão de verdade não é de rodízio: é que aqui o assunto vira PREÇO,
   e o corte de tom é o que separa "o que ele faz" de "quanto custa" antes de
   qualquer título ser lido. O escuro também é o único chão em que quatro
   cartões, um deles aceso, leem como vitrine em vez de tabela.

   Reaproveita de pipeline.css e estudio.css: .bloco, .faixa, .sechead.
   Reaproveita de perdas.css a RECEITA do cartão escuro (véu branco sobre
   azul fechado, fio de luz na borda de cima, sombra que afunda em vez de
   levantar) — não o arquivo: são seções distantes e copiar a receita é mais
   honesto que amarrar uma na outra.
   ========================================================================= */

/* 🩸 A SEÇÃO DEIXA DE SER UMA TELA TRAVADA, e é a caixa do piloto que obriga.
   Ela pede ~190px e a folga que sobrava no pé era de 258px a 2560×1440 mas de
   19px a 1522×693 — a janela do dono. Travada em `height:100svh`, a caixa
   cortaria em silêncio em quase toda tela, que é o defeito que este site já
   pagou caro na seção 6.

   `min-height:100svh` mantém o ritmo de um capítulo por tela onde o conteúdo
   cabe, e deixa crescer onde não cabe. Mesma solução da seção 10, e pelo mesmo
   motivo: são as duas únicas seções do site cujo conteúdo pode passar de uma
   tela. */
@media (min-width:1181px){
  #planos{
    height:auto;min-height:100svh;
    /* `.bloco` desce para 12px de pé abaixo de 820px de altura, e 12px era
       o que sobrava entre a caixa do piloto e a emenda com o branco da
       seção 10 — medido a 1522×693 e a 1280×720. Aquele aperto existia para
       a seção caber numa tela; ela não cabe mais, então o recuo volta a ser
       o que a peça pede. */
    padding-bottom:clamp(30px,4.2vh,60px);
  }
}

/* A pilha que centra o conteúdo na altura que sobrou depois do menu — mesmo
   arranjo de `.perdas__pilha` e `.fecho__pilha`. `.bloco` empilha a partir
   do topo; sem esta camada o bloco fica colado no menu e sobra vão no pé. */
.planos__pilha{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,3vh,46px);
}

/* ---------------- o cabeçalho, centrado ---------------- */
#planos .sechead{max-width:min(960px,100%);margin:0 auto;text-align:center}
/* o fio do olho fica à ESQUERDA do texto; centrado, ele empurra a linha
   inteira para a direita e o eixo do cabeçalho deixa de bater com o da
   grade. Mesma decisão das seções 5 e 7. */
#planos .sechead__eyebrow{margin-bottom:clamp(9px,1.5vh,18px);color:var(--accent-hi)}
#planos .sechead__eyebrow i{display:none}
#planos .sechead__title{
  font-size:min(clamp(1.9rem,3.4vw,3.2rem),5.2vh);
  margin-bottom:clamp(8px,1.3vh,15px);
  color:#FFFFFF;text-wrap:balance;
}
/* 56ch partia a frase em "— sem / fidelidade", com a palavra que carrega o
   argumento sozinha na segunda linha. A frase inteira tem 61 caracteres:
   66ch a deixa passar em uma linha em qualquer largura util. */
#planos .sechead__sub{max-width:66ch;margin:0 auto;color:rgba(255,255,255,.64);text-wrap:balance}
#planos .sechead__sub b{color:#FFFFFF}

/* =======================================================================
   O SELETOR MENSAL / ANUAL

   Dois botões de MESMA largura (`flex:1` + `min-width`), e isso é o que
   permite a pilha correr sem JS de medição: a pastilha tem 50% e anda um
   `translateX(100%)`. Com larguras diferentes — "Mensal" contra
   "Anual −15%" — seria preciso medir cada botão a cada resize, que é o que
   `navPill` faz no menu e não vale a pena repetir por dois itens.

   O raio passa pelo multiplicador global `--r`: hoje ele é 0 e a pastilha
   sai reta, igual ao resto do site. Se um dia `--r` voltar a 1, ela
   arredonda junto sem uma linha mudar aqui.
   ======================================================================= */
.ciclo{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:stretch;
  margin-top:clamp(14px,2.2vh,26px);
  padding:4px;
  border-radius:calc(100px * var(--r));
  background:rgba(4,16,32,.46);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.ciclo__pill{
  position:absolute;z-index:-1;top:4px;left:4px;
  width:calc(50% - 4px);height:calc(100% - 8px);
  border-radius:calc(100px * var(--r));
  background:linear-gradient(103deg,var(--accent-lo),var(--accent) 52%,var(--accent-hi));
  box-shadow:0 10px 22px -12px rgba(10,86,200,.9),inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .46s var(--ease);
}
#planos[data-ciclo="anual"] .ciclo__pill{transform:translateX(100%)}

.ciclo__b{
  flex:1;min-width:clamp(112px,11vw,150px);
  padding:9px 18px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.62);
  border-radius:calc(100px * var(--r));
  transition:color .34s var(--ease);
}
.ciclo__b[aria-pressed="true"]{color:#FFFFFF}
.ciclo__b:hover{color:#FFFFFF}
/* o −15% é informação, não ênfase: acompanha o rótulo em corpo menor e
   nunca fica mais claro que ele */
.ciclo__b i{font-style:normal;font-size:11.5px;font-weight:700;opacity:.86}

/* =======================================================================
   OS QUATRO CARTÕES

   `grid-auto-rows:1fr` iguala as alturas; sem isso o cartão do GROWTH, que
   tem uma linha a mais, faria degrau na fileira.

   1200px é a medida do `container-lp` da landing, e não os 1360 das seções 6
   e 7. Foi de propósito: a 1360 cada cartão passa de 330px e o preço, que
   agora é a peça, fica perdido numa coluna larga demais. A 1200 o quarteto
   volta a ler como uma tabela de comparação — que é o serviço que ele presta.
   ======================================================================= */
/* O NÚMERO DE COLUNAS É O NÚMERO DE PLANOS, e vem do banco.
   Era `repeat(4, ...)` cravado, de quando os planos eram quatro para sempre.
   No dia em que o ZENITH saiu de rascunho a fileira virou 4+1 e o quinto
   cartão caiu sozinho numa segunda linha. Cravar 5 só adia o mesmo defeito
   para o dia em que o TRAIL entrar.

   Quem escreve `--colunas` é o `planos.js`, com o total que a vitrine
   devolveu; o 4 do `var()` é o que vale antes do JS rodar — e é exatamente o
   que o HTML traz. Idem a largura: a fileira mede `colunas × 272px`, então
   quem entra ganha espaço em vez de espremer os vizinhos. Os 272px saíram dos
   300 originais a pedido do dono (20/09) — cartão um pouco mais estreito.
   ⚠️ O MESMO NÚMERO aparece na `.planosob` (faixa do sob-demanda), que é IRMÃ
   da grade e tem de fechar na mesma borda. Mexeu aqui, mexe lá. */
/* 🩸 O RECUO DE CIMA EXISTE POR CAUSA DO SELO, não por gosto. `.plano__selo`
   é `position:absolute; top:0` com `translateY(-50%)`: ele fica metade FORA
   do cartão, para cima. E o cartão em destaque ainda sobe outros 10px
   (`margin-block:-10px`). Somados, são ~23px que invadem o vão da pilha — e
   com o vão só do `gap`, o selo "MAIS ESCOLHIDO" encostava no seletor
   Mensal/Anual. O `gap` da pilha não resolve sozinho porque ele separa
   CAIXAS, e o selo transborda da sua. */
.planos__grade{
  list-style:none;margin:clamp(30px,5.6vh,74px) auto 0;padding:0;width:100%;
  max-width:min(calc(var(--colunas,4) * 272px),100%);
  display:grid;grid-template-columns:repeat(var(--colunas,4),minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(10px,1.5vh,20px) clamp(12px,1.15vw,20px);
}

.plano{
  position:relative;display:flex;flex-direction:column;
  /* O RECUO MORA EM VARIAVEL, e nao no atalho `padding`. O cartao aceso
     precisa somar 10px em cima e embaixo (ver `.plano--destaque`), e as
     regras de altura la' embaixo reescrevem o recuo. Se elas usassem o
     atalho, venceriam o `padding-block` do destaque por virem depois no
     arquivo — e a compensacao sumiria justo na janela baixa, onde o
     desalinhamento aparece mais. Com variavel, cada degrau muda o numero e
     o destaque continua somando os mesmos 10px sozinho. */
  --pad-t:clamp(17px,2.4vh,26px);
  --pad-x:clamp(16px,1.3vw,25px);
  --pad-b:clamp(16px,2vh,25px);
  padding:var(--pad-t) var(--pad-x) var(--pad-b);
  border-radius:calc(16px * var(--r));
  /* No claro o cartão é mais escuro que o chão; no escuro tem de ser mais
     CLARO, senão some. Um véu branco sobre o azul fechado faz isso sem
     inventar cor nova.

     CHAPADO, e não em degradê como o da seção 5. Na landing o cartão é uma
     cor só (`bg-deep-soft/40`) e o degradê que eu tinha posto aqui puxava o
     olho para o TOPO de cada peça — justo onde não mora nada. Sem ele, quem
     manda na leitura é o preço. */
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 22px 44px -26px rgba(2,10,20,.85),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
             border-color .45s var(--ease),background .45s var(--ease);
}
.plano:hover{
  transform:translateY(-3px);
  border-color:rgba(103,183,255,.42);
  box-shadow:
    0 30px 56px -28px rgba(2,10,20,.9),
    0 0 0 1px rgba(103,183,255,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* O cartão ACESO, agora como na landing: ele SAI da fileira. O `-my-2` de lá
   puxa o cartão 8px para cima e 8px para baixo, e é esse desalinhamento que
   faz o plano escolhido parecer escolhido antes de qualquer cor entrar em
   cena. Eu tinha mantido as quatro alturas iguais com o argumento de que
   "uma diferente lê como erro" — o argumento não vale quando a diferença é
   SIMÉTRICA: assim ela lê como destaque, e é o padrão de toda tabela de
   planos séria.

   Mais o halo. Na landing é um `0 0 40px` da lima a 12%; aqui é o mesmo
   recurso no azul da marca. É o que separa "cartão com borda" de "cartão
   aceso". */
.plano--destaque{
  margin-block:-10px;
  /* ...e o recuo de dentro devolve os mesmos 10px, em cima e embaixo. Sem
     isto o cartão sobe E o conteúdo dele sobe junto: nome, preço, os fios
     dos limites e cada linha de recurso ficam 10px fora de linha com os três
     vizinhos, e uma tabela de COMPARAÇÃO perde exatamente o que a faz
     comparável. Na landing isso acontece e passa porque lá o cartão é mais
     estreito e o olho não persegue a linha; aqui, medido na foto, os fios
     quase alinhavam — que é pior que não alinhar. Com a compensação, a caixa
     sai da fileira e o conteúdo fica no lugar. */
  padding-block:calc(var(--pad-t) + 10px) calc(var(--pad-b) + 10px);
  background:rgba(67,166,255,.10);
  border-color:rgba(103,183,255,.55);
  box-shadow:
    0 0 40px rgba(10,128,226,.16),
    0 26px 50px -26px rgba(2,10,20,.88),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.plano__selo{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:5px 12px;
  border-radius:calc(100px * var(--r));
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#04203F;white-space:nowrap;
  background:linear-gradient(103deg,var(--accent-hi),#8FCBFF);
  box-shadow:0 8px 18px -10px rgba(10,86,200,.8);
}

/* O nome é TÍTULO, não etiqueta. Na landing ele é `font-display text-lg
   font-bold` — 18px, peso cheio, sem espaçamento de caixa-alta. Eu tinha
   feito 13px com 0,14em de tracking, que é a receita de RÓTULO: o nome do
   plano virava legenda do cartão em vez de encabeçá-lo. Aqui ele sobe de
   corpo e perde quase todo o tracking; a caixa-alta fica porque é como os
   nomes estão escritos na fonte única (`planos.json`). */
.plano__nome{
  font-size:clamp(1.02rem,1.08vw,1.18rem);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  color:#FFFFFF;
}
/* ...e o posicionamento volta a ser LEGENDA. Estava no azul de destaque, e
   com o preço agora também em azul os dois brigavam dentro do mesmo cartão.
   Uma cor de destaque por peça; aqui ela é do preço. */
.plano__pos{
  margin-top:4px;
  font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.62);
}

/* ---------------- o preço ----------------
   O valor riscado e a linha de economia só existem no ciclo anual; no mensal
   eles saem do fluxo em vez de ficarem invisíveis, senão os quatro cartões
   carregariam 34px de vão morto o tempo todo. */
.plano__valor{margin-top:clamp(10px,1.6vh,18px)}
.plano__de{
  display:block;font-size:13px;color:rgba(255,255,255,.48);
  text-decoration:line-through;
}
/* 🩸 A MAIOR DIFERENÇA para a landing estava aqui. Lá o preço é
   `font-display text-3xl font-bold text-lima` — 30px, peso cheio, NA COR DA
   MARCA. Eu tinha feito branco, no mesmo tom do nome e das linhas de
   recurso: o número desaparecia num cartão em que tudo era branco, e a
   seção deixava de ter assunto. Em azul e com corpo maior, o olho encontra
   os quatro preços antes de ler uma palavra — que é o que uma tabela de
   planos tem de fazer. */
.plano__preco{
  font-size:clamp(1.62rem,1.95vw,2.05rem);font-weight:700;letter-spacing:-.032em;
  color:var(--accent-hi);
}
.plano__mes{font-size:13.5px;color:rgba(255,255,255,.58)}
.plano__economia{
  display:block;margin-top:4px;
  font-size:12px;font-weight:600;color:rgba(103,183,255,.82);
}
.plano__setup{
  display:block;margin-top:4px;
  font-size:12px;color:rgba(255,255,255,.55);
}
#planos[data-ciclo="mensal"] .plano__de,
#planos[data-ciclo="mensal"] .plano__economia{display:none}

/* 🩸 PLANO SOB DEMANDA (`forma_cobranca = 'fatura'` no banco — hoje o ZENITH).
   Ele não tem mensal, anual, economia nem setup: tem conversa. Esconder pelo
   atributo `hidden` do JS NÃO funciona aqui — `.plano__de`, `.plano__economia`
   e `.plano__setup` logo acima declaram `display:block`, e declaração de autor
   vence o `display:none` que o navegador dá ao `[hidden]`. O elemento ficaria
   visível e a prova passaria mesmo assim, porque `el.hidden` seria `true`.
   Por atributo, o CSS manda — e some sozinho quando o plano ganha preço. */
.plano[data-sob-demanda] .plano__de,
.plano[data-sob-demanda] .plano__mes,
.plano[data-sob-demanda] .plano__economia,
.plano[data-sob-demanda] .plano__setup{display:none}

/* ---------------- os limites ----------------
   Quatro números em grade de 2×2, cercados por fio em cima e embaixo: é a
   ficha técnica do plano, e separá-la da lista de recursos é o que impede o
   cartão de virar uma lista só, de nove itens, em que nada tem peso. */
.plano__limites{
  list-style:none;margin:clamp(12px,1.8vh,18px) 0 0;padding:clamp(10px,1.4vh,14px) 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:11.5px;color:rgba(255,255,255,.62);
}
.plano__limites b{color:#FFFFFF;font-weight:600}

/* ---------------- o que inclui ---------------- */
/* 13,5px — o `text-sm` da landing. A 12,5 que eu tinha, a lista lia como
   nota de rodapé do cartão; é ela que descreve o que se está comprando. */
.plano__inclui{
  list-style:none;margin:clamp(12px,1.7vh,17px) 0 0;padding:0;
  flex:1;display:flex;flex-direction:column;gap:clamp(6px,.9vh,9px);
  font-size:13.5px;line-height:1.42;color:rgba(255,255,255,.82);
}
.plano__inclui li{display:flex;gap:9px;align-items:flex-start}
.plano__inclui svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--accent-hi)}
/* o que NÃO entra fica no mesmo lugar e no mesmo corpo, só apagado: dizer o
   que falta é o que permite comparar. Escondê-lo transformaria a grade em
   quatro anúncios em vez de uma escada. */
.plano__inclui li.nao{color:rgba(255,255,255,.45)}
.plano__inclui li.nao svg{color:rgba(255,255,255,.34)}
.plano__mais{
  margin-top:2px;font-size:13.5px;font-weight:600;color:rgba(103,183,255,.82);
}

/* ---------------- o botão do cartão ----------------
   TRÊS CHEIOS E UM DE LINHA, como na landing: lá os três primeiros planos
   levam o botão de conversa e só o SCALE leva o `outline`, porque ele é o
   único cujo caminho é "falar com um especialista" em vez de "começar".

   Eu tinha feito o contrário — um cheio e três de linha — com o argumento de
   que quatro botões iguais não escolhem nada. O argumento não se sustenta
   aqui: quem escolhe já é o cartão aceso, que sai da fileira, tem halo e
   carrega o selo. O botão não precisa repetir a escolha, precisa deixar
   CLICAR — e três botões apagados diziam que só um plano estava à venda. */
.plano__cta{
  display:block;margin-top:clamp(14px,2vh,21px);
  padding:12px 16px;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  border-radius:calc(100px * var(--r));
  border:1px solid transparent;color:#FFFFFF;
  background:linear-gradient(103deg,var(--accent-lo),var(--accent) 48%,var(--accent-hi));
  box-shadow:var(--sh-btn);
  transition:background .34s var(--ease),border-color .34s var(--ease),
             transform .34s var(--ease-pop),box-shadow .34s var(--ease);
}
.plano__cta:hover{
  transform:translateY(-1.5px);
  box-shadow:0 18px 36px -12px rgba(10,86,200,.7),inset 0 1px 0 rgba(255,255,255,.35);
}
/* o SCALE: outra ação, outro peso */
.plano__cta--linha{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
  box-shadow:none;
}
.plano__cta--linha:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);
  box-shadow:none;
}

/* ---------------- o plano SOB DEMANDA, em faixa ----------------
   O ZENITH não cabe na fileira e não deve caber: ele não tem preço de tabela,
   tem conversa. Espremido como sexta coluna ele lia como "o mais caro"; numa
   faixa própria, larga, ele lê como o que é — o plano desenhado sob medida.

   A FÔRMA É A MESMA DO CARTÃO, de propósito: mesmo `rgba(255,255,255,.05)` de
   véu, mesma família de borda, e o canto passando por `var(--r)` como todo
   canto do site (hoje 0 = reto). O que muda é a INTENSIDADE — véu azul mais
   forte que o do destaque e uma borda acesa —, não o vocabulário. Bloco novo
   com desenho próprio viraria remendo colado na seção. */
.planosob{
  position:relative;
  margin:clamp(22px,3.4vh,44px) auto 0;
  width:100%;max-width:min(calc(var(--colunas,4) * 272px),100%);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) minmax(0,.72fr);
  gap:clamp(16px,1.6vw,34px);align-items:center;
  padding:clamp(20px,2.6vh,30px) clamp(18px,1.5vw,30px);
  border-radius:calc(16px * var(--r));
  background:
    linear-gradient(104deg,rgba(67,166,255,.16),rgba(67,166,255,.05) 46%,rgba(255,255,255,.04));
  border:1px solid rgba(103,183,255,.46);
  box-shadow:
    0 30px 60px -30px rgba(2,10,20,.9),
    0 0 0 1px rgba(67,166,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}
/* sem plano sob demanda no banco o planos.js esconde a faixa por `hidden`
   (F7: ela não é mais apagada, os textos dela são da aba Site). O
   `display:grid` acima venceria o `display:none` do navegador. */
.planosob[hidden]{display:none}
/* o fio aceso do topo — o mesmo gradiente do selo, virado em régua */
.planosob::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-hi),#8FCBFF,transparent);
}
.planosob__selo{
  display:inline-block;margin-bottom:9px;padding:5px 12px;
  border-radius:calc(100px * var(--r));
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#04203F;white-space:nowrap;
  background:linear-gradient(103deg,var(--accent-hi),#8FCBFF);
  box-shadow:0 8px 18px -10px rgba(10,86,200,.8);
}
.planosob__nome{
  margin:0;font-size:clamp(1.3rem,1.55vw,1.7rem);font-weight:700;
  letter-spacing:.02em;color:#FFFFFF;text-transform:uppercase;
}
.planosob__pos{margin:3px 0 0;font-size:12.5px;color:rgba(255,255,255,.62)}
.planosob__frase{
  margin:10px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.76);
}
.planosob__frase em{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent-hi);
}
.planosob__limites{
  list-style:none;margin:0 0 10px;padding:0 0 10px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:11.5px;color:rgba(255,255,255,.66);
}
.planosob__limites b{color:#FFFFFF;font-weight:600}
.planosob__inclui{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px;
  font-size:12px;line-height:1.35;color:rgba(255,255,255,.82);
}
.planosob__inclui li{display:flex;gap:7px;align-items:flex-start}
.planosob__inclui svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--accent-hi)}
.planosob__dir{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.planosob__preco{
  font-size:clamp(1.24rem,1.5vw,1.6rem);font-weight:700;letter-spacing:-.02em;
  color:var(--accent-hi);text-align:center;
}
.planosob__nota{
  margin:0;font-size:11px;line-height:1.4;color:rgba(255,255,255,.55);text-align:center;
}
.planosob__cta{
  display:block;text-align:center;text-decoration:none;
  padding:11px 18px;border-radius:calc(10px * var(--r));
  font-size:13px;font-weight:600;color:#04203F;
  background:linear-gradient(103deg,var(--accent-hi),#8FCBFF);
  box-shadow:0 14px 30px -12px rgba(10,86,200,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.planosob__cta:hover{transform:translateY(-1px);box-shadow:0 18px 36px -12px rgba(10,86,200,.85)}

/* Abaixo de 1180px a fileira já virou 2 colunas; a faixa acompanha e empilha,
   senão as três colunas dela viram three fios de 90px. */
@media (max-width:1180px){
  .planosob{grid-template-columns:1fr;gap:clamp(14px,2vh,22px)}
  .planosob__dir{max-width:340px;margin:0 auto}
}
@media (max-width:640px){
  .planosob__limites,.planosob__inclui{grid-template-columns:1fr}
}

/* ---------------- a âncora de valor ----------------
   Uma linha só, no pé, centrada. É a frase que dá escala ao número — sem
   ela o preço fica sozinho e o leitor não tem contra o que compará-lo. */
.planos__ancora{
  /* O `gap` da pilha sozinho deixava a frase quase encostada na borda de
     baixo dos cartões, e ela é uma frase de FECHO — precisa ler como
     comentário da fileira, não como rodapé colado nela. */
  margin:clamp(34px,6.2vh,82px) auto 0;max-width:74ch;text-align:center;
  font-size:clamp(.86rem,.95vw,1rem);line-height:1.5;
  color:rgba(255,255,255,.6);
  /* centrada e sem isto, a quebra cai onde a largura acaba: sobrava
     "1.000 leads por" numa linha e "mes," na outra, partindo o numero da
     unidade. `balance` reparte as duas linhas por igual. */
  text-wrap:balance;
}
.planos__ancora b{color:#FFFFFF;font-weight:600}
.planos__ancora em{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--accent-hi);letter-spacing:-.01em;
}

/* A CAIXA DO PILOTO saiu daqui em 07/10: virou a seção 9½ (css/piloto.css).
   A altura livre de #planos (acima) fica: os cartões ainda passam de uma tela
   baixa, e travar de novo cortaria em silêncio. */

/* =======================================================================
   RESPONSIVO — os mesmos degraus de altura das seções 3, 4, 5 e 7.

   A seção tem `height:100svh` no desktop (regra de `.bloco`), então cada
   degrau aqui é uma medida, não um gosto: em janela baixa a fileira de
   quatro cartões é o que estoura primeiro, e o que se corta é padding,
   entrelinha e corpo de texto — nunca uma linha de conteúdo.
   ======================================================================= */
@media (min-width:1181px) and (max-height:1040px){
  .planos__pilha{gap:clamp(16px,2.6vh,34px)}
  /* Os dois recuos novos encolhem junto com o resto — em janela baixa eles
     são vão, e vão é o primeiro a ser espremido. O da grade nunca desce
     abaixo dos ~12px que o selo precisa para não tocar o seletor. */
  .planos__grade{margin-top:clamp(20px,3.4vh,44px)}
  .planos__ancora{margin-top:clamp(22px,3.8vh,50px)}
  .plano{--pad-t:clamp(14px,2.1vh,24px);--pad-x:clamp(14px,1.15vw,21px);--pad-b:clamp(13px,1.8vh,21px)}
  .plano__inclui{font-size:12px;gap:clamp(4px,.7vh,7px)}
}
@media (min-width:1181px) and (max-height:860px){
  /* 🩸 AQUI EU ESCONDIA O SUBTITULO, e isso estava errado. "Faca upgrade ou
     downgrade a qualquer momento — sem fidelidade" e' CONTEUDO: e' a frase
     que responde "e se eu me arrepender?" antes de o preco ser lido, e ela
     existe na landing. Escondi para o resto caber, e o dono abriu o site
     numa janela de 693px de altura — onde a regra pega — e viu uma secao
     sem a linha que a landing tem.

     Conteudo e' a ULTIMA coisa que se corta. Os ~20px que a linha pede saem
     de vao, recuo e margem, que e' o que existe para ser espremido: o vao da
     pilha desce de 2,1vh para 1,5vh, a margem do seletor de 1,6vh para 1vh e
     o botao do cartao perde 1px de recuo. Medido a 1522x693: com a linha de
     volta ainda sobram 15px de folga no pe'. */
  .planos__pilha{gap:clamp(10px,1.5vh,20px)}
  #planos .sechead__sub{font-size:.86rem;line-height:1.4}
  .ciclo{margin-top:clamp(7px,1vh,12px)}
  .ciclo__b{padding:7px 15px;font-size:12.5px}
  /* ⚠️ O PISO DE 28px NÃO É FOLGA, É O SELO. Ele transborda ~23px para cima
     do cartão (`translateY(-50%)` + os 10px do destaque). Medido a 1366×768
     com 2vh: sobravam SEIS pixels entre o selo e o botão "Anual" — encostado.
     Vão pode encolher; o que o selo ocupa, não. */
  .planos__grade{gap:clamp(8px,1.1vh,14px) clamp(10px,1vw,17px);margin-top:clamp(28px,4.4vh,38px)}
  .planos__ancora{margin-top:clamp(26px,4vh,36px)}
  .plano{--pad-t:clamp(12px,1.9vh,20px);--pad-x:clamp(12px,1vw,18px);--pad-b:clamp(11px,1.6vh,18px)}
  .plano__pos{font-size:11.5px}
  .plano__valor{margin-top:clamp(8px,1.2vh,13px)}
  .plano__preco{font-size:clamp(1.34rem,1.5vw,1.66rem)}
  .plano__limites{margin-top:clamp(9px,1.3vh,13px);padding:clamp(8px,1.1vh,11px) 0;font-size:11px}
  .plano__inclui{margin-top:clamp(9px,1.2vh,12px);font-size:11.5px;line-height:1.33}
  .plano__cta{margin-top:clamp(9px,1.2vh,13px);padding:8px 14px;font-size:12px}
  .planos__ancora{font-size:.84rem}
}
/* Abaixo disto a fileira de quatro não cabe mais em pé: vira 2×2, e a seção
   deixa de ser uma tela travada para poder crescer. Cortar cartão pela
   metade é o defeito que este site já pagou caro — altura automática é o
   único jeito de a grade de 2×2 nunca encostar na borda.

   O recuo de baixo TRIPLICA aqui, e é a única coisa nesta regra que não vem
   da grade. `.bloco` desce para 12px de pé abaixo de 820px de altura, o que
   basta enquanto a seção é uma tela travada e sobra folga no meio. Solta, a
   linha da âncora encosta no fim do escuro e a emenda com o branco da seção
   9 corta a frase pela metade. 28px devolvem ar sem custar uma fileira.

   ⚠️ E A PILHA NÃO MUDA. Ela é `flex:1` com `min-height:0` como as pilhas
   das seções 5 e 7, e continua assim mesmo com a seção crescendo. Cheguei a
   soltá-la achando que a dupla estourava a caixa em altura automática — a
   medida diz que não: com `flex:1` ou com `flex:none`, a 1920×640, 1920×540
   e 1280×600, o transbordo é ZERO e a âncora fica nos mesmos 28px. O que eu
   tinha visto era outra coisa: `[data-enter]` nasce 16px mais abaixo e só
   sobe quando ENTRA na janela, e a sonda fotografou antes disso. Layout
   reprovado por medida de peça em movimento. */
@media (min-width:1181px) and (max-height:640px){
  #planos{height:auto;min-height:100svh;padding-bottom:clamp(28px,4.4vh,48px)}
  .planos__grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  /* fora da fileira de quatro o destaque volta para a linha: em 2x2 ele é o
     PRIMEIRO da segunda fileira, e sair 10px para cima ali não lê como
     destaque, lê como peça desencaixada. É o mesmo motivo do `lg:` que a
     landing põe no `-my-2`.

     E o RECUO volta junto. Zerar só a margem deixa a compensação de 10px sem
     nada para compensar, e o cartão aceso fica 10px ABAIXO do vizinho da
     mesma fileira — medido a 1920×640, nome em 5629 contra 5619. As duas
     linhas andam sempre em par. */
  .plano--destaque{margin-block:0;padding-block:var(--pad-t) var(--pad-b)}
}

/* Em tela estreita `.bloco` já solta a altura sozinho (estudio.css), então
   aqui não se mexe em `height` — mexer devolveria a #planos um piso de uma
   tela que nenhuma outra seção tem. Só a grade muda. */
@media (max-width:1180px){
  .planos__grade{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .plano--destaque{margin-block:0;padding-block:var(--pad-t) var(--pad-b)}
}
@media (max-width:640px){
  .planos__grade{grid-template-columns:1fr}
  .ciclo{width:100%}
  .ciclo__b{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .plano:hover{transform:none}
  .plano__cta:hover{transform:none}
  .ciclo__pill{transition:none}
}

/* ---------------- módulos à parte (TRAIL, 07/10) ----------------
   Cardápio, não recurso incluso: fichas numa caixa tracejada, entre os
   limites e a lista do que vem no plano. Quem escreve é o planos.js, a
   partir de `modulos` do banco (o HTML reserva traz o mesmo espelho). */
.plano__modulos{
  margin:clamp(10px,1.4vh,14px) 0 0;padding:9px 11px 10px;
  border:1px dashed rgba(108,184,255,.30);background:rgba(10,128,226,.06);
}
.plano__modulos-t{margin:0 0 7px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.62)}
.plano__modulos-t b{color:#FFFFFF;font-weight:600;white-space:nowrap}
.plano__modulos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.plano__modulos li{
  font-size:11.5px;line-height:1;padding:5px 8px;
  background:rgba(10,128,226,.16);color:#CFE6FF;
}
.plano__modulos li b{font-weight:600;color:#FFFFFF}