/* Página de assinatura — só o que a folha compartilhada ainda não tem. */
.planos{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:2.4rem}
@media(min-width:640px){.planos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.planos{grid-template-columns:repeat(4,1fr)}}
.plano{background:var(--papel);padding:1.9rem 1.5rem 1.7rem;display:flex;flex-direction:column;
  gap:.3rem;position:relative}
.plano.eleito{background:var(--realce)}
.plano .q{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza)}
.plano .v{font-family:var(--mono);font-size:1.95rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;line-height:1.05;font-weight:500}
.plano .u{font-size:.8rem;color:var(--cinza);margin:0}
.plano .d{font-size:.86rem;color:var(--cinza);margin:.5rem 0 0;flex:1}
.plano .botao{margin-top:1.25rem;text-align:center;font-size:.9rem;padding:.7rem 1rem}
.plano .eleito-selo{position:absolute;top:0;right:0;background:var(--selo);color:#FFF;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .55rem}

.dor{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:2.4rem}
@media(min-width:780px){.dor{grid-template-columns:repeat(3,1fr)}}
.dor > div{background:var(--papel);padding:1.8rem 1.6rem}
.dor h3{font-size:1.05rem}
.dor p{font-size:.93rem;color:var(--cinza);margin:.6rem 0 0}

.resposta{border:1px solid var(--linha);background:var(--realce);padding:1.6rem 1.5rem;
  margin-top:2.2rem;font-size:.94rem}
.resposta .pergunta{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cinza);margin-bottom:.7rem}
.resposta .cita{border-left:2px solid var(--selo);padding-left:1rem;margin:1rem 0}
.resposta .meta{font-family:var(--mono);font-size:.72rem;color:var(--cinza);display:flex;
  flex-wrap:wrap;gap:.2rem 1.1rem;margin-top:.6rem}
.resposta .exemplo{font-size:.79rem;color:var(--cinza);margin:1.2rem 0 0;font-style:italic}

.passos{counter-reset:p;display:grid;gap:1.9rem;margin-top:2.8rem}
@media(min-width:820px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{counter-increment:p}
.passo::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;color:var(--selo);display:block;margin-bottom:.6rem}
.passo p{font-size:.93rem;color:var(--cinza);margin:.5rem 0 0}

.marcas{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.85rem}
@media(min-width:760px){.marcas.duplo{grid-template-columns:repeat(2,1fr);gap:.85rem 2.2rem}}
.marcas li{padding-left:1.5rem;position:relative;font-size:.95rem}
.marcas li::before{content:"—";position:absolute;left:0;color:var(--selo);font-family:var(--mono)}
.marcas.nao li::before{content:"\00d7";color:var(--cinza)}

.lista{margin:1.4rem 0 0;padding-left:1.15rem}
.lista li{margin:.5rem 0;font-size:.96rem}
.par{display:grid;gap:2.6rem;margin-top:2.2rem}
@media(min-width:820px){.par{grid-template-columns:repeat(2,1fr)}}

.escuro .dado .d{color:color-mix(in srgb,var(--papel) 62%,var(--tinta))}
.escuro th{color:color-mix(in srgb,var(--papel) 62%,var(--tinta))}
.escuro td,.escuro th{border-bottom-color:color-mix(in srgb,var(--papel) 16%,var(--tinta))}

.fecho{text-align:center}
.fecho h2{max-width:24ch;margin:0 auto}
.fecho p{margin:1.3rem auto 0;max-width:52ch;color:var(--cinza)}

/* ---------------------------------------------------------------------------
   Pagina de contratacao — /assinatura/contratar/ (10/09/2026)

   O REALCE DO PLANO ESCOLHIDO SEM JAVASCRIPT. Os quatro `id` moram em <span> vazios no topo do
   <body>, e nao nos cartoes: assim o navegador, ao seguir o `#semestral`, rola para o COMECO da
   pagina em vez de despejar o visitante em cima do botao de pagar. O cartao correspondente e
   alcancado pelo combinador de irmaos, ja que os <span> e o <main> sao filhos do <body>.
   --------------------------------------------------------------------------- */
.alvo{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden}
.plano .escolhido{display:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--selo);margin-bottom:.35rem}
#mensal:target     ~ main .plano[data-p="mensal"],
#trimestral:target ~ main .plano[data-p="trimestral"],
#semestral:target  ~ main .plano[data-p="semestral"],
#anual:target      ~ main .plano[data-p="anual"]{background:var(--realce);
  box-shadow:inset 0 0 0 2px var(--selo)}
#mensal:target     ~ main .plano[data-p="mensal"] .escolhido,
#trimestral:target ~ main .plano[data-p="trimestral"] .escolhido,
#semestral:target  ~ main .plano[data-p="semestral"] .escolhido,
#anual:target      ~ main .plano[data-p="anual"] .escolhido{display:block}

/* CONTRASTE NA FAIXA ESCURA. `.aviso` e `.txt-apoio` nascem em var(--cinza), pensado para o
   fundo claro; sobre var(--tinta) o texto some. */
.escuro .aviso,.escuro .txt-apoio,.escuro .faq dd{color:color-mix(in srgb,var(--papel) 78%,var(--tinta))}
.escuro .marcas li::before{color:var(--selo)}


/* A GRADE TEM O NUMERO DE COLUNAS QUE O CONTEUDO TEM (11/09/2026). `.planos` nasceu para os
   quatro planos da assinatura; a pagina das formacoes tem duas, e as duas colunas que sobravam
   apareciam como um bloco cinza morto ao lado dos cartoes. */
@media(min-width:1000px){.planos.duas{grid-template-columns:repeat(2,1fr)}}

@media(min-width:1000px){.planos.tres{grid-template-columns:repeat(3,1fr)}}