/* ==========================================================================
   Landing — o laboratório, na linguagem da referência

   Esta folha vive à parte do resto do site de propósito. A landing e as telas
   de trabalho fazem trabalhos diferentes: `/minutas` e `/chat` se usam todo dia
   e por isso rodam no modo calmo (`gabinete.css`), onde a marca é acento; a
   landing se lê uma vez, e ali o enquadramento de 2px e a sombra dura são o que
   dá personalidade. As duas convivem porque nada aqui sai de `.land`.

   O que a página herda do site: a família tipográfica (Space Grotesk para
   display, JetBrains Mono para o lado-máquina, Public Sans no corpo — todas já
   carregadas pelo `base.html`) e a cor da marca — desde 21/09/2026 o AZUL da
   estrela do logo da JFCE (#264A97), o mesmo do botão da navbar e do gabinete.
   Até então era o amarelo #FFDC58 (design system v2, `docs/design-system/`).

   REGRA DA MARCA — os empregos do azul, e a lista é fechada:
     1. a ação primária (criar conta), com texto BRANCO (`--l-marca-texto`) —
        tinta sobre o azul dá 2,27:1;
     2. a sombra dura do bloco ATIVO da trilha do agente (o fundo dele é o
        tint `--l-ativo`), e só um por vez;
     3. a sombra dura de hover dos cartões e o foco dos campos.
   O título não tem mais marca-texto (22/09/2026): o movimento da dobra é todo
   da trilha. Sobre o PRETO (bloco da skill, tag BETA) a marca é
   `--l-marca-clara`: o azul ali some (2,27).

   ⚠️ `--l-ouro` guardou o NOME, não a cor: ele marca o que está EM CURSO (item
   da lista sendo executado, ponto do subagente rodando). O dono escolheu o azul
   da estrela também para ele, vendo a prévia (21/09/2026) — "acontecendo agora"
   e "o bloco da vez" dividem a cor e se separam pela forma (ponto × bloco).

   ⚠️ `custom.css` estiliza `a`, `p`, `h1-h6` e `code` em seletor nu (e os campos
   com `!important`). Onde isso morde está anotado no ponto.
   ========================================================================== */

/* ⚠️ Os tokens moram no BODY, não no `.land`.

   Variável customizada herda para baixo, nunca para cima: declarada no `.land`,
   ela ficava invisível para `body.is-landing`, cujo `background: var(--l-fundo)`
   virava declaração inválida e era descartada em silêncio. O resultado era uma
   faixa creme (#FEF6E4, o fundo do `html` no `custom.css`) aparecendo abaixo da
   última seção, como se a página tivesse acabado antes do rodapé.

   Ficam aqui e não no `:root` porque são da landing: no `:root` vazariam para
   o gabinete e para o chat, que têm paleta própria. */
body.is-landing,
body.is-entrar {
    /* Superfícies — neutros frios em três níveis (v2, paleta JFCE; eram creme).
       O fundo é o mais escuro dos três: é ele que faz a folha branca do painel
       parecer folha. `tests/test_paleta.py` lê ESTE bloco. */
    --l-fundo:  #F3F5F5;
    --l-folha:  #FFFFFF;
    --l-faixa:  #ECF0F0;
    --l-fio:    #C4C8C8;

    --l-tinta:  #111010;
    --l-texto:  #3A3939;
    /* O mono miúdo (rótulos de 10-11px): o cinza de "PORTAL DA" no logo, 5,31:1
       sobre a faixa — o pior fundo dos três. */
    --l-fraco:  #626262;

    /* A marca: o azul da estrela, com o par de texto e o hover. */
    --l-marca:       #264A97;
    --l-marca-texto: #FFFFFF;   /* 8,37:1 */
    --l-marca-forte: #1C3871;   /* hover — 11,33:1 com o branco */
    /* A marca SOBRE O PRETO (tag BETA, bloco da skill, foco ali dentro): 11,06:1
       com a tinta. O azul puro daria 2,27. */
    --l-marca-clara: #B8C6E3;
    --l-realce:      #CFD7E8;   /* marca-texto do título: tinta por cima, 13,15:1 */
    --l-ativo:       #E9EDF5;   /* fundo do bloco da vez na trilha */
    /* "Em curso": marcador gráfico (setas, bullets, ponto do subagente). Era o
       ocre #A67A00; o dono escolheu o azul da estrela (8,37:1 no branco). */
    --l-ouro:   #264A97;
    /* O mesmo azul como TEXTO (a string do CNJ no bloco de código, o hover de
       link): 7,3:1 sobre a faixa. */
    --l-ouro-t: #264A97;

    --l-larg:   72rem;

    background: var(--l-fundo);
}

.land { color: var(--l-tinta); background: var(--l-fundo); }
/* A grade de pontos do brutalismo sai: numa página com dezenas de molduras ela
   vira ruído atrás de tudo. O enquadramento já dá a textura. */
body.is-landing::before { display: none; }
.land-main { padding: 0 !important; }

/* ⚠️ Esta regra tem especificidade (0,1,1) e VENCE qualquer `.componente`
   (0,1,0) — inclusive quando o componente é um `<p>`. Foi assim que a citação
   do painel saiu preta sobre preta: `.land-trab__citacao` pintava o fundo de
   tinta e pedia texto claro, e esta regra devolvia o texto para tinta. Todo
   componente que declare cor própria num `<p>` precisa de (0,2,0) — o prefixo
   `.land .componente`. Mesmo precedente do `.gab a` no `gabinete.css`. */
.land p { color: var(--l-tinta); line-height: 1.6; }

/* ⚠️ `custom.css` dá a todo link sublinhado amarelo de 2px e fundo amarelo no
   hover. Numa página com dezenas de links isso vira faixa listrada — e aqui o
   amarelo tem dono. O link corrido fica sóbrio; o destaque é dos CTAs. */
.land a:not([class]) {
    color: var(--l-tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    background: none;
}
.land a:not([class]):hover { color: var(--l-ouro-t); background: none; }

/* --- estrutura de seção --------------------------------------------------- */

/* O fio de 2px entre seções é o esqueleto da página: ele diz onde um assunto
   acaba e outro começa, sem precisar de um título maior nem de mais espaço. */
.land-sec { border-top: 2px solid var(--l-tinta); }
.land-sec--folha { background: var(--l-folha); }

.land-w {
    width: 100%;
    max-width: var(--l-larg);
    margin-inline: auto;
    padding: 5.25rem 2.5rem;
}
.land-w--estreito { max-width: 56rem; }

.land-titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.85rem, 4.2vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    margin: 0 0 1.1rem;
}
.land-sub {
    font-size: 1.09rem;
    line-height: 1.55;
    color: var(--l-texto) !important;
    max-width: 44em;
    margin: 0 0 2.75rem;
    text-wrap: pretty;
}

/* --- botões ---------------------------------------------------------------
   A sombra dura é do botão primário e de mais nada. Ela não é enfeite: é o que
   diz "este é o botão", num layout em que toda caixa tem borda de 2px. */

.land .land-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px solid var(--l-marca);
    background: var(--l-marca);
    color: var(--l-marca-texto);
    padding: .9rem 1.6rem;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.03rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--l-tinta);
    transition: box-shadow .12s ease, transform .12s ease, background .12s ease;
}
/* Afundar o botão no hover em vez de levantá-lo: com sombra sólida, o gesto
   que se reconhece é o de apertar. */
.land .land-btn:hover {
    box-shadow: 2px 2px 0 var(--l-tinta);
    transform: translate(2px, 2px);
    background: var(--l-marca-forte);
    border-color: var(--l-marca-forte);
}
.land .land-btn:active { box-shadow: 0 0 0 var(--l-tinta); transform: translate(4px, 4px); }

/* ⚠️ O calmo REDECLARA a cor do texto e a borda: o `.land-btn` passou a ter
   texto branco (v2), e o calmo herdaria branco sobre a folha branca — 1,00:1.
   `tests/test_paleta.py` guarda isto (o scanner de bloco não vê herança). */
.land .land-btn--calmo {
    background: var(--l-folha);
    color: var(--l-tinta);
    border-color: var(--l-tinta);
    box-shadow: none;
}
.land .land-btn--calmo:hover {
    background: var(--l-faixa);
    color: var(--l-tinta);
    border-color: var(--l-tinta);
    box-shadow: none;
    transform: none;
}

.land-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Foco visível — a borda de 2px já é preta, então o anel precisa de cor
   própria para aparecer sobre ela. Azul da marca; dentro do bloco PRETO da skill
   ele troca para `--l-marca-clara` (ver `.land-skill`), onde o azul dá 2,27. */
.land a:focus-visible,
.land button:focus-visible,
.land summary:focus-visible {
    outline: 3px solid var(--l-ouro-t);
    outline-offset: 3px;
}

/* --- faixa beta ----------------------------------------------------------- */

.land-beta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .45rem .9rem;
    background: var(--l-faixa);
    border-bottom: 1px solid var(--l-fio);
    padding: .65rem 1.5rem;
    margin: 0;
    font-size: .86rem;
    color: var(--l-texto) !important;
    text-align: center;
}
.land-beta__tag {
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    background: var(--l-tinta);
    color: var(--l-marca-clara);
    padding: .25rem .5rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* ⚠️ A dobra é apertada e a conta é esta: navbar (67px) + faixa beta (46px) +
   o painel + este padding, contra os 900px de um notebook. MEDIDO em produção
   em 22/09/2026, com o padding de 4,25rem e o título de cinco linhas: o painel
   ia de 270 a 957px e os botões "Pedir acesso" ficavam em 912–969 — abaixo da
   dobra, justamente eles. Com o título curto quem manda na altura é o painel
   (~670px), e 2,75rem de cada lado fecham a conta em ~870. */
.land-hero > .land-w { padding-block: 2.75rem; }

.land-hero__grade {
    display: grid;
    /* A trilha do turno é densa — tem código mono, uma lista de tarefas e três
       cards de subagente lá dentro — e não sobrevive abaixo de ~420px. Por isso
       as colunas são quase iguais, e não 1.25/0.85 como quando a arte era
       abstrata. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 3.5rem;
    align-items: center;
}

.land-selo {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    border: 1.5px solid var(--l-fio);
    border-radius: 999px;
    padding: .35rem 1rem .35rem .35rem;
    margin: 0 0 1.75rem;
    background: var(--l-folha);
    font-family: var(--font-mono);
    font-size: .69rem;
    letter-spacing: .08em;
    color: var(--l-fraco) !important;
}
.land-selo__forte {
    font-weight: 700;
    color: var(--l-marca-texto);
    background: var(--l-marca);
    border-radius: 999px;
    padding: .3rem .75rem;
}

/* ⚠️ Menor que o título anterior, e não é timidez: aquele era "A IA lê os autos
   em tempo real" — cinco palavras curtas, que a 4rem cabiam em duas linhas.
   Este tem oito e, no mesmo corpo, ocupava QUATRO linhas de 64px, empurrando os
   botões para fora da dobra junto com a trilha. Título longo pede corpo menor;
   o inverso é como se perde a primeira dobra sem perceber. */
.land-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.15rem, 4.4vw, 3.35rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 700;
    margin: 0 0 1.4rem;
    text-wrap: balance;
}
.land-hero__lead {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--l-texto) !important;
    max-width: 32em;
    margin: 0 0 1.1rem;
    text-wrap: pretty;
}
/* ⚠️ `:last-of-type` NÃO servia aqui: o último `<p>` do hero é a nota, não o
   lead (achado da revisão do Codex, 22/09/2026). O vão antes dos botões mora
   neles. */
.land-hero__lead + .land-ctas { margin-top: 1rem; }  /* + 1,1rem do lead = 2,1rem */
.land-hero__nota {
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.7;
    color: var(--l-fraco) !important;
    margin: 1.4rem 0 0;
    max-width: 34em;
}

/* ==========================================================================
   A TRILHA DO TURNO — o elemento-assinatura

   O hero não mostra captura de tela nem arte abstrata: mostra UM TURNO do
   agente, na ordem em que ele acontece — a pergunta, o plano que ele escreve
   ANTES de agir, os três leitores que ele despacha AO MESMO TEMPO, e a resposta
   com a peça citada.

   ⚠️ O PAINEL ANTERIOR (`.land-ses`) DESENHAVA O ARGUMENTO ERRADO: quatro
   passos lineares — pergunta, uma chamada `mapear_processo`, peças, resposta.
   É a figura exata de um prompt simples, que é justamente o que esta página
   existe para negar. Nada dele sobreviveu por herança; o que voltou (o cromo do
   topo, o traço de fluxo, a citação) voltou reescrito.

   A FORMA é a do painel de trabalho do produto (`templates/chat.html` ›
   `.chat-trabalho`): topo com rótulo, plano em `<ol>` com caixa de estado por
   item, card de subagente com ponto + nome + cronômetro + a linha do que ele lê
   agora, e a pasta do filesystem no pé. Importou-se a ANATOMIA; a cor continua
   sendo a da landing (`--l-*`), porque a paleta do gabinete (`--g-*`) seria um
   segundo sistema na mesma tela — e o raio de 10px do produto, um canto curvo
   numa página que não tem nenhum.

   Toda a boldness da página continua gasta aqui. O resto é enquadramento
   quieto, de propósito.
   ========================================================================== */

/* --- o compasso ------------------------------------------------------------

   Tudo anda em UM relógio, declarado em `.land-hero` e não no painel: o
   marca-texto do `<h1>` também o consome e é IRMÃO do painel, não descendente —
   variável customizada herda para baixo, nunca para cima.

   Cada elemento diz só em QUE bloco entra (`--i`, 0 a 3) e, quando precisa,
   quanto atrasa dentro do bloco (`--d`). Mudar o ritmo da peça inteira é mudar
   um número.

   ⚠️ `animation-fill-mode: backwards` NÃO é enfeite: é o conserto de um defeito
   que o painel antigo tinha no lugar mais caro possível. Com `animation-delay`
   e sem `fill-mode`, o navegador não aplica keyframe nenhum durante o atraso e
   pinta o estilo cascateado — ou seja, na PRIMEIRA pintura o hero mostrava os
   quatro passos completos, resposta e citação inclusive, e só então começava a
   apagá-los um a um. Todo visitante novo via o fim antes do começo.

   ⚠️ Nada aqui anima `height`, `display` nem `margin`: o painel tem a altura
   final desde a primeira pintura. Se algum elemento passar a crescer durante o
   ciclo, a coluna do hero pula quatro vezes por laço. */

.land-hero {
    --l-ciclo: 11s;
    --l-passo: calc(var(--l-ciclo) / 4);
}

.land-trab__bloco,
.land-trab__entra,
.land-trab__todo::before,
.land-trab__todo::after,
.land-trab__leitor,
.land-trab__no,
.land-trab__fita,
.land-trab__arqs {
    animation-duration: var(--l-ciclo);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-delay: calc(var(--i, 0) * var(--l-passo) + var(--d, 0s));
}

/* --- a moldura ------------------------------------------------------------ */

.land-trab {
    position: relative;
    max-width: 35rem;
    margin-inline: auto;
    background: var(--l-folha);
    border: 2px solid var(--l-tinta);
    /* Sombra dura, mas a 12% de opacidade: a moldura precisa de profundidade
       sem competir com o botão primário, que é o único preto sólido da dobra. */
    box-shadow: 10px 10px 0 rgba(17, 16, 16, .12);
}

.land .land-trab__topo,
.land .land-trab__pe {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    margin: 0;
    background: var(--l-faixa);
    font-family: var(--font-mono);
    font-size: .64rem;
    line-height: 1.45;
    color: var(--l-texto);
}
.land-trab__topo { justify-content: space-between; border-bottom: 1.5px solid var(--l-tinta); }
.land-trab__pe   { border-top: 1.5px solid var(--l-tinta); }
.land-trab__rot  { letter-spacing: .14em; font-weight: 700; color: var(--l-tinta); }

.land-trab__vivo { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.land-trab__vivo::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--l-marca);
    border: 1px solid var(--l-tinta);
    animation: landPisca 1.4s steps(1, end) infinite;
}
@keyframes landPisca { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }

.land-trab__fluxo { width: 60px; height: 8px; flex: 0 0 60px; }
.land-trab__fluxo .corre { animation: landCorre 1.6s linear infinite; }
@keyframes landCorre { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

/* A legenda das capacidades (22/09/2026) — UMA linha que troca junto com o
   bloco aceso: memória na pergunta, o MNI no plano, os subagentes na
   delegação, a compactação na resposta. É a fita do contador do plano com
   quatro valores, no mesmo relógio (`--l-ciclo`), e é por isso que a peça não
   ganha altura: a dobra não tem folga.

   ⚠️ Os `translateY` dependem do NÚMERO de `<i>` da fita (quatro) e da altura
   de cada um (1,45em). Mudar um sem o outro trava a legenda numa frase errada. */
.land-trab__legenda {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.45em;
    overflow: hidden;
}
.land-trab__legenda .land-trab__fita { animation-name: landTrabLegenda; }
.land-trab__legenda .land-trab__fita i {
    display: block;
    height: 1.45em;
    line-height: 1.45em;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes landTrabLegenda {
    0%, 24.9%  { transform: none; }
    25%, 49.9% { transform: translateY(-1.45em); }
    50%, 74.9% { transform: translateY(-2.9em); }
    75%, 100%  { transform: translateY(-4.35em); }
}

/* --- os quatro blocos ----------------------------------------------------- */

.land-trab__corpo {
    display: grid;
    gap: .4rem;
    padding: .65rem;
}
/* ⚠️ Item de grid nasce com `min-width: auto` e NÃO encolhe abaixo do próprio
   conteúdo: em 360px os quatro blocos da trilha ficavam 332px de largura dentro
   de um pai de 319 e empurravam a PÁGINA INTEIRA 2px para a direita — scroll
   horizontal em toda a landing por causa de dois pixels, que no telefone é a
   página "tremendo" ao rolar. Medido em 24/08/2026; o `min-width: 0` é o
   contrato explícito de "pode encolher". */
.land-trab__corpo > * { min-width: 0; }

.land-trab__bloco {
    --i: 0;
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
    padding: .55rem .7rem;
    animation-name: landTrabBloco;
}
.land-trab__bloco--q { --i: 0; }
.land-trab__bloco--p { --i: 1; }
.land-trab__bloco--s { --i: 2; }
.land-trab__bloco--r { --i: 3; }

/* O bloco da vez é o segundo emprego da marca (a sombra) — e só um está aceso por vez. */
@keyframes landTrabBloco {
    0%        { border-color: var(--l-fio);   background: var(--l-folha); box-shadow: 3px 3px 0 rgba(17,16,16,.05); }
    3%, 21%   { border-color: var(--l-tinta); background: var(--l-ativo); box-shadow: 6px 6px 0 var(--l-marca); }
    28%, 100% { border-color: var(--l-fio);   background: var(--l-folha); box-shadow: 3px 3px 0 rgba(17,16,16,.05); }
}

/* ⚠️ O conteúdo ENTRA E FICA — não cai para 34% depois da vez, como fazia o
   painel antigo. O que a peça precisa provar é que o turno inteiro aconteceu:
   apagar o plano quando os leitores começam desfaz a afirmação no momento em
   que ela fica interessante. Quem chega no meio do laço lê a trilha parada. */
.land-trab__entra { animation-name: landTrabEntra; }
@keyframes landTrabEntra {
    0%, 2%   { opacity: 0; transform: translateY(5px); }
    7%, 100% { opacity: 1; transform: none; }
}

.land-trab__rotulo {
    display: block;
    font-family: var(--font-mono);
    font-size: .59rem;
    letter-spacing: .16em;
    color: var(--l-fraco);
    margin-bottom: .45rem;
}
.land-trab__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    margin-bottom: .5rem;
}
.land-trab__cab .land-trab__rotulo { margin-bottom: 0; }
.land-trab__nota { font-family: var(--font-mono); font-size: .59rem; color: var(--l-fraco); }

/* ⚠️ Prefixo `.land` obrigatório em todo `<p>` com cor própria: `.land p`
   (0,1,1) vence `.land-trab__fala` (0,1,0). Foi assim que a citação do painel
   antigo saiu preta sobre preta. */
.land .land-trab__fala {
    font-size: .9rem;
    line-height: 1.45;
    margin: 0;
    color: var(--l-tinta);
}

/* O cursor pisca no seu ritmo e SOME quando a pergunta é enviada. São duas
   animações no mesmo elemento de propósito: no painel antigo o caret piscava
   pelos quatro passos, dizendo que ninguém tinha apertado Enter enquanto a
   resposta já estava na tela. `visibility` e não `opacity`, para não disputar a
   propriedade com o pisca. */
.land-trab__caret {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--l-tinta);
    vertical-align: -2px;
    margin-left: 3px;
    animation: landCaret 1s steps(1, end) infinite,
               landTrabCaretFim var(--l-ciclo) linear 0s infinite backwards;
}
@keyframes landCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes landTrabCaretFim { 0%, 23% { visibility: visible; } 24%, 100% { visibility: hidden; } }

/* --- o odômetro (contador do plano e cronômetro dos leitores) --------------

   Contador e cronômetro são ESTADO DE WIDGET, não conteúdo: quem lê a lista já
   sabe quantos itens fecharam. Por isso vão `aria-hidden` e são desenhados como
   uma fita de valores atrás de uma janela de uma linha — sem JS, e sem `content`
   em keyframe, que não anima de forma confiável.

   ⚠️ Os `translateY` dependem do NÚMERO de `<i>` de cada fita. Acrescentar um
   valor no HTML sem mexer aqui trava o odômetro num número errado — e, no bloco
   de `prefers-reduced-motion`, num número errado que ninguém vê em revisão. */

.land-trab__conta,
.land-trab__crono {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    color: var(--l-texto);
}
.land-trab__fita { display: block; }
.land-trab__fita i { display: block; height: 1em; line-height: 1em; font-style: normal; }

.land-trab__conta .land-trab__fita { animation-name: landTrabConta; }
@keyframes landTrabConta {
    0%, 16%   { transform: none; }
    18%, 46%  { transform: translateY(-1em); }
    48%, 100% { transform: translateY(-2em); }
}

.land-trab__crono .land-trab__fita { animation-name: landTrabCrono; }
@keyframes landTrabCrono {
    0%, 5%    { transform: none; }
    6%, 10%   { transform: translateY(-1em); }
    11%, 15%  { transform: translateY(-2em); }
    16%, 20%  { transform: translateY(-3em); }
    21%, 100% { transform: translateY(-4em); }
}

/* --- o plano (write_todos) ------------------------------------------------ */

.land-trab__plano {
    list-style: none;
    margin: 0 0 .55rem;
    padding: 0;
    display: grid;
    gap: .28rem;
}
.land-trab__todo {
    position: relative;
    padding-left: 1.35rem;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--l-texto);
}
/* a caixa de estado: vazia → ocre (em curso) → tinta (feito) */
.land-trab__todo::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--l-fio);
    animation-name: landTrabTodoN;
}
/* o ✓ — dois traços girados, na cor do papel sobre a caixa de tinta. Cor do
   papel e não amarelo: o amarelo aqui seria um quarto emprego. */
.land-trab__todo::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: calc(.16em + 1px);
    width: 3px;
    height: 7px;
    border: solid var(--l-fundo);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
    opacity: 0;
    animation-name: landTrabCheckN;
}
/* ⚠️ O item 1 tem relógio PRÓPRIO: mapear é a única tarefa que o coordenador
   faz sozinho. Os outros três abrem juntos e fecham juntos — é exatamente isso
   que a delegação em paralelo é, e é o que a cena precisa afirmar. Dar a todos
   o mesmo relógio escalonado transformaria a peça numa fila. */
.land-trab__todo--um::before { animation-name: landTrabTodo1; }
.land-trab__todo--um::after  { animation-name: landTrabCheck1; }

@keyframes landTrabTodo1 {
    0%, 8%    { border-color: var(--l-fio);   background: transparent; }
    10%, 16%  { border-color: var(--l-ouro);  background: var(--l-ouro); }
    17%, 100% { border-color: var(--l-tinta); background: var(--l-tinta); }
}
@keyframes landTrabCheck1 { 0%, 16% { opacity: 0; } 17%, 100% { opacity: 1; } }

@keyframes landTrabTodoN {
    0%, 19%   { border-color: var(--l-fio);   background: transparent; }
    21%, 46%  { border-color: var(--l-ouro);  background: var(--l-ouro); }
    48%, 100% { border-color: var(--l-tinta); background: var(--l-tinta); }
}
@keyframes landTrabCheckN { 0%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }

/* a chamada que o item 1 produz, e o número que ela devolve */
.land .land-trab__mapa {
    display: grid;
    gap: .3rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .64rem;
    line-height: 1.45;
    color: var(--l-fraco);
    --d: 1.3s;
}
/* ⚠️ `custom.css` pinta todo `code` de amarelo com borda de 2px (é o inline
   code do site). Aqui isso seria um quarto emprego do amarelo, no elemento
   errado — e num bloco que a cena precisa que se leia como máquina, não como
   destaque. Se esta neutralização cair, o defeito volta calado. */
.land-trab__chamada,
.land .land-trab__chamada code {
    font-family: var(--font-mono);
    font-size: .72rem;
    background: var(--l-faixa);
    color: var(--l-tinta);
    border: 0;
    border-radius: 0;
    padding: 0;
    font-weight: 400;
}
.land-trab__chamada {
    display: block;
    border-left: 3px solid var(--l-tinta);
    padding: .38rem .55rem;
    overflow-x: auto;
}
.land-trab__chamada .cnj { color: var(--l-ouro-t); }

/* --- os três leitores ----------------------------------------------------- */

.land-trab__leitores {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: grid;
    gap: .3rem;
}
/* ⚠️ SEM `--d` escalonado, ao contrário de toda entrada em série desta folha:
   os três cards entram no MESMO quadro e os três cronômetros marcam o MESMO
   número enquanto correm. Um stagger de 120ms aqui — que é o reflexo — desfaz
   a única coisa que este bloco existe para afirmar. */
.land-trab__leitor {
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
    padding: .3rem .5rem;
    animation-name: landTrabLeitor;
}
@keyframes landTrabLeitor {
    0%, 2%    { opacity: 0; transform: translateY(6px); border-color: var(--l-fio); }
    7%, 21%   { opacity: 1; transform: none;            border-color: var(--l-tinta); }
    24%, 100% { opacity: 1; transform: none;            border-color: var(--l-fio); }
}

.land-trab__leitor-cab { display: flex; align-items: center; gap: .4rem; }
.land-trab__no {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--l-fio);
    animation-name: landTrabNo;
}
@keyframes landTrabNo {
    0%, 4%    { background: var(--l-fio); }
    7%, 21%   { background: var(--l-ouro); }
    24%, 100% { background: var(--l-tinta); }
}
.land-trab__nome {
    font-family: var(--font-mono);
    font-size: .61rem;
    font-weight: 700;
    color: var(--l-tinta);
}
.land-trab__leitor-cab .land-trab__crono { margin-left: auto; }
/* Uma linha só, com reticências: é como o produto escreve o "lendo …", e é o
   que impede a altura do painel de mudar com o nome da peça. */
.land-trab__lendo {
    display: block;
    margin-top: .15rem;
    font-family: var(--font-mono);
    font-size: .61rem;
    color: var(--l-fraco);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.land-trab__lendo b { color: var(--l-texto); font-weight: 700; }

/* o offload: a peça inteira não volta para a conversa, vai para o filesystem */
.land .land-trab__arqs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .61rem;
    line-height: 1.45;
    color: var(--l-fraco);
    animation-name: landTrabArqs;
}
@keyframes landTrabArqs { 0%, 20% { opacity: 0; } 24%, 100% { opacity: 1; } }
.land-trab__pasta { color: var(--l-tinta); border-bottom: 1px solid var(--l-ouro); }

/* --- a citação ------------------------------------------------------------ */

.land .land-trab__citacao {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--l-tinta);
    color: var(--l-fundo);
    padding: .38rem .65rem;
    margin: .5rem 0 0;
    font-family: var(--font-mono);
    font-size: .64rem;
    --d: .55s;
}
.land-trab__citacao::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--l-marca);
    flex: 0 0 auto;
}

/* --- pausa e movimento reduzido ------------------------------------------- */

/* ⚠️ Fora da tela as animações continuariam repintando borda, sombra e fundo a
   cada quadro. `landing.js` marca o painel quando ele SAI do viewport, e a
   marcação é NEGATIVA: sem JavaScript nada é marcado e a animação roda, que é o
   comportamento certo — o inverso deixaria o hero congelado no primeiro bloco,
   que é justamente o que não mostra a resposta.

   `::after` entra na lista porque o ✓ do plano é um. No painel antigo esta
   regra cobria só `::before`, e ficava incompleta esperando o dia em que
   alguém animasse um `::after`. */
.land-trab--parado *,
.land-trab--parado *::before,
.land-trab--parado *::after,
.land-trab--pausado *,
.land-trab--pausado *::before,
.land-trab--pausado *::after { animation-play-state: paused !important; }

/* O botão "Pausar" do topo da trilha (22/09/2026, WCAG 2.2.2 — achado da
   revisão do Codex): a peça se move sem parar e agora carrega a legenda das
   capacidades, que troca sozinha; quem quer LER precisa poder congelar. É uma
   classe PRÓPRIA (`--pausado`), e não a `--parado` do observer: a da tela liga
   e desliga sozinha ao rolar, e apagaria a escolha da pessoa. */
.land .land-trab__pausa {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--l-texto);
    background: transparent;
    border: 1px solid var(--l-fio);
    padding: .15rem .45rem;
    cursor: pointer;
}
.land .land-trab__pausa:hover { border-color: var(--l-tinta); color: var(--l-tinta); }
.land-trab__vivos { display: inline-flex; align-items: center; gap: .6rem; }

@media (prefers-reduced-motion: reduce) {
    .land-trab *,
    .land-trab *::before,
    .land-trab *::after { animation: none !important; }

    /* O estado congelado é o do FIM do ciclo — o turno inteiro concluído. Ele é
       escrito à mão e precisa espelhar o último keyframe de cada elemento.

       ⚠️ E o realce do bloco da RESPOSTA não é decoração: sem ele o painel
       congelado fica sem nenhum amarelo, e a regra dos três empregos passa a
       valer só para dois — para quem tem movimento reduzido ligado, ou seja,
       para ninguém que revise a página. Era o caso do painel antigo. */
    .land-trab__entra { opacity: 1; transform: none; }
    .land-trab__bloco--r {
        border-color: var(--l-tinta);
        background: var(--l-ativo);
        box-shadow: 6px 6px 0 var(--l-marca);
    }
    .land-trab__todo::before { border-color: var(--l-tinta); background: var(--l-tinta); }
    .land-trab__todo::after  { opacity: 1; }
    .land-trab__conta .land-trab__fita { transform: translateY(-2em); }  /* 3 valores na fita */
    .land-trab__crono .land-trab__fita { transform: translateY(-4em); }  /* 5 valores na fita */
    .land-trab__leitor { opacity: 1; transform: none; }
    .land-trab__no     { background: var(--l-tinta); }
    .land-trab__arqs   { opacity: 1; }
    .land-trab__caret  { display: none; }
    /* ⚠️ A legenda das capacidades PARA e mostra as quatro de uma vez: parada
       numa só, ela esconderia três capacidades justamente de quem pediu menos
       movimento (achado da revisão adversarial do Codex, 22/09/2026). Sem
       animação, a altura a mais não faz a coluna pular. */
    .land-trab__legenda { height: auto; white-space: normal; }
    .land-trab__legenda .land-trab__fita { transform: none; }
    .land-trab__legenda .land-trab__fita i {
        height: auto;
        white-space: normal;
        overflow: visible;
    }
    /* Parada desde o começo, a peça não tem o que pausar. */
    .land .land-trab__pausa { display: none; }
    .land .land-trab__pe { align-items: flex-start; }
}

/* ==========================================================================
   OS RECURSOS — a tela de verdade, uma linha cada (22/09/2026)

   Capturas de produção em moldura de 2px, numa grade 2×2. A imagem é o
   argumento e o texto é legenda: nome em Space Grotesk e UMA linha. O hover é o
   terceiro emprego da marca (a sombra dura azul), o mesmo dos cartões antigos.
   Sem numeração: os quatro não são uma sequência.
   ========================================================================== */

.land-recursos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 2rem;
}
.land-recurso { margin: 0; }
.land-recurso img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top left;
    border: 2px solid var(--l-tinta);
    background: var(--l-faixa);
    transition: box-shadow .14s ease, transform .14s ease;
}
.land-recurso:hover img {
    box-shadow: 6px 6px 0 var(--l-marca);
    transform: translate(-1px, -1px);
}
.land-recurso figcaption { padding-top: .9rem; }
.land-recurso h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.015em;
    margin: 0 0 .3rem;
}
.land .land-recurso p {
    font-size: .98rem;
    line-height: 1.5;
    color: var(--l-texto);
    margin: 0;
    max-width: 34em;
}

/* ==========================================================================
   OS PEDIDOS — só as perguntas, na serifa do processo impresso

   Eram seis cartões com a pergunta e, embaixo, o que o agente faz com ela. A
   trilha do topo já mostra o que ele faz; aqui fica a VOZ de quem pergunta, em
   Tinos (a serifa da peça impressa), uma por linha, separadas por fio.
   ========================================================================== */

.land-perguntas {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--l-tinta);
}
.land-perguntas li {
    font-family: 'Tinos', Georgia, serif;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.4;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--l-fio);
    text-wrap: pretty;
}

/* ==========================================================================
   NO SEU CLIENTE DE IA — o servidor MCP e a skill, lado a lado
   ========================================================================== */

.land-usar {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.land-usar .land-sub { margin-bottom: 1.4rem; }
.land .land-usar__clientes {
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.6;
    color: var(--l-fraco);
    border-top: 1.5px solid var(--l-fio);
    padding-top: .9rem;
    margin: 0 0 .9rem;
}
.land .land-usar__mais { font-size: .95rem; line-height: 1.55; color: var(--l-texto); margin: 0; }

/* A skill é o único bloco de tinta cheia da página — ela é o brinde, e a
   inversão é o que a faz ser vista sem precisar de um selo "grátis" gritado. */
.land-skill {
    border: 2px solid var(--l-tinta);
    background: var(--l-tinta);
    color: #E2E6E6;
    padding: 1.6rem;
    margin: 0;
}
.land-skill__cab { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.land-skill__gratis {
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    background: var(--l-marca-clara);   /* sobre o bloco preto: o azul some */
    color: var(--l-tinta);
    padding: .25rem .5rem;
}
.land-skill__rot {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    color: #C4C8C8;
}
.land .land-skill p { color: #E2E6E6 !important; font-size: .97rem; line-height: 1.55; margin: 0 0 .9rem; }
.land .land-skill .land-skill__data {
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.6;
    color: #939598 !important;
    margin-bottom: 1.1rem !important;
}
.land-skill__baixar { display: flex; gap: .6rem; flex-wrap: wrap; }
.land .land-skill__baixar a {
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    padding: .6rem 1rem;
    text-decoration: none;
    background: var(--l-marca-clara);   /* sobre o bloco preto: o azul some */
    color: var(--l-tinta);
}
.land .land-skill__baixar a + a {
    background: none;
    color: var(--l-fundo);
    border: 1.5px solid var(--l-fraco);
}
.land .land-skill__baixar a + a:hover { border-color: var(--l-marca-clara); color: var(--l-marca-clara); }
/* ⚠️ O PRIMEIRO download não tem classe, e `.land a:not([class]):hover` (0,3,1)
   o pintava de azul sobre o bloco preto — 2,27:1 (achado da revisão do Codex,
   22/09/2026; o defeito é anterior). O hover dele mantém o par claro/tinta e
   ganha sublinhado, com especificidade acima daquela regra. */
.land .land-skill__baixar a:not([class]):hover {
    background: var(--l-marca-clara);
    color: var(--l-tinta);
    text-decoration: underline;
}
.land .land-skill__baixar a + a:not([class]):hover {
    background: none;
    color: var(--l-marca-clara);
}
/* Foco dentro do bloco preto: o anel azul da página dá 2,27 contra o fundo
   (WCAG 1.4.11 pede 3:1). */
.land .land-skill a:focus-visible,
.land .land-skill button:focus-visible { outline-color: var(--l-marca-clara); }

/* ⚠️ `code` do `custom.css` vem amarelo com borda de 2px. Nos nomes de comando
   isso roubaria o amarelo da ação primária, então aqui ele é etiqueta neutra. */
.land .land-cmd {
    font-family: var(--font-mono);
    font-size: .85em;
    font-weight: 500;
    background: var(--l-faixa);
    color: var(--l-tinta);
    border: 0;
    border-radius: 0;
    padding: .1rem .35rem;
}

/* ==========================================================================
   CONTRIBUIÇÃO DE CUSTOS

   ⚠️ Esta seção foi REBAIXADA de propósito, e a versão anterior é o contraste:
   dois cartões grandes lado a lado, com o valor em 2,05rem de display, sombra
   dura de 8px e uma lista de "o que está incluído" — a gramática de uma página
   de planos de SaaS. Aqui não se vende assinatura: rateia-se a conta do
   servidor. O valor continua na página inteiro e sem letra miúda, em mono, no
   tamanho de um dado — porque é isso que ele é.

   A âncora `#pricing` e os dois `<form>` de checkout FICAM: o rodapé do
   `base.html`, o `/docs` em quatro pontos e o retorno cancelado do Stripe
   apontam para cá, e a rota `web.index` depende do `?planos` para não
   redirecionar quem está logado.
   ========================================================================== */

.land-rateio {
    border: 1.5px solid var(--l-fio);
    background: var(--l-folha);
}
.land-rateio__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: 1.5rem 2.5rem;
    align-items: start;
    padding: 1.6rem 1.75rem;
}
.land-rateio__item + .land-rateio__item { border-top: 1px solid var(--l-fio); }

.land-rateio__item h3 {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .6rem;
}
.land .land-rateio__item p { font-size: .95rem; line-height: 1.55; color: var(--l-texto); margin: 0 0 .7rem; }
.land .land-rateio__item p:last-child { margin-bottom: 0; }

/* --- a coluna do valor ----------------------------------------------------
   O valor sai em MONO e no corpo do texto, não em display: "mono é dado" vale
   aqui como vale para o CNJ e para o id do documento. Um número em 2rem de
   Space Grotesk é uma afirmação de preço; em 0,95rem de JetBrains Mono é uma
   informação de custo, que é o que esta página quer que ele seja. */
.land-rateio__acao { display: grid; gap: .7rem; }
.land .land-rateio__valor {
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 500;
    color: var(--l-tinta);
    margin: 0;
}
.land-rateio__valor span { color: var(--l-fraco); font-weight: 400; }
.land-rateio__acao form { margin: 0; }
.land-rateio .land-btn { width: 100%; }
.land .land-rateio__acao .land-rateio__entrega {
    font-family: var(--font-mono);
    font-size: .65rem;
    line-height: 1.5;
    color: var(--l-fraco);
    margin: 0;
}

.land-termos {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--l-fraco) !important;
    margin: 1.75rem 0 0;
}

/* ==========================================================================
   FAQ — `<details>` em vez do accordion do Bootstrap: funciona sem JS, é uma
   dependência a menos, e abre mais de um por vez (o accordion fechava a
   resposta anterior, o que atrapalha comparar).
   ========================================================================== */

.land-faq { display: grid; gap: .75rem; }
.land-faq details {
    border: 1.5px solid var(--l-tinta);
    background: var(--l-folha);
    padding: 1.1rem 1.35rem;
}
.land-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.08rem;
}
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq__mais {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.land-faq details[open] .land-faq__mais { transform: rotate(45deg); }
.land .land-faq p { font-size: .97rem; line-height: 1.6; color: var(--l-texto) !important; margin: .85rem 0 0; }

.land-fecho { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ==========================================================================
   REVEAL AO ROLAR E FEEDBACK TÁTIL

   O hero é a assinatura e não entra aqui: o que esta camada faz é tirar o
   "seco" de tudo o que está ABAIXO da dobra — as seções e os cartões, que
   antes entravam já pintados. São dois gestos, e só dois, dentro do design
   system (§03, "o único movimento do sistema"; §05, regra 5):

     1. REVEAL — a seção ou o cartão sobe 16px e aparece, uma vez, quando entra
        na tela. É o mesmo "estado primeiro" do resto do produto: a página diz
        o que está pronto à medida que a pessoa chega.
     2. FEEDBACK — no hover, o cartão ganha a sombra dura amarela que o
        `.land-pedido:hover` já tinha, mais 1px de deslocamento. É "apontar o
        destino", não ornamento: diz que a caixa responde.

   ⚠️ FALHAR-PARA-VISÍVEL: o estado escondido só vale sob `.land-js`, a classe
   que `landing.js` põe no `<html>` quando há IntersectionObserver. Sem JS ou
   num navegador sem o observer, NADA fica escondido — o contrário deixaria a
   página em branco para quem mais precisa dela.

   ⚠️ O stagger é por `--rd` (delay), atribuído em JS na ordem do DOM de cada
   grid — o mesmo espírito do `--i`/`--d` da trilha. O CSS não escolhe ordem;
   quem sabe a ordem dos irmãos é o documento.

   ⚠️ `prefers-reduced-motion` neutraliza TUDO no bloco próprio ao fim: quem
   pediu menos movimento recebe a página parada e visível desde o primeiro
   pixel.
   ========================================================================== */

/* Estado inicial — só existe quando o JS confirmou que vai revelar. */
.land-js .land-reveal { opacity: 0; }

/* ⚠️ A entrada é ANIMAÇÃO, não transição, e a razão é de cascata, não de gosto:
   `transition` é UMA propriedade, e a regra que ganha declara a LISTA INTEIRA.
   A primeira versão deste bloco punha a entrada num `transition` de
   `.land-js .land-reveal.is-visivel` — três classes, que vencem o
   `.land-pedido { transition: box-shadow .14s }` de uma classe escrito desde
   antes deste trabalho. Resultado medido na revisão: depois de revelado, o
   cartão de pergunta perdia o único hover que a página já tinha (a sombra
   amarela passava a aparecer SECA), e as três famílias novas ganhavam um hover
   arrastado de 0,55s. Como animação, a entrada não disputa `transition` com
   ninguém: cada hover fica com o tempo que escolheu.

   ⚠️ `backwards`, nunca `both`: durante o atraso do stagger a peça precisa
   ficar no quadro inicial (é o que `backwards` faz), mas ao TERMINAR ela tem de
   soltar o `transform` de volta para a cascata. Com `forwards`, o
   `transform: none` do último quadro passaria por cima do `:hover` para
   sempre — o mesmo defeito, por outra porta. */
.land-js .land-reveal.is-visivel {
    opacity: 1;
    animation: land-reveal .55s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s) backwards;
}
@keyframes land-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* O bloco da skill é o único de tinta cheia: entra com um peso a mais. */
.land-js .land-skill.land-reveal.is-visivel {
    animation: land-reveal-skill .6s cubic-bezier(.22, .61, .36, 1) var(--rd, 0s) backwards;
}
@keyframes land-reveal-skill {
    from { opacity: 0; transform: translateY(16px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* O feedback tátil mora no próprio componente (`.land-recurso:hover img`). */

/* FAQ: o `+` já gira; aqui o fundo do summary acompanha. */
.land .land-faq summary { transition: background .14s ease; }
.land .land-faq details summary:hover { background: var(--l-fundo); }

/* Movimento reduzido: tudo visível e parado desde o primeiro pixel. */
@media (prefers-reduced-motion: reduce) {
    .land-js .land-reveal { opacity: 1; }
    .land-js .land-reveal.is-visivel,
    .land-js .land-skill.land-reveal.is-visivel { opacity: 1; animation: none; }
    .land-recurso img,
    .land .land-faq summary { transition: none; }
    .land-recurso:hover img { transform: none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 60rem) {
    /* Uma coluna, e o painel DEPOIS do texto: num celular o que decide é a
       headline, e empurrá-la para baixo da dobra com uma animação seria trocar
       a mensagem pelo enfeite. */
    .land-hero__grade { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
    .land-hero > .land-w { padding-block: 3rem; }
    .land-usar { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .land-w { padding: 4rem 1.5rem; }
    /* O valor e o botão descem para baixo do texto: a 15rem a coluna da direita
       não cabe ao lado de uma medida de leitura decente. */
    .land-rateio__item { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .land-rateio__acao { max-width: 22rem; }
}

@media (max-width: 34rem) {
    .land-w { padding: 3rem 1.15rem; }
    .land .land-btn { width: 100%; }
    .land-trab { box-shadow: 6px 6px 0 rgba(17, 16, 16, .12); }
    .land-trab__corpo { padding: .6rem; gap: .4rem; }
    .land-trab__bloco { padding: .55rem .6rem; }
    /* A chamada QUEBRA em vez de rolar: 383px de mono não cabem em ~300, e uma
       barra de rolagem horizontal dentro do hero é um convite a rolar a página
       para o lado no celular. */
    .land-trab__chamada { overflow-x: visible; white-space: normal; word-break: break-word; }
    /* ⚠️ O que se corta é o OFFLOAD, e é uma escolha: é a linha mais técnica da
       peça e a menos carregada de argumento de venda. O plano, os três leitores
       e a citação ficam — nenhum deles sai sem desmontar a tese da página.

       O prefixo `.land` é obrigatório e a falta dele não dá erro nenhum: a
       regra que declara o `display: flex` desta linha é `.land .land-trab__arqs`
       (0,2,0) e vence `.land-trab__arqs` (0,1,0) mesmo dentro do media query —
       media query não soma especificidade. Sem o prefixo, o corte simplesmente
       não acontecia, e só se via medindo. */
    .land .land-trab__arqs { display: none; }
    /* O traço de fluxo sai no celular: a legenda das capacidades precisa da
       largura inteira do rodapé para caber numa linha. */
    .land-trab__fluxo { display: none; }
    .land-recursos { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ==========================================================================
   PORTA DE ENTRADA — login e cadastro

   Estas duas telas moram nesta folha, e não numa própria, porque são o fim do
   funil da landing: quem chega nelas veio de um CTA daqui, e uma troca de
   linguagem no meio do caminho faz a pessoa achar que mudou de site. Elas
   reusam os tokens (declarados no `body`, ver o topo do arquivo) e os botões.

   Login e cadastro NÃO têm o mesmo desenho, de propósito. Quem faz login já
   decidiu: a tela é uma coluna estreita e nada mais. Quem cadastra ainda está
   decidindo, e ali cabe a coluna que diz o que vem junto.
   ========================================================================== */

body.is-entrar { background: var(--l-fundo); }
body.is-entrar::before { display: none; }
.ent-main { padding: 0 !important; }

.ent {
    color: var(--l-tinta);
    padding: 4rem 1.5rem 5rem;
}
.ent p { color: var(--l-tinta); line-height: 1.6; }
.ent a:not([class]) {
    color: var(--l-tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    background: none;
}
.ent a:not([class]):hover { color: var(--l-ouro-t); background: none; }

.ent-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    width: 100%;
    max-width: 58rem;
    margin-inline: auto;
}
.ent-grade--so { grid-template-columns: minmax(0, 1fr); max-width: 27rem; }

.ent-olho {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--l-fraco) !important;
    margin: 0 0 .9rem;
}
.ent-arg h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.ent .ent-arg > p { font-size: 1.05rem; line-height: 1.55; color: var(--l-texto) !important; margin: 0; }

.ent-ganhos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.ent-ganhos li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .1rem .55rem; }
.ent-ganhos li::before { content: "✓"; font-weight: 700; color: var(--l-ouro); }
.ent-ganhos b { font-size: .97rem; font-weight: 700; }
.ent-ganhos small { grid-column: 2; display: block; font-size: .87rem; line-height: 1.5; color: var(--l-texto); }

/* --- o painel do formulário ----------------------------------------------- */

.ent-painel {
    background: var(--l-folha);
    border: 2px solid var(--l-tinta);
    box-shadow: 8px 8px 0 rgba(17, 16, 16, .12);
}
.ent-painel__topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .8rem 1.5rem;
    border-bottom: 1.5px solid var(--l-tinta);
    background: var(--l-faixa);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--l-tinta);
}
.ent-painel__corpo { padding: 1.6rem 1.5rem; }

.ent-campo { margin-bottom: 1.1rem; }
/* ⚠️ `custom.css` estiliza `label` (mono, caixa alta, `!important` na fonte, no
   tamanho, no peso e na cor) e `input[type=...]` (borda de 3px, raio de 6px,
   sombra dura, `!important` em tudo). Para valer aqui são precisas as DUAS
   coisas: `!important` — especificidade não vence `!important` — e
   especificidade acima de `input[type="text"]` (0,1,1), daí o prefixo duplo.
   Faltando uma, nada acontece. Mesmo gotcha documentado em `minuta.css`. */
.ent .ent-campo label {
    display: block;
    font-family: var(--font-mono) !important;
    font-size: .66rem !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--l-fraco) !important;
    margin: 0 0 .4rem;
}
.ent .ent-campo input {
    width: 100%;
    background: var(--l-fundo) !important;
    color: var(--l-tinta) !important;
    /* 2px e sem raio: o mesmo enquadramento das caixas da landing. A borda de
       3px arredondada do site fazia o campo parecer um botão. */
    border: 2px solid var(--l-tinta) !important;
    border-radius: 0 !important;
    padding: .7rem .85rem !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    box-shadow: none;
    transition: box-shadow .12s ease;
}
.ent .ent-campo input:focus {
    background: var(--l-folha) !important;
    box-shadow: 4px 4px 0 var(--l-marca) !important;
    outline: none !important;
    transform: none;
}
.ent-campo small { display: block; font-size: .8rem; color: var(--l-fraco); margin-top: .35rem; }

.ent .ent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: .5rem;
    border: 2px solid var(--l-marca);
    background: var(--l-marca);
    color: var(--l-marca-texto);
    padding: .9rem 1.4rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.03rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--l-tinta);
    transition: box-shadow .12s ease, transform .12s ease, background .12s ease;
}
.ent .ent-btn:hover { background: var(--l-marca-forte); border-color: var(--l-marca-forte); box-shadow: 2px 2px 0 var(--l-tinta); transform: translate(2px, 2px); }
.ent .ent-btn:active { box-shadow: 0 0 0 var(--l-tinta); transform: translate(4px, 4px); }

.ent a:focus-visible,
.ent button:focus-visible,
.ent input:focus-visible { outline: 3px solid var(--l-ouro-t); outline-offset: 3px; }

/* O aceite dos termos é a única caixa de seleção da tela; o `<label>` é uma
   frase e não pode herdar a etiqueta mono em caixa alta do `custom.css`. */
.ent-aceite { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.4rem; }
.ent-aceite input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--l-tinta); }
.ent .ent-aceite label {
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--l-tinta) !important;
    line-height: 1.5;
}

.ent-nota {
    border-left: 3px solid var(--l-marca);
    background: var(--l-faixa);
    padding: .75rem .9rem;
    margin: 1.1rem 0 0 !important;
    font-size: .87rem !important;
    line-height: 1.5;
    color: var(--l-texto) !important;
}
.ent-pe {
    margin: 1.1rem 0 0 !important;
    padding-top: 1.1rem;
    border-top: 1.5px solid var(--l-fio);
    text-align: center;
    font-size: .9rem !important;
    color: var(--l-texto) !important;
}

/* Recuperação de conta: prosa da tela, erro e a saída do "esqueci".

   `custom.css` estiliza `<p>` em seletor nu, daí o `!important` — mesmo gotcha
   já anotado no cabeçalho desta seção para `input` e `label`. */
.ent-texto {
    margin: 0 0 1.2rem !important;
    font-size: .95rem !important;
    line-height: 1.6;
    color: var(--l-texto) !important;
}

/* Vermelho de recusa. Enquadramento de 2px como o resto da porta de entrada —
   um alerta arredondado aqui seria o único canto curvo da tela. */
.ent-erro {
    margin: 0 0 1.1rem !important;
    padding: .7rem .85rem;
    border: 2px solid #C0392B;
    background: #FDF1F1;
    font-size: .88rem !important;
    line-height: 1.5;
    color: #8E2A1F !important;
}

/* O "esqueci minha senha" fica colado no botão, sem a régua que separa o
   rodapé: ele é continuação da tentativa de entrar, não um assunto novo. */
.ent-pe--esqueci {
    border-top: 0;
    padding-top: .85rem;
    margin-top: .1rem !important;
}

/* Reveal da porta de entrada — o argumento primeiro, o painel depois.
   ⚠️ Não há regra própria aqui, de propósito: `landing.js` põe `.land-reveal`
   no `.ent-arg` e no `.ent-painel`, e o bloco "REVEAL AO ROLAR" acima (que não
   é escopado em `.land`) já os atende, com `prefers-reduced-motion` incluído.
   Duplicar o mecanismo era uma segunda verdade para divergir da primeira; o
   atraso do painel sai do `--rd`, pela ordem dos irmãos. */

@media (max-width: 52rem) {
    .ent { padding: 2.5rem 1.15rem 3.5rem; }
    /* O formulário vem PRIMEIRO no celular: quem abriu /register já clicou num
       botão que dizia "criar conta", e rolar por uma lista de vantagens antes
       de achar o campo é pedir de novo o que já foi decidido. */
    .ent-grade { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; max-width: 27rem; }
    .ent-arg { order: 2; }
    .ent-painel { order: 1; }
}