/* secoes.css — estilo de cada seção da página.
   Nesta tarefa: só cabeçalho e hero. As demais seções (dor, como-funciona,
   materiais, demos, kits, atacado, faq) chegam vazias e ganham estilo nas
   Tasks 5 e 7. */

/* ── Cabeçalho ────────────────────────────────────────────────────────── */

.cabecalho__conteudo {
  padding-block: var(--esp-3);
}
.cabecalho__marca {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.35rem;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

/* ── Hero ─────────────────────────────────────────────────────────────
   Duas colunas assimétricas acima de 900px (texto à esquerda, vídeo à
   direita); empilhado abaixo disso, com o vídeo primeiro — nunca texto
   centralizado sobre o vídeo. Por isso o <h1> nunca fica sobre pixels de
   vídeo em largura nenhuma, e não precisa de camada de contraste. */

.hero__grade {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
  grid-template-areas: "video" "texto";
  padding-block-start: var(--esp-5);
}
.hero__texto { grid-area: texto; }
.hero__video { grid-area: video; }

.hero__texto p {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-bottom: var(--esp-3);
}
.hero__texto .botao { margin-bottom: var(--esp-3); }

.hero__video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-media);
}

@media (min-width: 901px) {
  .hero__grade {
    grid-template-areas: "texto video";
    grid-template-columns: 1.15fr 1fr;
    gap: var(--esp-6);
  }
}

/* ── Linha-fio ────────────────────────────────────────────────────────
   A ideia central da direção visual (docs/superpowers/specs/2026-09-22-
   direcao-visual.md): um traço fino em SVG que atravessa a página inteira,
   seção a seção — o fio do produto, virando estrutura.

   Contrato de continuidade: cada seção que carrega o traço desenha o seu
   próprio <svg class="..."> com viewBox="0 0 1140 200" (1140 = --largura-max)
   e preserveAspectRatio="none", ocupando a largura do .container. O traço
   entra pelo topo (y=0) e sai pela base (y=200) sempre na mesma coordenada
   x=342 (30% de 1140) — para que o olho leia como um traço contínuo ao
   descer para a próxima seção. Aqui na Task 4 o traço nasce no hero (perto
   da coluna do vídeo, x=820) e já sai no x=342 combinado, pronto para a
   Task 5 recomeçar em x=342, y=0 no topo da seção "dor". */

.hero__fio {
  height: 6rem;
}
.hero__fio svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__fio path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hero__fio circle {
  fill: var(--coral);
}

/* ══════════════════════════════════════════════════════════════════════
   TASK 5 — dor, como-funciona, materiais, demos
   ══════════════════════════════════════════════════════════════════════ */

/* ── Linha-fio: segmentos reutilizáveis ───────────────────────────────
   Continuação do contrato escrito acima (Task 4). Cada segmento é um
   <div class="fio"> dentro de um .container, com
   viewBox="0 0 1140 200" preserveAspectRatio="none". A altura real vem da
   classe modificadora; o traço fica com 2px em qualquer largura graças a
   vector-effect: non-scaling-stroke.

   COR: --coral, em toda a página. A Task 4 tinha deixado o trecho do hero
   em --tinta-suave a 50%; aqui ele passou a coral também, porque o mesmo
   traço é o fio que atravessa a conta no diagrama dos quatro passos — meia
   página cinza e meia coral lia como duas linhas diferentes, não como uma
   ideia só. O círculo coral em (342,198) virou o nó do fio.

   Coordenada de entrega para a Task 6: x=342 (30% de 1140), y=0, no topo
   da seção #kits. O último .fio da página entrega exatamente aí.

   A linha passa POR TRÁS dos blocos cheios (dor, materiais) e RENTE à
   coluna do "como funciona" — nunca por dentro dos quadros do diagrama,
   onde coral já quer dizer outra coisa (o fio na conta).
   ─────────────────────────────────────────────────────────────────────── */

.fio svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.fio path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fio--curto   { height: 3rem; }

/* ── Seção: a cena que você conhece ───────────────────────────────────
   Compartimento estreito, deslocado à esquerda, preenchido em
   --papel-fundo e sem borda. O fio entra pelo topo do bloco e sai pela
   base: dentro do bloco ele passa por trás. */

.dor { padding-block-end: var(--esp-2); }

.dor__bloco {
  max-width: 640px;
  background: var(--papel-fundo);
  border-radius: var(--raio-g);
  padding: var(--esp-4) var(--esp-5);
}
.dor__titulo { margin-bottom: var(--esp-2); }
.dor__texto {
  font-size: clamp(1.2rem, 1.02rem + .7vw, 1.6rem);
  line-height: 1.45;
  max-width: 34ch;
  margin: 0;
}

/* ── Seção: como funciona ─────────────────────────────────────────────
   Grade 2x2 acima de 1000px, recuada 34% à direita. Quatro colunas dariam
   quadros de 285px e nessa largura o desenho perde a ação; 2x2 dá 360px.
   O recuo abre a calha onde a linha-fio da página desce reta em x=342, ao
   lado do bloco — ela não atravessa mais os quadros, para não competir com
   o fio coral do desenho. */

.como { padding-block-end: var(--esp-2); }

.como__corpo { display: grid; grid-template-areas: "a"; }
.como__corpo > * { grid-area: a; }
.como__fio { height: 100%; display: none; }
.como__coluna { min-width: 0; }
.como__titulo { max-width: 22ch; }

.como__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5) var(--esp-4);
}
@media (min-width: 601px) {
  .como__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1001px) {
  .como__coluna { margin-inline-start: 34%; }
  .como__fio { display: block; }
}

.como__passo { --atraso: calc(var(--i) * .42s); }

.como__n {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta-suave);
  margin: var(--esp-2) 0 .35rem;
}
.como__subtitulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 .45rem;
}
.como__corpo-texto,
.como__passo p:last-child {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 34ch;
}

/* ── O desenho: uma conta em corte, vista de lado ─────────────────────
   Geometria e estados em js/app.js (const QUADRO / ESTADOS). Aqui só cor e
   espessura. O arame é 3px e a conta 2px de propósito: o laço é o objeto
   que o produto É e precisa ser a coisa mais legível da tela. O fio é 2px
   coral, mais fino que o arame — arame duro, fio mole. */

.quadro {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

/* Espessuras em unidades do viewBox, não em pixels de tela. Nada de
   vector-effect: non-scaling-stroke aqui — com ele o navegador passa a
   medir stroke-dasharray em pixels de tela e ignora o pathLength="100",
   o que corta o traço do fio no meio do caminho (foi exatamente o que
   acontecia). Em unidades, a proporção entre conta, arame e fio fica igual
   em qualquer largura: a 360px o arame sai com ~3,4px, a conta com ~2,2px
   e o fio com ~2,1px. */
.quadro__corpo {
  fill: var(--conta);
  stroke: var(--tinta);
  stroke-width: 1.2;
}
.quadro__vao { fill: var(--papel); }
.quadro__parede {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.2;
}
.quadro__laco {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quadro__fio {
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;         /* estado final: desenhado */
}
.quadro__conta,
.quadro__arame {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Uma passagem só, disparada pelo IntersectionObserver. Sem a classe
   --anima os quatro quadros já estão no estado final — que é também o que
   acontece sob prefers-reduced-motion, porque o JS nem observa.
   O arame entra empurrado da esquerda nos quadros 1 e 2 e puxado de volta
   pela direita no 3: a animação repete o mesmo movimento que a sequência
   dos quatro quadros conta. */
.como__grade--anima .quadro__conta {
  animation: conta-entra .5s var(--atraso) both cubic-bezier(.2,.85,.3,1);
}
.como__grade--anima .quadro__arame {
  animation: arame-entra .6s calc(var(--atraso) + .1s) both cubic-bezier(.25,.9,.3,1);
}
.como__grade--anima .quadro--recua .quadro__arame {
  animation-name: arame-recua;
}
.como__grade--anima .quadro__fio {
  animation: fio-corre .8s calc(var(--atraso) + .3s) both linear;
}

@keyframes conta-entra { from { opacity: 0; transform: scale(.82); }        to { opacity: 1; transform: none; } }
@keyframes arame-entra { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes arame-recua { from { opacity: 0; transform: translateX(46px); }  to { opacity: 1; transform: none; } }
@keyframes fio-corre   { from { stroke-dashoffset: 100; }                   to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .como__grade--anima .quadro__conta,
  .como__grade--anima .quadro__arame,
  .como__grade--anima .quadro__fio { animation: none; }
}

/* ── A bandeja: dois compartimentos de tamanhos diferentes ────────────
   materiais à esquerda (estreito, preenchido) e demos à direita (largo,
   sem caixa). Alinhados pelo topo, não esticados: compartimentos de
   bandeja não têm a mesma altura. */

.bandeja {
  display: grid;
  gap: var(--esp-5);
  padding-block: 0 var(--esp-2);
}
@media (min-width: 901px) {
  .bandeja {
    grid-template-columns: .8fr 1.2fr;
    align-items: stretch;
    padding-inline-start: 5%;
  }
}

/* ── Seção: o que ele atravessa ───────────────────────────────────────
   Pastilhas arredondadas em turquesa, âmbar e roxo a 15%, ciclando pelo
   índice — a paleta de miçangas aparecendo sem virar bloco chapado. */

.materiais {
  background: var(--papel-fundo);
  border-radius: var(--raio-m);
  padding: var(--esp-5) var(--esp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.materiais__titulo {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
  margin-bottom: var(--esp-3);
}
/* min-height: mesma razão do .kits__bandeja acima — preenchido via JS
   (renderMateriais), nasce vazio, sem isso empurra o conteúdo abaixo na
   hora que o JS roda. Medido ao vivo: ~204px até 900px de largura (várias
   linhas por causa do flex-wrap), ~44px acima disso (cabe numa linha só). */
.materiais__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  min-height: 204px;
}
@media (min-width: 901px) {
  .materiais__lista { min-height: 44px; }
}
.materiais__pastilha {
  border-radius: 999px;
  padding: .65rem 1.3rem;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--tinta);
}
.materiais__pastilha[data-cor="0"] { background: color-mix(in srgb, var(--turquesa) 15%, transparent); }
.materiais__pastilha[data-cor="1"] { background: color-mix(in srgb, var(--ambar)    15%, transparent); }
.materiais__pastilha[data-cor="2"] { background: color-mix(in srgb, var(--roxo)     15%, transparent); }

/* ── Seção: veja funcionando ──────────────────────────────────────────
   Três vídeos completos, sem caixa em volta. preload="none" é obrigatório:
   somados dão 19 MB e estourariam o orçamento de 3 MB da primeira carga.
   Só o poster JPG viaja até alguém clicar em play. */

.demos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-3);
}
@media (min-width: 481px) {
  .demos { grid-template-columns: 1fr 1fr; }
  .demos__titulo,
  .demos__item--grande { grid-column: 1 / -1; }
}
.demos__titulo {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
  margin-bottom: 0;
}
.demos__item { margin: 0; }
.demos__item video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-s);
  background: var(--tinta);
}
.demos__item--grande video { border-radius: var(--raio-m); }

/* ══════════════════════════════════════════════════════════════════════
   TASK 6 — kits
   ══════════════════════════════════════════════════════════════════════ */

/* ── Linha-fio: handoff ───────────────────────────────────────────────
   A entrada (x=342, y=0 no topo de #kits) já foi entregue pelo último
   .fio--curto da Task 5, logo antes desta seção no HTML — por isso #kits
   não abre com outro traço colado nele (dois traços sem nenhum bloco entre
   os dois leriam como uma linha quebrada, não como uma linha contínua).
   O traço fica invisível atrás do título, dos cards e da linha de frete —
   mesma lógica de #dor e da bandeja materiais/demos, onde o fio passa por
   trás de blocos com fundo próprio — e reaparece no único .fio--curto desta
   seção, depois da linha de frete. Esse traço sai em x=342, y=200, pronto
   para a Task 7 recomeçar no topo de #atacado. */

.kits { padding-block: var(--esp-2) var(--esp-5); }

.kits__titulo { margin-bottom: .5rem; }
.kits__intro {
  color: var(--tinta-suave);
  max-width: 52ch;
  margin: 0 0 var(--esp-4);
}

/* A bandeja: quatro compartimentos de tamanhos diferentes. O kit de 10 —
   PRODUTO.kitPadrao, marcado destaque:true — é fisicamente maior que os
   outros três: mais padding, tipografia maior, borda própria. A hierarquia
   comercial (empurrar do kit de 5 para o de 10) vira hierarquia espacial,
   não só um selo. Empilha abaixo de 481px; duas colunas abaixo de 901px;
   quatro colunas de largura desigual acima disso, com o compartimento em
   destaque ocupando bem mais espaço que os vizinhos — nunca quatro caixas
   iguais lado a lado. */
/* min-height: os cards são desenhados via JS a partir de PRODUTO.kits
   (js/app.js → renderKits), então o elemento nasce vazio no HTML e só
   ganha altura depois que o JS roda — sem isso o navegador empurra todo
   o conteúdo abaixo pra baixo quando os cards aparecem, um Cumulative
   Layout Shift medido em 1,0 (a pior faixa) na página real. Os três
   valores abaixo foram medidos ao vivo em puxafio.com.br em cada
   breakpoint (empilhado, 2 colunas, 4 colunas), com uma margem pequena
   pra cima — se o conteúdo mudar de tamanho no futuro, reconferir. */
.kits__bandeja {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: 1fr;
  min-height: 335px;
}
@media (min-width: 481px) {
  .kits__bandeja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 310px;
  }
}
@media (min-width: 901px) {
  .kits__bandeja {
    grid-template-columns: .8fr .95fr 1.5fr .95fr;
    align-items: end;
    min-height: 195px;
  }
  .kits__card--destaque { align-self: stretch; }
}

.kits__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  width: 100%;
  text-align: left;
  background: var(--papel-fundo);
  border: 1px solid transparent;
  border-radius: var(--raio-s);
  padding: var(--esp-3);
  font-family: var(--fonte-corpo);
  cursor: pointer;
}
.kits__card[aria-pressed="true"] {
  background: var(--papel);
  border-color: var(--coral);
  box-shadow: var(--sombra-media);
}

.kits__card--destaque {
  background: var(--papel);
  border: 2px solid var(--coral);
  border-radius: var(--raio-m);
  padding: var(--esp-4);
}
.kits__card--destaque[aria-pressed="true"] { box-shadow: var(--sombra-coral); }
@media (min-width: 901px) {
  .kits__card--destaque { transform: scale(1.04); }
}

.kits__selo {
  position: absolute;
  top: -.65rem;
  left: var(--esp-3);
}
.kits__card--destaque .kits__selo { left: var(--esp-4); }

.kits__rotulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.2rem;
}
.kits__card--destaque .kits__rotulo { font-size: 1.5rem; }

.kits__preco {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.6rem;
  color: var(--tinta);
}
.kits__card--destaque .kits__preco { font-size: 2.1rem; }

.kits__unidade {
  font-size: .92rem;
  color: var(--tinta-suave);
}

/* Texto puro em --turquesa sobre --papel-fundo não passa AA (contraste
   ~2,3:1). Mesma receita da pastilha de materiais: fundo a 15% de opacidade,
   texto em --tinta — garante o contraste sem trocar a cor de identidade. */
.kits__frete-selo {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-weight: 700;
  font-size: .8rem;
  color: var(--tinta);
  background: color-mix(in srgb, var(--turquesa) 22%, transparent);
}

.kits__frete {
  margin: var(--esp-3) 0 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
}
.kits__frete::before {
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-inline-end: .5rem;
  border-radius: 999px;
  background: var(--coral);
}

.kits__cta {
  margin-top: var(--esp-4);
  width: 100%;
}
@media (min-width: 481px) {
  .kits__cta { width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   TASK 7 — atacado, faq, rodapé, cabeçalho como link, páginas de política
   ══════════════════════════════════════════════════════════════════════ */

/* Cabeçalho: a marca virou link em todas as sete páginas (Task 4 estilizou
   o <span>; aqui ele passou a <a> sem mudar a aparência). */
.cabecalho__marca {
  color: inherit;
  text-decoration: none;
}

/* ── Seção: atacado ────────────────────────────────────────────────────
   Compartimento único cheio de --turquesa a 10%, como pedido pelo brief.
   O fio da página chega até aqui pela última .fio--curto de #kits (que
   já entrega em x=342,y=0 do topo desta seção) e passa por trás do bloco,
   igual ao padrão de #dor: entra por cima, reaparece depois do bloco. */

.atacado { padding-block-end: var(--esp-2); }

.atacado__bloco {
  max-width: 680px;
  background: color-mix(in srgb, var(--turquesa) 10%, var(--papel));
  border-radius: var(--raio-g);
  padding: var(--esp-4) var(--esp-5);
}
.atacado__titulo { margin-bottom: var(--esp-2); max-width: 20ch; }
.atacado__texto {
  color: var(--tinta-suave);
  max-width: 58ch;
  margin: 0 0 var(--esp-3);
}
.atacado__cta {
  background: var(--turquesa);
  color: var(--papel);
}
.atacado__cta:hover { background: color-mix(in srgb, var(--turquesa) 82%, black); }

/* ── Seção: FAQ ────────────────────────────────────────────────────────
   Acordeão nativo <details>/<summary>. Marcador customizado — seta que
   gira 90° ao abrir — no lugar do triângulo padrão do navegador. Sem
   transição de hover por item (proibido pela direção visual); a única
   transição é a rotação do próprio marcador ao abrir/fechar, que é
   funcional, não decorativa. */

.faq { padding-block: var(--esp-2) var(--esp-6); }
.faq__titulo { max-width: 20ch; }

/* min-height: mesma razão do .kits__bandeja acima — preenchido via JS
   (renderFaq), nasce vazio. Medido ao vivo: ~578px até 900px, ~494px
   acima disso (perguntas quebram menos linha em telas largas). */
.faq__lista {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  min-height: 578px;
}
@media (min-width: 901px) {
  .faq__lista { min-height: 494px; }
}
.faq__item {
  border-bottom: 1px solid var(--borda);
  padding-block: var(--esp-3);
}
.faq__item:first-child { border-top: 1px solid var(--borda); }

.faq__pergunta {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.15rem;
  line-height: 1.3;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after {
  content: '';
  flex: none;
  width: .65rem;
  height: .65rem;
  border-inline-end: 2px solid var(--coral);
  border-block-end: 2px solid var(--coral);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.faq__item[open] .faq__pergunta::after { transform: rotate(-135deg); }

.faq__resposta {
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: var(--esp-2) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq__pergunta::after { transition: none; }
}

/* ── Rodapé ────────────────────────────────────────────────────────────
   Presente nas sete páginas. Fundo --tinta (a única banda escura da
   página inteira) para marcar visualmente que é uma zona diferente —
   chrome de conformidade, não mais uma vitrine de miçangas. */

.rodape {
  background: var(--tinta);
  color: var(--papel);
  margin-block-start: var(--esp-6);
}
.rodape__conteudo { padding-block: var(--esp-5); }

.rodape__aviso {
  background: var(--ambar);
  color: var(--tinta);
  font-weight: 700;
  border-radius: var(--raio-s);
  padding: var(--esp-2) var(--esp-3);
  margin: 0 0 var(--esp-4);
}

.rodape__grade {
  display: grid;
  gap: var(--esp-4);
}
@media (min-width: 601px) {
  .rodape__grade { grid-template-columns: 1.1fr .9fr; }
}

.rodape__dados p {
  margin: 0 0 .4rem;
  max-width: none;
  color: color-mix(in srgb, var(--papel) 85%, transparent);
  font-size: .95rem;
}
.rodape__marca {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.2rem;
  color: var(--papel) !important;
  margin-bottom: .6rem !important;
}
.rodape__dados a { color: inherit; }

.rodape__links {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .95rem;
}
.rodape__links a {
  color: var(--papel);
  text-decoration: none;
  width: fit-content;
}
.rodape__links a:hover { text-decoration: underline; }

.rodape__copyright {
  margin: var(--esp-4) 0 0;
  padding-block-start: var(--esp-3);
  border-block-start: 1px solid color-mix(in srgb, var(--papel) 20%, transparent);
  font-size: .82rem;
  color: color-mix(in srgb, var(--papel) 65%, transparent);
}

/* ── Páginas institucionais e de política ─────────────────────────────
   sobre.html, contato.html e politicas/*.html reusam esta única classe
   de artigo: coluna estreita, tipografia de leitura, sem grade — o
   oposto da bandeja assimétrica da home, porque aqui o trabalho é ser
   lido por inteiro, não escaneado em compartimentos. */

.pagina {
  padding-block: var(--esp-5) var(--esp-6);
}
.pagina__conteudo {
  max-width: 68ch;
}
.pagina__titulo { margin-bottom: var(--esp-2); }
.pagina__lead {
  color: var(--tinta-suave);
  font-size: 1.15rem;
  margin-bottom: var(--esp-4);
}
.pagina__conteudo h2 {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.4rem;
  margin: var(--esp-5) 0 var(--esp-2);
}
.pagina__conteudo h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.15rem;
  margin: var(--esp-4) 0 .5rem;
}
.pagina__conteudo p,
.pagina__conteudo li { color: var(--tinta-suave); }
.pagina__conteudo ul,
.pagina__conteudo ol { padding-inline-start: 1.3rem; }
.pagina__conteudo li { margin-bottom: .4rem; }
.pagina__conteudo strong { color: var(--tinta); }

.pagina__marcador {
  display: inline-block;
  background: color-mix(in srgb, var(--ambar) 22%, transparent);
  color: var(--tinta);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 .3rem;
}

/* Contato: dados visíveis como texto corrido, não só links — o revisor
   do Google procura o dado na própria página, não atrás de um clique. */
.contato__lista {
  list-style: none;
  margin: var(--esp-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.contato__lista dt {
  font-weight: 700;
  color: var(--tinta);
  font-size: .85rem;
  text-transform: none;
}
.contato__lista dd {
  margin: .15rem 0 0;
  font-size: 1.1rem;
}
.contato__lista a { color: var(--coral); }

/* ══════════════════════════════════════════════════════════════════════
   TASK 9 — passe mobile: a 375px a página batia 8,7 telas de rolagem, sem
   bug de layout (scrollWidth = viewport) — é proporção: tudo colapsou pra
   uma coluna mas manteve elementos em escala de desktop. Este bloco não
   redesenha nada acima dos pontos de corte abaixo: acrescenta regras por
   cima do que as Tasks 4–7 já escreveram, sempre dentro de media query, e
   nada aqui se aplica a 901px+ — o desktop lê as mesmas regras de antes.
   ══════════════════════════════════════════════════════════════════════ */

/* Ritmo vertical: --esp-5/6/7 foram calibrados pro desktop (48/72/112px) e
   infla o espaço ENTRE seções no celular sem ganhar leiturabilidade nenhuma.
   Troca aqui, só abaixo de 900px, sem tocar tokens.css — o desktop nem
   avalia esta media query, então não muda um pixel. */
@media (max-width: 900px) {
  :root {
    --esp-5: 2rem;
    --esp-6: 2.75rem;
    --esp-7: 4rem;
  }
}

/* Como funciona: era um quarto da página sozinho (1784px, 2,1 telas) — um
   quadro de 335x235 por linha, um por linha. Abaixo de 601px vira 2x2: o
   gap de --esp-4 entre colunas já entrega quadros de ~150-160px, a mesma
   ordem de largura das colunas mais estreitas da bandeja de kits no
   desktop (.8fr, ~150px) — o desenho já é legível nessa largura ali, não é
   território novo. Acima de 601px nada muda (a Task 5 já dava 2 colunas
   dos 601 aos 1000px, e o desktop começa em 1001px). */
@media (max-width: 600px) {
  .como__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .como__n { font-size: 1.05rem; margin: var(--esp-1) 0 .3rem; }
  .como__subtitulo { font-size: 1rem; line-height: 1.24; }
  .como__corpo-texto,
  .como__passo p:last-child { font-size: .85rem; line-height: 1.42; max-width: none; }
}

/* Kits: quatro cartões empilhados era uma tela inteira de rolagem pra
   quatro números. Abaixo de 901px vira 2x2 — a mesma largura de coluna que
   o desktop já usa (.8fr/.95fr), então o texto do cartão não entra em
   território novo. O kit de 10 — kitPadrao, pré-selecionado ao carregar —
   continua com borda própria, selo "mais vendido" e tipografia maior que
   os vizinhos dentro da própria célula: dominância por peso visual, não
   por ocupar duas colunas (evita reordenar os cartões e descolar a ordem
   de tabulação da ordem visual). */
@media (max-width: 900px) {
  .kits__bandeja { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Coluna de ~155px a 375px: o preço em Fraunces 1.6rem não cabe ao lado
     do "R$" sem o minmax(0,1fr) acima forçar a grade pra fora da tela —
     resolvido, mas o número ainda fica apertado. Reduz nos três cartões
     comuns; o card em destaque já tinha sua própria redução abaixo. */
  .kits__rotulo { font-size: 1.05rem; }
  .kits__preco { font-size: 1.35rem; }
  .kits__unidade { font-size: .8rem; }

  .kits__card--destaque { padding: var(--esp-3); }
  .kits__card--destaque .kits__selo { left: var(--esp-3); }
  .kits__card--destaque .kits__rotulo { font-size: 1.3rem; }
  .kits__card--destaque .kits__preco { font-size: 1.75rem; }
}