/* GUI — a camada EXPERIMENTAL da rodada Home B.

   Home B · tela comercial do Guide · prévia da atividade · abertura · laboratório.

   NENHUMA REGRA AQUI ALCANÇA A HOME A. Todo seletor está sob `.home-b`,
   `.guide-produto`, `.previa-ativ`, `.abertura`, `.ativ-cheia` ou `.lab-barra`.
   `home.css` não foi tocado, e a Home A não sabe que este arquivo existe.

   NENHUMA COR NOVA: --acento, --papel, --tinta, --linha, --raio, vindos de
   `base-padrao.css`. A camada comercial é o MESMO produto numa pergunta
   diferente, e herdar os tokens é o que impede a comparação humana de virar
   comparação de paleta. */

/* ==================================================================
   RESPONSIVO — a mesma experiência, não um mobile esticado (§51)
   ==================================================================
   Em telefone tudo é uma coluna. Acima de 720px o conteúdo ganha uma largura
   máxima e centraliza, e a prateleira vira grade — em vez de esticar um card
   de 360px até 1600px, que é o que o §51 proíbe por escrito. */
.home-b, .guide-produto, .abertura { --lim: 560px; }
@media (min-width: 720px) {
  .home-b, .guide-produto { --lim: 980px; }
}

/* ==================================================================
   HOME B — hero
   ================================================================== */
/* O HERO CEDE ALTURA PARA A PRIMEIRA PRATELEIRA APARECER.
   Com 62vh, o que se via ao abrir era foto, busca e o título "Destaques" — a
   fileira começava abaixo da dobra, e a tela parecia uma landing page. O
   catálogo tem de espiar: é ele que diz o que esta Home é. */
.hb-hero { position: relative; min-height: 44vh; max-height: 420px;
           display: flex; align-items: flex-end; overflow: hidden; }
@media (min-width: 720px) { .hb-hero { min-height: 52vh; max-height: 560px; } }
.hb-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; object-position: 0% 28%; }
.hb-hero-veu { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(20,14,32,.55) 0%,
                           rgba(20,14,32,.15) 42%, rgba(20,14,32,.86) 100%); }
.hb-hero-topo { position: absolute; top: calc(12px + var(--seguro-t)); left: 16px;
                right: 16px; display: flex; align-items: center; gap: 10px;
                flex-wrap: wrap; z-index: 2; }
.hb-selo-lab { margin-left: auto; font-size: .64rem; font-weight: 700;
               letter-spacing: .07em; text-transform: uppercase;
               background: rgba(255,255,255,.9); color: var(--acento);
               border-radius: 999px; padding: 4px 10px; }
.hb-hero-txt { position: relative; z-index: 2; padding: 0 20px 20px; color: #fff;
               max-width: var(--lim); margin: 0 auto; width: 100%; }
.hb-hero-txt h1 { margin: 0 0 6px; font-size: 1.72rem; line-height: 1.12;
                  letter-spacing: -.02em; }
.hb-hero-txt p { margin: 0; font-size: .9rem; line-height: 1.4;
                 color: rgba(255,255,255,.92); max-width: 34ch; }

/* ==================================================================
   HOME B — busca
   ================================================================== */
.hb-busca { max-width: var(--lim); margin: 0 auto; padding: 12px 16px 2px; }
.hb-campo { display: flex; align-items: center; gap: 10px;
            background: var(--papel-2); border: 1px solid var(--linha);
            border-radius: 999px; padding: 4px 8px 4px 16px; }
.hb-lupa { color: var(--tinta-clara); font-size: 1.1rem; }
.hb-campo input { flex: 1 1 auto; border: 0; background: transparent; font: inherit;
                  padding: 12px 0; outline: none; min-width: 0; }
.hb-campo input::-webkit-search-cancel-button { display: none; }
.hb-limpa { appearance: none; border: 0; background: transparent; cursor: pointer;
            color: var(--tinta-clara); font-size: 1rem; padding: 8px 10px; }
.hb-achados { list-style: none; margin: 10px 0 0; padding: 0;
              background: var(--papel-2); border: 1px solid var(--linha);
              border-radius: 14px; overflow: hidden; }
.hb-achados li + li { border-top: 1px solid var(--linha); }
.hb-achados button, .hb-achados span { display: flex; align-items: baseline; gap: 10px;
              width: 100%; padding: 12px 14px; background: none; border: 0;
              font: inherit; text-align: left; color: var(--tinta); cursor: pointer; }
.hb-achados span > * { cursor: default; }
.hb-achado-tipo { flex: 0 0 auto; font-size: .62rem; font-weight: 700;
                  letter-spacing: .06em; text-transform: uppercase;
                  color: var(--acento); }
.hb-achado-nome { flex: 1 1 auto; }
.hb-achado-onde { flex: 0 0 auto; font-size: .78rem; color: var(--tinta-clara); }
.hb-vazio { margin: 12px 0; font-size: .88rem; color: var(--tinta-fraca); }

/* ==================================================================
   HOME B V2 — SEÇÕES VERTICAIS + PRATELEIRAS HORIZONTAIS
   ==================================================================
   Os chips de filtro no topo saíram (§11). O que fica é catálogo: uma seção
   por assunto, uma fileira por seção.

   A GEOMETRIA É A RAZÃO DE SER. Uma prateleira mostra mais opções em menos
   altura — e no telefone uma seção inteira cabe em um título mais uma fileira
   (§51). É o que impede a Home de virar uma coluna de cards gigantes que se
   rola por minutos. */
/* ==================================================================
   O ACABAMENTO ARREDONDADO — §8
   ==================================================================
   A Home A foi aprovada visualmente com uma linguagem mais macia: a folha de
   conteúdo sobe sobre o hero com 30px de raio, os cartões grandes têm 22px, os
   blocos 16–18px e os controles são pílulas. A Home B usava `--raio` (18px)
   em tudo, e o resultado era um produto com dois sotaques.

   Aqui os valores da Home A viram uma escala declarada, para que Home A e Home
   B pareçam partes do MESMO produto. Não é cópia mecânica de `border-radius`:
   cada superfície recebe o raio da FAMÍLIA dela — folha, cartão, bloco, pílula.

   Nenhum seletor desta seção alcança a Home A: todos estão sob `.home-b`. */
.home-b {
  --r-folha: 30px;   /* a folha de conteúdo que sobe sobre o hero */
  --r-card: 22px;    /* cartão de catálogo e cartão grande */
  --r-bloco: 18px;   /* blocos de apoio, listas, caixas */
  --r-pilula: 999px; /* controles: busca, botões, selos */
}

/* A FOLHA SOBE SOBRE O HERO, como na Home A. É o gesto que separa «capa» de
   «conteúdo» sem precisar de uma linha divisória. */
/* O HERO CEDE A ALTURA QUE A FOLHA COBRE. Sem isto, a última linha do texto
   sobre a foto fica escondida atrás da folha que sobe — e o que se perde é
   justamente o fim da frase. */
.home-b .hb-hero-txt { padding-bottom: 46px; }
@media (min-width: 720px) { .home-b .hb-hero-txt { padding-bottom: 52px; } }
.home-b .hb-busca {
  position: relative; z-index: 3; margin-top: -26px;
  border-radius: var(--r-folha) var(--r-folha) 0 0;
  background: var(--papel);
  padding-top: 18px;
}
@media (min-width: 720px) {
  .home-b .hb-busca { margin-top: -30px; padding-top: 22px; }
}
.home-b .hb-campo { border-radius: var(--r-pilula); }
.home-b .hb-achados,
.home-b .bg-res { border-radius: var(--r-bloco); }
.home-b .hb-ben-lista li { border-radius: var(--r-card); }
.home-b .hb-card { border-radius: var(--r-card); }

.hb-catalogo { padding: 4px 0 8px; }

.hb-sec { margin: 20px 0 0; }
.hb-sec-cab { display: flex; align-items: baseline; gap: 10px;
              max-width: var(--lim); margin: 0 auto 10px; padding: 0 16px; }
.hb-sec-cab h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; }
.hb-sec-exp { font-size: .62rem; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; color: var(--tinta-clara);
              border: 1px dashed var(--linha); border-radius: 999px; padding: 2px 8px; }
.hb-ver-todos { margin-left: auto; appearance: none; border: 0; background: none;
                cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
                color: var(--acento); padding: 4px 0; white-space: nowrap; }
.hb-sec-nota { max-width: var(--lim); margin: -4px auto 10px; padding: 0 16px;
               font-size: .78rem; color: var(--tinta-clara); line-height: 1.4; }
.hb-sec-alvo .hb-sec-cab h2 { color: var(--acento); }

/* O TRILHO.

   `scroll-snap` para o dedo parar em card inteiro, e `scroll-padding` para o
   primeiro não encostar na borda. O `padding-right` maior que o esquerdo é
   deliberado: é o que deixa o ÚLTIMO card respirar no fim da rolagem. */
/* A PRATELEIRA É MAIS LARGA QUE O TEXTO, e de propósito.
   `--lim` é largura de LEITURA: 980px é o certo para um parágrafo e o errado
   para uma fileira de capas — a 1440px sobravam três cards onde cabiam cinco.
   O catálogo ganha o seu próprio limite; o texto mantém o dele. */
.hb-sec { --trilho: var(--lim); }
@media (min-width: 1120px) { .hb-sec { --trilho: 1200px; } }
@media (min-width: 1480px) { .hb-sec { --trilho: 1420px; } }
.hb-sec-cab, .hb-sec-nota { max-width: var(--trilho); }
.hb-trilho {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 16px;
  padding: 2px 16px 10px; -webkit-overflow-scrolling: touch;
  max-width: var(--trilho); margin: 0 auto;
}
/* A barra de rolagem some no telefone e aparece discreta no desktop, onde o
   ponteiro não tem como adivinhar que a fileira rola. */
.hb-trilho::-webkit-scrollbar { height: 0; }
@media (min-width: 720px) {
  .hb-trilho::-webkit-scrollbar { height: 8px; }
  .hb-trilho::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 99px; }
  .hb-trilho:hover::-webkit-scrollbar-thumb { background: var(--tinta-clara); }
}

/* ==================================================================
   O CARD DE GUIDE — a imagem manda, o texto é compacto
   ==================================================================

   A LARGURA NO TELEFONE NÃO É 100% DE PROPÓSITO (§10). Com o card ocupando a
   tela inteira, nada indica que existe uma fileira — o carrossel vira uma pilha
   que se rola sem querer. Com 76vw, o próximo card aparece pela beirada, e o
   gesto se ensina sozinho.

   A ALTURA É DECLARADA, E NÃO DESCOBERTA (§40). Um card que se mede pelo
   conteúdo muda de tamanho quando a fotografia chega — e a fileira inteira
   pula. Com a altura fixa por faixa, a capa e o texto dividem um espaço que já
   existe antes de a imagem carregar: zero layout shift, zero reflow.

   E É A ALTURA QUE FAZ A IMAGEM SER METADE (§2, §7). `flex: 0 0 50%` na capa é
   literal: metade da altura do card é fotografia, em qualquer largura, com
   `object-fit: cover` cuidando do enquadramento. Não há `aspect-ratio` no meio
   para brigar com isso. */
.hb-card {
  flex: 0 0 auto; width: 76vw; max-width: 300px; scroll-snap-align: start;
  height: var(--card-h);
  background: var(--papel-2); border: 1px solid var(--linha);
  /* O RAIO É O DA HOME A (§8): 22px é o valor dos cartões grandes de lá, e é
     ele que faz as duas Homes parecerem o mesmo produto. */
  border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(24,16,28,.05);
}
/* A ALTURA É UMA SÓ, EM TODA LARGURA (§9).

   Eram quatro valores — 296 / 300 / 304 / 300 — um por faixa. Nenhuma das
   quatro linhas do texto muda de tamanho entre elas: a tipografia é a mesma
   em 393px e em 1440px, e portanto a altura necessária também é. Os quatro
   números eram folga tateada, não medida, e é exatamente o tipo de divergência
   que a §9 pede para não existir.

   O VALOR VEM DE UMA MEDIÇÃO, E NÃO DE UM PALPITE (§10). A metade de baixo
   precisa de 114px para as quatro linhas mais o padding — medido no navegador,
   nas seis capas, nas quatro faixas. 120px dá a ela 6px de respiro (§8: não
   pode ficar apertado), e 240px é o dobro disso, porque a capa é `flex: 0 0
   50%` e continua sendo metade exata do cartão (§4). */
/* BLOCO 1 — A ALTURA CAIU PORQUE UMA LINHA SAIU (§12, §13, §17).

   A metade de baixo tinha QUATRO linhas de texto — nome+preço, país, fatos,
   nota. A nota passou para a direita dos fatos, e a metade de baixo passou a
   ter TRÊS. Medido no navegador, nas seis capas e nas quatro larguras: o
   conteúdo das três linhas mais o padding ocupa 88px, contra os 114px de
   antes.

   `--card-h: 208px` dá 104px a cada metade — 16px de respiro sob o texto, a
   mesma folga proporcional que os 120px davam antes. A capa continua sendo
   `flex: 0 0 50%`, e portanto continua sendo metade exata do cartão (§HOMEB-01).

   A FOTOGRAFIA NÃO FOI SACRIFICADA (§17): ela vai de 120px para 104px de
   altura, e continua ocupando metade do cartão. A compactação veio da
   reorganização do conteúdo, e não de encolher a imagem para caber mais texto —
   que é o defeito que o §17 nomeia. */
.home-b { --card-h: 208px; }
@media (min-width: 560px) { .hb-card { width: 46vw; } }
@media (min-width: 720px) { .hb-card { width: 258px; } }
@media (min-width: 1040px) { .hb-card { width: 246px; } }

.hb-card.em-producao .hb-card-capa img { filter: saturate(.7); }
.hb-card-abre { appearance: none; border: 0; background: none; cursor: pointer;
                font: inherit; text-align: left; padding: 0; color: var(--tinta);
                display: flex; flex-direction: column; flex: 1 1 auto;
                min-height: 0; width: 100%; }
.hb-card-abre:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; }

/* METADE DO CARD, MEDIDA EM ALTURA — e não uma proporção que varia com a
   largura. `min-height: 0` porque, sem ele, o conteúdo do irmão impede o flex
   de encolher e a capa passa dos 50%. */
.hb-card-capa { position: relative; display: block; flex: 0 0 50%; min-height: 0;
                background: var(--linha); overflow: hidden; }
.hb-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-card-capa.sem-foto { display: grid; place-items: center; background: var(--capa);
                         color: rgba(255,255,255,.92); font-weight: 700;
                         font-size: 1.4rem; letter-spacing: .05em; }
/* O SELO VIVE SOBRE A CAPA: ele qualifica a imagem, e roubar uma linha de
   texto para ele encolheria o que importa. */
.hb-card-selo { position: absolute; top: 9px; right: 9px;
                background: rgba(20,14,32,.78); color: #fff;
                font-size: .62rem; font-weight: 700; letter-spacing: .04em;
                text-transform: uppercase; border-radius: 999px; padding: 4px 9px; }

/* A METADE DE BAIXO. Quatro linhas, e nenhuma delas cresce: o `gap` é pequeno
   de propósito — o que separa nome, país, fatos e nota é a tipografia, e não o
   espaço em branco. */
.hb-card-tx { display: flex; flex-direction: column; gap: 3px;
              padding: 12px 14px 13px; flex: 1 1 50%; min-height: 0;
              justify-content: flex-start; }

/* NOME E PREÇO NA MESMA LINHA, SEM PONTILHADO (§2).
   `align-items: baseline` alinha as duas tipografias pela base, que é o que faz
   a linha parecer uma linha e não duas caixas empilhadas de lado.
   O nome pode ter duas palavras longas («Roppongi / Azabudai»); ele encolhe
   com reticências, e o preço nunca cede espaço. */
.hb-card-linha { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hb-card-nome { flex: 1 1 auto; min-width: 0; font-size: 1.1rem; font-weight: 700;
                line-height: 1.15; letter-spacing: -.01em;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-card-linha .hb-preco { flex: 0 0 auto; font-size: .98rem; font-weight: 700;
                           color: var(--tinta); white-space: nowrap; }
.hb-card-linha .hb-preco-off { flex: 0 0 auto; font-size: .74rem; font-weight: 600;
                               color: var(--tinta-clara); white-space: nowrap; }

.hb-card-pais { font-size: .8rem; color: var(--tinta-fraca); }

/* ==================================================================
   A TERCEIRA LINHA — METADADOS À ESQUERDA, NOTA À DIREITA (§13, §14)
   ==================================================================

   NADA DE PONTILHADO, E NADA DE `justify-content: space-between` SOZINHO.
   O §13 pede alinhamento ESTRUTURAL: os fatos crescem e encolhem, a nota
   nunca cede espaço, e o que separa os dois é o espaço que sobra.

   A PRIORIDADE DO §14, EM CSS E NA ORDEM EM QUE ELA FOI ESCRITA:

     1. nada sobrepõe        — `min-width: 0` nos fatos, `flex: 0 0 auto` na
                               nota: quem encolhe é sempre o texto longo;
     2. o preço não quebra   — ele está na primeira linha, com `white-space:
                               nowrap`, e não divide espaço com esta;
     3. a nota fica legível  — ela nunca trunca, porque nunca encolhe;
     4. o card fica compacto — uma linha, e não duas.

   O FALLBACK ELEGANTE do §14 é a tipografia antes da estrutura: entre 0 e
   340px de largura de cartão os metadados cedem 0,04rem e a contagem de
   regiões some por elipse, ANTES de a linha quebrar. Abaixo disso — e só
   abaixo — a nota desce para a própria linha, que é melhor do que dois textos
   esmagados um contra o outro. */
.hb-card-meta { display: flex; align-items: baseline; gap: 8px;
                margin-top: 2px; min-width: 0; }
.hb-card-fatos { font-size: .78rem; color: var(--tinta-clara);
                 flex: 1 1 auto; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A NOTA DEIXOU DE SER EMPURRADA PARA O FUNDO (§2, §6).

   Era `margin-top: auto`. Num cartão de altura declarada, `auto` não é um
   espaçamento: é um ELÁSTICO que recebe toda a sobra da metade de baixo. As
   quatro linhas ocupavam 114px numa caixa de 148px, e os 34px restantes caíam
   inteiros num único vão — entre «91 atividades · 12 regiões» e «★ 4,8 (126)».

   Medido: 36px de vão ali, contra 5px entre as outras linhas. Era isso que
   fazia a nota parecer solta e o cartão parecer esticado.

   Com `margin-top: 3px` as quatro linhas voltam a ser quatro linhas, separadas
   pela tipografia e não pelo espaço em branco — que é o que o comentário
   acima desta seção já dizia, e que o `auto` desmentia. */
.hb-card-av { font-size: .8rem; color: var(--tinta-fraca);
              flex: 0 0 auto; white-space: nowrap;
              display: flex; align-items: baseline; gap: 4px; }
/* A ESTRELA É A ÚNICA COR DA METADE DE BAIXO, e é o que faz a nota ser lida
   como nota antes de ser lida como número. */
.hb-av-est { color: #e0a32b; font-size: .92rem; line-height: 1; }
.hb-card-av small { color: var(--tinta-clara); font-weight: 500; }

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

/* ==================================================================
   BENEFÍCIOS — ícone, título e uma frase. Nenhuma fotografia (§32).
   ==================================================================
   A versão anterior punha miniaturas dentro dos três cards. Numa tela cujo
   trabalho é vender Guides, imagem em bloco institucional compete com a imagem
   que importa — a capa. Sem foto, o bloco explica e sai da frente. */
.hb-beneficios { max-width: var(--lim); margin: 26px auto 0; padding: 0 16px; }
.hb-beneficios h2 { margin: 0 0 12px; font-size: 1.12rem; letter-spacing: -.01em; }
.hb-ben-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .hb-ben-lista { grid-template-columns: repeat(3, 1fr); } }
.hb-ben-lista li { background: var(--papel-2); border: 1px solid var(--linha);
                   border-radius: var(--raio); padding: 14px;
                   display: flex; flex-direction: column; gap: 4px; }
.hb-ben-ic { width: 34px; height: 34px; border-radius: 50%; display: grid;
             place-items: center; background: rgba(123,79,176,.1);
             color: var(--acento); font-size: 1.05rem; margin-bottom: 2px; }
.hb-ben-lista strong { font-size: .95rem; line-height: 1.25; }
.hb-ben-lista span:last-child { font-size: .84rem; color: var(--tinta-fraca);
                                line-height: 1.45; }

.hb-cta { max-width: var(--lim); margin: 0 auto; padding: 24px 16px 28px;
          text-align: center; }
.hb-cta h2 { margin: 0 0 6px; font-size: 1.2rem; }
.hb-cta p { margin: 0 0 14px; font-size: .88rem; color: var(--tinta-fraca);
            line-height: 1.45; }
.hb-cta-bt { appearance: none; cursor: pointer; font: inherit; font-weight: 700;
             background: var(--acento); color: #fff; border: 0;
             border-radius: 999px; padding: 14px 26px; }

/* ==================================================================
   TELA COMERCIAL DO GUIDE
   ================================================================== */
.guide-produto { padding-bottom: 96px; }
.gp-hero { margin: 0; position: relative; aspect-ratio: 16/10; overflow: hidden;
           background: var(--linha); }
.gp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* `.gp-hero-cred` SAIU — §19, §20 do refinamento pós-Gate.

   Era a legenda sobreposta ao canto inferior do hero comercial, com o seu
   próprio degradê escuro por cima da fotografia. A atribuição continua
   obrigatória e continua inteira — em `.gp-creditos`, no fim da página, com
   autor, licença e link para a fonte.

   A regra sai junto com o HTML pela razão de sempre: estilo vivo para um
   componente removido é o convite mais barato para ele voltar. */
.gp-hero-cor { display: grid; place-items: center; background: var(--capa); }
.gp-hero-falta { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
                 color: rgba(255,255,255,.92); font-weight: 600; }

.gp-corpo { max-width: var(--lim); margin: 0 auto; padding: 18px 16px 0; }
.gp-titulo { margin: 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.gp-onde { margin: 4px 0 0; font-size: .9rem; color: var(--tinta-fraca); }

/* ==================================================================
   BLOCO 1 — A PÁGINA COMERCIAL, NA ORDEM DO §19
   ==================================================================
   HERO → IDENTIDADE/PREÇO/CTA → RESUMO → EDITORIAL → CARROSSEL →
   REGIÕES → RECURSOS → CTA FINAL.  Sem mapa (§38), sem pílula (§28),
   sem explicação de recurso (§35). */

/* -------- identidade, preço e as duas ações (§20) -------- */
.gp-id { margin: 0; }
.gp-metricas { display: flex; align-items: baseline; gap: 10px;
               margin: 10px 0 0; min-width: 0; }
.gp-tamanho { flex: 1 1 auto; min-width: 0; font-size: .86rem;
              color: var(--tinta-fraca);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A NOTA É A MESMA COMPOSIÇÃO DO CARD DA HOME B (§13): à direita dos
   metadados, sem pontilhado, e sem ceder espaço quando a linha aperta. */
.gp-av { flex: 0 0 auto; white-space: nowrap; font-size: .86rem;
         color: var(--tinta-fraca); display: flex; align-items: baseline; gap: 4px; }
.gp-av-est { color: #e0a32b; font-size: .95rem; line-height: 1; }
.gp-av small { color: var(--tinta-clara); font-weight: 500; }

.gp-compra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
             margin: 16px 0 0; }
.gp-preco { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
            line-height: 1; white-space: nowrap; }
.gp-acoes { display: flex; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
.gp-acoes .gp-bt { margin-left: 0; }
/* NO TELEFONE ESTREITO AS DUAS AÇÕES EMPILHAM (§50: nada pode vazar).

   Lado a lado, «▶ Experimentar» e «Comprar Guide» pedem 297px de texto e
   padding numa faixa de 288 — medido em 320px. Espremê-los exigiria `min-width:
   0` mais reticências num BOTÃO DE COMPRA, que é o pior lugar do produto para
   truncar palavra. Empilhados, cada um fica com a linha inteira, o rótulo fica
   legível e a hierarquia continua certa: experimentar em cima, comprar embaixo,
   e a barra fixa — que cabe, porque tem menos padding em volta — continua
   oferecendo os dois lado a lado ao alcance do polegar. */
@media (max-width: 420px) {
  .gp-acoes { width: 100%; }
  .gp-acoes .gp-bt { flex: 1 1 0; min-width: 0; text-align: center; }
}
/* E SÓ ABAIXO DE 360px ELAS EMPILHAM DE FATO.

   O empilhamento existe porque em 320px os dois rótulos não cabem lado a lado
   — e não porque ele seja melhor. Ele é mais alto, e mais alto logo abaixo do
   Hero é pior: o §42 pede que o CTA final COMPLEMENTE a barra fixa, e duas
   faixas de botão empilhadas no topo, com a barra fixa repetindo as mesmas
   duas ações logo abaixo, é exatamente a duplicação visual que ele evita.

   Em 360px a linha cabe com 160px por botão contra os ~140px que os rótulos
   pedem. Então o empilhamento fica onde ele é necessário, e não um pixel
   acima. */
@media (max-width: 359px) {
  .gp-acoes { flex-direction: column; align-items: stretch; }
  .gp-acoes .gp-bt { flex: 0 0 auto; width: 100%; }
}

/* -------- resumo curto (§21) e apresentação editorial (§22) -------- */
.gp-resumo { margin: 18px 0 0; font-size: 1rem; line-height: 1.5;
             color: var(--tinta); }
/* A APRESENTAÇÃO É TEXTO DE LEITURA, e por isso ela tem largura de leitura e
   entrelinha de leitura — não é legenda, não é nota e não é ficha técnica. */
.gp-editorial { margin-top: 18px; }
.gp-editorial p { margin: 0 0 12px; font-size: .95rem; line-height: 1.62;
                  color: var(--tinta-fraca); max-width: 68ch; }
.gp-editorial p:last-child { margin-bottom: 0; }

/* -------- carrossel de atividades (§24, §25) -------- */
.gp-carrossel {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* SANGRA ATÉ A BORDA DA TELA. Um carrossel que para no padding do corpo
     parece uma lista cortada; sangrando, o item seguinte aparece pela metade e
     diz, sem escrever, que há mais ao lado. */
  margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: thin;
}
.gp-carrossel::-webkit-scrollbar { height: 0; }
@media (hover: hover) and (pointer: fine) {
  .gp-carrossel::-webkit-scrollbar { height: 8px; }
  .gp-carrossel::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 99px; }
  .gp-carrossel:hover::-webkit-scrollbar-thumb { background: var(--tinta-clara); }
}
.gp-ativ-card { flex: 0 0 auto; width: 158px; scroll-snap-align: start;
                display: flex; flex-direction: column; gap: 2px; }
.gp-ativ-foto { display: block; width: 100%; aspect-ratio: 4 / 3;
                border-radius: 14px; overflow: hidden; background: var(--linha);
                position: relative; }
.gp-ativ-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-ativ-foto.sem-foto { background: var(--cor); }
/* O REGISTRO VISUAL DO §27: qual imagem ainda não é fotografia da atividade.
   Ele diz o que a imagem É — «ilustração» —, e não em que estado de produção
   ela está, que é o que o §43 proíbe na interface. */
.gp-ativ-selo { position: absolute; left: 7px; bottom: 7px;
                background: rgba(20,14,32,.7); color: #fff;
                font-size: .6rem; font-weight: 700; letter-spacing: .05em;
                text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
.gp-ativ-nome { margin-top: 7px; font-size: .88rem; font-weight: 650;
                line-height: 1.25; }
.gp-ativ-onde { font-size: .76rem; color: var(--tinta-clara); line-height: 1.3; }

/* -------- regiões: conteúdo editorial, não filtro (§29, §30, §32) -------- */
.gp-regioes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* SEM PÍLULA, SEM CONTORNO, SEM FUNDO DE BOTÃO. O que separa uma região da
   seguinte é uma linha fina — a mesma gramática de um índice editorial. */
.gp-regiao { display: block; padding: 11px 0; border-top: 1px solid var(--linha); }
.gp-regiao:first-child { border-top: 0; padding-top: 2px; }
.gp-reg-nome { display: block; font-size: .98rem; font-weight: 650;
               line-height: 1.25; letter-spacing: -.01em; }
.gp-reg-desc { display: block; margin-top: 2px; font-size: .84rem;
               line-height: 1.45; color: var(--tinta-fraca); }
/* A CONTAGEM É SECUNDÁRIA (§32): última, menor e cinza — e não um número
   dentro de um círculo na frente do nome. */
.gp-reg-qtd { display: block; margin-top: 3px; font-size: .76rem;
              color: var(--tinta-clara); }
@media (min-width: 720px) {
  .gp-regioes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  /* Numa grade de duas colunas o «primeiro filho» não é o primeiro de cada
     coluna: a regra de cima some, e quem separa é a linha de todos. */
  .gp-regiao:first-child { border-top: 1px solid var(--linha); padding-top: 11px; }
  .gp-regiao:nth-child(1), .gp-regiao:nth-child(2) { border-top: 0; padding-top: 2px; }
}

/* -------- o que vem com este Guide: tópicos e só (§34, §35) -------- */
.gp-recursos { list-style: none; margin: 0; padding: 0;
               display: grid; gap: 9px; }
.gp-recursos li { display: flex; align-items: center; gap: 9px; }
.gp-rec-ic { flex: 0 0 auto; width: 18px; text-align: center;
             color: var(--acento); font-weight: 700; }
.gp-recursos li.falta .gp-rec-ic { color: var(--tinta-clara); }
.gp-rec-rot { font-size: .94rem; }
.gp-recursos li.falta .gp-rec-rot { color: var(--tinta-fraca); }
@media (min-width: 560px) {
  .gp-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------- CTA comercial final (§41, §42) -------- */
.gp-cta-final { margin: 30px 0 0; padding: 22px 18px;
                background: var(--papel-2); border: 1px solid var(--linha);
                border-radius: 20px; text-align: center; }
.gp-cta-final h3 { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.3;
                   letter-spacing: -.015em; }
.gp-cta-preco { display: block; margin: 0 0 14px; font-size: 1.6rem;
                font-weight: 700; letter-spacing: -.02em; }
.gp-acoes-final { justify-content: center; }
/* NO TELEFONE, O CTA FINAL EMPILHA — E O DO TOPO NÃO.

   Os dois grupos mostram os mesmos dois botões, e mesmo assim a resposta certa
   é diferente em cada um, porque a caixa é diferente:

     · no topo, o grupo tem a largura do corpo (328px em 360) e os dois rótulos
       cabem lado a lado com folga. Empilhar ali criaria duas faixas de botão
       logo acima da barra fixa, que repete as mesmas duas ações — a duplicação
       visual que o §42 manda evitar;

     · no CTA final, a caixa tem 18px de padding de cada lado e o grupo cai para
       258px. Lado a lado, «▶ Experimentar» ficava 9px cortado, e «Comprar
       Guide», 7px. Medido em 360×852.

   Cortar palavra num botão de compra é o pior lugar do produto para economizar
   pixel. E empilhado é o que um CTA final deve parecer de qualquer forma: ele é
   a decisão, e não um controle de barra. */
@media (max-width: 480px) {
  .gp-acoes-final { width: 100%; flex-direction: column; align-items: stretch; }
  .gp-acoes-final .gp-bt { flex: 0 0 auto; width: 100%; }
}

.gp-ingressos p, .gp-assimetria p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5;
                                    color: var(--tinta-fraca); }
.gp-ingressos strong, .gp-assimetria strong { color: var(--tinta); }
.gp-ingressos, .gp-assimetria { background: var(--papel-2); border: 1px solid var(--linha);
                                border-radius: var(--raio); padding: 14px; }
.gp-rodape-legal { margin: 22px 0 0; font-size: .74rem; line-height: 1.5;
                   color: var(--tinta-clara); }

/* A BARRA FIXA — `IMG_4834`, `IMG_4848`. A decisão fica sempre ao alcance do
   polegar, e o preço nunca aparece sem dizer o que compra. */
.gp-barra { position: fixed; left: 0; right: 0;
            bottom: var(--nav-real, calc(58px + var(--seguro-b))); z-index: 35;
            display: flex; align-items: center; gap: 12px;
            padding: 10px 16px calc(10px); background: var(--papel-2);
            border-top: 1px solid var(--linha);
            box-shadow: 0 -6px 20px rgba(30,25,45,.09); }
body.com-lab .gp-barra { bottom: calc(var(--nav-real, calc(58px + var(--seguro-b))) + var(--lab-h)); }
.gp-barra-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gp-barra-tx strong { font-size: 1.02rem; }
.gp-barra-tx small { font-size: .7rem; color: var(--tinta-clara); }
.gp-bt { margin-left: auto; appearance: none; cursor: pointer; font: inherit;
         font-weight: 700; background: var(--acento); color: #fff; border: 0;
         border-radius: 999px; padding: 13px 22px; white-space: nowrap; }
.gp-bt[disabled] { background: var(--linha); color: var(--tinta-clara); cursor: not-allowed; }
.gp-bt-abrir { background: var(--tinta); }

/* ==================================================================
   PRÉVIA DA ATIVIDADE (no drawer)
   ================================================================== */
.previa-ativ { padding-bottom: 4px; }
.pv-topo { display: flex; gap: 12px; align-items: center; margin: 6px 0 0; }
.pv-capa { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 14px;
           overflow: hidden; background: var(--linha); }
.pv-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-capa-cor { background: var(--cor); }
.pv-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-nome { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.pv-onde { font-size: .82rem; color: var(--tinta-fraca); }
.pv-rota { margin: 12px 0 0; font-size: .82rem; color: var(--tinta-fraca);
           line-height: 1.5; }
.pv-rota .rota-n { display: inline-grid; vertical-align: -5px; margin-right: 6px; }
.pv-resumo { margin: 10px 0 0; font-size: .92rem; line-height: 1.5; }
.pv-estado { margin: 12px 0 0; font-size: .82rem; color: var(--tinta-fraca); }
.pv-selo { display: inline-block; font-size: .68rem; font-weight: 700;
           letter-spacing: .05em; text-transform: uppercase;
           border-radius: 999px; padding: 4px 10px;
           background: var(--papel); color: var(--tinta-clara); }
.pv-selo.on { background: rgba(123,79,176,.12); color: var(--acento); }
.pv-audio { margin: 8px 0 0; font-size: .82rem; color: var(--acento); }
.pv-ver { appearance: none; cursor: pointer; font: inherit; font-weight: 700;
          width: 100%; margin: 16px 0 4px; padding: 14px 18px; border: 0;
          border-radius: 14px; background: var(--acento); color: #fff; }
.pv-ver:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ==================================================================
   ACTIVITY DETAIL EM TELA CHEIA
   ================================================================== */
.ativ-cheia { max-width: var(--lim, 560px); margin: 0 auto; padding: 4px 16px 28px; }
.ativ-cheia .voltar { display: none; }   /* o voltar do shell já está no topo */
@media (min-width: 720px) { .ativ-cheia { --lim: 680px; } }

.previa-faixa { background: rgba(123,79,176,.09);
                border-bottom: 1px solid rgba(123,79,176,.25);
                padding: 12px 16px; }
.previa-faixa p { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--tinta-fraca);
                  max-width: var(--lim, 560px); margin-inline: auto; }
.previa-faixa strong { color: var(--tinta); }
.previa-faixa-acoes { max-width: var(--lim, 560px); margin: 8px auto 0; }
.previa-faixa-acoes button { appearance: none; cursor: pointer; font: inherit;
                             font-weight: 700; font-size: .82rem;
                             background: var(--acento); color: #fff; border: 0;
                             border-radius: 999px; padding: 8px 16px; }

/* ==================================================================
   ABERTURA V2 — a foto manda, e o idioma é uma linha
   ==================================================================
   A V1 tinha uma folha branca de idioma ocupando o terço inferior. Aqui o
   texto vive SOBRE a fotografia, e o idioma desce para uma linha de rodapé:
   some a decisão, não a informação (§0.4, §6). */
/* A ALTURA DESCONTA O CHROME QUE JÁ ESTÁ NA TELA.
   `100dvh` cheio empurrava o CTA para trás da barra global — e, com o
   laboratório ligado, para trás dele também. A abertura ocupa o que sobra. */
/* GUI-TKY-UX-CART-01 (HOME-01..07): A CAPA VAI ATÉ O FIM DA TELA, E O MENU A COBRE.
   A regra anterior descontava da viewport alturas NOMINAIS — `--shell-h` (64px) e
   44px do laboratório. Medido em 393×852: o menu real tem 62px e a barra LAB ~40px,
   presa a 58px do rodapé; sobravam 2px de faixa clara sem LAB e ~10px com LAB, em
   qualquer altura de tela. Nenhum número acerta a altura real do chrome, então a
   capa não desconta nada: ocupa a viewport (menos o safe-area de cima) e o menu,
   opaco e fixo, fica POR CIMA do rodapé da foto. Quem reserva o espaço do menu é o
   conteúdo (`.ab-corpo`), não a moldura — por isso o laboratório não muda a
   geometria da capa, só empurra o texto para não ficar atrás da barra dele. */
.abertura { position: relative; display: flex; overflow: hidden;
            flex-direction: column; justify-content: flex-end;
            min-height: calc(100dvh - var(--seguro-t)); }
/* SEM MARGEM NEGATIVA. `.shell-corpo.corpo-home` já zera o padding — descontar
   16px de novo dava 425px de largura numa tela de 393 e punha a página inteira
   em rolagem horizontal, que é justamente o que o §55 proíbe.
   A reserva de 44px do LAB (`body.com-lab .shell-corpo`) é para telas que rolam;
   na capa ela só criava rolagem artificial (886px numa tela de 852). */
/* (a regra geral `body.com-lab .shell-corpo.corpo-home`, abaixo, já zera a reserva do corpo na capa) */
.ab-foto { position: absolute; inset: 0; width: 100%; height: 100%;
           object-fit: cover; object-position: 0% 30%; }
.ab-veu { position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(20,14,32,.52) 0%,
                      rgba(20,14,32,.06) 32%, rgba(20,14,32,.82) 74%,
                      rgba(20,14,32,.93) 100%); }
.ab-topo { position: absolute; top: calc(14px + var(--seguro-t)); left: 16px; right: 16px;
           display: flex; align-items: center; gap: 10px; z-index: 2; }
.ab-corpo { position: relative; z-index: 2; color: #fff;
            padding: 0 22px calc(var(--shell-h, 64px) + var(--seguro-b) + 34px);
            max-width: var(--lim); margin: 0 auto; width: 100%; }
body.com-lab .ab-corpo { padding-bottom: calc(var(--shell-h, 64px) + var(--seguro-b) + 34px + var(--lab-h)); }
.ab-titulo { margin: 0 0 8px; font-size: 2.2rem; line-height: 1.08;
             letter-spacing: -.025em; }
.ab-frase { margin: 0 0 22px; font-size: 1.05rem; line-height: 1.4;
            color: rgba(255,255,255,.94); max-width: 24ch; }
.ab-bt { appearance: none; cursor: pointer; font: inherit; font-weight: 700;
         width: 100%; padding: 16px 20px; border: 0; border-radius: 14px;
         background: var(--acento); color: #fff; font-size: 1.02rem; }
.ab-bt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* A LINHA DO IDIOMA. Discreta de propósito: ela informa, e não pergunta. */
.ab-idioma-linha { margin: 14px 0 0; text-align: center;
                   font-size: .78rem; color: rgba(255,255,255,.72); }
@media (min-width: 720px) {
  .ab-corpo { padding-bottom: calc(var(--shell-h, 64px) + var(--seguro-b) + 48px); }
  body.com-lab .ab-corpo { padding-bottom: calc(var(--shell-h, 64px) + var(--seguro-b) + 48px + var(--lab-h)); }
  .ab-titulo { font-size: 2.8rem; }
  .ab-bt { width: auto; min-width: 280px; padding: 16px 40px; }
  .ab-idioma-linha { text-align: left; }
}

/* ==================================================================
   O LABORATÓRIO — fora do aplicativo, e parecendo fora
   ==================================================================
   Tracejado, monoespaçado e cinza de propósito: quem olhar uma captura de tela
   tem de saber, sem legenda, que aquela barra não é o produto. */
/* GUI-TKY-UX-CART-02: a ALTURA da barra é declarada (e não resultado da fonte), para que a
   reserva de conteúdo que ela exige seja exatamente a altura dela — uma variável, um lugar. */
:root { --lab-h: 44px; }
.lab-barra { position: fixed; left: 0; right: 0; z-index: 45; box-sizing: border-box; height: var(--lab-h);
             /* encosta no topo REAL do menu: `--nav-real` é a altura medida do .shell-nav (app-mapas.js,
                ResizeObserver) — o menu tem altura de conteúdo, não um token; 58px é só o fallback sem JS */
             bottom: var(--nav-real, calc(58px + var(--seguro-b)));
             display: flex; align-items: center; gap: 6px;
             padding: 6px 10px; background: #2b2733; color: #cfc7dd;
             font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
             border-top: 2px dashed #6b6180; }
.lab-barra[hidden] { display: none; }
.lab-rot { letter-spacing: .08em; text-transform: uppercase; opacity: .6;
           margin-right: 4px; }
.lab-barra button { appearance: none; cursor: pointer; font: inherit;
                    background: transparent; color: #cfc7dd;
                    border: 1px solid #564d6b; border-radius: 6px; padding: 6px 10px; }
.lab-barra button.ativo { background: #cfc7dd; color: #2b2733; border-color: #cfc7dd; }
/* A BARRA DE LABORATÓRIO COME 44px ACIMA DA NAV, e o conteúdo tem de ceder —
   senão o último controle de cada tela fica atrás dela. `.shell-corpo` já
   reserva espaço para a nav; aqui a reserva cresce, e não é substituída. */
body.com-lab .shell-corpo { padding-bottom: calc(var(--shell-h) + var(--seguro-b) + 34px + var(--lab-h)); }
body.com-lab.no-guia .app { padding-bottom: calc(var(--nav-real, calc(58px + var(--seguro-b))) + var(--lab-h)); }
/* GUI-TKY-UX-CART-02 (HOME-01, evidência humana): NAS HOMES a regra acima somava 142px de padding ao
   corpo — por cima da reserva que a própria home já faz para o menu (painel da Home A, raiz da Home B,
   texto da Abertura). Ao rolar até o fim sobrava uma FAIXA VAZIA de 134px (Home A) e 72px (Home B)
   entre o fim da home e a barra LAB, com o fundo do corpo à mostra. A barra LAB não pode mudar a
   geometria do produto: nas homes o corpo não reserva nada; quem cede a altura da barra é o
   CONTEÚDO, por dentro do fundo contínuo da home. */
body.com-lab .shell-corpo.corpo-home { padding-bottom: 0; }
body.com-lab .h-painel { padding-bottom: calc(var(--shell-h) + var(--seguro-b) + 26px + var(--lab-h)); }
body.com-lab .home-b { padding-bottom: var(--lab-h); }

/* As duas ações da barra comercial (§38). No telefone elas dividem a linha;
   a partir de 480px a de compra ganha o peso que ela deve ter. */
/* `margin-left: auto` PERTENCE AO GRUPO, E NÃO A CADA BOTÃO.

   `.gp-bt` nasceu com `margin-left: auto` porque era filho direto da barra e
   precisava ir para a direita sozinho. Desde que as duas ações passaram a
   morar num grupo, essa margem ficou em CADA botão — e uma margem automática
   num item de flex ABSORVE o espaço livre antes de a repartição acontecer: o
   primeiro botão empurrava o segundo para fora da tela. Medido em 320px: 11,4px
   de vazamento pela direita. Quem empurra é o grupo; os botões dividem. */
.gp-barra-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.gp-barra-acoes .gp-bt, .gp-acoes .gp-bt { margin-left: 0; }
.gp-bt-previa { background: transparent; border: 1px solid var(--acento);
                color: var(--acento); padding: 12px 16px; }
/* A BARRA FIXA EM 320px (§50: nada pode vazar).

   `flex: 1 1 auto` mede a base pelo CONTEÚDO: «▶ Experimentar» e «Comprar
   Guide», com `white-space: nowrap` e 22px de padding de cada lado, pedem
   juntos 291px numa faixa de 288 — e vazavam 3,4px pela direita. Medido em
   320×568.

   `flex: 1 1 0` mede a base em zero e reparte o espaço que existe; `min-width:
   0` autoriza o item a ficar menor do que o texto pede. O que cede é o padding
   lateral do botão, e não a borda da tela. */
@media (max-width: 400px) {
  .gp-barra { flex-wrap: wrap; }
  .gp-barra-acoes { width: 100%; margin-left: 0; }
  .gp-barra-acoes .gp-bt { flex: 1 1 0; min-width: 0; text-align: center;
                           padding-left: 12px; padding-right: 12px; }
  .gp-acoes .gp-bt { padding-left: 12px; padding-right: 12px; }
}


/* O FALLBACK DO §14, e o limite em que ele entra.

   A largura do cartão é `76vw` até 560px; em 320px de viewport isso dá 243px
   de cartão, 215px úteis depois do padding. «91 atividades · 12 regiões» mais
   «★ 4,8 (126)» pedem mais do que isso com a tipografia cheia — então a
   tipografia cede primeiro (a prioridade 4 do §14: reduzir levemente a fonte
   dos metadados antes de quebrar a estrutura).

   Só quando nem isso basta a linha vira duas. É o último recurso, e ele existe
   para que a prioridade 1 — «conteúdo não pode sobrepor» — nunca perca para a
   prioridade 4. */
@media (max-width: 359px) {
  .hb-card-fatos { font-size: .74rem; }
  .hb-card-av { font-size: .76rem; }
}