/* ═══════════════════════════════════════════════════════════
   The Moment — sistema visual (minimalista)

   O esqueleto: moldura fixa, malha de 12 colunas, barra de rolagem própria,
   enunciados numa tinta só com quatro níveis de opacidade. A
   festa ficou de fora. Um fundo, uma tinta, muito vazio.

   A cor é um acontecimento:
   - o azul #2B46F5 só existe como traço (a linha, o scramble,
     a seleção) — no escuro ele dá 2,9:1, então nunca é texto;
   - o vermelho #EB4831 aparece uma vez, no "m": onde o laço do
     meio vira o segundo arco.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 0. Aminute ----------
   Título da marca é Aminute Regular (fonte comercial). Quando os
   arquivos licenciados chegarem em assets/fonts/, é descomentar
   este bloco e trocar --titulo-peso para 400. Antes disso nada de
   @font-face apontando pra arquivo que não existe (daria 404).

@font-face{
  font-family:'Aminute';
  src:url(../assets/fonts/Aminute-Regular.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
*/

/* ---------- 1. tokens ---------- */
:root{
  color-scheme: dark;

  /* noite (padrão da marca): tinta e papel entram como RGB solto
     pra virar quatro níveis de opacidade */
  --l: 234,233,241;           /* tinta #EAE9F1 */
  --papel: 19,20,32;          /* fundo #131420 */
  --a2:.58; --a3:.42; --a4:.16;

  --l1: rgb(var(--l));                /* texto principal, foco */
  --l2: rgba(var(--l),var(--a2));     /* secundário, moldura, itens */
  --l3: rgba(var(--l),var(--a3));     /* só texto ≥ 24px */
  --l4: rgba(var(--l),var(--a4));     /* só fio e trilho, nunca texto */
  --fundo: rgb(var(--papel));

  --azul:#2B46F5;             /* só traço */
  --decisao:#EB4831;          /* uma vez */

  --titulo:'Aminute','Commissioner',system-ui,sans-serif;
  --titulo-peso:200;          /* vira 400 quando a Aminute entrar */
  --sans:'Commissioner',system-ui,-apple-system,'Segoe UI',sans-serif;
  --num:'Commissioner',system-ui,sans-serif;

  --t-h1:clamp(2.5rem,10.4vw,11.5rem);
  --t-enunciado:clamp(1.75rem,3.4vw,3.5rem);
  --t-nome:clamp(1.75rem,3vw,2.75rem);
  --t-destaque:clamp(1.25rem,.6vw + 1rem,1.5rem);
  --t-rotulo:.6875rem;
  --t-corpo:1rem;
  --t-item:.875rem;

  --gutter:clamp(16px,2.2vw,32px);
  --gap:clamp(.75rem,1.4vw,1.25rem);
  --respiro:clamp(120px,20vh,240px);

  --e66:cubic-bezier(.66,0,.01,1);
  --e-suave:cubic-bezier(.22,1,.36,1);
}

/* dia — os mesmos três seletores do motor mais o contrato
   data-theme, sempre em sincronia */
:root[data-tema="claro"],
:root[data-theme="light"]{
  color-scheme: light;
  --l: 19,20,32;
  --papel: 234,233,241;
  --a2:.64; --a3:.50; --a4:.14;
}
@media (prefers-color-scheme: light){
  :root:not([data-tema="escuro"]):not([data-theme="dark"]){
    color-scheme: light;
    --l: 19,20,32;
    --papel: 234,233,241;
    --a2:.64; --a3:.50; --a4:.14;
  }
}
/* noite escolhida de propósito (redundante com o padrão, mas
   deixa o contrato explícito) */
:root[data-tema="escuro"],
:root[data-theme="dark"]{
  color-scheme: dark;
  --l: 234,233,241;
  --papel: 19,20,32;
  --a2:.58; --a3:.42; --a4:.16;
}


/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  background:var(--fundo);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  margin:0;
  background:var(--fundo);
  color:var(--l1);
  font-family:var(--sans);
  font-size:var(--t-corpo);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .5s var(--e-suave),color .5s var(--e-suave);
}

img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:inherit;text-wrap:balance}
p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--azul);color:#EAE9F1}

:focus-visible{outline:2px solid var(--l1);outline-offset:3px}

.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
/* foco levado por script (âncoras, fim do jogo) não desenha caixa */
[tabindex="-1"]:focus{outline:none}

.l3{color:var(--l3)}
.num{font-variant-numeric:tabular-nums}
/* se a Commissioner servida não tiver tnum, o main.js põe esta
   classe e os números caem para a mono do sistema */
html.sem-tnum .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* só aparece quando há script pra fazer funcionar */
html:not(.tem-js) .so-js{display:none}

.pular{
  position:fixed;left:-9999px;top:0;z-index:200;
  background:var(--l1);color:var(--fundo);
  padding:.8rem 1.2rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.pular:focus{left:0}


/* ---------- 3. malha de 12 colunas ----------
   O lugar de cada peça mora no próprio elemento:
   style="--ci:5;--cs:8"  →  começa na coluna 5, ocupa 8.
   Abaixo de 1024px tudo vira largura cheia. */
.g12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
}
.g12 > *{grid-column:1 / -1;min-width:0}
@media (min-width:64rem){
  .g12 > [style*="--ci"]{grid-column:var(--ci) / span var(--cs)}
}

main > section,
.foto{padding-inline:var(--gutter)}
main > section{padding-top:var(--respiro)}

/* o H3 da marca: Commissioner Bold, caixa alta, pequeno */
.rotulo{
  font-size:var(--t-rotulo);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--l2);
}

/* o enunciado: uma frase, um corpo, um peso — só a opacidade muda */
.enunciado{
  font-family:var(--sans);
  font-size:var(--t-enunciado);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
}

.cabeca{row-gap:1.25rem;align-items:baseline}
.cabeca .rotulo{padding-top:.2em}

.nota{color:var(--l2)}


/* ---------- 4. traço pontilhado no hover ----------
   O contorno mora num ::before, então nada empurra o layout. */
.ponta{position:relative;display:inline-block}
.ponta::before{
  content:'';
  position:absolute;inset:0;
  border:1.5px dotted transparent;
  pointer-events:none;
  transition:border-color .2s ease-out;
}
@media (hover:hover){
  .ponta:hover::before{border-color:var(--l1)}
}

/* chamada em texto com seta */
.cta{
  display:inline-flex;align-items:baseline;gap:.5rem;
  padding:.55rem .6rem;margin-left:-.6rem;
  min-height:44px;align-items:center;
  font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.cta i{font-style:normal;transition:transform .3s var(--e-suave)}
@media (hover:hover){.cta:hover i{transform:translate(.15em,.15em)}}


/* ---------- 5. moldura fixa ---------- */
.moldura{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;
}
.moldura__topo,
.moldura__pe{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:
    calc(clamp(.6rem,1.2vw,1.25rem) + env(safe-area-inset-top,0px))
    calc(var(--gutter) - .5rem + env(safe-area-inset-right,0px))
    clamp(.6rem,1.2vw,1.25rem)
    calc(var(--gutter) - .5rem + env(safe-area-inset-left,0px));
}
.moldura__pe{
  position:relative;
  padding-top:clamp(.6rem,1.2vw,1.25rem);
  padding-bottom:calc(clamp(.6rem,1.2vw,1.25rem) + env(safe-area-inset-bottom,0px));
}
.moldura__topo > *,
.moldura__pe > *{pointer-events:auto}

.marca{display:inline-flex;align-items:center;padding:.5rem;min-height:44px}
.marca__logo{display:block;height:15px;width:auto;aspect-ratio:560.41/72.96;fill:currentColor}
@media (min-width:48rem){.marca__logo{height:18px}}

.moldura__nav{display:none;gap:.1rem}
@media (min-width:64rem){.moldura__nav{display:flex;align-items:center}}
.moldura__nav a,
.moldura__nav button{padding:.55rem .6rem}

.moldura__pe{color:var(--l2)}
.moldura__relogio{padding:.5rem;min-width:9.5em}
.moldura__testes{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem;min-height:44px;
}
.moldura__pin{width:10px;height:13px;flex:none}
.moldura__m{display:inline-flex;align-items:center;padding:.5rem;min-height:44px}
.moldura__m svg{display:block;height:14px;width:auto;aspect-ratio:190.56/130.23;fill:currentColor}

@media (min-width:30rem){
  /* o rótulo "em testes" fica no meio, sem depender da largura do relógio */
  .moldura__testes{position:absolute;left:50%;transform:translateX(-50%)}
}
@media (max-width:29.99rem){
  .moldura__relogio,.moldura__m{display:none}
}
/* no toque o canto direito é do botão de voltar ao topo */
html.toque .moldura__m{display:none}

/* a moldura passa por cima do texto em qualquer largura: em cima, um
   véu da cor do fundo; embaixo, relógio, "em testes" e o "m" só na capa
   (o main.js põe .passou-capa quando a rolagem sai dela) */
.moldura__topo{
  /* o véu desce um pouco além da barra, pra o texto sumir antes de
     encostar no logo */
  padding-bottom:calc(clamp(.6rem,1.2vw,1.25rem) + 1.75rem);
  background:linear-gradient(var(--fundo) 62%,transparent);
}
.moldura__relogio,
.moldura__testes,
.moldura__m{transition:opacity .35s ease-out,visibility .35s}
html.passou-capa .moldura__relogio,
html.passou-capa .moldura__testes,
html.passou-capa .moldura__m{opacity:0;visibility:hidden}
/* tela baixa (celular deitado): a capa não cabe e o rodapé da moldura
   cairia em cima do título; os rótulos são decorativos, então saem */
@media (max-height:35rem){
  .moldura__relogio,
  .moldura__testes,
  .moldura__m{display:none}
}

/* menu: dois traços que viram X */
.moldura__menu{
  position:relative;width:44px;height:44px;
  display:grid;place-items:center;
}
@media (min-width:64rem){.moldura__menu{display:none}}
.moldura__menu i{
  position:absolute;left:50%;width:1.35rem;height:1.5px;
  background:var(--l1);
  transform:translateX(-50%);
  transition:transform .45s var(--e66);
}
.moldura__menu i:nth-child(1){top:18px}
.moldura__menu i:nth-child(2){bottom:18px}
.moldura__menu[aria-expanded="true"] i:nth-child(1){transform:translate(-50%,3.5px) rotate(45deg)}
.moldura__menu[aria-expanded="true"] i:nth-child(2){transform:translate(-50%,-3.5px) rotate(-45deg)}

/* menu de tela cheia (celular) */
.menu{
  position:fixed;inset:0;z-index:45;
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:5rem var(--gutter);
  background:var(--fundo);
}
.menu[hidden]{display:none}
.menu__links{display:flex;flex-direction:column}
.menu__links a{
  font-size:2.5rem;font-weight:300;letter-spacing:-.03em;line-height:1.2;
  padding:.15rem 0;
}
.menu__tema{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--l2);
}
.menu__tema button{padding:.7rem .3rem;text-transform:uppercase;letter-spacing:.08em;color:var(--l2)}
.menu__tema button[aria-pressed="true"]{color:var(--l1);text-decoration:underline;text-underline-offset:.35em}


/* ---------- 6. a barra que sobe e desce ----------
   Só existe depois que o JS liga (.barra-viva no <html>), e só
   no desktop com mouse. Aí a barra nativa sai de cena. */
.barra{
  position:fixed;right:0;top:50%;z-index:30;
  width:3.5rem;height:200px;padding-inline:.75rem;
  transform:translateY(-50%);
  color:var(--l1);
  opacity:0;
  display:none;
}
@media (min-width:64rem){
  html.barra-viva .barra{display:block}
  html.barra-viva{scrollbar-width:none}
  html.barra-viva::-webkit-scrollbar{display:none}
}
.barra.pronta{transition:opacity .5s ease-out}
.barra.vendo{opacity:1}
.barra svg{width:32px;height:200px;display:block;cursor:pointer}
.barra__trilho{
  stroke:currentColor;stroke-opacity:var(--a4);stroke-width:6;
  stroke-linecap:round;fill:none;
}
.barra__polegar{
  stroke:currentColor;stroke-width:6;
  stroke-linecap:round;fill:none;
  cursor:grab;
}
.barra__polegar:active{cursor:grabbing}

/* voltar ao topo: no toque e no celular */
.subir{
  display:none;
  position:fixed;z-index:51;
  right:calc(var(--gutter) + env(safe-area-inset-right,0px));
  bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;
  place-items:center;
  border:1px solid var(--l4);border-radius:99px;
  background:var(--fundo);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .4s var(--e-suave),transform .4s var(--e-suave);
}
html.toque .subir{display:grid}
@media (max-width:29.99rem){.subir{display:grid}}
.subir.vendo,
html:not(.tem-js) .subir{opacity:1;transform:scale(1);pointer-events:auto}
.subir svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}


/* ---------- 7. revelações ----------
   .reveste corta; o filho sobe. Sem JS o filho já está no lugar.
   Rede de segurança: se o main.js não assumir em 3s, as linhas
   aparecem sozinhas. */
.reveste{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.reveste > span{display:block}
html.js .reveste > span{transform:translate3d(0,135%,0);animation:socorro .01s 3s forwards}
@keyframes socorro{to{transform:none}}

/* palavras separadas pelo JS (acendem com a rolagem) */
.palavra{display:inline}

/* estado de espera dos rótulos embaralhados (classe posta pelo JS) */
[data-scramble].esperando{opacity:0}


/* ---------- 8. capa ---------- */
.capa{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:clamp(5.5rem,16vh,9rem)!important;
  padding-bottom:clamp(4rem,9vh,6rem);
}
.capa__topo{row-gap:1.5rem;align-items:start}
.capa__dupla{
  font-size:var(--t-destaque);
  font-weight:600;letter-spacing:-.01em;line-height:1.2;
}
.capa__nota{display:flex;flex-direction:column;gap:1rem;color:var(--l2);max-width:34rem}
.capa__titulo{
  margin-top:auto;
  padding-top:clamp(3rem,8vh,5rem);
  font-family:var(--titulo);
  font-weight:var(--titulo-peso);
  font-size:var(--t-h1);
  line-height:.92;
  letter-spacing:-.04em;
}
@media (max-width:47.99rem){
  .capa__titulo{font-size:11.5vw}
}


/* ---------- 9. o problema ---------- */
.problema .g12{row-gap:1.5rem;align-items:baseline}


/* ---------- 10. a linha ----------
   Parada (padrão, sem JS, menos movimento): batidas empilhadas e
   o desenho inteiro embaixo. Viva (.linha-viva, posta pelo JS):
   a seção cresce, o miolo gruda e a rolagem desenha. */
.linha{padding-inline:0!important}
.linha__batidas{padding-inline:var(--gutter);position:relative;z-index:1}
.linha__texto{display:flex;flex-direction:column;gap:1.25rem}
.batida{overflow:hidden;padding-bottom:.08em}
.batida__i{display:block}

.linha__svg{display:block;width:100%;height:auto;margin-top:clamp(2rem,6vh,4rem);overflow:visible}
/* o desenho é escolhido pelo formato da tela, não pela largura:
   num tablet em pé a versão larga cortaria o "m" fora da tela */
.linha__svg--retrato{display:none}
@media (max-aspect-ratio:5/6){
  .linha__svg--paisagem{display:none}
  .linha__svg--retrato{display:block}
}
.linha__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.linha__svg--paisagem path{stroke-width:5}
.linha__svg--retrato path{stroke-width:4}
.linha__fio{stroke:var(--azul)}
.linha__fio:nth-of-type(2){stroke-opacity:.6}
.linha__fio:nth-of-type(3){stroke-opacity:.35}
.linha__fio:nth-of-type(4){stroke-opacity:.2}
.linha__s-azul{stop-color:var(--azul)}
.linha__s-tinta{stop-color:rgb(var(--l))}
.linha__decisao{stroke:var(--decisao)}

html.linha-viva .linha{height:260vh;padding-top:0}
html.linha-viva .linha__cola{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
}
html.linha-viva .linha__batidas{position:absolute;left:0;right:0;top:22%}
html.linha-viva .linha__texto{display:grid}
html.linha-viva .batida{grid-area:1 / 1;align-self:start}
html.linha-viva .linha__svg{
  position:absolute;left:0;right:0;bottom:7vh;
  height:50vh;margin:0;
}
@media (max-width:47.99rem){
  html.linha-viva .linha{height:220vh}
  html.linha-viva .linha__batidas{top:16%}
  html.linha-viva .linha__svg{height:52vh;bottom:9vh}
}
/* a versão larga nunca fica mais estreita que 2,5:1; abaixo disso
   o corte (slice) come o "m", que mora na ponta direita */
html.linha-viva .linha__svg--paisagem{height:min(50vh,40vw)}


/* ---------- 11. fotos ----------
   Emolduradas na malha, como no PDF da marca: foto colorida, sem
   filtro, logotipo branco pequeno no canto de baixo. */
.foto{padding-top:var(--respiro)}
.foto__moldura{
  position:relative;overflow:hidden;
  background:var(--l4);
}
.foto__moldura img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.foto__moldura--bar{aspect-ratio:3 / 2}
.foto__marca{
  position:absolute;left:4%;bottom:5%;
  width:clamp(84px,14%,180px);height:auto;aspect-ratio:560.41/72.96;
  fill:#FFFFFF;color:#FFFFFF;
  pointer-events:none;
}


/* ---------- 12. ferramentas ---------- */
.frentes{margin-top:clamp(3rem,8vh,5rem);counter-reset:none}
.frente{
  row-gap:1rem;
  padding-block:clamp(1.5rem,3.5vh,2.5rem);
  border-top:1px solid var(--l4);
  align-items:start;
}
.frente__num{padding-top:.9em}
.frente__nome{
  font-size:var(--t-nome);
  font-weight:300;letter-spacing:-.02em;line-height:1.1;
}
.etiqueta{
  display:inline-block;vertical-align:middle;
  margin-left:.6rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--l2);
  line-height:1.4;
}
@media (max-width:63.99rem){.etiqueta{display:block;margin:.4rem 0 0}}
.frente__frase{margin-top:.75rem;max-width:34rem}
.frente__itens{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem 1.25rem;
  padding-top:.6rem;
  font-size:var(--t-item);color:var(--l2);line-height:1.45;
}
.frente__itens li{position:relative;padding-left:.85rem}
.frente__itens li::before{content:'·';position:absolute;left:0}
.frente__assina{
  margin-top:1.5rem;
  font-size:clamp(1.5rem,1vw + 1.1rem,1.75rem);
  font-weight:300;letter-spacing:-.02em;line-height:1.15;
}

@media (max-width:63.99rem){
  .frente{grid-template-columns:auto minmax(0,1fr);column-gap:1rem}
  .frente > .frente__num{grid-column:1}
  .frente > .frente__corpo{grid-column:2}
  .frente > .frente__lado{grid-column:2}
  .frente__itens{grid-template-columns:1fr}
}

.privacidade{
  row-gap:.75rem;align-items:baseline;
  padding-block:clamp(1.5rem,3.5vh,2.5rem);
  border-top:1px solid var(--l4);
  border-bottom:1px solid var(--l4);
}
.privacidade__texto{color:var(--l2);font-size:var(--t-item)}


/* ---------- 13. planos ---------- */
.planos__tabela{
  margin-top:clamp(3rem,8vh,5rem);
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
.planos__tabela table{
  width:100%;min-width:52rem;
  border-collapse:collapse;
  font-size:var(--t-item);
}
.planos__tabela th,
.planos__tabela td{
  padding:.95rem .75rem;
  border-bottom:1px solid var(--l4);
  text-align:center;vertical-align:top;
}
.planos__tabela thead th{
  font-size:var(--t-destaque);font-weight:600;letter-spacing:-.01em;
  padding-bottom:1.1rem;
}
.planos__tabela thead td,
.planos__tabela tbody th{text-align:left}
.planos__tabela tbody th{font-weight:400;color:var(--l2);padding-left:0}
.planos__tabela td.nao{color:var(--l2)}
.planos__tabela:focus-visible{outline-offset:6px}
@media (min-width:64rem){
  /* as quatro colunas de plano com a mesma largura */
  .planos__tabela table{table-layout:fixed}
  .planos__tabela thead td{width:24%}
}
.planos__pe{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.planos__pe .nota{max-width:40rem}

.planos__seletor{
  display:flex;flex-wrap:wrap;gap:.25rem;
  margin-top:clamp(2.5rem,6vh,4rem);
}
.planos__seletor[hidden]{display:none}
.planos__seletor button{
  min-height:44px;padding:.5rem .7rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--l2);
  border:1px solid transparent;
}
.planos__seletor button[aria-pressed="true"]{color:var(--l1);border-color:var(--l1)}
@media (max-width:29.99rem){
  .planos__seletor{gap:0}
  .planos__seletor button{padding:.5rem .4rem;letter-spacing:.04em}
}

@media (max-width:63.99rem){
  /* com o seletor ligado, uma coluna de plano por vez */
  .planos__tabela.com-seletor{margin-top:1.25rem;overflow:visible}
  .planos__tabela.com-seletor table{min-width:0;table-layout:fixed}
  .planos__tabela.com-seletor :is(th,td):not(:first-child){display:none}
  .planos__tabela.com-seletor[data-plano="2"] :is(th,td):nth-child(2),
  .planos__tabela.com-seletor[data-plano="3"] :is(th,td):nth-child(3),
  .planos__tabela.com-seletor[data-plano="4"] :is(th,td):nth-child(4),
  .planos__tabela.com-seletor[data-plano="5"] :is(th,td):nth-child(5){display:table-cell}
  .planos__tabela.com-seletor :is(th,td){text-align:left}
  .planos__tabela.com-seletor tbody th{width:52%}
}
@media (min-width:64rem){
  .planos__seletor{display:none}
}


/* ---------- 14. desafio ---------- */
.desafio__corpo{margin-top:2rem}
.desafio__fechado{display:flex;flex-direction:column;gap:2rem}
.desafio__fechado[hidden]{display:none}
.desafio__regra{color:var(--l2);max-width:38rem}
.desafio__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.botao{
  min-height:44px;padding:.7rem 1rem;
  border:1px solid var(--l1);
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.botao.ponta::before{inset:-4px}
.link-texto{
  min-height:44px;padding:.5rem 0;
  color:var(--l2);
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;
}
@media (hover:hover){.link-texto:hover{color:var(--l1)}}
.desafio__aviso{margin-top:2rem;font-size:var(--t-item);color:var(--l2);max-width:38rem}

/* o jogo aberto */
.jogo{margin-top:2rem}
.jogo[hidden]{display:none}
.jogo__placar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;
  padding-block:.75rem;
  border-bottom:1px solid var(--l4);
  background:var(--fundo);
}
.jogo__numeros{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.jogo__numeros b{font-weight:700}
.jogo__numeros .sep{color:var(--l2);padding-inline:.4em}
.jogo__pausa{
  min-height:44px;padding:.5rem .6rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--l2);
}
@media (hover:hover){.jogo__pausa:hover{color:var(--l1)}}

.salao{
  display:grid;grid-template-columns:repeat(10,22px);gap:14px;
  margin-top:2rem;
}
.mesa{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--l3);
  transition:background-color .2s ease-out,border-color .2s ease-out;
}
.mesa.ocupada{background:var(--l1);border-color:var(--l1)}

.jogo__aviso{
  min-height:1.6em;margin-top:1.25rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--l2);
}
.mao{margin-top:1.25rem;row-gap:var(--gap)}
.carta{
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  min-height:64px;padding:1rem;
  border:1px solid var(--l4);
  transition:background-color .15s ease-out,color .15s ease-out,opacity .2s;
}
.carta__trilha{font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--l2)}
.carta__acao{font-size:1.125rem;line-height:1.25}
.carta__efeito{font-size:var(--t-item);color:var(--l2)}
.carta.escolhida{background:var(--l1);color:var(--fundo)}
.carta.escolhida .carta__trilha,
.carta.escolhida .carta__efeito{color:inherit}
.carta[aria-disabled="true"]:not(.escolhida){opacity:.45;cursor:default}
.carta.ponta::before{inset:-4px}
.jogo__dica{margin-top:1.25rem;font-size:var(--t-item);color:var(--l2)}
@media (pointer:coarse){.jogo__dica{display:none}}

.jogo__fim{display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem}
.jogo__fim h3:focus{outline:none}
.jogo__fim h3:focus-visible{outline:2px solid var(--l1)}
.jogo__fim strong{font-weight:500}
.jogo__frase{font-size:1.5rem;font-weight:300;line-height:1.3;max-width:40rem}
.jogo__fim .nota{max-width:40rem}
.jogo__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:.5rem}

@media (max-width:63.99rem){
  .salao{grid-template-columns:repeat(5,22px)}
  .jogo__placar{position:sticky;top:56px;z-index:2}
}


/* ---------- 15. pré-lista ---------- */
.lista__corpo{margin-top:clamp(3rem,8vh,5rem);row-gap:2.5rem;align-items:start}
.foto__moldura--cafe{aspect-ratio:3 / 2}
.foto__moldura--cafe img{object-position:93% 50%}
@media (min-width:64rem){
  .foto__moldura--cafe{aspect-ratio:4 / 5}
}
.lista__texto{color:var(--l2);max-width:34rem}

.form{margin-top:2rem;display:flex;flex-direction:column}
.campo{display:flex;flex-direction:column;gap:.35rem;padding-block:1rem .25rem}
.campo label{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--l2);
}
.campo input,
.campo select{
  width:100%;min-height:48px;
  padding:.5rem 0;
  font-size:1rem;
  background:transparent;
  border:0;border-bottom:1px solid var(--l2);border-radius:0;
  appearance:none;-webkit-appearance:none;
}
.campo select{
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:1.5rem;
}
.campo select option{background:var(--fundo);color:var(--l1)}
.campo input::placeholder{color:var(--l2)}
.campo input:focus,
.campo select:focus{outline:none;border-bottom-color:var(--l1);box-shadow:0 1px 0 0 var(--l1)}
.campo input:focus-visible,
.campo select:focus-visible{outline:2px solid var(--l1);outline-offset:3px}
.campo [aria-invalid="true"]{border-bottom-color:var(--l1);border-bottom-width:2px}
.campo__erro{min-height:1.4em;font-size:var(--t-item);color:var(--l1)}
.campo__erro:not(:empty)::before{content:'! ';font-weight:700}

.enviar{
  align-self:flex-start;margin-top:1.75rem;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.7rem 1rem;
  border:1px solid var(--l1);
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.enviar.ponta::before{inset:-4px}
.enviar i{font-style:normal;transition:transform .3s var(--e-suave)}
@media (hover:hover){.enviar:hover i{transform:translate(.15em,-.15em)}}
.form__ajuda{margin-top:1.25rem;font-size:var(--t-item);color:var(--l2);max-width:34rem}
.form__email{color:var(--l1);-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.form__estado{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.form__estado:empty{display:none}
.form__estado p{max-width:34rem}
.form__estado textarea{
  width:100%;min-height:10rem;padding:.75rem;
  font-size:var(--t-item);line-height:1.45;
  background:transparent;border:1px solid var(--l2);border-radius:0;resize:vertical;
}


/* ---------- 16. rodapé ---------- */
.fim{
  min-height:85vh;min-height:85svh;
  display:flex;flex-direction:column;
  padding:var(--respiro) var(--gutter) calc(4.5rem + env(safe-area-inset-bottom,0px));
}
.fim__chamada{
  display:block;
  font-family:var(--titulo);
  font-weight:var(--titulo-peso);
  font-size:clamp(2.75rem,12vw,13rem);
  line-height:.92;letter-spacing:-.04em;
}
.fim__chamada:focus-visible{outline-offset:8px}
@media (hover:hover){
  .fim__chamada:hover .reveste:not(.l3){color:var(--l2)}
  .fim__chamada .reveste{transition:color .3s ease-out}
}
@media (max-width:63.99rem){
  .fim__chamada{font-size:15vw}
}

.fim__pe{
  margin-top:auto;padding-top:clamp(3rem,10vh,6rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.fim__contatos{display:flex;flex-wrap:wrap;gap:.25rem}
.fim__pe a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem;margin-left:-.5rem}
.fim__pe [data-contato="email"]{text-transform:none;letter-spacing:.02em}
.fim__final{
  margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--l4);
  font-size:.75rem;color:var(--l2);
}
@media (max-width:47.99rem){
  .fim__pe{flex-direction:column;align-items:flex-start}
}


/* ---------- 17. menos movimento ----------
   Sem scramble, sem Lenis, sem barra própria, sem sticky na linha
   (ela fica parada e completa), sem escala nas fotos, título já
   no lugar. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveste > span{transform:none!important}
}