@import url("../fonts/fonts.css");

/* ==========================================================================
   LOOMTY — folha única do site institucional
   --------------------------------------------------------------------------
   Uma folha só, para o site inteiro. O site anterior tinha quinze arquivos
   de CSS somando 500KB, e a maior parte descrevia seções que não existem
   mais (o carrossel de 25 cards, as quatro camadas, o widget da Iara acima
   da dobra). Nada disso foi copiado: o que não é usado por uma das sete
   páginas não entrou.

   Todo valor de cor, medida, raio e fonte abaixo vem do Design System
   Loomty (arquivo Figma TUp2cc5eXoj67ZkUjpw7zi). Não há cor inventada.

   ORDEM DO ARQUIVO
     1 · tokens
     2 · reset e base
     3 · tipografia
     4 · layout (container, seções, superfícies)
     5 · botões e rótulos
     6 · navbar e rodapé
     7 · home
     8 · páginas internas
     9 · acessibilidade e movimento
   ========================================================================== */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root {
  /* ---- neutros (DS · seção 5) --------------------------------------------
     O branco do sistema é #FAFAFA e o preto é #0C0C0C. Nunca #FFF/#000. */
  --preto:      #0C0C0C;
  --cinza-900:  #060606;   /* moldura: o poço sob os cartões escuros */
  --cinza-800:  #292929;
  --cinza-600:  #6B6B6B;
  --cinza-400:  #A3A3A3;
  --cinza-200:  #D4D4D4;
  --cinza-100:  #EAEAEA;
  --cinza-50:   #F5F5F5;
  --branco:     #FAFAFA;

  /* ---- as seis famílias de cor do DS ------------------------------------
     Vivem aqui porque o espectro da marca é feito delas e porque os cartões
     do site usam as bases como fio de acento. Elas são só cor: o que cada
     família significa dentro do produto não é nomeado em superfície pública
     nenhuma — nem em texto de tela, nem em comentário de folha de estilo. */
  --r-base: #CC3300;  --r-light: #FF6633;
  --i-base: #CC7700;  --i-light: #FFAA33;
  --a-base: #5A8A00;  --a-light: #8AC820;
  --s-base: #007A40;  --s-light: #00BB60;
  --e-base: #0044AA;  --e-light: #3377EE;
  --c-base: #6600AA;  --c-light: #9933DD;

  /* ícone de inclusão da lista de recursos de `/preco` — o `--icone-ok` de
     produção (mask, não fill: a cor vem de quem o usa). Tabler circle-check,
     o mesmo desenho, extraído de styles.css. */
  --icone-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");

  /* espectro da marca — a mesma sequência da fita da navbar */
  --espectro: linear-gradient(90deg,
    #cc3300 0%, #f06a00 11%, #cccc00 22%, #5a8a00 33%, #007a40 44%,
    #129f73 55%, #0044aa 67%, #6600aa 78%, #7f2cff 89%, #cc3300 100%);

  /* ---- espaçamento (DS · escala GAP) ------------------------------------ */
  --e1:   8px;  --e2:  16px;  --e3:  24px;  --e4:  32px;
  --e5:  48px;  --e6:  56px;  --e7:  72px;  --e8: 100px;  --e9: 140px;

  /* ---- geometria --------------------------------------------------------- */
  --raio: 8px;              /* DS · radius/base. Botão, cartão, campo. */
  --raio-grande: 16px;      /* só a barra de navegação, como no Figma */
  --container: 1280px;
  --gutter: 40px;

  /* ---- régua única de botão ---------------------------------------------
     Herdada do site anterior, onde ela foi estabelecida a partir do CTA da
     topbar: 44 de altura, 22 de respiro lateral, 12/700 com 1,2 de
     entreletra. A largura continua vindo do texto. */
  --btn-h: 44px;
  --btn-pad-x: 22px;

  /* ---- tipografia --------------------------------------------------------- */
  --display: "Tanker", "Plus Jakarta Sans", -apple-system, sans-serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------------------
     ESCALA DE DISPLAY — medida ao vivo em loomty.com, não estimada.
     --------------------------------------------------------------------
     A produção usa UM tamanho fluido só para todo título grande do site:
     a regra real é ".display-54, .hero__title, .cta__title { font-size:
     var(--fs-display); line-height: var(--lh-tight); }" — o H1 do herói,
     os H2 de seção e o título de fechamento são o MESMO valor, sem um
     degrau maior para o H1. Confirmado por medição direta (getComputedStyle
     no H1 de /iara: 43px / 46,44px de entrelinha, batendo exatamente com
     este clamp no teto e com lh-tight 1,08).

     Antes daqui --fs-h1 chegava a 72px e --fs-h2 a 52px — números
     inventados, maiores que qualquer título real do site. Os dois agora
     apontam para o mesmo valor verificado. --fs-h3 (título de cartão) não
     tem uma escala sitewide equivalente em produção — cada componente lá
     tem o próprio tamanho fixo (o `.deliver__title` de loomty.com mede
     23,54px, e é exatamente o que este site já usa nesse componente) —
     então ele fica como está, sem uma fonte para substituir. */
  --fs-display: clamp(30px, 25px + 1.4vw, 43px);
  --fs-h1: var(--fs-display);
  --fs-h2: var(--fs-display);
  --fs-h3:  clamp(22px, 2.2vw, 30px);
  --fs-lede: clamp(16px, 1.15vw, 19px);
  --fs-corpo: 16px;
  --fs-rotulo: 11px;

  /* ---- contrato de superfície -------------------------------------------
     Estes seis nomes são o vocabulário do site. Cada superfície (clara ou
     escura) preenche os seis; todo o resto do arquivo só consome. É o que
     permite ao MESMO botão, ao MESMO cartão e ao MESMO rótulo funcionarem
     nos dois fundos sem uma regra a mais e sem perder contraste AA.

       --tinta        texto de ênfase alta
       --tinta-fraca  texto secundário — sempre ≥ 4,5:1 sobre a superfície
       --fundo        a superfície
       --linha        divisórias e contornos em repouso
       --acao         preenchimento do botão sólido
       --acao-on      texto que corre por cima do botão sólido           */

  /* superfície escura, o padrão da marca */
  --tinta: var(--branco);
  --tinta-fraca: var(--cinza-400);
  --fundo: var(--preto);
  --linha: #262626;
  --acao: var(--r-light);      /* #FF6633 sobre preto: 5,6:1 contra o fundo */
  --acao-on: var(--preto);     /* preto sobre #FF6633: 7,2:1 */
  --acao-hover: #FF8055;
  --realce: var(--r-light);    /* link em cor de marca, legível no escuro */
}

/* ==========================================================================
   2 · RESET E BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--sans);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Trava contra negrito sintético. A Tanker existe num peso só: quando algo
     pede bold nela — um <h2>, que já nasce bold pela folha do navegador — o
     navegador engrossa o contorno e a letra sai inflada, com cara de stroke.
     Isto desliga a simulação. As outras duas famílias trazem pesos reais. */
  font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* a âncora não pode parar atrás da barra fixa */
[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   ÂNCORA DE LEGADO — alvo sem peça
   --------------------------------------------------------------------------
   A home nova tem cinco blocos; a anterior tinha mais, e as páginas
   herdadas do site velho continuam linkando fragmentos que só existiam lá
   (`/#produto`, 25 links; `/#precos`, 2). O alvo é um elemento vazio
   plantado antes da seção equivalente — não um id a mais numa seção que já
   tem o seu.

   `display:block` com altura zero, e não o inline puro: um inline vazio
   entre duas seções pode abrir uma caixa de linha no bloco que o contém, e
   uma caixa de linha tem a altura da entrelinha. Em bloco com `height:0`
   ele não ocupa nada em nenhum navegador. O desvio da barra fixa vem do
   `[id]` acima, de graça. */
.ancora-legado { display: block; height: 0; }

/* ==========================================================================
   3 · TIPOGRAFIA
   ========================================================================== */

.display {
  font-family: var(--display);
  font-weight: 400;
  /* 1,08 e -0,512px são os valores reais de produção (--lh-tight e a
     entreletra do .display-54 em desktop); a produção estreita para
     -0,32px a partir de 768px — mesmo ajuste, no meu breakpoint mais
     próximo (900px), já que os dois sistemas não usam os mesmos cortes. */
  line-height: 1.08;
  letter-spacing: -0.512px;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.12; }

/* rótulo caixa-alta em mono — o marcador de seção do sistema */
.rotulo {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-rotulo);
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--tinta-fraca);
  max-width: 62ch;
  text-wrap: pretty;
}

.corpo { color: var(--tinta-fraca); line-height: 1.65; max-width: 66ch; }

/* --------------------------------------------------------------------------
   A GRAFIA DA ASSISTENTE NÃO PRECISA MAIS DE CSS (11/09/2026)
   --------------------------------------------------------------------------
   Aqui viviam `.iara` e `.display .iara`: dentro de um título a marca trocava
   de família (Tanker → sans 800) e desligava o `text-transform`, porque a
   grafia obrigatória era `iARA` — i minúsculo — e caixa-alta a destruía. Eram
   três regras e um `<span>` em volta do nome em cada página.

   Essa grafia foi REVOGADA: a assistente se escreve **Iara**, nome próprio.
   Em caixa-alta ela vira IARA e isso é a caixa fazendo o trabalho dela, não
   um erro. Sem exceção de fonte, o nome herda a Tanker dos títulos e lê como
   qualquer outra palavra — que é o que um nome próprio deve fazer.

   Os `<span>` saíram das páginas junto com as regras. Só `iara-anterior.html`
   — o clone congelado de /iara — ainda usa `.brand-iara`, que vive no
   `styles.css` do site antigo e por isso continua de pé lá.
   -------------------------------------------------------------------------- */

/* preço: os algarismos alinham em colunas quando estão em lista */
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4 · LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--e8); }
.secao--curta { padding-block: var(--e7); }

/* ---- superfícies -------------------------------------------------------
   Trocar a classe reescreve o contrato inteiro: texto, linhas, botão e
   realce mudam juntos. Nenhuma regra fora daqui pinta cor literal de
   texto ou de fundo. */

/* --------------------------------------------------------------------------
   O botão sólido é NEUTRO em produção, nunca laranja
   --------------------------------------------------------------------------
   Toda folha do site foi vasculhada por box-shadow, background e classes
   .btn: não existe UM botão preenchido de laranja em loomty.com. O sistema
   real tem três variantes, com nomes e valores próprios —

     .btn--light  bg #FAFAFA / texto #0C0C0C   — para pousar sobre fundo ESCURO
     .btn--dark   bg #0C0C0C / texto #FAFAFA   — para pousar sobre fundo CLARO
     .btn--ghost  borda 1,5px na cor do texto  — secundário, inverte no hover

   — e o laranja (--orange, #CC3300) só aparece como cor de texto no hover
   do ghost, nunca como preenchimento. --acao/--acao-on já eram o contrato
   de superfície deste site (a MESMA variável muda de valor por seção); o
   que mudou foi só o VALOR, de --r-light/--r-base (inventado) para o par
   branco/preto que a produção realmente usa. */

.sup--escura {
  --tinta: var(--branco);
  --tinta-fraca: var(--cinza-400);      /* 7,0:1 sobre #0C0C0C */
  --fundo: var(--preto);
  --linha: #262626;
  --acao: var(--branco);                /* .btn--light de produção */
  --acao-on: var(--preto);
  --acao-hover: #FFFFFF;                /* branco puro, como .btn--light:hover */
  --realce: var(--r-light);             /* --orange (#CC3300) dá 3,76:1 aqui — falha AA */
  background: var(--preto);
  color: var(--branco);
}

.sup--clara {
  --tinta: var(--preto);
  --tinta-fraca: var(--cinza-600);      /* 4,9:1 sobre #F5F5F5 */
  --fundo: var(--cinza-50);
  --linha: var(--cinza-200);
  --acao: var(--preto);                 /* .btn--dark de produção */
  --acao-on: var(--branco);
  --acao-hover: #000000;                /* preto puro, como .btn--dark:hover */
  --realce: var(--r-base);              /* --orange de verdade: seguro sobre claro */
  background: var(--cinza-50);
  color: var(--preto);
}

.sup--poco {                            /* escuro um degrau abaixo */
  --tinta: var(--branco);
  --tinta-fraca: var(--cinza-400);
  --fundo: var(--cinza-900);
  --linha: #1c1c1c;
  --acao: var(--branco);
  --acao-on: var(--preto);
  --acao-hover: #FFFFFF;
  --realce: var(--r-light);
  background: var(--cinza-900);
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   O PAR CLARO DE `.sup--poco`
   --------------------------------------------------------------------------
   `.sup--poco` é um degrau MAIS ESCURO que `.sup--escura` — cinza-900
   (#060606) contra preto (#0C0C0C), uma diferença de 6 em 255, quase
   imperceptível a olho nu. É uma distinção de TOKEN, não de contraste
   visível; o que separa os dois blocos na prática é o conteúdo (a marca
   d'água, a mudança de ritmo), não o tom de fundo.

   O par claro segue a MESMA lógica: um degrau na direção oposta à de
   `.sup--clara` (cinza-50, #F5F5F5) — aqui, LONGE do cinza é para CIMA, não
   para baixo, porque o "fundo do sistema" claro é branco, não escuro. Por
   isso `--branco` (#FAFAFA), não um cinza mais escuro que cinza-50: a mesma
   diferença de 5 em 255 que `.sup--poco` tem para `.sup--escura`, espelhada. */
.sup--branca {
  --tinta: var(--preto);
  --tinta-fraca: var(--cinza-600);
  --fundo: var(--branco);
  --linha: var(--cinza-200);
  --acao: var(--preto);
  --acao-on: var(--branco);
  --acao-hover: #000000;
  --realce: var(--r-base);
  background: var(--branco);
  color: var(--preto);
}

/* fita do espectro: o grafismo da marca como divisória */
.fita {
  height: 3px;
  background-image: var(--espectro);
  border: 0;
  margin: 0;
}
.fita--curta { width: 213px; }

/* ==========================================================================
   5 · BOTÕES E CARTÕES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding-inline: var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* hover/active de produção: sobe 1px no hover, volta ao chão no clique —
   não afunda ABAIXO do repouso como a versão anterior fazia. Vale para
   as três variantes, porque em loomty.com é a régua .btn quem faz isso,
   não cada variante por conta própria. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* sólido — a única peça pintada pela cor de ação. Um por dobra.
   background/color já vêm neutros (branco/preto) do contrato de
   superfície; a sombra no hover é a mesma que .btn--light/--dark usam
   em produção (0 8px 24px, 28–30% de preto — a diferença entre as duas
   é imperceptível, então uma só cobre as duas). */
.btn--solido { background: var(--acao); color: var(--acao-on); }
/* O HOVER AGORA É O DO "JOGAR" DA BARRA (10/09/2026, pedido do Márcio,
   global: vale nas oito páginas). `.nav-cta:hover` em produção não deriva
   da superfície — preenche com `var(--orange)` fixo e texto branco, e sobe
   2px, não 1. É a MESMA fórmula que acabamos de aplicar ao `.btn--contorno`
   (texto sempre `var(--r-base)`, não `var(--realce)`): a marca aparece
   sempre com o mesmo vermelho, não um degrau que muda por fundo.

   `translateY(-2px)` aqui vence o `-1px` de `.btn:hover` (mesma
   especificidade de classe, mas esta regra vem depois na folha) — o mesmo
   grau de elevação da barra, um a mais que os outros botões do site. */
.btn--solido:hover {
  background: var(--r-base);
  color: var(--branco);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* contorno — o .btn--ghost de produção: borda na cor do texto, e no hover
   ela INVERTE (preenche com a tinta, o texto vira a cor de marca) em vez de
   só escurecer a borda.

   A BORDA AFINOU E FICOU A 15% (10/09/2026, pedido do Márcio, valendo em
   toda página onde o botão aparece — 50%, depois 30%, e por fim 15%).
   Produção usa 1,5px na tinta cheia; ali o contorno pesa quase tanto quanto
   o botão sólido ao lado, e os dois deixam de ler como primário e
   secundário. A 1px e 30% ele recua sem sumir — o TEXTO continua na tinta
   cheia, que é o que preserva o contraste AA; só a moldura cede.

   `color-mix` com a declaração cheia ANTES: quem não entende a função
   ignora a segunda linha e fica com a borda opaca, que é o comportamento
   antigo. Nenhum navegador acaba sem borda. */
.btn--contorno {
  border-width: 1px;
  border-color: var(--tinta);
  border-color: color-mix(in srgb, var(--tinta) 15%, transparent);
  color: var(--tinta);
}
/* No hover, letras e ícone vão para VERMELHO — var(--r-base), o único
   vermelho de verdade no DS (10/09/2026, pedido do Márcio, global: vale
   nas oito páginas). Antes era `var(--realce)`, que muda de valor por
   superfície (r-light no escuro, r-base no claro, e — o bug que isto
   também corrige — BRANCO dentro de `.cta`, onde `--realce:var(--branco)`
   deixava o texto invisível sobre o fundo branco do hover). Fixo em
   r-base, o hover é a mesma cor em toda superfície, sempre legível: o
   ícone do `.btn__seta`, quando existir, já usa `stroke="currentColor"` e
   herda o vermelho de graça, sem regra à parte. */
/* O PREENCHIMENTO DO HOVER É BRANCO NAS DUAS SUPERFÍCIES (11/09/2026).
   Era `var(--tinta)` — a tinta da superfície —, e isso dava dois hovers
   diferentes: onde a tinta é clara (o herói escuro e o fecho vermelho, que
   também escreve em branco) o botão virava uma pastilha BRANCA com letra
   vermelha — que é o gesto certo —, e no claro virava uma pastilha PRETA,
   idêntica ao botão sólido ao lado, com #CC3300 sobre #0C0C0C em 3,76:1 —
   abaixo do mínimo de 4,5:1 que este projeto trata como inegociável. É a
   mesma medida que já estava anotada na seção 3, onde ela custou ao rótulo
   desta seção o #FF6633: o vermelho de verdade não vive sobre preto.

   Branco puro nos dois lados resolve as três coisas de uma vez: o gesto
   passa a ser UM só em todo o site; sobre a base clara (#F5F5F5) o botão
   sobe um degrau de luz em vez de virar um bloco preto — o mesmo movimento
   que `.sup--clara .deliver:hover` já faz com os cartões; e o vermelho fica
   em 6,8:1 sobre branco, nas duas superfícies. No escuro a mudança é de 5
   em 255 (o #FAFAFA de `--tinta` para #FFFFFF) — invisível, e é o mesmo
   valor que `--acao-hover` já declara lá para `.btn--light:hover`.

   Medido no navegador, não estimado: 3,76:1 antes (sobre #0C0C0C), 5,20:1
   agora (sobre #FFFFFF); sobre o #FAFAFA que o escuro usava dava 4,98:1, ou
   seja, só o lado CLARO estava reprovado.

   A borda sai da regra: a hairline de `color-mix(--tinta 15%)` da base
   continua valendo e é ela que guarda a silhueta do botão sobre o claro.
   No escuro ela é branco a 15% por cima de um preenchimento branco — não
   aparece, e não precisa aparecer. */
.btn--contorno:hover {
  background: #FFFFFF;
  color: var(--r-base);
}

/* fantasma — terciário, sem caixa. Não existe variante equivalente em
   loomty.com (o site real só tem light/dark/ghost); fica como está. */
.btn--fantasma { color: var(--tinta-fraca); padding-inline: 8px; }
.btn--fantasma:hover { color: var(--tinta); }

.btn--largo { width: 100%; }

/* seta do CTA: anda um fio no hover, e não anda para quem pediu quieto */
.btn__seta { transition: transform .18s ease; }
.btn:hover .btn__seta { transform: translateX(3px); }

/* ---- cartão do sistema --------------------------------------------------
   O cartão escuro é #0C0C0C sobre a moldura #060606 — não o contrário. Os
   tons não são gosto: é o par que leva os rótulos de acento a 4,5:1. No
   repouso não há contorno; ele entra no hover junto de um degrau de luz. */

.cartao {
  border-radius: var(--raio);
  background: var(--fundo);
  padding: var(--e4);
}
.sup--poco .cartao,
.sup--escura .cartao {
  background: var(--preto);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.sup--clara .cartao {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cinza-200);
}

/* fio de acento no topo do cartão, na cor que a peça pedir via --tom */
.cartao--acento { position: relative; overflow: hidden; }
.cartao--acento::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tom, var(--acao));
}



/* --------------------------------------------------------------------------
   ACENTO DO CARTÃO
   --------------------------------------------------------------------------
   `--tom` pinta o fio de 3px no topo do cartão (decorativo). `--tom-txt`
   pinta o rótulo, que é texto pequeno e precisa de 4,5:1 contra o fundo do
   cartão. Nem sempre são a mesma cor, e é justamente por isso que existem
   duas variáveis: sobre cartão branco, o amarelo #CC7700 mede 4,0:1 e o
   oliva #5A8A00 mede 4,14:1 — os dois reprovam —, então o texto desce para
   o degrau `dark` da mesma família. Sobre cartão preto, o roxo não tem
   degrau claro o bastante em lugar nenhum do DS: ali o fio fica roxo e o
   rótulo usa a tinta fraca. Nenhuma cor foi inventada para resolver isto.
   -------------------------------------------------------------------------- */

.ac-r { --tom: var(--r-light); --tom-txt: var(--r-light); }   /* 5,6:1 */
.ac-i { --tom: var(--i-light); --tom-txt: var(--i-light); }   /* 8,9:1 */
.ac-a { --tom: var(--a-light); --tom-txt: var(--a-light); }   /* 9,3:1 */
.ac-s { --tom: var(--s-light); --tom-txt: var(--s-light); }   /* 6,6:1 */
.ac-e { --tom: var(--e-light); --tom-txt: var(--e-light); }   /* 4,6:1 */
.ac-c { --tom: var(--c-light); --tom-txt: var(--tinta-fraca); } /* ver acima */

.sup--clara .ac-r { --tom: var(--r-base); --tom-txt: var(--r-base); }  /* 5,9:1 */
.sup--clara .ac-i { --tom: var(--i-base); --tom-txt: #7A4800; }        /* 8,6:1 */
.sup--clara .ac-a { --tom: var(--a-base); --tom-txt: #2E4800; }        /* 11,9:1 */
.sup--clara .ac-s { --tom: var(--s-base); --tom-txt: var(--s-base); }  /* 5,3:1 */
.sup--clara .ac-e { --tom: var(--e-base); --tom-txt: var(--e-base); }  /* 8,6:1 */
.sup--clara .ac-c { --tom: var(--c-base); --tom-txt: var(--c-base); }  /* 10,6:1 */


/* ==========================================================================
   6 · ESPAÇO SOB A BARRA
   --------------------------------------------------------------------------
   Todas as páginas usam agora o cabeçalho e o rodapé reais de loomty.com
   (assets/css/nav-rodape-loomty-com.css), não um componente próprio — o que
   sobra para este arquivo estilizar é só o respiro do conteúdo por baixo da
   barra fixa.
   ========================================================================== */

/* A barra real tem 73px, é FIXA e TRANSPARENTE: ela flutua sobre o topo da
   página e só ganha fundo quando a página rola. Empurrar o conteúdo para
   baixo dela desmancharia justamente esse efeito, então aqui o padding sai
   e quem garante o respiro é o padding da própria seção de abertura
   (.heroi na home, .cabeca nas demais páginas). */
.conteudo--sob-barra { padding-top: 0; }


/* ==========================================================================
   7 · HOME — cinco blocos, nesta ordem
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 · HERÓI — texto e pergunta lado a lado
   --------------------------------------------------------------------------
   A diagramação segue a de loomty.com/iara, que é a referência de respiro
   desta página: seção de tela cheia com o conteúdo centrado na vertical,
   padding 96/40/48, rótulo em mono na cor de marca, título em Tanker com
   entrelinha 1,08, parágrafo de 17px com entrelinha 1,55 a 28px do título.
   O bloco de texto fica à esquerda e a pergunta à direita, sem forma fixa —
   ela se adapta à largura da coluna.
   -------------------------------------------------------------------------- */

.heroi {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-block: 96px 48px;
}
.heroi__grade {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--e6);              /* 100px — o respiro entre as colunas */
  width: 100%;
}

.heroi__rotulo {
  font-size: 12.5px;
  letter-spacing: 1.53px;
  color: var(--r-light);        /* a cor de rótulo de /iara, no degrau que passa AA */
}
.heroi__titulo {
  margin-top: 11px;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.08;
  max-width: 15ch;
}
.heroi__lede {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.55;
  max-width: 46ch;
}
.heroi__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
}

/* --------------------------------------------------------------------------
   7.2 · A PERGUNTA — cartão claro, com a interação do jogo
   --------------------------------------------------------------------------
   A MOLDURA é a de `.audience__cards` de loomty.com: fundo #F2F2F2, canto de
   16 e 8px de folga em volta do cartão. O CARTÃO é o de `.persona`: #FAFAFA,
   canto de 8, sem sombra e sem contorno. É a mesma construção dos cartões da
   seção de produto — moldura clara, cartão um degrau mais claro dentro dela.

   As cores de dentro são as do TEMA CLARO do jogo, lidas das variáveis de
   play.loomty.com: --color-field #FFF nas respostas, --color-text #0C0C0A no
   texto, --color-border #E5E5E5 nos contornos, e o cinza #525252 do rótulo
   da resposta.

   A INTERAÇÃO continua sendo a de lá: no hover e no estado escolhido a borda
   de 3px é um conic-gradient que dá uma volta a cada 5 segundos, animado por
   uma custom property registrada com @property — só uma propriedade tipada
   como <angle> pode ser interpolada. Escolhida, a resposta vai para o fundo
   #0C0C0A, que no jogo é fixo nos dois temas.
   -------------------------------------------------------------------------- */

@property --anel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes anel-gira { to { --anel: 360deg; } }

.jogo {
  --jogo-tela: #FAFAFA;
  --jogo-campo: #FFFFFF;
  --jogo-tinta: #0C0C0A;
  --jogo-tinta-media: #525252;
  --jogo-tinta-fraca: #6B6860;
  --jogo-linha: #E5E5E5;
  --jogo-escolhida: #0C0C0A;

  padding: var(--e1);
  border-radius: var(--raio-grande);
  background: #F2F2F2;
}

.jogo__tela {
  display: flex;
  flex-direction: column;
  /* Com 372px o cartão media exatamente o conteúdo — sem sobra nenhuma, o
     flex:1 da pergunta não tinha o que distribuir e ela ficava colada nas
     respostas, não "centralizada num espaço". 460px abre uma folga real:
     é o que sobe para o flex:1 da pergunta ocupar, ela no meio dele, com
     respostas+nota coladas na base a uma distância fixa (o padding). */
  min-height: 460px;
  padding: var(--e6) var(--e4);
  border-radius: var(--raio);
  background: var(--jogo-tela);
}

/* As duas telas (pergunta/feito) enchem a altura do cartão — é o que
   permite à pergunta centralizar no espaço livre ENQUANTO as respostas e a
   nota ficam coladas na base, em vez do bloco inteiro flutuando no meio
   como uma peça só. */
.jogo__tela > [data-tela] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* a tela de "respondida" não tem um segundo bloco para ancorar embaixo —
   é uma peça só, e essa continua centralizada no meio, como antes */
[data-tela="feito"] { justify-content: center; }

.jogo__pergunta {
  /* ocupa todo o espaço que sobra acima das respostas e centraliza o texto
     nele — é o que empurra .jogo__respostas + .jogo__nota para a base do
     cartão sem precisar de position/margin-top:auto nelas */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.02em;        /* o tracking do jogo */
  text-align: center;
  color: var(--jogo-tinta);
  text-wrap: balance;
  margin-inline: auto;
  max-width: 22ch;
}

/* As quatro numa linha só, como no jogo. O que cabe numa coluna de ~560px
   é apertado — "ÀS VEZES" é o rótulo mais longo —, então tudo desceu um
   degrau: 10,5px de rótulo, 19px de tecla, 10px de respiro lateral. Foi o
   suficiente para as quatro caberem sem quebrar linha e sem espremer. */
.jogo__respostas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: var(--e5);
}

.jogo__resposta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 46px;
  padding: 11px 10px;
  border: 3px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(var(--jogo-campo), var(--jogo-campo)) padding-box,
    linear-gradient(var(--jogo-linha), var(--jogo-linha)) border-box;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -.12px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--jogo-tinta-media);
  cursor: pointer;
  transition: transform .26s cubic-bezier(.22, .8, .26, 1),
              background-color .2s ease,
              box-shadow .26s ease,
              color .18s ease;
}

/* o anel que gira — hover, foco e escolhida, como no jogo. A sombra é a
   medida ao vivo em play.loomty.com (getComputedStyle depois da transição
   de 0,26s assentar — pega rápido demais ela ainda lia "none"): duas
   camadas, 0 1px 2px a 5% e 0 10px 24px -8px a 22%, a mesma elevação que o
   translateY(-3px) sugere. */
.jogo__resposta:hover,
.jogo__resposta:focus-visible,
.jogo__resposta[aria-checked="true"] {
  animation: anel-gira 5s linear infinite;
  background:
    linear-gradient(var(--jogo-campo), var(--jogo-campo)) padding-box,
    conic-gradient(from var(--anel),
      #FFC800 0deg, #F2007E 144deg, #129F73 260deg, #FFC800 1turn) border-box;
  box-shadow: 0 1px 2px rgba(12, 12, 10, .05), 0 10px 24px -8px rgba(12, 12, 10, .22);
}
/* [aria-checked="true"] repete box-shadow e color logo abaixo, com valores
   mais escuros — e vence aqui embaixo por ordem de origem, inclusive
   quando o item já escolhido também está em hover.

   Uma divergência deliberada: no jogo o texto do hover vira rosa #F2007E.
   Medido sobre este cartão claro (#FFFFFF), esse rosa dá 4,14:1 — abaixo
   dos 4,5:1 que o AA exige para um rótulo de 10,5px. Fica com a tinta
   escura do cartão, que já passa, e não com a cor exata de produção. */
.jogo__resposta:hover { transform: translateY(-3px); color: var(--jogo-tinta); }
.jogo__resposta:active { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(12, 12, 10, .06); }
.jogo__resposta:focus-visible { outline: 2px solid var(--jogo-tinta); outline-offset: 3px; }

.jogo__resposta[aria-checked="true"] {
  background:
    linear-gradient(var(--jogo-escolhida), var(--jogo-escolhida)) padding-box,
    conic-gradient(from var(--anel),
      #FFC800 0deg, #F2007E 144deg, #129F73 260deg, #FFC800 1turn) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 20px -8px rgba(0, 0, 0, .38);
  color: #FFFFFF;
}
.jogo__resposta[aria-checked="true"] .jogo__tecla {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .72);
}

.jogo__tecla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  border: 1px solid var(--jogo-linha);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  /* --color-text-muted do tema claro do jogo. O jogo pinta esta tecla em
     branco a 45%, que sobre o cartão claro daria 2,42:1 — abaixo dos 4,5:1
     que o AA exige para texto pequeno, e AA é critério inegociável aqui.
     Este cinza mede 5,4:1 e continua mais fraco que o rótulo (#525252),
     preservando a hierarquia entre os dois. */
  color: var(--jogo-tinta-fraca);
  transition: border-color .18s ease, color .18s ease;
}

.jogo__nota {
  margin-top: var(--e3);
  margin-inline: auto;
  max-width: 38ch;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--jogo-tinta-fraca);
}

/* ---- estado 2: respondida ---- */
.jogo__feito { display: grid; gap: 12px; justify-items: center; text-align: center; }
.jogo__feito-t {
  font-family: var(--sans);
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--jogo-tinta);
}
.jogo__feito-d {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--jogo-tinta-fraca);
  max-width: 40ch;
}
.jogo__feito-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
/* o cartão é claro por dentro de um herói escuro (.sup--escura), então herda
   --acao/--acao-on errados (branco sobre branco) se não for corrigido aqui —
   o mesmo par .btn--dark de produção (ink de fundo, branco no texto), com
   os tokens do próprio jogo em vez dos do site, já que o cartão é um
   componente à parte com sua paleta verificada. */
.jogo__feito-acoes .btn--solido { background: var(--jogo-tinta); color: var(--branco); }
.jogo__feito-acoes .btn--solido:hover { background: #000000; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.jogo__feito-acoes .btn--fantasma { color: var(--jogo-tinta-fraca); }
.jogo__feito-acoes .btn--fantasma:hover { color: var(--jogo-tinta); }


/* --------------------------------------------------------------------------
   7.2b · O CARTÃO DA PERGUNTA EM ESCURO — `.jogo--escura`
   --------------------------------------------------------------------------
   O cartão claro dentro do herói escuro era um empréstimo do TEMA CLARO do
   jogo (seção 7.2). Sobre a pilha ele virava a única mancha branca da página
   inteira e roubava o herói do título. Esta é a mesma peça no tema escuro.

   NENHUM HEX NOVO ENTROU. Cada valor abaixo já estava na folha, medido:

     moldura  #060606  --cinza-900, a mesma moldura de `.delivers__cards`
     cartão   #0C0C0C  --preto, o mesmo cartão de `.deliver`
     campo    #111111  o degrau de luz de `.deliver:hover`, o único passo
                       acima do cartão preto que a produção usa
     linha    #262626  o --linha do contrato de superfície escura
     anel     rgba(255,255,255,.09)  o contorno de `.sup--escura .cartao`

   A HIERARQUIA DE TINTA foi remapeada degrau a degrau, não invertida no
   olho — os três tons do tema claro (ink 15,9:1 · rótulo 7,9:1 · tecla
   5,4:1) viram os três tons de texto que a superfície escura já declara:

     pergunta   #FAFAFA  --branco        18,4:1 sobre #0C0C0C
     rótulo     #D4D4D4  --cinza-200     11,9:1 sobre o campo #111111
     tecla/nota #A3A3A3  --cinza-400      7,0:1 sobre #0C0C0C (já catalogado)

   #6B6B6B (--cinza-600), que é a tinta fraca do tema CLARO, mede 3,4:1 aqui
   e não podia atravessar: por isso nota e tecla sobem para --cinza-400.

   O ANEL QUE GIRA continua igual — é o espectro da marca, e ele já nasceu
   para fundo escuro. O que inverte é a resposta ESCOLHIDA: no claro ela vai
   para tinta com texto branco; aqui vai para branco com texto tinta, que é
   exatamente o par `.btn--light` que a superfície escura usa em toda parte.
   -------------------------------------------------------------------------- */

.jogo--escura,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo {
  --jogo-tela: var(--preto);
  --jogo-campo: #111111;
  --jogo-tinta: var(--branco);
  --jogo-tinta-media: var(--cinza-200);
  --jogo-tinta-fraca: var(--cinza-400);
  --jogo-linha: #262626;
  --jogo-escolhida: var(--branco);

  background: var(--cinza-900);
}

/* Cartão preto sobre herói preto: o que separa os dois é o contorno de 1px
   a 9% — o mesmo de `.sup--escura .cartao` — mais a borda da moldura, um
   degrau abaixo do fundo da página. Sem o anel o cartão desaparece. */
.jogo--escura .jogo__tela,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__tela { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }

/* escolhida: branco com tinta por cima (o par .btn--light da superfície) */
.jogo--escura .jogo__resposta[aria-checked="true"],
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__resposta[aria-checked="true"] {
  color: var(--preto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .55);
}
.jogo--escura .jogo__resposta[aria-checked="true"] .jogo__tecla,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__resposta[aria-checked="true"] .jogo__tecla {
  border-color: rgba(12, 12, 12, .28);
  color: rgba(12, 12, 12, .62);          /* 5,2:1 sobre #FAFAFA */
}

/* a elevação do hover precisa de sombra mais fechada para aparecer sobre
   preto — a de 22% do tema claro some no fundo */
.jogo--escura .jogo__resposta:hover,
.jogo--escura .jogo__resposta:focus-visible,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__resposta:hover,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__resposta:focus-visible {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -8px rgba(0, 0, 0, .5);
}

/* a tela de "respondida": o botão sólido do cartão é branco com tinta por
   cima, não o inverso do tema claro */
.jogo--escura .jogo__feito-acoes .btn--solido,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__feito-acoes .btn--solido { background: var(--branco); color: var(--preto); }
.jogo--escura .jogo__feito-acoes .btn--solido:hover,
:where(.empilhada) :where(.sup--escura, .sup--poco) .jogo .jogo__feito-acoes .btn--solido:hover { background: #FFFFFF; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }


/* --------------------------------------------------------------------------
   `.jogo--clara` — O INTERRUPTOR DE VOLTA
   --------------------------------------------------------------------------
   Com as regras acima, o cartão passa a seguir a SUPERFÍCIE: escuro dentro
   de `.sup--escura`/`.sup--poco`, claro em qualquer outra. Trocar a classe
   da seção troca o cartão junto, sem tocar no cartão.

   `.jogo--clara` é a saída manual: força o tema claro mesmo sobre superfície
   escura — que é, aliás, exatamente o que `index.html` faz (cartão branco
   sobre herói preto). Ele vence porque o seletor dirigido por superfície
   está embrulhado em `:where()`, que não conta especificidade: lá vale
   0,1,0 (só `.jogo`), aqui também, e esta regra vem depois na folha.

   Os valores abaixo são os MESMOS declarados em `.jogo` (seção 7.2) — não
   há tema novo, só a redeclaração que devolve o original por cima do
   automático. */
.jogo--clara {
  --jogo-tela: #FAFAFA;
  --jogo-campo: #FFFFFF;
  --jogo-tinta: #0C0C0A;
  --jogo-tinta-media: #525252;
  --jogo-tinta-fraca: #6B6860;
  --jogo-linha: #E5E5E5;
  --jogo-escolhida: #0C0C0A;

  background: #F2F2F2;
}
.jogo--clara .jogo__tela { box-shadow: none; }
.jogo--clara .jogo__resposta[aria-checked="true"] {
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 20px -8px rgba(0, 0, 0, .38);
}
.jogo--clara .jogo__resposta[aria-checked="true"] .jogo__tecla {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .72);
}
.jogo--clara .jogo__resposta:hover,
.jogo--clara .jogo__resposta:focus-visible {
  box-shadow: 0 1px 2px rgba(12, 12, 10, .05), 0 10px 24px -8px rgba(12, 12, 10, .22);
}
.jogo--clara .jogo__feito-acoes .btn--solido { background: var(--jogo-tinta); color: var(--branco); }
.jogo--clara .jogo__feito-acoes .btn--solido:hover { background: #000000; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }


/* --------------------------------------------------------------------------
   7.3 · FAIXA DE PROVA
   -------------------------------------------------------------------------- */

.prova { padding-block: var(--e7); min-height: 420px; }
.prova__cabeca { text-align: center; margin-bottom: var(--e5); }
.prova__cabeca h2 { margin-top: var(--e2); }

/* logos: wordmark tipográfico enquanto o arquivo da marca não está na pasta.
   O <img> é a via principal; se o arquivo não existir, o script troca pelo
   nome escrito — nunca por um desenho inventado. Ver assets/img/logos/. */
.prova__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e4) var(--e6);
  padding-block: var(--e3);
}
.prova__logo {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--cinza-600);
  filter: grayscale(1);
  opacity: .9;
}
.prova__logo img { max-height: 40px; width: auto; }

.prova__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
}
.prova__num strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1;
  color: var(--tinta);
}
.prova__num span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

/* --------------------------------------------------------------------------
   SLOT DE CITAÇÃO — desenhado, e vazio de propósito.
   --------------------------------------------------------------------------
   Nasce com `hidden`. Ele só sai do hidden quando houver um depoimento REAL
   com autorização por escrito de quem falou. Publicar fala fabricada — com
   nome de escola ou CRP inventado — é propaganda enganosa (CDC art. 37), e
   o risco é de quem publica, não de quem escreveu o HTML.

   PARA LIGAR: apague o atributo `hidden` do <figure> e troque os três
   campos. Não há mais nada a fazer; o desenho já está pronto abaixo.
   -------------------------------------------------------------------------- */
.citacao {
  max-width: 760px;
  margin: var(--e5) auto 0;
  padding: var(--e5);
  border-radius: var(--raio);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cinza-200);
  text-align: center;
}
.citacao__aspas {
  font-family: var(--display);
  font-size: 44px;
  line-height: .6;
  color: var(--r-base);
}
.citacao blockquote {
  margin: var(--e3) 0 0;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--preto);
  text-wrap: pretty;
}
.citacao figcaption {
  margin-top: var(--e3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cinza-600);
}

/* --------------------------------------------------------------------------
   7.4 · GRADE DE CARTÕES NUMERADOS — o cartão "layer"/"persona" de produção
   --------------------------------------------------------------------------
   As grades de recurso das páginas internas (professores, instituições,
   Iara) usavam um cartão SEM cartão: só texto espaçado, sem fundo, sem
   moldura, sem elevação no hover — inventado na primeira passada, e por
   isso nunca batia com o resto do site. loomty.com tem um componente
   pronto exatamente para isto — uma grade de itens numerados, título e
   texto —, usado duas vezes: `.layer` (dentro de `.layers__grid`, seção
   "Quatro camadas") e `.persona` (dentro de `.audience__cards`, seção
   "Para quem"). Os dois são o MESMO cartão por baixo — moldura #F2F2F2,
   cartão #FAFAFA, mesmas fontes e mesmo hover — então uma classe basta
   para os dois usos.

   MOLDURA: fundo #F2F2F2, canto de 16, 8px de padding e de vão entre
   cartões — os mesmos valores de `.jogo` (seção 7.2) e de `.portas` em
   superfície escura (seção 8): é a MESMA construção — moldura clara, cartão
   um degrau mais claro dentro dela — repetida pela terceira vez no site,
   sempre com os mesmos números.

   CARTÃO: fundo #FAFAFA, canto de 8, sem contorno, sem sombra em repouso;
   no hover sobe 4px e ganha `rgba(12,12,12,.08) 0 18px 40px`. O número usa
   a fonte de destaque (Tanker) na cor de um acento — aqui os `.ac-*` já
   catalogados na seção 4, não uma cor nova — e o título usa a mesma fonte,
   no mesmo tamanho de `.deliver__title` (a régua de título de cartão é
   única no site: --fs-xl). Nenhum valor abaixo foi inventado; todos vieram
   de getComputedStyle em loomty.com, incluindo os 28px de padding
   horizontal (o vertical é 32, os dois values reais, não arredondados
   entre si).
   -------------------------------------------------------------------------- */

.pecas { padding-block: var(--e8); min-height: 700px; }
.pecas__cabeca { margin-bottom: var(--e6); }
.pecas__cabeca h2 { margin-top: var(--e2); max-width: 18ch; }

.pecas__grade {
  /* mesmo raciocínio do bloco .ac-* logo abaixo: o cartão é sempre claro,
     mas `--tinta`/`--tinta-fraca` são do CONTRATO DE SUPERFÍCIE — viram
     branco dentro de `sup--escura` (o painel de /instituicoes é uma delas),
     o que apagava título e texto do cartão claro por dentro de uma seção
     escura. Força aqui o par de "superfície clara", igual ao que
     `.sup--clara` já declara. */
  --tinta: var(--preto);
  --tinta-fraca: var(--cinza-600);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e1);
  background: #F2F2F2;
  border-radius: var(--raio-grande);
  padding: var(--e1);
}
.peca {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4) 28px;
  background: var(--branco);
  border-radius: var(--raio);
  transition: transform .25s, box-shadow .25s;
}
.peca:hover { transform: translateY(-4px); box-shadow: rgba(12,12,12,.08) 0 18px 40px; }
/* O cartão é sempre claro (#FAFAFA), esteja a seção em superfície clara ou
   escura (o painel de /instituicoes, por exemplo, é sup--escura por fora e
   tem esta grade clara por dentro) — por isso o acento força aqui a MESMA
   variante que `.sup--clara .ac-*` usa, em vez de herdar da superfície
   ambiente, que erraria a cor sempre que o cartão está numa seção escura. */
.pecas__grade .ac-r { --tom: var(--r-base); --tom-txt: var(--r-base); }
.pecas__grade .ac-i { --tom: var(--i-base); --tom-txt: #7A4800; }
.pecas__grade .ac-a { --tom: var(--a-base); --tom-txt: #2E4800; }
.pecas__grade .ac-s { --tom: var(--s-base); --tom-txt: var(--s-base); }
.pecas__grade .ac-e { --tom: var(--e-base); --tom-txt: var(--e-base); }
.pecas__grade .ac-c { --tom: var(--c-base); --tom-txt: var(--c-base); }

.peca__n {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(27px, 24.6px + 0.66vw, 33px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--tom-txt, var(--r-base));
}
.peca__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 18.4px + 0.44vw, 24px);
  line-height: 1.18;
  color: var(--tinta);
}
.peca__d { font-size: 15px; line-height: 1.55; color: var(--tinta-fraca); }
.peca__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin-top: auto;
  padding-top: var(--e2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  transition: color .2s;
}
.peca__link:hover { color: var(--tinta); }
.peca__seta { display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.peca__link:hover .peca__seta { opacity: 1; transform: translateX(0); }

/* --------------------------------------------------------------------------
   O CARTÃO "DELIVER" — réplica do componente de loomty.com, só na home
   --------------------------------------------------------------------------
   Não é o mesmo cartão de .peca (usado nas páginas internas): ali o pedido
   original era um cartão mais simples, com fio de acento e sem ícone. Aqui
   o pedido foi reproduzir loomty.com sem tocar em mais nada além do texto,
   então o componente é outro, com nome próprio, para não arrastar mudança
   nenhuma para as páginas que usam .peca.

   Os valores abaixo (moldura #060606, cartão #0C0C0C, anel só no hover,
   -4px de elevação) são os de produção, extraídos letra a letra de
   styles.css. As três cores de acento — #CC7700, #007A40, #0044AA — batem
   exatamente com os tokens do DS já declarados em :root (ac-i, ac-s, ac-e);
   nenhum hex novo entrou.
   -------------------------------------------------------------------------- */

.delivers__cards {
  display: flex;
  align-items: stretch;
  gap: var(--e1);
  background: var(--cinza-900);   /* --card-escuro-moldura de produção */
  border-radius: var(--raio-grande);
  padding: var(--e1);
}

.deliver {
  flex: 1 1 0;
  min-width: 0;
  background: var(--preto);       /* --card-escuro de produção */
  border-radius: var(--raio);
  padding: var(--e4);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
/* no repouso não há contorno — ele entra só no hover, junto da elevação.
   É a mesma regra dos cartões escuros do resto do sistema (ver seção 5),
   documentada ali: o tom sozinho não dá realce suficiente sem pedir mais
   claridade do que o contraste do rótulo permite. */
.deliver:hover {
  transform: translateY(-4px);
  background: #111111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.deliver__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 17px;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .04);
}
.deliver__icon svg { width: 24px; height: 24px; color: var(--tom); }

.deliver__label {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--tom);
}

.deliver__title {
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.05;
  font-weight: 400;
  text-transform: uppercase;   /* como em loomty.com */
  color: var(--tinta);
}
.deliver__text {
  font-size: 14.3px;
  line-height: 1.52;
  color: var(--tinta-fraca);
}

/* Em loomty.com o conteúdo do cartão mora num .deliver__inner de 280px
   fixos dentro de um cartão de 416px — ou seja, sobram 72px de respiro à
   direita, e é isso que dá ao texto a medida de linha curta que se vê lá.
   Sem esta trava o texto se espalha pela largura toda do cartão e a
   quebra de linha sai diferente, que é a divergência mais visível entre
   os dois. `max-width` em vez de `width` para colapsar no telefone. */
.deliver__label,
.deliver__title,
.deliver__text { max-width: 280px; }

.delivers__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 18px era o vão de um par DESIGUAL — botão sólido + link mono sem
     contorno, que precisa de mais ar para não encostar na caixa do botão.
     Com o segundo virando `.btn--contorno` (11/09/2026), o par é o mesmo do
     herói, e o vão é o de lá: --e2. O fecho usa 14; entre os dois, o herói
     é o par que esta fileira repete — sólido + contorno, lado a lado. */
  gap: var(--e2);
  margin-top: var(--e5);
}

/* o CTA sólido desta seção é BRANCO em loomty.com (.btn--light), não
   laranja — diferente da régua ".btn--solido" que o resto deste site novo
   usa (hero e fechamento). Escopado com sua própria classe para não puxar
   essa cor para o resto do site: aqui o pedido foi fidelidade ao
   componente de origem, não uma reforma da paleta de botões. */
.btn--light { background: var(--branco); color: var(--preto); }
.btn--light:hover { background: #FFFFFF; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }

/* o link de fechamento de seção, em mono caixa-alta — mesmo desenho de
   loomty.com (.link-mono), reaproveitado só aqui */
.link-mono {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--cinza-400);
  transition: color .18s ease;
}
.link-mono:hover { color: var(--tinta); }

/* rótulo e título desta seção, e só dela, replicam loomty.com: rótulo na
   cor de marca (não no cinza neutro do resto do site) e título em
   caixa-alta. O resto do site usa frase normal nos headlines — aqui o
   pedido foi reproduzir o componente de origem sem alterar mais nada.

   A cor do rótulo é --r-LIGHT, não --r-base (o #CC3300 exato de produção):
   medido, #CC3300 sobre este fundo (#0C0C0C) dá 3,76:1, abaixo dos 4,5:1
   que "Contraste AA" — um critério inegociável deste projeto — exige para
   texto pequeno. #FF6633 é a mesma família de cor um degrau mais clara
   (5,6:1) e é a mesma escolha que o resto do sistema já faz para texto de
   acento sobre fundo escuro (ver a seção de tokens). */
.pecas__cabeca .rotulo { color: var(--r-light); }
#pecas-t { text-transform: uppercase; }

@media (max-width: 900px) {
  .delivers__cards { flex-direction: column; }
  .deliver { padding: 26px 22px; }
}

/* --------------------------------------------------------------------------
   7.5 · ÂNCORA DE PREÇO
   -------------------------------------------------------------------------- */

.ancora { padding-block: var(--e7); min-height: 350px; display: flex; align-items: center; }
.ancora__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--e5) var(--e7);
  align-items: center;
  width: 100%;
}
.ancora__t { max-width: 12ch; }
.ancora__d { font-size: var(--fs-lede); line-height: 1.65; color: var(--tinta-fraca); max-width: 60ch; }
.ancora__d b { color: var(--tinta); font-weight: 700; }
.ancora__acoes { margin-top: var(--e3); }

/* --------------------------------------------------------------------------
   7.6 · FECHAMENTO
   -------------------------------------------------------------------------- */

.fecho {
  position: relative;
  min-height: 380px;
  padding-block: var(--e8);
  display: flex;
  align-items: center;
  text-align: center;
}
.fecho__t { margin-inline: auto; max-width: 20ch; }
.fecho__l {
  margin-top: var(--e3);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .6px;
  color: var(--tinta-fraca);
}
.fecho__l a { color: var(--realce); }
.fecho__l a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fecho__acoes { margin-top: var(--e4); }

/* ==========================================================================
   8 · PÁGINAS INTERNAS
   ========================================================================== */

/* ---- cabeçalho de página ------------------------------------------------ */
.cabeca { padding-block: var(--e7) var(--e6); }
.cabeca h1 { margin-top: var(--e2); max-width: 17ch; }
.cabeca .lede { margin-top: var(--e3); }
.cabeca__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

/* ---- cabeçalho de seção ------------------------------------------------- */
.cabecalho { margin-bottom: var(--e5); }
/* o seletor precisa pegar a CLASSE, não só o elemento: em /para-quem o título
   da abertura é <h1 class="display h2"> — um h1 que carrega a classe h2 por
   ser o título da página. Enquanto isto dizia só `h2`, aquele título ficava
   sem o vão de 16px depois do rótulo (nascia colado nele) e sem o limite de
   20ch. Na home nada muda: lá os títulos são <h2> de verdade e já casavam. */
.cabecalho h2, .cabecalho .h2 { margin-top: var(--e2); max-width: 20ch; }
.cabecalho .lede { margin-top: var(--e2); }
.cabecalho--centro { text-align: center; }
.cabecalho--centro h2, .cabecalho--centro .h2,
.cabecalho--centro .lede { margin-inline: auto; }

/* ---- /para-quem · três portas iguais ------------------------------------
   Três cartões do mesmo tamanho, mesma estrutura, mesmo peso visual. A
   página não argumenta: ela só encaminha. Quem já sabe quem é clica e sai. */

.portas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  /* sobe acima do brilho do palco. Sem isto os cartões, que não são
     posicionados, pintam ABAIXO dos dois spans do brilho (posicionados, com
     z-index 0) e o espectro passa por cima do texto. É a mesma linha que a
     home usa em `.empilhada .palco .jogo`. */
  position: relative;
  z-index: 1;
}
.porta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--e5) var(--e4);
  border-radius: var(--raio);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cinza-200);
  transition: transform .18s ease, box-shadow .18s ease;
}
.porta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--tom), 0 8px 32px rgba(0,0,0,.10);
}
.porta__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--tom) 12%, transparent);
  color: var(--tom);
}
.porta__ico svg { width: 22px; height: 22px; }
.porta__t { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--tinta); }
.porta__d { font-size: 15px; line-height: 1.6; color: var(--tinta-fraca); }

/* Sobre fundo escuro a porta vira o cartão .deliver de produção: moldura
   #060606 em volta, cartão #0C0C0C sem anel em repouso — o anel só entra
   no hover, junto do degrau de luz, igual ao resto do sistema de cartões
   escuros (ver a seção 5). Sobre claro ela continua como já estava. */
.sup--escura .portas,
.sup--poco .portas {
  background: var(--cinza-900);
  border-radius: var(--raio-grande);
  padding: var(--e1);
  gap: var(--e1);
}
.sup--escura .porta,
.sup--poco .porta {
  background: var(--preto);
  box-shadow: none;
}
.sup--escura .porta:hover,
.sup--poco .porta:hover {
  transform: translateY(-4px);
  background: #111111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.porta__ir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  margin-top: auto;
  padding-top: var(--e3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tom-txt, var(--tinta-fraca));
}

/* ---- lista de itens (usada em várias páginas) --------------------------- */
.itens { display: grid; gap: var(--e3); }
.item__t { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.item__d { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--tinta-fraca); }

/* lista com marcador de traço, para enumerações curtas */
.tracos li {
  position: relative;
  padding-left: 22px;
  padding-block: 5px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}
.tracos li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 12px; height: 1.5px;
  background: var(--acao);
}
/* dentro de um cartão com acento, o traço segue o acento do cartão — senão
   a coluna "com a Loomty" e a coluna "sem a Loomty" saem com o mesmo
   marcador vermelho, que é justamente a distinção que a peça faz */
.cartao--acento .tracos li::before { background: var(--tom); }

/* ---- duas colunas, comparando "sem" e "com" a Loomty --------------------
   Único lugar do site em que dois `.cartao` ficam lado a lado como
   argumento (não como painel avulso — os outros usos de `.cartao` seguem
   sem moldura, ver seção acima). Mesma moldura clara das outras grades de
   cartão do site (`.pecas__grade`, `.planos`): o conteúdo é só nosso, mas o
   recurso visual — moldura clara envolvendo cartões claros, elevação só no
   hover — é o único que este site usa para "aqui tem uma comparação". */
.duo--comparar {
  background: #F2F2F2;
  border-radius: var(--raio-grande);
  padding: var(--e1);
  gap: var(--e1);
}
.duo--comparar .cartao {
  background: var(--branco);
  box-shadow: none;
  transition: transform .25s, box-shadow .25s;
}
.duo--comparar .cartao:hover { transform: translateY(-4px); box-shadow: rgba(12,12,12,.08) 0 18px 40px; }
.duo--comparar .cartao,
.duo--comparar .cartao--acento {
  --tinta: var(--preto);
  --tinta-fraca: var(--cinza-600);
}

/* ---- duas colunas: figura + texto --------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e7);
  align-items: center;
}
.duo__fig {
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cinza-900);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.sup--clara .duo__fig { box-shadow: inset 0 0 0 1px var(--cinza-200); background: var(--cinza-100); }
.duo__fig img { width: 100%; }

/* recorte alto e rolável para as telas de produto muito verticais */
.duo__rolo { max-height: 520px; overflow: hidden; }
.duo__rolo img { width: 100%; }

/* ---- fluxo em passos ---------------------------------------------------- */
.passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
  counter-reset: passo;
}
.passo { display: flex; flex-direction: column; gap: 10px; }
.passo__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
}
.passo--fim .passo__no { border-color: var(--acao); background: var(--acao); color: var(--acao-on); }
.passo__t { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.passo__d { font-size: 14px; line-height: 1.6; color: var(--tinta-fraca); }

/* ---- indicadores -------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3);
}
.kpi { padding: var(--e3); border-radius: var(--raio); box-shadow: inset 0 0 0 1px var(--linha); }
.kpi__l {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.kpi__v {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 38px;
  line-height: 1;
  color: var(--tinta);
}
.kpi__d { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--tinta-fraca); }

/* ---- governança: o que a gente não faz ----------------------------------
   Mesma moldura de `.pecas__grade` (seção 7.4): as duas grades da página
   trocam de largura, mas o cartão de dentro é o mesmo `.peca`. */
.gov {
  --tinta: var(--preto);
  --tinta-fraca: var(--cinza-600);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e1);
  background: #F2F2F2;
  border-radius: var(--raio-grande);
  padding: var(--e1);
}
.gov .ac-r { --tom: var(--r-base); --tom-txt: var(--r-base); }
.gov .ac-i { --tom: var(--i-base); --tom-txt: #7A4800; }
.gov .ac-a { --tom: var(--a-base); --tom-txt: #2E4800; }
.gov .ac-s { --tom: var(--s-base); --tom-txt: var(--s-base); }
.gov .ac-e { --tom: var(--e-base); --tom-txt: var(--e-base); }
.gov .ac-c { --tom: var(--c-base); --tom-txt: var(--c-base); }

/* ---- /preco · cinco produtos ---------------------------------------------
   Cada coluna lista SÓ o incremento sobre a anterior. Repetir a lista
   inteira em todas as colunas é o que faz uma tabela de preço virar um
   paredão que ninguém compara — e some justamente com a informação que a
   pessoa foi buscar, que é a diferença entre um plano e o seguinte.

   O CARTÃO é o `.pr-plano` de loomty.com/preco — a página real de preços de
   produção, que este site não copia no conteúdo (ela vende crédito de jogo
   ao jogador final, com uma lista de recursos que cita RIASEC e o hexágono
   de coerência; esta página vende para quem conduz, sem nenhum dos dois) mas
   cujo COMPONENTE é o mesmo tipo de moldura clara + cartão claro do resto do
   site — a quarta vez que ele aparece (.jogo, .portas em superfície escura,
   .pecas__grade, e agora aqui). Canto de 10, não 8: é o único cartão do site
   com esse raio — valor medido, não arredondado para o resto da régua. */

.planos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e1);
  align-items: stretch;
  background: #F2F2F2;
  border-radius: var(--raio-grande);
  padding: var(--e1);
}
.planos .ac-r { --tom: var(--r-base); --tom-txt: var(--r-base); }
.planos .ac-i { --tom: var(--i-base); --tom-txt: #7A4800; }
.planos .ac-a { --tom: var(--a-base); --tom-txt: #2E4800; }
.planos .ac-s { --tom: var(--s-base); --tom-txt: var(--s-base); }
.planos .ac-e { --tom: var(--e-base); --tom-txt: var(--e-base); }
.plano {
  --tinta: var(--preto);
  --tinta-fraca: var(--cinza-600);
  display: flex;
  flex-direction: column;
  padding: var(--e4) 28px 28px;
  border-radius: 10px;
  background: var(--branco);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.plano:hover { transform: translateY(-4px); box-shadow: rgba(12,12,12,.08) 0 18px 40px; }
/* o destaque de produção não é um contorno — é uma barra de 3px no topo e
   uma sombra com a MESMA cor do acento, em vez do preto neutro do hover */
.plano--destaque { position: relative; overflow: hidden; }
.plano--destaque::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tom, var(--r-base));
}
.plano--destaque:hover {
  box-shadow: color-mix(in srgb, var(--tom, var(--r-base)) 10%, transparent) 0 14px 32px;
}
.plano__tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--tom-txt, var(--tinta-fraca));
}
.plano__n {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.32px;
  color: var(--tinta);
}
.plano__quem { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--tinta-fraca); min-height: 60px; }
.plano__preco {
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--cinza-100);
  color: var(--tinta);
}
.plano__preco .cur { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--tinta-fraca); }
.plano__preco .amt {
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.plano__preco small { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--tinta-fraca); letter-spacing: 0; }
.plano__credito {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}
.plano__credito b { color: var(--tinta); }
.plano__mais {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--cinza-100);
}
.plano__mais-r {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--tinta-fraca);   /* 5,3:1 sobre o cartão branco — #A3A3A3 dava 2,52:1 */
}
/* marca de inclusão: o check de produção (`--icone-ok`, seção 4), não mais
   o travessão — o travessão não existe em `.pr-feat`, foi inventado aqui */
.plano__mais li {
  position: relative;
  padding-left: 22px;
  padding-block: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}
.plano__mais li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 15px;
  background: var(--s-base);
  mask: var(--icone-ok) center / 15px 15px no-repeat;
  -webkit-mask: var(--icone-ok) center / 15px 15px no-repeat;
}
.plano__cta { margin-top: auto; padding-top: var(--e3); }
/* A coluna de plano tem ~227px no desktop, e o `nowrap` da régua de botão
   fazia o rótulo vazar para fora do cartão. Aqui, e só aqui, o botão pode
   quebrar em duas linhas: a alternativa era encurtar o rótulo até ele
   deixar de dizer o que o clique faz. */
.plano__cta .btn {
  white-space: normal;
  padding-inline: 12px;
  line-height: 1.3;
  text-align: center;
  min-height: 48px;
}

/* faixas de crédito adicional */
.faixas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e1);
}
.faixa {
  padding: var(--e2);
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--linha);
  text-align: center;
}
.faixa b { display: block; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--tinta); }
.faixa span { display: block; margin-top: 6px; font-size: 12px; color: var(--tinta-fraca); }

/* ---- formulário de qualificação (/professores) -------------------------- */
.form { display: grid; gap: var(--e3); max-width: 560px; }
.campo { display: grid; gap: 6px; }
.campo label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.campo input,
.campo select {
  height: 48px;                      /* DS · size/input-height */
  padding-inline: 14px;
  border: 1.5px solid var(--linha);  /* DS · border/input */
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
}
.campo input::placeholder { color: var(--cinza-600); }
.campo input:focus, .campo select:focus { border-color: var(--acao); outline: none; }
.campo select { color: var(--tinta); }
.campo select option { color: #0C0C0C; }
.campo__dica { font-size: 12px; line-height: 1.5; color: var(--tinta-fraca); }
.form__nota { font-size: 12.5px; line-height: 1.55; color: var(--tinta-fraca); max-width: 56ch; }

/* ---- CTA de fim de página ----------------------------------------------- */
.chamada { padding-block: var(--e8); text-align: center; }
.chamada h2 { margin: var(--e2) auto 0; max-width: 20ch; }
.chamada p { margin: var(--e3) auto 0; max-width: 58ch; color: var(--tinta-fraca); font-size: var(--fs-lede); }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; margin-top: var(--e4); }


/* ==========================================================================
   9 · RESPONSIVO
   ========================================================================== */

@media (max-width: 1080px) {
  .pecas__grade,
  .portas,
  .gov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  /* a entreletra do display estreita a partir daqui — é o mesmo ajuste que
     loomty.com faz em ≤768px (-0,32px), aplicado no meu corte mais próximo */
  .display { letter-spacing: -0.32px; }

  /* as duas colunas viram uma, e a pergunta sobe para debaixo do título:
     é a única posição em que ela cabe inteira acima da dobra num telefone */
  .heroi { min-height: 0; padding-block: 104px var(--e6); }
  .heroi__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .heroi__titulo { max-width: none; }
  .heroi__lede { max-width: none; }
  .heroi__ctas .btn { flex: 1 1 240px; }

  .ancora__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .ancora__t { max-width: none; }
  .duo { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .duo__fig { order: 2; }
  .secao { padding-block: var(--e7); }
  .pecas, .chamada { padding-block: var(--e7); min-height: 0; }
}


/* --------------------------------------------------------------------------
   O herói a 375px
   --------------------------------------------------------------------------
   A pergunta continua tendo de caber inteira acima da dobra num 375×667. O
   que cede é o respiro do texto; a pergunta e as quatro respostas ficam
   como estão, com o alvo de toque nos 44px do DS.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* a barra de loomty.com tem 73px, é fixa e transparente sobre o herói:
     sem esta reserva o rótulo fica atrás dos botões dela */
  .conteudo--sob-barra .heroi { padding-top: 84px; }
  .heroi { padding-bottom: var(--e5); }
  .heroi__titulo { font-size: clamp(28px, 7.6vw, 32px); }
  .heroi__lede { margin-top: var(--e2); font-size: 14.5px; }
  .heroi__ctas { margin-top: var(--e3); gap: 10px; }
  .heroi__grade { gap: var(--e3); }

  /* no telefone não sobra altura nenhuma para a pergunta centralizar em
     cima das respostas — .jogo__tela já não tem min-height —, então o
     ancoramento em flex não tem função aqui. Volta para fluxo em bloco. */
  .jogo__tela > [data-tela] { display: block; flex: none; }
  .jogo__tela { min-height: 0; padding: 26px var(--e3); }
  .jogo__pergunta {
    display: block;
    font-size: 18px;
    max-width: none;
  }
  /* duas colunas: quatro numa linha não cabem em 375px, e é o que o próprio
     jogo faz nesta largura (grid-cols-2 sm:grid-cols-4). Os respiros verticais
     (respostas 16px, nota 10px — um degrau abaixo do desktop) são os que
     sobraram depois de medir: com os valores de desktop, a última resposta
     ficava 8px abaixo da dobra num 375×667, testado nas 7 perguntas do
     sorteio. */
  .jogo__respostas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; gap: 8px; }
  .jogo__resposta { min-height: 44px; padding: 10px 11px; font-size: 11px; }
  .jogo__nota { margin-top: 10px; font-size: 11px; }
}

@media (max-width: 640px) {
  .pecas__grade,
  .portas,
  .gov,
  .passos,
  .planos { grid-template-columns: minmax(0, 1fr); }
  .prova__logos { gap: var(--e3) var(--e4); }
  .prova__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .citacao { padding: var(--e4) var(--e3); }
  .plano__quem { min-height: 0; }
}



/* ==========================================================================
   9.5 · VARIANTE EMPILHADA — a montagem de gitbook.com  (index-empilhado.html)
   --------------------------------------------------------------------------
   Esta seção monta a home no esqueleto de gitbook.com. A folha continua uma
   só; tudo aqui está escopado em `.empilhada` no <body>, e `index.html` — a
   home publicada — não sente nada.

   POR QUE NO FIM DO ARQUIVO, E NÃO NA SEÇÃO 7
   -------------------------------------------
   A seção 9 (responsivo) reescreve `.heroi__grade`, `.jogo__tela` e as grades
   de cartão em ≤900 e ≤560. Se esta seção morasse na 7, cada regra daqui
   (0,2,0 — duas classes) venceria as de lá (0,1,0) DENTRO do telefone também,
   e a variante desmontaria justamente onde a home já estava certa. Morando
   depois, ela herda o comportamento móvel de lá e só reescreve o que precisa.

   O QUE FOI COPIADO DA GITBOOK (a montagem)
   -----------------------------------------
   1 · DUAS MEDIDAS, NÃO UMA.  Lá o texto do herói corre em ~660px e o
       screenshot do produto em ~1120px. A peça grande é deliberadamente mais
       larga que o texto — é o que a faz ler como demonstração e não como
       ilustração. Aqui: `--bloco` 760 para texto, `--palco` 1000 para a peça,
       a fileira de marcas e a régua de números.
   2 · A ORDEM DO HERÓI: selo → título → lede → ações → MARCAS → peça grande.
       As marcas subiram da segunda seção: lá elas tinham rótulo e título
       próprios ("Em uso hoje / Instituições que já usam"); na gitbook a
       fileira é nua, entre a ação e a demonstração. O título continua no HTML
       para leitor de tela (`.sr-only`), porque logotipo sozinho não se lê.
   3 · O TÍTULO EM DUAS FRASES, a segunda em cor de acento. É o gesto mais
       reconhecível da página deles ("Then fixes it." em laranja).
   4 · A BARRA UTILITÁRIA logo abaixo do herói. Lá é uma pílula contornada com
       dois segmentos; aqui é a mesma barra com os números da partida.
   5 · O CARTÃO com a TAG NO FIM (lá: "Git Sync", "Insights"). O rótulo de
       público desceu do topo do cartão para o fim da faixa.
   6 · UMA SUPERFÍCIE SÓ, e a troca guardada para o fecho — com a marca
       gigante em marca d'água atrás. A gitbook é branca do topo ao penúltimo
       bloco e só o último muda para cinza.
   7 · SEM DIVISÓRIA. O que separa um bloco do outro é ar (~144px), nunca um
       filete. As quatro fitas do espectro que costuravam a versão anterior
       saíram: elas eram a resposta certa para uma pilha de superfícies
       alternadas, e a pilha agora é uma superfície só.

   O QUE NÃO FOI COPIADO (as diferenças)
   -------------------------------------
   · PÍLULA.  Todo botão e todo chip da gitbook é `border-radius:999px`. O DS
     Loomty tem DOIS raios, 8 e 16, e o 8 é literalmente "radius/base: botão,
     cartão, campo". Pílula aqui seria desenho à mão por cima do DS. Botões e
     selo ficam em 8.
   · CLARO.  A gitbook é branca; a atmosfera desta marca é #0C0C0C. A troca de
     superfície do fecho é para BAIXO (`.sup--poco`, #060606), não para cima.
   · UM LARANJA SÓ.  O acento deles é uma cor. O daqui é o espectro — por isso
     o brilho atrás da peça grande é `--espectro` desfocado, não um borrão de
     uma cor só, e o quadrado do selo é UM módulo do mosaico da marca.
   · SEÇÕES INVENTADAS.  A home deles tem catorze blocos; esta tem seis, e o
     conteúdo é o que já existia. Nenhuma frase foi escrita para preencher um
     bloco que a gitbook tem e a Loomty não.
   ========================================================================== */

.empilhada {
  /* --------------------------------------------------------------------
     1280px DE COMPONENTE — e a conta que isso exige
     --------------------------------------------------------------------
     `--container` é 1280px em todo o site, MENOS `--gutter` (40px de cada
     lado): o conteúdo dentro dele mede 1200, não 1280. Para o componente
     medir 1280 de verdade, o container tem de ser 1360 — 1360 − 80 = 1280.
     É a única divergência de container do site, e ela existe para que a
     medida pedida seja a medida entregue, não 80px a menos.

     A razão gitbook (texto estreito / peça larga) afrouxa de 0,7 para 0,84:
     a peça grande continua sendo a mais larga da página, mas o contraste
     entre as duas medidas fica menor do que era. */
  --container: 1360px;
  --bloco: 1080px;   /* a coluna de texto */
  --palco: 1280px;   /* a peça grande e os cartões */
}

/* --------------------------------------------------------------------------
   HERÓI
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   O HERÓI OCUPA A TELA, E O CARTÃO ENCOSTA NA BASE DELA
   --------------------------------------------------------------------------
   Seção de uma tela + cartão colado na base = numa janela alta SOBRA altura,
   e essa sobra tem de ir para algum lugar. Onde ela vai é a decisão inteira:

     `align-items:center` (o padrão de `.heroi`) — metade em cima, metade
       EMBAIXO. A de baixo é justamente o vão que o cartão não pode ter.
     `flex-end` — a sobra inteira acima do selo. Medido a 1440×1200: 410px de
       preto entre a barra e o selo. O herói lê como quebrado.
     DUAS MARGENS `auto` — a sobra racha ao meio entre o topo e o miolo. É o
       que está aqui: `.heroi__texto` puxa metade para cima do selo e
       `.palco` puxa a outra metade para o vão entre a ação e o cartão.
       Nenhum dos dois vira buraco, porque nenhum recebe a sobra inteira.

   A margem `auto` do palco COME o respiro mínimo dele (quando a sobra é
   zero, `auto` é zero), então o mínimo mudou de casa: mora no
   `margin-bottom` de `.heroi__ctas`, que é o elemento de cima.

   A 1440×900 o conteúdo mede ~790px: ~72px de folga no topo, ~128px entre a
   ação e o cartão, e o CORTE do cartão cai exatamente na dobra.

   `svh` logo depois de `vh`: no telefone `100vh` conta a barra do navegador
   como se ela não existisse, e a base da seção — onde o cartão está — ficaria
   escondida atrás dela. Quem não entende `svh` fica com o `vh` da linha
   anterior. */
/* O HERÓI SÓ COM TEXTO, MAS AINDA 100VH (12/09/2026) — pedido do Márcio.
   Até 11/09 esta seção dividia os 100vh com o `.palco` (o jogo
   respondível), cada um puxado por `margin-top:auto` no próprio flex
   column — texto na metade de cima, cartão na de baixo. O palco virou
   seção própria (`.heroi-jogo`, logo abaixo), mas o herói CONTINUA tela
   cheia: só que agora sozinho nela, centrado pelo `align-items:center`
   que `.heroi` (regra base, fora do escopo `.empilhada`) já declara —
   sem precisar de `margin-top:auto` porque não há mais um segundo item
   para dividir o vão com o texto. */
.empilhada .heroi {
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 128px var(--e7);
}
.empilhada .heroi__grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
.empilhada .heroi__texto { width: 100%; max-width: var(--bloco); }

/* ---- A SEÇÃO DA PERGUNTA — o palco, sozinho na própria seção ----
   Mesmo fundo do herói (`sup--escura`): as duas leem como um bloco só, só
   que agora o cartão pode respirar do tamanho do PRÓPRIO conteúdo, e não
   do que sobra de uma tela inteira. `.empilhada .palco` já traz a largura
   (`max-width:var(--palco)`) e o auto-centro; aqui só se anula o
   `margin-top:auto` de quando ele vivia dividindo altura com o texto. */
/* Rente na base — pedido do Márcio, 12/09/2026: os 72px de respiro que
   esta regra dava por baixo do cartão liam como um vão vazio sobrando no
   escuro, antes da próxima seção (que já tem seu próprio padding-top de
   100px). Zerado: o cartão termina exatamente onde a seção termina. */
.empilhada .heroi-jogo { padding-block: 0; }
.empilhada .heroi-jogo .palco { margin-top: 0; }

/* --------------------------------------------------------------------------
   O RÓTULO DO HERÓI — sem chip
   --------------------------------------------------------------------------
   O chip contornado (moldura + quadrado da marca) era o eyebrow da gitbook
   traduzido. Saiu: a página tem outros dois rótulos de seção — "O QUE FICA
   QUANDO O JOGO ACABA" e "PREÇO" —, e os dois são mono caixa-alta na cor de
   acento, sem caixa. O do herói era o único emoldurado, e um de três lendo
   diferente é ruído, não hierarquia.

   `--realce` e não `--r-light` fixo: no escuro resolve #FF6633 (5,6:1 sobre
   #0C0C0C) e no claro #CC3300, que é o degrau que mede seguro sobre claro.
   Fixo em r-light, o rótulo sumiria na versão clara — 2,4:1. */
.empilhada .heroi__rotulo { color: var(--realce); }

.empilhada .heroi__titulo { max-width: 30ch; margin: var(--e3) auto 0; }
/* --------------------------------------------------------------------------
   O TÍTULO CRESCE NO DESKTOP — dentro do padrão, não fora dele
   --------------------------------------------------------------------------
   `--fs-display` é sitewide (H1 do herói = H2 de seção = título de fecho,
   seção 1 · tokens): 43px é o teto medido ao vivo em produção, e é
   deliberado que nenhum título tenha um degrau maior. Essa regra segue
   valendo para `index.html` e para o resto desta própria página (H2 de
   seção, fecho) — não mudei `--fs-display`.

   O que muda é só o H1 do herói EMPILHADO, e só a partir de 901px: aqui ele
   está sozinho no eixo, sem uma coluna de pergunta ao lado disputando peso
   visual (era essa disputa que segurava o tamanho na composição em pares).
   A FORMA do clamp é a mesma — px de piso + vw + px de teto, a mesma receita
   de `--fs-display" — só os três números sobem, mantendo a família Tanker,
   o peso 400, a entrelinha 1,08 e a entreletra -0,512px de `.display`
   (nenhum deles é redeclarado aqui). */
@media (min-width: 901px) {
  .empilhada .heroi__titulo { font-size: clamp(38px, 30px + 1.8vw, 56px); }
  /* CUIDADO — este comentário já quebrou a página inteira uma vez, e
     NENHUM comentário aqui pode conter a sequência que fecha comentário.
     Numa edição anterior ele ficou sem o fecho de comentário (a frase
     morria em "…sem reproduzir); o") e engoliu o `}` logo abaixo. Sem esse `}`, o
     `@media (min-width: 901px)` passou a correr até o FIM do arquivo: toda
     a variante empilhada virou desktop-only e as doze media queries abaixo
     daqui — 768px, 900px, 720px, 560px, print e prefers-reduced-motion —
     nunca chegaram a casar. Foi assim que a galeria apareceu com altura
     zero no celular. Fechado em 11/09/2026.

     Sobre o assunto em si: o selo NÃO sobe um degrau. `.empilhada
     .heroi__rotulo` só declara cor (perto da linha 1981); o alargamento
     relatado não se reproduziu em nenhuma largura testada, até 2560px. Se
     um dia for para subir, é aqui. */
}
/* --------------------------------------------------------------------------
   UMA FRASE POR LINHA — onde o título tem ponto, a quebra é ali
   --------------------------------------------------------------------------
   Sem isto a quebra cai onde a MEDIDA manda, e um título de duas frases sai
   partido no meio da segunda ("Três peças. Uma para / cada lado da mesa."):
   a linha começa numa frase e termina noutra, e o ponto — a única pontuação
   forte que o título tem — deixa de marcar coisa nenhuma.

   `.frase` embrulha a segunda sentença e a joga para a própria linha. É a
   mesma mecânica de `.heroi__eco` (abaixo), separada dele porque lá a linha
   própria vem junto com a cor de acento, e num H2 de seção só a quebra
   interessa. */
.frase { display: block; }

/* A segunda frase em cor de acento, e em LINHA PRÓPRIA. Sem o `display:block`
   a quebra cai onde a medida manda ("…você é, ANTES / de decidir…") e o
   acento nasce no meio de uma linha e termina no meio da outra — que é
   exatamente o contrário do gesto. Na gitbook a quebra é a da FRASE: uma
   sentença por linha, a segunda inteira em laranja.

   A COR DE ACENTO SAIU (10/09/2026): o título é todo branco. O gesto da
   gitbook — segunda frase em laranja — deixava o H1 dividido em dois pesos
   dentro da mesma sentença, e com o rótulo acima já em laranja o herói
   passou a ter dois acentos empilhados disputando o mesmo olhar. Um só, e
   é o rótulo.

   O `display:block` FICA: ele não tem nada a ver com a cor. É ele que põe
   cada frase na sua linha, quebrando no ponto em vez de na medida. */
.heroi__eco { display: block; }

/* 940px, não 62ch: em `ch` a medida ficava em ~726px e a frase quebrava em
   TRÊS linhas, a última com duas palavras. Em 940 ela fecha em duas linhas
   cheias. `balance` reparte as duas por igual em vez de encher a primeira
   e deixar a sobra na segunda. */
.empilhada .heroi__lede { max-width: 940px; margin: var(--e3) auto 0; text-wrap: balance; }
/* o `margin-bottom` daqui é o respiro MÍNIMO entre a ação e o cartão: ele
   não pode morar no `margin-top` do palco, que é `auto` */
.empilhada .heroi__ctas { justify-content: center; margin-top: var(--e4); margin-bottom: var(--e6); }

/* --------------------------------------------------------------------------
   O CTA DO HERÓI HOVERIZA COMO O "JOGAR" DA BARRA
   --------------------------------------------------------------------------
   São a MESMA chamada — "jogar" — em dois lugares da mesma dobra, e até
   agora reagiam diferente: o da barra vai para laranja (`.nav-cta:hover`,
   `background: var(--orange)` + texto branco), o do herói só clareava de
   #FAFAFA para branco puro, um degrau que quase não se vê.

   `--r-base` (#CC3300) é o mesmo hex do `--orange` de lá, e branco sobre ele
   mede 5,2:1. Não uso `--realce`: no escuro ele resolve #FF6633, e a barra
   usa o laranja cheio nos dois estados dela — o que se está igualando é o
   gesto da barra, não o acento da superfície.

   Escopado ao herói: o sólido da faixa final é PRETO sobre laranja, e levá-lo
   a laranja no hover o faria desaparecer no fundo. */
.empilhada .heroi__ctas .btn--solido:hover {
  background: var(--r-base);
  color: var(--branco);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---- o palco: a peça grande, mais larga que o texto ---- */
.empilhada .palco {
  position: relative;
  width: 100%;
  max-width: var(--palco);
  margin-top: auto;              /* a outra metade da sobra */
}
/* o "blob" laranja que a gitbook põe atrás do screenshot, traduzido: o
   espectro da marca desfocado. Uma cor só seria a versão deles, não a nossa.

   Duas camadas, não uma — é o que separa "brilho" de "mancha colorida":
     `::before` é o NÚCLEO: mais estreito, menos desfocado, mais opaco. É o
       que dá ao brilho um centro de luz de verdade, não só uma névoa plana.
     `.palco__brilho` (o elemento) é a AURA: mais larga, mais desfocada,
       mais suave — o que a envolve e esmaece nas bordas.
   Sem o núcleo, aumentar só a opacidade da névoa spreads uniformemente e
   fica achatado; com as duas, o centro "acende" e a borda continua etérea —
   o mesmo princípio de um glow de produto (um ponto de luz + halo), não de
   um preenchimento colorido atrás do cartão. */
/* O GRADIENTE É CÔNICO, e isso é o que permite o laço.
   `--espectro` (seção 1) é LINEAR a 90deg: girá-lo tem começo e fim, e o
   laço emenda. O cônico abaixo usa as mesmas cores da marca e FECHA no
   ponto de partida (1turn cai na mesma cor de 0deg) — girar 360° devolve
   exatamente o quadro inicial. `assets/js/brilho.js` anima `--giro`.

   `--giro` tem fallback `0deg` na própria função: sem JavaScript o brilho
   fica parado, no mesmo desenho de sempre, em vez de sumir. */
/* `.palco` base: o brilho precisa de um pai posicionado para se ancorar.
   A home tem o dela em `.empilhada .palco` (com a largura e o encaixe do
   layout empilhado); esta regra atende QUALQUER página que só queira o
   brilho — hoje, /para-quem atrás das portas. */
.palco { position: relative; }

.palco__brilho,
.palco__nucleo {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--giro, 0deg),
    #cc3300 0%, #f06a00 11%, #cccc00 22%, #5a8a00 33%, #007a40 44%,
    #129f73 55%, #0044aa 67%, #6600aa 78%, #7f2cff 89%, #cc3300 100%);
  pointer-events: none;
  /* o desfoque é caro de rasterizar; avisar o compositor que só o transform
     muda evita que ele refaça o borrão a cada quadro */
  will-change: transform;
}
/* a aura sangra um fio a mais para fora dos lados do cartão — ela precisa
   ultrapassar o núcleo para ler como halo, não como contorno duplicado */
.palco__brilho { inset: 4% -14% 2%; filter: blur(110px); opacity: .5; }
.palco__nucleo { inset: 12% 8%; filter: blur(54px); opacity: .62; }

/* A SANGRIA PRECISA DE QUEM A APARE.
   O -14% de cada lado é de propósito: é uma aura, tem que passar do cartão.
   O que faltava era alguém cortá-la na borda da tela. Sem isso a página
   ganhava ROLAGEM HORIZONTAL de verdade — medido em 11/09/2026: 77px em
   768 de largura, 138px em 1280, na home e na /para-quem. Só não aparecia
   abaixo de 560px, onde o inset já vira positivo (media query lá embaixo).

   `clip` e não `hidden`: `hidden` criaria um contêiner de rolagem; `clip`
   só apara. O alvo é a <section> porque ela vai de borda a borda — a aura
   continua sangrando até o fim da tela, que é o efeito desejado; o que
   morre é só o excedente que ninguém via e que empurrava a barra. */
section:has(.palco__brilho) { overflow-x: clip; }
.empilhada .palco .jogo { position: relative; z-index: 1; max-width: none; }

/* --------------------------------------------------------------------------
   A MOLDURA DO CARTÃO É TRANSLÚCIDA — 70%
   --------------------------------------------------------------------------
   A moldura é a faixa de 8px em volta da face do cartão (o `padding` de
   `.jogo`, com a face `.jogo__tela` por dentro). Opaca, ela corta o brilho
   espectral em seco na borda; a 70% o brilho ATRAVESSA a faixa e o cartão
   passa a pousar sobre a luz em vez de tapá-la — a moldura vira bisel, não
   recorte.

   Vale só dentro de `.palco`: o cartão da coluna de `index.html` não tem
   brilho atrás e ali a translucidez não teria o que revelar.

   Os dois temas com o mesmo alfa e a mesma cor-base de sempre: #F2F2F2 no
   claro (o `.jogo` da seção 7.2), #060606 no escuro (o --cinza-900 de
   `.jogo--escura`). Nenhuma cor nova — só o canal alfa.

   30%: a 70% a faixa ainda lia como moldura levemente tingida; a 30% ela
   quase desaparece e o que sobra é o brilho passando, com a face do cartão
   recortada dentro dele. O contorno de 1px da face (`.jogo__tela`) é o que
   segura o desenho quando a moldura fica quase invisível — sem ele o cartão
   perderia a borda junto com a opacidade. */
.empilhada .palco .jogo { background: rgba(242, 242, 242, .3); }
.empilhada .palco .jogo--escura { background: rgba(6, 6, 6, .3); }
.empilhada .palco .jogo--clara { background: rgba(242, 242, 242, .3); }

/* --------------------------------------------------------------------------
   O CARTÃO DA PERGUNTA — a altura de 460px era uma folga, não uma medida
   --------------------------------------------------------------------------
   Na coluna estreita do herói original a pergunta ocupava a sobra com
   `flex:1`, centralizada nela. No palco largo aquilo vira ~110px de vão morto.
   288 é o teto das DUAS telas do cartão (pergunta ~253px, "respondida"
   ~229px) com a pergunta em três linhas: a altura não muda ao responder e
   nenhuma pergunta do sorteio estica o cartão. O respiro de baixo é menor que
   o de cima de propósito — a nota é rodapé, e rodapé não pede a mesma folga
   que a abertura.
   -------------------------------------------------------------------------- */
.empilhada .jogo__tela { min-height: 360px; padding: var(--e4) var(--e4) 0; position: relative; }

/* --------------------------------------------------------------------------
   O INTERRUPTOR DE TEMA DO CARTÃO
   --------------------------------------------------------------------------
   Mora no canto do cartão porque é o escopo do que ele controla: na barra de
   navegação ele prometeria trocar a página inteira, e não é o que faz.

   Pinta-se com os tokens do PRÓPRIO cartão (`--jogo-linha`,
   `--jogo-tinta-fraca`), não com os da superfície da página. É o que o faz
   inverter junto com o cartão no mesmo clique, sem uma regra a mais para o
   estado claro — ele é parte do cartão, não da página em volta.

   O ícone mostrado é o do tema de DESTINO, não o do atual: no escuro aparece
   o sol (clique para clarear), no claro a lua. Mostrar o estado atual faz
   metade das pessoas clicarem para o lado errado.

   36px e não os 44 do DS: o alvo de toque de 44 vale para ação de conteúdo;
   este é um controle de canto, secundário ao que o cartão pede (responder a
   pergunta), e 44 aqui competiria com as respostas. No telefone ele sai de
   cena — ver o corte de ≤560. */
.jogo__tema {
  position: absolute;
  top: var(--e2);
  right: var(--e2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--jogo-linha);
  border-radius: var(--raio);
  background: transparent;
  color: var(--jogo-tinta-fraca);
  cursor: pointer;
  appearance: none;
  transition: color .2s ease, border-color .2s ease;
}
.jogo__tema:hover { color: var(--jogo-tinta); border-color: var(--jogo-tinta-media); }
.jogo__tema svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* duas classes de especificidade (0,2,0), porque a regra de cima que dá
   `display:block` a todo <svg> daqui vale (0,1,1) e venceria um seletor de
   classe só — foi exatamente esse empate que fez o botão da barra aparecer
   com o sol E a lua ao mesmo tempo. */
.jogo__tema .jogo__tema-lua { display: none; }
.jogo--clara .jogo__tema .jogo__tema-sol { display: none; }
.jogo--clara .jogo__tema .jogo__tema-lua { display: block; }
/* --------------------------------------------------------------------------
   A FILEIRA DE RESPOSTAS NÃO USA A LARGURA TODA
   --------------------------------------------------------------------------
   Num palco de 1280px cada resposta ganhava ~294px. O botão põe o rótulo
   ("SIM") colado à esquerda e a tecla colada à direita, então sobravam
   ~200px de vão no meio de cada um: lia como campo vazio, não como opção.

   A trava não é na FILEIRA, é na COLUNA — 200px por botão, que é o que a
   opção mais longa ("ÀS VEZES", ~106px com a tecla e o respiro) pede mais
   uma folga confortável. A fileira sai do que os botões medem (4×200 + 3
   de vão = 824px) em vez de os botões saírem do que a fileira mede. É a
   ordem certa: o conteúdo dita a caixa.

   `justify-content:center` centraliza as quatro trilhas dentro do cartão,
   já que elas somam menos que ele. */
.empilhada .jogo__respostas {
  margin-top: var(--e4);
  grid-template-columns: repeat(4, minmax(0, 200px));
  justify-content: center;
}

/* --------------------------------------------------------------------------
   A TELA "RESPONDIDA" — ritmo em três degraus
   --------------------------------------------------------------------------
   Ela nasceu para o cartão estreito da coluna do herói: gap de 12px entre
   tudo e 6px antes dos botões. Num cartão de 1280×360 isso vira três blocos
   grudados, sem hierarquia — o título, a frase e a ação pesam igual.

   Os degraus agora vêm da escala do DS e crescem na ordem da importância:
   título → --e2 (16) → frase → --e4 (32) → ação. O respiro maior é o que
   separa LEITURA de DECISÃO; os 16px de cima mantêm título e frase lendo
   como um bloco só. */
.empilhada .palco .jogo__feito { gap: 0; }
.empilhada .palco .jogo__feito-t { font-size: clamp(24px, 2vw, 30px); }
.empilhada .palco .jogo__feito-d { margin-top: var(--e2); font-size: 15px; }
.empilhada .palco .jogo__feito-acoes { margin-top: var(--e4); gap: var(--e2); }

/* --------------------------------------------------------------------------
   O ANEL DE CHEGADA — o espectro dá a volta no botão e some
   --------------------------------------------------------------------------
   Quando a pergunta é respondida, a tela troca e o botão de continuar chega
   com o mesmo anel que corre nas respostas (seção 7.2): o espectro da marca
   girando na borda. Aqui ele NÃO fica — dá duas voltas e se apaga. É um
   gesto de chegada, não um estado: se ficasse girando, competiria para
   sempre com a leitura da frase acima dele.

   POR QUE SOZINHO, SEM JAVASCRIPT: a tela "respondida" nasce com `hidden`,
   ou seja `display:none`. Uma animação CSS num elemento que sai de
   `display:none` para visível COMEÇA do zero — e recomeça toda vez. Então
   responder, trocar a resposta e responder de novo dispara o anel de novo,
   sem uma linha de script.

   A TÉCNICA é a de máscara, não a de dois `background` como nas respostas
   (seção 7.2). Lá o anel FICA, e o fundo do botão é sólido e conhecido; aqui
   ele precisa SUMIR, e sumir é opacidade — que a construção de background
   não sabe animar sozinha. O pseudo-elemento com `mask-composite` recorta o
   miolo e deixa só a moldura, que é o que se pode desvanecer.

   `--anel` é a custom property tipada como <angle> registrada com @property
   na seção 7.2 — sem o registro o navegador não interpola o ângulo e o
   gradiente não anda. */

@keyframes anel-apaga { to { opacity: 0; } }

.empilhada .palco .jogo__feito-acoes .btn--solido { position: relative; }
.empilhada .palco .jogo__feito-acoes .btn--solido::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 11px;            /* o raio do botão (8) + os 3px que ele cresce */
  padding: 3px;                   /* a espessura do anel */
  background: conic-gradient(from var(--anel),
    #FFC800 0deg, #F2007E 144deg, #129F73 260deg, #FFC800 1turn);
  /* recorta o miolo: sobra só a moldura */
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation:
    anel-gira 1.2s linear 2,
    anel-apaga .55s ease 2.25s forwards;
  pointer-events: none;
}

/* Quem pediu menos movimento não recebe o anel. A regra global da seção 10
   corta a duração para 0,01ms, o que aqui viraria um lampejo de uma cor só —
   pior que não ter. */
@media (prefers-reduced-motion: reduce) {
  .empilhada .palco .jogo__feito-acoes .btn--solido::after { display: none; }
}
.empilhada .jogo__nota { margin-top: var(--e2); }
/* a trava de 40ch da seção 7.2 foi feita para o cartão estreito da coluna do
   herói e aqui punha três linhas curtas no meio de um palco de 1280px */
.empilhada .jogo__feito-d { max-width: 700px; text-wrap: balance; }
/* A PERGUNTA usa a largura do cartão.
   Os 22ch da seção 7.2 vinham da coluna estreita do herói original, onde a
   pergunta PRECISAVA quebrar em duas ou três linhas. No palco de 1280px eles
   quebram uma frase que caberia inteira: medi as sete perguntas do sorteio
   (`pergunta.js`) e a mais longa tem 54 caracteres — ~740px nos 25px do
   clamp, contra 1200px de conteúdo disponível. Todas cabem numa linha só, e
   uma linha só lê como pergunta feita; duas leem como parágrafo curto. */
.empilhada .jogo__pergunta { max-width: none; }

/* ---- a base zerada ----------------------------------------------------
   Moldura, cartão e seção terminam na MESMA linha: os 8px da moldura, os 24
   do cartão e os 56 da seção somavam 88px de nada embaixo da nota.

   Zerar só o respiro deixaria a nota rente a uma borda arredondada com
   contorno — que lê como acidente. Então o corte é assumido: embaixo o cartão
   não tem raio nem contorno, e o desenho continua para fora da seção. É o
   mesmo gesto do screenshot de produto da gitbook, que também não termina:
   ele é cortado pela base do bloco. */
.empilhada .palco .jogo {
  padding-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.empilhada .palco .jogo__tela {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* o anel de 1px fica só no topo e nos lados — uma linha na base
     desmentiria o corte. A cor por baixo é a CLARA (--cinza-200, o mesmo
     contorno de `.sup--clara .cartao`): é o que o cartão usa quando NÃO
     carrega `.jogo--escura`, ou seja, sempre que a página em volta é
     `.sup--clara`/`.sup--branca`. */
  box-shadow:
    inset 0 1px 0 var(--cinza-200),
    inset 1px 0 0 var(--cinza-200),
    inset -1px 0 0 var(--cinza-200);
}
/* No card ESCURO o anel volta a ser branco a 9% — o mesmo de
   `.sup--escura .cartao`. Precisa de mais uma classe de especificidade
   (0,4,0) para vencer a regra clara acima (0,3,0), que é a base. */
.empilhada .palco .jogo--escura .jogo__tela,
.empilhada :where(.sup--escura, .sup--poco) .palco .jogo:not(.jogo--clara) .jogo__tela {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 1px 0 0 rgba(255, 255, 255, .09),
    inset -1px 0 0 rgba(255, 255, 255, .09);
}
/* A nota é a última linha antes do corte, e é UMA linha.
   A trava de 38ch vinha do cartão estreito da coluna do herói, onde a frase
   só cabia em duas. No palco de 960px ela mede ~480px e cabe inteira numa
   linha — e uma linha só é o que faz dela um rodapé em vez de um parágrafo.

   O respiro de baixo dobrou: --e3 (24px) → --e5 (48px). Passa a ser MAIOR
   que os --e4 (32) do topo — o inverso da regra anterior ("rodapé pede menos
   que abertura"), e de propósito: aqui embaixo não há borda, há um CORTE, e
   corte pede mais ar antes dele do que uma borda pediria. Uma aresta a 24px
   do texto ainda lê como aperto; a 48 lê como decisão. */
.empilhada .palco .jogo__nota { max-width: none; padding-bottom: var(--e5); }

/* --------------------------------------------------------------------------
   A TELA "RESPONDIDA" CENTRALIZA DE VERDADE
   --------------------------------------------------------------------------
   `[data-tela="feito"]` já tem `justify-content:center` (seção 7.2), mas
   centralizava numa caixa TORTA: o cartão tem 32px de respiro no topo e ZERO
   embaixo (o respiro de baixo mora na nota, e a tela "respondida" não tem
   nota). Centralizar dentro dela punha o conteúdo 16px abaixo do meio óptico
   do cartão — perceptível, e piorou agora que o cartão ficou mais alto.

   Devolver a simetria é o conserto: 32 embaixo, iguais aos 32 de cima. Não
   são os 48 da nota de propósito — o que precisa bater aqui é o padding do
   TOPO, senão o desequilíbrio só inverte de lado. */
.empilhada .palco [data-tela="feito"] { padding-bottom: var(--e4); }

/* --------------------------------------------------------------------------
   PEÇAS — o cartão da gitbook, lado a lado, em superfície CLARA
   --------------------------------------------------------------------------
   Três cartões numa fileira, cada um com a anatomia exata do cartão deles:
   ícone num quadrado no topo → título → texto → TAG no rodapé. A tag é
   empurrada para a base por `margin-top:auto`, não por respiro fixo: é o
   que alinha as três tags na mesma linha mesmo quando os textos têm alturas
   diferentes (é assim que a fileira de quatro cartões deles se sustenta).

   ESTA SEÇÃO É CLARA DENTRO DE UMA PÁGINA ESCURA.  A moldura e o cartão
   trocam de par: #060606/#0C0C0C (o par escuro de `.deliver`) viram
   #F2F2F2/#FAFAFA — que não são valores novos, são exatamente os de
   `.pecas__grade`/`.peca` (seção 7.4), o mesmo componente do DS no lado
   claro. O acento, a tinta e as linhas já viram sozinhos, porque
   `.sup--clara` reescreve o contrato de superfície inteiro.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   AS SEÇÕES PINTAM ACIMA DO HERÓI
   --------------------------------------------------------------------------
   O brilho do palco é `position:absolute` com `z-index:0`, e elemento
   POSICIONADO pinta acima de bloco NÃO posicionado — mesmo que o bloco
   venha depois no documento. Resultado: o desfoque de 110px vazava a base
   do herói e lavava a seção seguinte inteira, que agora é clara e denuncia
   qualquer véu por cima.

   A saída não é cortar o brilho (`overflow:hidden` no herói mataria o
   derrame sob o cartão, que é o que costura as duas superfícies). É dar às
   seções seguintes um degrau de empilhamento próprio: posicionadas e em
   z-index 1, elas pintam por cima do que sobra do herói. */
.empilhada main > section:not(.heroi) { position: relative; z-index: 1; }

.empilhada .secao { padding-block: var(--e7); }
.empilhada .pecas__cabeca { max-width: var(--bloco); margin: 0 auto var(--e6); text-align: center; }
/* 22ch servia quando o título quebrava pela medida. Com `.frase` a quebra
   passou a ser a do PONTO, e a medida virou uma segunda quebra por cima da
   primeira: "Três peças. / Uma para cada / lado da mesa." A trava sobe para
   caber a frase mais longa inteira numa linha. */
.empilhada .pecas__cabeca h2 { max-width: 34ch; margin-inline: auto; }
/* var(--realce) em vez do #FF6633 fixo da seção 7.4: sobre esta seção clara
   aquele laranja mede 2,4:1 e some. --realce resolve #CC3300 aqui. */
.empilhada .pecas__cabeca .rotulo { color: var(--realce); }
/* A LEDE DESTA CABEÇA — a explicação que o título não cabe
   ------------------------------------------------------------------------
   O bloco passou a explicar a mecânica do jogo, e o título sozinho não dá
   conta: entre ele e os cartões entra uma frase de ligação. `.lede` já traz
   corpo, cor e entrelinha; o que falta aqui é CENTRAR — a classe declara
   `max-width` e nada mais, então dentro de uma cabeça centralizada a caixa
   nasce colada à esquerda enquanto o texto dentro dela se centraliza. É o
   mesmo `margin: x auto 0` de `.empilhada .heroi__lede`.

   62ch (o padrão de `.lede`) fecharia em ~700px e quebraria a frase em três
   linhas rasas; 74ch resolve em duas cheias, dentro dos 1080px de --bloco.
   `balance` reparte as duas por igual, como no herói. */
.empilhada .pecas__cabeca .lede {
  max-width: 74ch;
  margin: var(--e3) auto 0;
  text-wrap: balance;
}

.empilhada .delivers__cards {
  max-width: var(--palco);
  margin-inline: auto;
}
.empilhada .deliver {
  display: flex;
  flex-direction: column;
  padding: var(--e4) 28px;      /* o padding de `.peca`, o cartão claro do DS */
}
.empilhada .deliver__icon { margin-bottom: var(--e3); }
.empilhada .deliver__title { margin-bottom: 10px; }

/* a tag desce para o rodapé do cartão. `margin-top:auto` come todo o espaço
   que sobra acima dela — é o que mantém as três tags na mesma linha de base
   com textos de alturas diferentes. */
/* O respiro entre o texto e a tag mora AQUI, no elemento de cima, e não no
   `margin-top` da tag — que é `auto` e come qualquer mínimo que se ponha
   nele. Com os três textos agora em duas linhas exatas, não sobra espaço
   livre para o `auto` distribuir: ele resolve em ZERO, e a tag encostava na
   linha de baixo do texto. É o mesmo padrão do herói, onde o mínimo entre a
   ação e o cartão mora no `margin-bottom` dos botões.

   --e3 (24px) e não --e4: iguala o vão do ícone para o título, deixando o
   par título+texto (10px) como o único apertado. O ritmo do cartão fica
   24 / 10 / 24 — duas pausas iguais com o bloco de leitura no meio. */
.empilhada .deliver__text { margin-bottom: var(--e3); }

.empilhada .deliver__label {
  order: 9;                     /* depois do texto, seja qual for a ordem no HTML */
  margin: 0;
  margin-top: auto;
  padding: 7px 12px;
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--linha);
  white-space: nowrap;
  align-self: flex-start;
}
/* a trava de 280px dá medida curta ao texto dentro de um cartão de 416px
   (seção 7.4). Aqui o cartão mede 416px e a coluna já É a medida. */
.empilhada .deliver__label,
.empilhada .deliver__title,
.empilhada .deliver__text { max-width: none; }

/* --------------------------------------------------------------------------
   OS QUATRO CARTÕES DE #relatorio — mesmo componente, outro degrau
   --------------------------------------------------------------------------
   `.delivers__cards` nasceu em #o-que, que é `sup--clara`: lá a moldura
   (#060606, que vira #F2F2F2) e o cartão (--preto, que vira --branco) se
   distinguem porque o fundo é claro. Em #relatorio a seção é `sup--escura` e
   o cartão tem EXATAMENTE a cor dela (--preto, #0C0C0C) — os quatro sumiam
   no fundo e sobrava texto solto, sem cartão nenhum.

   O par sobe um degrau, sem cor nova: a moldura sai (o fundo da seção já faz
   esse papel) e o cartão vira #111111 — o "campo", o mesmo degrau de luz que
   o hover do `.deliver` já usa no sistema inteiro. Como o repouso passa a
   ocupar esse degrau, quem marca o hover é o contorno de 1px, o outro recurso
   que o cartão escuro tem.

   E o texto aqui não é seguido de tag: o `margin-bottom` que separava um do
   outro viraria espaço morto no pé do cartão. */
.empilhada .delivers__cards--relatorio {
  background: transparent;
  padding: 0;
}
.empilhada .delivers__cards--relatorio .deliver { background: #111111; }
.empilhada .delivers__cards--relatorio .deliver:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.empilhada .delivers__cards--relatorio .deliver__text { margin-bottom: 0; }

/* Cinco cartões não cabem lado a lado: em 960px cada um ficaria com ~120px de
   texto e todo título quebraria em três linhas. A faixa vira grade de SEIS
   colunas com cada cartão ocupando DUAS — três na primeira fileira, e a
   segunda começando na coluna 2, que é o que deixa os dois últimos centrados
   sem que nenhum cartão mude de largura.

   Só a partir de 901px: abaixo disso o componente já empilha (a regra de
   `.delivers__cards` na seção 7.4) e, abaixo de 768px, o carrossel assume a
   faixa — os dois arranjos dependem do `display:flex` de origem. */
@media (min-width: 901px) {
  .empilhada .delivers__cards--relatorio {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--e1);
  }
  .empilhada .delivers__cards--relatorio .deliver { grid-column: span 2; }
  .empilhada .delivers__cards--relatorio .deliver:nth-child(4) { grid-column: 2 / span 2; }
}

/* --------------------------------------------------------------------------
   O TEXTO DO CARTÃO TEM SEMPRE DUAS LINHAS
   --------------------------------------------------------------------------
   Duas metades, e as duas são necessárias:

   · O TETO — nenhum texto passa de duas linhas. Medido na caixa real
     (cartão 416px, texto 360px, 14,3/1,52): os três davam 2L / 3L / 2L. O
     da Iara era o único fora, com 107 caracteres. Cortar "em linguagem de
     devolutiva" para "em devolutiva" leva a 94 e fecha em duas — foi o
     único corte que coube SEM tocar na frase seguinte, que é a tagline
     oficial e não se mexe.
   · O PISO — nenhum texto tem MENOS de duas. `min-height` de duas linhas
     faz o texto curto reservar a segunda, e os três cartões passam a abrir
     o mesmo bloco de texto mesmo com conteúdos de tamanhos diferentes.

   Em `em`, não em px: a medida acompanha o corpo se ele mudar. 1,52 é a
   entrelinha declarada em `.deliver__text` (seção 7.4). */
.empilhada .deliver__text { min-height: calc(2 * 1.52em); }

/* ---- o par CLARO do cartão escuro -------------------------------------
   Nenhum valor abaixo é novo: são os de `.pecas__grade` e `.peca` (seção
   7.4), o mesmo componente do lado claro do DS. */
.sup--clara .delivers__cards { background: #F2F2F2; }
.sup--clara .deliver { background: var(--branco); }
.sup--clara .deliver:hover {
  background: #FFFFFF;
  box-shadow: rgba(12, 12, 12, .08) 0 18px 40px;
}
/* o poço do ícone inverte: no cartão escuro é luz a 4%, no claro é tinta a
   4% — a mesma profundidade, o mesmo valor, a direção contrária */
.sup--clara .deliver__icon { background: rgba(12, 12, 12, .04); }
/* --cinza-400 sobre #F5F5F5 mede 2,0:1. --tinta-fraca é o cinza que a
   própria superfície declara como legível nela. */
.sup--clara .link-mono { color: var(--tinta-fraca); }

/* --------------------------------------------------------------------------
   GALERIA BENTO — o mosaico "scrub" de loomty.com, com 7 fotos
   --------------------------------------------------------------------------
   PORTE 1:1 de `#galeria.bento-scrub` do site no ar (conferido contra o HTML
   e o CSS servidos por www.loomty.com em 10/09/2026). Mesma anatomia, mesmos
   números, mesmo comportamento nas três faixas: seção de 300vh, a grade
   GRUDADA (`position:sticky`) enquanto a página rola por ela, e as colunas e
   linhas crescendo de 32,5vw × 23,75vh até 100vw × 49,5vh — no fim sobra uma
   foto só, preenchendo a tela. Não é autoplay: quem comanda é a ROLAGEM
   (`assets/js/galeria.js`).

   POR QUE 32,5vw E NÃO MAIS: 3 × 32,5 = 97,5vw. O mosaico inteiro cabe na
   janela. Produção aprendeu isso na marca: com colunas de 46vw o arranjo
   nascia 38% mais largo que a tela e as laterais ficavam cortadas do
   primeiro ao último quadro.

   7 FOTOS, GRADE 3 × 4 COMPLETA — como em produção (que usa 8). As quatro
   fotos altas ficam nos cantos, o grupo de amigos com a orientadora (a ÚLTIMA
   do conjunto, por pedido do Márcio) ocupa a célula do CENTRO — no fim do
   curso, com colunas de 100vw e linhas de 49,5vh, a janela enquadra
   exatamente coluna 2 × linhas 2-3, a célula `2 / 2 / 4 / 3`, e é ela que
   sobra na tela — e as duas células curtas (topo e base do meio, uma linha
   só) que ficavam deliberadamente vazias agora têm foto também (11/09/2026,
   fotos do Márcio): o caderno do Enem em cima, a carona no carro embaixo.

   A SUPERFÍCIE segue o CONTRATO da página (`--fundo`), não o `var(--ink)`
   fixo de produção: esta variante troca de tema ao vivo (`tema.js`), e
   travar a cor quebraria o interruptor no meio da página.

   ARMADILHA DO CAMINHO DA FOTO — vale a mesma regra de produção, e ela NÃO
   é cosmética: o `--bg` do HTML tem que ser `../../assets/img/…`, relativo
   à pasta desta folha de estilo. Um `url()` dentro de um `var()` resolve
   contra a folha que DECLARA a propriedade que o consome (esta regra, em
   assets/css/), não contra o HTML que define a variável. Com
   "assets/img/…" o navegador pede "assets/css/assets/img/…" e nada carrega;
   com "/assets/img/…" funciona em servidor mas quebra em `file://`, onde a
   barra aponta para a raiz do disco. Só a forma relativa funciona nos dois.
   -------------------------------------------------------------------------- */

.empilhada #galeria.bento-scrub {
  position: relative;
  z-index: 8;
  isolation: isolate;
  overflow: visible;
  background: var(--fundo);
  color: var(--tinta);
  /* a altura extra é o curso de rolagem que alimenta o scrub */
  height: 300vh;
}
.empilhada .gallery-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--fundo);
}
.empilhada .gallery {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
.empilhada .gallery--bento {
  display: grid;
  place-content: center;
  gap: 1vh;
  /* interpoladas pelo scrub entre o estado bento e o final */
  grid-template-columns: repeat(3, var(--col, 32.5vw));
  /* 23,75vh, NÃO 23vh — a conta é proposital. `place-content:center` centra
     a grade menor que os 100vh do .gallery-wrap, e essa margem de
     centralização é a faixa que aparece ACIMA da primeira linha. Com 23vh
     a grade mede 4×23+3×1(gap)=95vh, sobra 5vh, a margem de centralização
     fica em 2,5vh de cada lado — MAIOR que o gap de 1vh entre as fotos, e a
     faixa do topo lia como um vão à parte, não como mais um gap da grade.
     Com 23,75vh a grade mede 98vh, sobra 2vh, a margem vira 1vh de cada
     lado — EXATAMENTE o gap. Pedido do Márcio, 11/09/2026 (a mesma exigência
     já aplicada ao padding do arranjo estático de celular, mais abaixo).
     Não mexi no --col (32,5vw): seria a mesma conta na horizontal, mas o
     valor de 32,5vw já é o limite calibrado para o mosaico caber na janela
     sem cortar as laterais — ver a nota "POR QUE 32,5vw E NÃO MAIS" acima.
     Este número precisa espelhar o `row:[23...` de assets/js/galeria.js:
     é o MESMO ponto de partida do scrub, só que escrito duas vezes (CSS
     para a primeira pintura, JS para a rolagem) — mudar um sem o outro faz
     a grade "pular" de tamanho no primeiro pixel de scroll. */
  grid-template-rows: repeat(4, var(--row, 23.75vh));
}
.empilhada .gallery__item {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: paint;
  backface-visibility: hidden;
  will-change: transform, width, height;
  background-image: var(--bg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* o arranjo bento: quais células cada foto ocupa. Selecionado por CLASSE, não
   por :nth-child — com 7 fotos (11/09/2026) a ordem no DOM deixou de coincidir
   1:1 com a posição na grade, e :nth-child quebraria em silêncio a cada nova
   foto inserida no meio da lista. */
.empilhada .gallery--bento .gallery__item--sala       { grid-area: 1 / 1 / 3 / 2; }  /* sala de aula — alta, esquerda */
.empilhada .gallery--bento .gallery__item--caderno     { grid-area: 1 / 2 / 2 / 3; }  /* caderno do Enem — topo, meio (curta) */
.empilhada .gallery--bento .gallery__item--lab         { grid-area: 1 / 3 / 3 / 4; }  /* laboratório com a professora — alta, direita */
.empilhada .gallery--bento .gallery__item--centro      { grid-area: 2 / 2 / 4 / 3; }  /* grupo de amigos com a orientadora — CENTRO, a que sobra no fim */
.empilhada .gallery--bento .gallery__item--calcada     { grid-area: 3 / 1 / 5 / 2; }  /* amigos na calçada — base-esquerda */
.empilhada .gallery--bento .gallery__item--carona      { grid-area: 4 / 2 / 5 / 3; }  /* carona no carro — base, meio (curta) */
.empilhada .gallery--bento .gallery__item--biblioteca  { grid-area: 3 / 3 / 5 / 4; }  /* biblioteca em grupo — base-direita */

@media (max-width: 768px) {
  /* Sem scrub no celular, igual a produção: os 300vh de curso que o desktop
     reserva para crescer o mosaico viram, no toque, uma rolagem comprida e
     parada — telas inteiras sem nada mudar, que leem como travado. Aqui a
     galeria fica estática no arranjo bento, e o script também para de
     escutar scroll nesta largura. */
  .empilhada #galeria.bento-scrub { height: auto; min-height: 0; }
  .empilhada .gallery-wrap {
    position: relative;
    height: auto;
    min-height: 0;
    /* mesma distância do gap entre as fotos (linha abaixo) — antes era 6vh,
       bem maior que o respiro interno, e o topo da galeria abria um vão que
       não existia em nenhum outro lugar da grade. Pedido do Márcio,
       11/09/2026. */
    padding: clamp(6px, 1.2vw, 10px) 0;
    overflow: visible;
  }
  .empilhada .gallery { width: 100%; height: auto; }
  .empilhada .gallery--bento {
    gap: clamp(6px, 1.2vw, 10px);
    grid-template-columns: repeat(3, var(--col, 31vw));
    grid-template-rows: repeat(4, var(--row, 21.5vh));
  }

  /* ---- A FAIXA QUE ANDA SOZINHA ----
     Quem troca `--bento` por `--faixa` é o `galeria.js`, que também duplica
     as sete fotos (ver o comentário lá). Aqui só o desenho da faixa.

     `margin-right` no item, e NÃO `gap` no trilho: com `gap`, 14 fotos têm
     13 vãos, e metade do trilho não bate com uma volta inteira — o laço
     salta no corte. Com a margem viajando junto de cada foto, o trilho é
     exatamente duas voltas iguais e o -50% cai no ponto de partida. É a
     mesma razão pela qual `.marq__item` usa margem, não vão.

     Sem `:hover` para pausar (toque não tem hover) e sem `overflow:auto`
     (a faixa não é para ser arrastada): o `.gallery-wrap` já corta com
     `overflow:hidden`, e o pedido era decoração, não navegação. */
  /* o wrap volta a cortar (no celular ele está `visible`, para o bento
     poder sangrar) e para de centrar: um trilho mais largo que a janela,
     centrado, começaria com metade da sobra já fora à esquerda — a
     animação nasceria no meio do caminho */
  .empilhada .gallery-wrap:has(.gallery--faixa) {
    overflow: hidden;
    justify-content: flex-start;
  }

  .empilhada .gallery--faixa {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    height: auto;
    gap: 0;
    place-content: initial;
    animation: galeria-faixa 48s linear infinite;
    will-change: transform;
  }
  .empilhada .gallery--faixa .gallery__item {
    width: 156px;
    height: 208px;
    margin-right: clamp(6px, 1.2vw, 10px);
    /* o `will-change: width, height` do item serve ao scrub do desktop, que
       interpola as duas; aqui quem se move é o trilho, e prometer mudança
       em toda foto só ocuparia camada de composição à toa */
    will-change: auto;
  }
  @keyframes galeria-faixa {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* sem animação: a galeria fica no arranjo bento, sem curso de rolagem */
@media (prefers-reduced-motion: reduce) {
  .empilhada #galeria.bento-scrub { height: auto; min-height: 0; }
  .empilhada .gallery-wrap { position: relative; height: auto; min-height: 100vh; padding: 8vh 0; }
}

/* --------------------------------------------------------------------------
   PREÇO — a anatomia do bloco "Enterprise-grade" da gitbook
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   A SEÇÃO CRESCEU, E O PARÁGRAFO ALARGOU
   --------------------------------------------------------------------------
   O respiro subiu de --e7 (72) para --e9 (140), o degrau mais alto da escala:
   este bloco é o único da página que pede leitura demorada, e vinha com o
   mesmo ar das seções de varredura rápida.

   O parágrafo saiu de 620px para 760px. Em 620 ele caía em cinco linhas
   curtas embaixo de um título largo, e a mancha ficava mais alta que larga —
   coluna de jornal no meio de uma página centralizada. Em 760 fecha em
   quatro, e a mancha volta a acompanhar a largura do título.

   Os respiros internos crescem na ordem da leitura: rótulo → título (16) →
   parágrafo (32) → ação (48). O maior é o último, porque é o único que
   separa LER de CLICAR. */
.empilhada .ancora {
  /* O VÃO DO MARQUEE, DECLARADO UMA VEZ SÓ. Ele aparece em três lugares que
     precisam bater no olho: entre as duas faixas, entre um cartão e o
     seguinte, e entre a última faixa e a base da seção (pedido do Márcio,
     11/09/2026 — o marquee "cola" na base com o mesmo respiro que separa os
     cartões). Eram três números soltos; agora é um. */
  --marq-vao: 14px;
  padding-block: var(--e9) var(--marq-vao);
  min-height: 0;
  display: block;
}
.empilhada .ancora__grade { display: block; text-align: center; }
.empilhada .ancora .rotulo { color: var(--realce); }
/* voltou a ser uma frase corrida, sem quebra no ponto: "Jogar é grátis.
   Sempre." pedia DUAS linhas para o par de peças, mas aqui em uma linha
   só ela lê como uma afirmação única — 24ch cabem o título inteiro no
   teto do clamp (43px) sem embrulhar. */
.empilhada .ancora__t { max-width: 24ch; margin: var(--e2) auto 0; }
.empilhada .ancora__d { max-width: 760px; margin: var(--e4) auto 0; text-wrap: balance; }

/* --------------------------------------------------------------------------
   MARQUEE DE RECURSOS — as duas faixas que correm em www.loomty.com
   --------------------------------------------------------------------------
   Porte de `.tickers` (assets/css/styles.css de produção), com três
   diferenças deliberadas:

   1 · A ANIMAÇÃO NÃO TEM PIXEL CRAVADO. Produção anima entre dois translateX
       absolutos (-1813,31px → -6797,31px) — números calculados à mão para a
       quantidade EXATA de cartões que ela tem. Tirar ou pôr um cartão
       desalinha o laço, e o defeito só aparece depois de um minuto de
       animação, quando a emenda passa na tela. Aqui a lista é DUPLICADA no
       HTML e o curso vai de 0 a -50%: metade é sempre metade, com qualquer
       número de cartões.

   2 · O VÃO É `margin-right` NO CARTÃO, não `gap` no trilho. Com `gap`, N
       cartões formam N-1 vãos: a metade exata do trilho cairia meio vão
       fora e a emenda daria um soluço a cada volta. Com margem por cartão,
       cada peça mede sempre largura+vão, e 50% é um número redondo.

   3 · AS CORES SAEM DO CONTRATO DA SUPERFÍCIE (--tinta, --linha), não do
       branco fixo de produção — esta página troca de tema ao vivo.
   -------------------------------------------------------------------------- */
.empilhada .marquee {
  margin-top: var(--e8);
  display: flex;
  flex-direction: column;
  gap: var(--marq-vao, 14px);
  /* sangra até a borda da janela: o efeito precisa de faixa inteira, e a
     seção tem container centrado */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.empilhada .marq { overflow: hidden; }
.empilhada .marq__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.empilhada .marq--a .marq__track { animation: marq-a 64s linear infinite; }
.empilhada .marq--b .marq__track { animation: marq-b 58s linear infinite; }
@keyframes marq-a { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes marq-b { from { transform: translateX(-50%);  } to { transform: translateX(0);    } }
/* parar no hover é de produção: a faixa vira lista legível quando a pessoa
   mira nela */
.empilhada .marq:hover .marq__track { animation-play-state: paused; }

.empilhada .marq__item {
  position: relative;
  flex: none;
  width: 342px;
  height: 118px;
  margin-right: var(--marq-vao, 14px);
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding-inline: 20px;
  border: 1px solid color-mix(in srgb, var(--tinta) 15%, transparent);
  border-radius: var(--raio);
  transition: border-color .25s ease, background-color .25s ease;
}
.empilhada .marq__item:hover {
  border-color: color-mix(in srgb, var(--tinta) 35%, transparent);
  background: color-mix(in srgb, var(--tinta) 3%, transparent);
}
.empilhada .marq__icone {
  flex: none;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empilhada .marq__icone .ti {
  font-family: 'tabler-icons';
  font-size: 32px;
  line-height: 1;
  color: var(--tinta);
}
.empilhada .marq__t {
  font-family: var(--display);
  font-size: 15.49px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tinta);
}
.empilhada .marq__s {
  margin-top: 7px;
  font-size: 14.316px;
  line-height: 21.76px;
  color: var(--tinta-fraca);
}

@media (max-width: 768px) {
  .empilhada .marquee { margin-top: var(--e7); }
  .empilhada .marq__item { width: 280px; height: 104px; padding-inline: 16px; }
  .empilhada .marq__icone { width: 36px; }
  .empilhada .marq__icone .ti { font-size: 26px; }
}

/* quem pediu menos movimento recebe a faixa parada, legível, sem corte */
@media (prefers-reduced-motion: reduce) {
  .empilhada .marq__track { animation: none; }
  .empilhada .marq { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   CTA FINAL — a faixa laranja de loomty.com, porta a porta
   --------------------------------------------------------------------------
   Isto não é desenho novo: é a seção `.cta` de produção, lida da folha real
   (styles.css?v=47) seletor a seletor, com a mesma estrutura de markup
   (`.cta__title` com <br> explícito → `.cta__actions` → `.cta__buttons` →
   `.cta__note`). O fecho anterior — superfície escura com o ❋ em marca
   d'água — saiu inteiro, junto com o CSS dele.

   O QUE MUDOU DE NOME, E NADA MAIS
     var(--orange)   #cc3300  → var(--r-base)   (o mesmo hex)
     var(--paper-fa) #fafafa  → var(--branco)   (o mesmo hex)
     var(--ink)      #0c0c0c  → var(--preto)    (o mesmo hex)

   OS DECIMAIS FORAM ARREDONDADOS, como em todo o resto desta folha:
   produção declara 42,948px de título e 14,316px de nota — a medida do
   Figma multiplicada por 1,032, que é a escala de uma exportação, não uma
   decisão de tipografia. A própria produção volta atrás num dos cortes
   ("font-size: var(--fs-display)"), o que confirma qual era a intenção.

   A FAIXA É UMA SUPERFÍCIE, e por isso declara o contrato inteiro: é o que
   faz `.btn--solido` nascer PRETO aqui (o `.btn--dark` de lá) sem uma regra
   por botão, e é o que a mantém intacta quando a página troca de tema — ela
   não carrega classe `sup--*`, então o espelho de `tema.js` passa por ela
   sem tocar. Faixa de cor de marca é cor de marca nos dois temas.

   UMA DIVERGÊNCIA DELIBERADA: lá o "Já tenho conta" é branco a 62%, que
   sobre #CC3300 mede 2,8:1 e reprova no AA para texto de 13px. Aqui ele é
   branco cheio (5,2:1). A hierarquia contra a nota passa a vir do peso e da
   caixa-alta do mono, não da opacidade.
   -------------------------------------------------------------------------- */

.cta {
  --tinta: var(--branco);
  --tinta-fraca: var(--branco);   /* ver a divergência de AA acima */
  --fundo: var(--r-base);
  --linha: rgba(255, 255, 255, .28);
  --acao: var(--preto);           /* o .btn--dark de produção */
  --acao-on: var(--branco);
  --acao-hover: #000000;
  --realce: var(--branco);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e6);                 /* 56px, o gap de lá */
  padding: 160px 440px 120px;
  background: var(--r-base);
  color: var(--branco);
}
.cta__title {
  width: 1680px;
  max-width: 100%;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.512px;
  text-align: center;
  color: var(--branco);
}
.cta__actions { display: flex; flex-direction: column; align-items: center; gap: var(--e4); }
.cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta__note {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.52;
  text-align: center;
  color: var(--branco);
}
/* "Já tenho conta" É `.btn--contorno`, o mesmo botão do segundo CTA do
   herói (10/09/2026, pedido do Márcio) — não mais `.link-mono`. Nenhuma
   regra nova: `.btn--contorno` já lê `var(--tinta)` do contrato de
   superfície, e a superfície `.cta` já declara `--tinta: var(--branco)` —
   branco na borda a 15% e no texto, herdado, sem nada escrito aqui. */

/* os três cortes são os de produção, nos mesmos valores */
@media (max-width: 1900px) { .cta { padding-inline: clamp(40px, 17.2vw, 440px); } }
@media (max-width: 1360px) {
  .cta { padding: 120px 40px 96px; }
  .cta__title { width: 100%; }
  .cta__title br { display: none; }   /* abaixo daqui a quebra é a da medida */
}
@media (max-width: 768px) {
  .cta { padding: 88px 20px 72px; gap: var(--e5); }
  .cta__buttons { flex-direction: column; width: 100%; }
  .cta .btn { width: 100%; }
  .cta__note { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   O HERÓI EM TELA BAIXA — regra desativada em 12/09/2026
   --------------------------------------------------------------------------
   Existia porque selo + título + lede + ações + marcas + CARTÃO precisavam
   caber inteiros antes da dobra num notebook de 1440×900: a pergunta vivia
   dentro do herói, e a última fileira de respostas cortada ali seria a
   pergunta sem opção visível. Com o cartão em seção própria (`.heroi-jogo`,
   ver acima) ele não compete mais pela altura da primeira tela — rola-se
   até ele como qualquer outra seção. O herói, só com texto, nunca chega
   perto dos 800px que acionavam este corte.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ≤900 — a home já empilha aqui; a variante só centraliza e afina
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .empilhada { --bloco: 100%; --palco: 100%; }

  /* Até 12/09/2026 esta regra forçava o herói a ocupar a tela inteira no
     telefone, para empurrar a pergunta para depois da dobra — ela vivia
     dentro da mesma seção. Virou seção própria (`.heroi-jogo`, ver a
     REGRA `min-height: 0` acima): não há mais o que empurrar, e o herói
     volta a ser do tamanho do próprio texto. */
  .empilhada .heroi__titulo,
  .empilhada .heroi__lede,
  .empilhada .ancora__t { max-width: none; }
  .empilhada .heroi__ctas { margin-bottom: var(--e4); }
}

@media (max-width: 720px) {
  /* a seção 7.4 já empilha os três cartões em ≤900; aqui só o respiro afina.
     `margin-top:auto` não tem função numa coluna de um cartão só por linha —
     a tag volta a ter respiro fixo. */
  .empilhada .deliver { padding: 26px 22px; }
  .empilhada .deliver__icon { margin-bottom: 17px; }
  .empilhada .deliver__label { margin-top: 18px; }
}

@media (max-width: 560px) {
  /* a seção 9 corta o padding do topo para 84px aqui; a altura de uma tela
     continua valendo */
  .empilhada .conteudo--sob-barra .heroi { padding-block: 84px 0; }
  /* o cartão do telefone é o da seção 9, não o do palco */
  .empilhada .jogo__tela { min-height: 0; padding: 26px var(--e3) 0; }
  .palco__brilho { inset: 20% 6% 30%; filter: blur(60px); }
  .palco__nucleo { inset: 24% 20%; filter: blur(30px); }
  /* num cartão de 390px o canto superior direito é a mesma faixa da
     pergunta: o botão passaria por cima do texto */
  .jogo__tema { display: none; }
}

/* --------------------------------------------------------------------------
   9.6 · A VERSÃO CLARA — `.clara`  (index-empilhado-claro.html)
   --------------------------------------------------------------------------
   A folha de navbar (assets/css/nav-rodape-loomty-com.css) espelha
   produção letra a letra, e produção nunca teve uma home clara: a barra é
   TRANSPARENTE com logo e links BRANCOS ao nascer, pensada para flutuar
   sobre um herói escuro, e só troca para texto escuro quando o scroll
   passa de 12px (classe `.nav.scrolled`, ver `nav-scroll.js`) — o momento em
   que ela deixa de flutuar sobre o herói e passa a flutuar sobre conteúdo
   claro.

   Na variante clara o herói JÁ é claro no topo. Pedir para a barra nascer
   branca-sobre-clara é pedir para ela ficar ilegível assim que a página
   abre — exatamente o que uma captura em .empilhada-claro mostrou: logo e
   menu quase invisíveis contra o fundo #F5F5F5.

   A CORREÇÃO NÃO É REESCREVER A BARRA — é fazer, em `.clara`, o que o
   SCROLL já faz em produção: forçar o conjunto de cores de `.nav.scrolled`
   INDEPENDENTE da classe `.scrolled` estar presente. Cada regra abaixo
   repete o VALOR exato do par `.nav.scrolled` correspondente (nunca um
   valor novo) — é a mesma paleta, só sem esperar o scroll para chegar lá.
   O FUNDO/blur continuam do jeito que estão: transparente no topo, gelo
   fosco ao rolar — esse movimento já funciona sobre claro tanto quanto
   sobre escuro, só a COR do texto/ícone precisava de correção.

   O rodapé não entra aqui: `.footer` é escuro por decisão própria
   (`--ink`/`--paper-fa`, a mesma dupla nos dois temas do site), não por
   suposição de herói escuro — uma faixa final escura funciona tanto quanto
   sobre uma home clara quanto sobre uma escura, e por isso ficou como está. */
.clara .nav-logo-full-light { display: none; }
.clara .nav-logo-full-dark { display: block; }
.clara .nav-link { color: #6b6b6b; }
.clara .nav-link:hover { color: #0c0c0c; }
.clara .nav-login { color: #6b6b6b; }
.clara .nav-login-role { color: rgba(0, 0, 0, .38); }
.clara .nav-cta { background: #0c0c0c; color: #fafafa; }
.clara .nav-cta:hover { background: var(--orange); }
.clara .nav-ai { border-color: rgba(0, 0, 0, .22); color: #0c0c0c; }
.clara .nav-ai:hover { background: #0c0c0c; border-color: #0c0c0c; color: #fafafa; }
.clara .nav-toggle { border-color: rgba(0, 0, 0, .22); color: #0c0c0c; }




/* ==========================================================================
   10 · ACESSIBILIDADE E MOVIMENTO
   ========================================================================== */

/* foco de teclado: amarelo do DS, visível sobre preto E sobre claro */
:focus-visible {
  outline: 2px solid var(--i-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--branco);
  color: var(--preto);
  font-weight: 700;
  border-radius: var(--raio);
}
.pular:focus { left: 8px; top: 8px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Não há animação automática em lugar nenhum do site: nada se move sozinho,
   nada entra por rolagem, nada roda em laço. O pouco que transiciona é
   resposta a um gesto — hover, foco, resposta da pergunta. Ainda assim,
   quem pediu menos movimento não recebe nem isso. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* impressão: sem barra fixa */
@media print {
  .nav, .pular { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   GRUPO DE AÇÃO EM CELULAR — o botão ocupa a largura toda
   --------------------------------------------------------------------------
   Regra do Márcio (11/09/2026), para o site inteiro: empilhados, botões de
   larguras diferentes desenham uma escada torta encostada na margem
   esquerda, e o alvo de toque do menor fica menor sem motivo — justo no
   ponto em que a página pede a ação.

   Vale para GRUPO DE AÇÃO da página. Não vale para botão dentro de cartão,
   de tabela ou da barra: lá a largura é do componente, e esticar viraria
   outra coisa. O `.btn--largo` do DS é exatamente este comportamento; aqui
   ele passa a valer sozinho no celular, sem precisar da classe em cada
   marcação.

   ARMADILHA MEDIDA AQUI: o `.btn` deste DS é `flex: 1 1 240px`. Num
   contêiner em COLUNA, `flex-basis` é a ALTURA — trocar a direção para
   column fazia cada botão nascer com 240px de altura. A pilha certa vem do
   `flex-wrap` com base de 100%: cada botão ocupa uma linha inteira e a
   altura continua sendo a do conteúdo.

   `.heroi__ctas` não entra: ela já embrulhava e já dava 100% aos dois. */
@media (max-width: 768px) {
  .delivers__cta,
  .cabeca__acoes,
  .chamada__acoes { flex-wrap: wrap; }

  .delivers__cta > .btn,
  .cabeca__acoes > .btn,
  .chamada__acoes > .btn { flex: 1 1 100%; }
}


/* ==========================================================================
   HERÓI DA HOME NO CELULAR — a pergunta desce e vira cartão
   --------------------------------------------------------------------------
   Pedido do Márcio (11/09/2026). Antes, a primeira tela era o texto em cima
   e a pergunta jogável espremida embaixo, as duas disputando os mesmos
   812px: sobrava pouco para ler e pouco para jogar.

   Agora a primeira tela é só a leitura — rótulo, título e lede centrados no
   vão que sobra — com os dois botões COLADOS NA BASE, no mesmo respiro de
   24px que as laterais já têm. A pergunta passa a ser o primeiro bloco
   DEPOIS do herói, como um cartão normal: quem rolou uma tela encontra ela
   inteira, e não um pedaço.

   Quem segura a tela cheia é a GRADE, não a seção: assim a seção cresce
   naturalmente para acomodar o cartão embaixo, sem cálculo de altura.

   O brilho do espectro sai junto. Ele é o palco do arranjo de herói — a
   aura que separa a peça do fundo quando ela está DENTRO da cena. Fora
   dela, no fluxo, a aura viraria um borrão colorido atrás de um cartão
   qualquer.
   ========================================================================== */
@media (max-width: 768px) {
  /* Até 12/09/2026 este bloco inteiro existia para empurrar a pergunta para
     depois da dobra: o texto sozinho ocupava a tela (`min-height: calc(100svh
     - 84px - 24px)`) e dois `margin-top:auto` (rótulo e botões) centravam a
     leitura no vão que sobrava, com o cartão só aparecendo ao rolar. Virou
     seção própria (`.heroi-jogo`) — o texto já não precisa fingir ser uma
     tela inteira para empurrar nada; ele é do próprio tamanho, e o cartão
     vem depois no fluxo normal do documento, sem cálculo de altura. */
  .empilhada .heroi__grade { padding-bottom: 24px; }

  /* O BRILHO VOLTA A APARECER NO CELULAR (12/09/2026) — pedido do Márcio.
     Este `display:none` datava de quando o palco vivia DENTRO do herói: a
     aura por trás do cartão competia com o texto na mesma seção, e a
     saída foi apagá-la. Com o palco em seção própria (`.heroi-jogo`) não
     tem mais o que competir, e o Márcio pediu o oposto do apagado: mais
     presente do que o padrão de desktop, não só visível — daí a opacidade
     acima da base (`.5`/`.62` em `.palco__brilho`/`.palco__nucleo`, linha
     ~2180). O inset e o blur continuam vindo do breakpoint de 560px logo
     abaixo (ou da regra base, entre 560 e 768), que já tem a medida certa
     para tela de celular — só a opacidade é reforçada aqui. */
  .empilhada .palco__brilho { opacity: .74; }
  .empilhada .palco__nucleo { opacity: .85; }

  /* Quatro colunas de 60px cortavam "ÀS VEZES" e deixavam o alvo de toque
     no limite. Em duas, cada resposta ganha a largura de meia tela.
     O seletor carrega o `.empilhada` porque a regra de quatro colunas da
     variante empilhada (seção 9.5) tem especificidade 0,2,0 e venceria um
     `.jogo__respostas` solto, mesmo vindo depois no arquivo. */
  .empilhada .jogo__respostas,
  .jogo__respostas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}


/* ==========================================================================
   CARROSSEL DE CARTÕES NO CELULAR — a porta do modelo do site
   --------------------------------------------------------------------------
   O comportamento e a barra vêm do `carrossel.js` de `loomty-landing OK`,
   que é o mesmo script da home antiga, da /iara, da /preco e da
   /instituicoes. O que não vinha junto era o ESTILO: ele mora no bloco 12
   do `responsive.css`, folha que esta pasta não carrega.

   Isto aqui é esse bloco, transposto para os tokens deste DS. As medidas
   são as mesmas (52px de beirada do próximo cartão, alvo de toque de 44px,
   ponto de 6px que vira traço de 20px quando ativo); mudam só os nomes das
   cores. Nada de novo foi inventado — se o modelo mudar lá, muda aqui.

   Acima de 768px nada disso existe: o script tira as classes e a grade
   volta a ser grade.
   ========================================================================== */
@media (max-width: 768px) {
  .carrossel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* o encaixe alinha o cartão à borda INTERNA da moldura; o valor é escrito
       pelo script, a partir do padding real do contêiner */
    scroll-padding-inline-start: var(--carrossel-respiro, 8px);
  }
  .carrossel::-webkit-scrollbar { width: 0; height: 0; }

  /* classe dobrada para empatar em 0,2,0 com as regras que dimensionam os
     cartões dentro da grade original */
  .carrossel.carrossel > * {
    flex: 0 0 calc(100% - 52px);
    width: calc(100% - 52px);
    max-width: none;
    scroll-snap-align: start;
  }

  .carrossel-nav {
    --nav-tinta: var(--tinta);
    --nav-borda: rgba(12, 12, 12, .16);
    --nav-fraco: rgba(12, 12, 12, .28);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    margin-top: var(--e3);
  }
  /* em superfície escura a mesma barra inverte por variável */
  .sup--escura .carrossel-nav,
  .sup--poco .carrossel-nav {
    --nav-tinta: var(--branco);
    --nav-borda: rgba(255, 255, 255, .18);
    --nav-fraco: rgba(255, 255, 255, .34);
  }

  .carrossel-nav__btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--nav-borda);
    border-radius: 10px;
    background: transparent;
    color: var(--nav-tinta);
    cursor: pointer;
    appearance: none;
    transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
  }
  .carrossel-nav__btn svg { width: 18px; height: 18px; display: block; }
  .carrossel-nav__btn:disabled { opacity: .3; cursor: default; }
  .carrossel-nav__btn:not(:disabled):hover { border-color: var(--nav-tinta); }

  .carrossel-nav__mid { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .carrossel-nav__contador {
    margin: 0;
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--fs-rotulo);
    letter-spacing: .14em;
    color: var(--nav-tinta);
    font-variant-numeric: tabular-nums;
  }

  .carrossel-nav__pontos { display: flex; align-items: center; gap: 6px; }
  .carrossel-nav__ponto {
    position: relative;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--nav-fraco);
    cursor: pointer;
    appearance: none;
    transition: width .28s ease, background-color .28s ease;
  }
  /* o ponto ativo vira traço: a posição se lê pela forma, não só pelo tom */
  .carrossel-nav__ponto[aria-current="true"] { width: 20px; background: var(--nav-tinta); }
  /* alvo de toque de 44px sem engordar o desenho do ponto */
  .carrossel-nav__ponto::after {
    content: '';
    position: absolute;
    inset: -19px -7px;
  }

  /* as três peças da home entram como qualquer outro grupo de cartões */
  .pecas__grade.carrossel { gap: var(--e2); }
}


/* ==========================================================================
   14 · /para-quem — a abertura sob a barra fixa
   --------------------------------------------------------------------------
   `.conteudo--sob-barra` zera o padding do main, então a folga da navbar tem
   de nascer da própria seção. Enquanto isso era `style=""` no HTML, a
   abertura herdava o padding de `.secao` — 72px no celular, MENOS que os
   73px da navbar: o rótulo "Para quem" nascia 1px atrás dela.

   Os números são os mesmos das páginas irmãs (`.ip-hero` de /professores,
   /orientadores e /instituicoes): 156px no desktop, 128px no celular.
   ========================================================================== */

.secao--abre-sob-barra {
  min-height: min(calc(100vh - 73px), 820px);
  display: flex;
  align-items: center;
  padding-block: 156px 96px;
}

@media (max-width: 768px) {
  /* com o conteúdo mais alto que a caixa, centralizar empurra o topo para
     fora da tela. No celular a abertura cresce pelo conteúdo, como as irmãs. */
  .secao--abre-sob-barra {
    min-height: 0;
    align-items: flex-start;
    padding-block: 128px 72px;
  }
}