/* 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);
}
.materiais__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.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. */
.kits__bandeja {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 481px) {
  .kits__bandeja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .kits__bandeja {
    grid-template-columns: .8fr .95fr 1.5fr .95fr;
    align-items: end;
  }
  .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; }

.faq__lista {
  max-width: 720px;
  display: flex;
  flex-direction: column;
}
.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; }
}