@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/courier-prime-regular.woff2') format('woff2');}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/cormorant-light.woff2') format('woff2');}
:root{
  --papel:#F2EFE9;
  --tinta:#1A1815;
  --ambar:#7A4A1E;
  --concreto:#B9B6B0;
  --vidro:#D8D4CC;
  --algodao:#EDE7DA;
  --alerta:#8A2E12;
  --rotulo:#F6F2E7;
  --fonte:'Courier Prime', 'Courier New', Courier, monospace;
  --fonte-manifesto:'Cormorant', Georgia, 'Times New Roman', serif;
  --filete:1px solid var(--tinta);
  --filete-fraco:1px solid var(--concreto);
  --medida:640px;
  --margem:28px;
  --toque:44px;
  --alvo-opcao:104px;
}
*,*::before,*::after{
  box-sizing:border-box;
  border-radius:0;
  box-shadow:none;
}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:14px;
  line-height:1.85;
  letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block;}
button,input,select{font:inherit;letter-spacing:inherit;color:inherit;
  background:transparent;border:var(--filete);}
button{cursor:pointer;}
.t-logotipo{font-size:14px;line-height:1.0;letter-spacing:0.26em;text-transform:uppercase;}
.t-manifesto{font-size:40px;line-height:1.4;letter-spacing:0.0em;font-family:var(--fonte-manifesto);font-weight:300;}
.t-secao{font-size:13px;line-height:1.2;letter-spacing:0.3em;text-transform:uppercase;}
.t-bloco{font-size:20px;line-height:1.4;letter-spacing:0.06em;}
.t-corrido{font-size:14px;line-height:1.85;letter-spacing:0.02em;}
.t-tecnico{font-size:12px;line-height:1.9;letter-spacing:0.2em;text-transform:uppercase;}
.t-manifesto{margin:0 0 24px;max-width:14em;}
.t-secao{margin:0 0 8px;}
.t-bloco{margin:0 0 4px;font-weight:400;}
.t-tecnico{margin:0;color:var(--tinta);}
.preco{color:var(--ambar);}
.pagina{
  max-width:var(--medida);
  margin:0 auto;
  padding:24px var(--margem) 64px;
}
.embutido .pagina{padding-top:16px;}
/* A TELA DE PERGUNTA abre para as 12 colunas (pedido do cliente, 2026-09).

   A medida de 640px é regra de texto corrido — ela protege a leitura de
   parágrafo. Uma lista de opções curtas não é parágrafo: espremida em 640px
   dentro de um monitor largo, ela vira uma coluna de celular cercada de
   papel, e a pessoa rola onze vezes para responder onze perguntas. O
   enunciado continua curto e o texto de cada opção também, então nada aqui
   passa das 7 colunas de leitura — o que cresce é a GRADE. */
/* Desde 2026-09 a tela de pergunta e a de resultado tomam A PÁGINA INTEIRA
   no desktop (pedido do cliente), e não mais uma coluna de 1120px. A margem
   lateral cresce com a tela para o conteúdo não encostar na borda de um
   monitor largo. Parágrafo continua na medida de leitura — o que abre é a
   grade, não a linha de texto. */
.larga .pagina{max-width:none;padding-left:clamp(28px,5vw,96px);
  padding-right:clamp(28px,5vw,96px);}
.larga p.t-corrido{max-width:var(--medida);}
/* O rodapé vai para o pé da tela: sem isso, uma pergunta de três opções
   deixa meia tela de papel vazio embaixo e a página parece inacabada.

   NUNCA no modo embutido. Dentro do iframe, `100vh` é a altura do próprio
   iframe; o carregador ajusta o iframe à altura do conteúdo, o conteúdo
   passa a medir 100vh do novo tamanho, e a altura cresce a cada rodada. */
.larga:not(.embutido) .pagina{min-height:100vh;display:flex;flex-direction:column;}
.larga:not(.embutido) .pagina > .rodape{margin-top:auto;}
.bloco{border:var(--filete);padding:16px;margin:0 0 16px;}
.bloco--rotulo{background:var(--rotulo);}
.separador{border:0;border-top:var(--filete);margin:24px 0;}
.acoes{display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-top:24px;flex-wrap:wrap;}
.acoes--passo{flex-direction:row-reverse;}
.rodape{margin-top:40px;padding-top:16px;
  border-top:var(--filete-fraco);}
/* Sem esta regra o link herda o azul do navegador — a única cor fora da
   paleta em toda a aplicação, e ela aparecia no rodapé de TODA página.
   O sublinhado fica: tirar dele o sublinhado deixaria a cor como único
   sinal de que é clicável, e a paleta não tem contraste para isso. */
a{color:var(--tinta);text-underline-offset:0.2em;
  text-decoration-thickness:1px;}
a:hover{color:var(--acento);}
.cabecalho{margin-bottom:24px;}
.logotipo{font-size:14px;
  letter-spacing:0.26em;text-transform:uppercase;
  margin:0 0 4px;font-weight:400;}
.botao{
  display:inline-block;border:var(--filete);background:var(--papel);
  color:var(--tinta);padding:16px 24px;
  min-height:var(--toque);text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:12px;text-decoration:none;
  text-align:center;
}
.botao:hover{background:var(--algodao);}
.botao--principal{width:100%;}
.botao--discreto{border-color:var(--concreto);}
.botao[disabled]{
  /* Cor não basta: CONCRETO tem 1,8:1 sobre papel e não serve de sinal
     único. O filete tracejado é a marcação redundante. */
  border-style:dashed;color:var(--concreto);cursor:not-allowed;
}
/* O quadrado da marca, agora com CHECK dentro quando marcado.

   O quadrado só preenchido dizia "marcado" para quem já sabia ler o sistema.
   O check é o sinal universal, e ele é DESENHADO — duas bordas de um
   quadrado girado 45°, não um caractere de fonte e não um ícone: o
   `border-*` é o mesmo filete do resto da marca. */
.marca-quadrado{
  display:inline-block;width:18px;height:18px;
  border:var(--filete);flex:0 0 auto;margin-top:2px;
  position:relative;background:var(--papel);
}
.marca-quadrado::after{
  content:"";position:absolute;left:6.1px;top:2.2px;
  width:5.4px;height:10.4px;
  border-right:2px solid var(--papel);
  border-bottom:2px solid var(--papel);
  transform:rotate(45deg);opacity:0;
}
.aviso{border:var(--filete);border-left-width:3px;
  padding:16px;margin:0 0 16px;}
.aviso__rotulo{color:var(--alerta);}
.progresso{margin-bottom:16px;}
/* ── A GRADE DE OPÇÕES ─────────────────────────────────────────

   Até TRÊS colunas, nunca mais (pedido do cliente, 2026-09). Quatro colunas
   dariam ~250px por célula: o ícone de 38px, o quadrado de 14px e duas
   palavras não cabem sem quebrar o texto em três linhas, e grade de alturas
   desiguais lê pior que lista.

   CADA OPÇÃO É UMA CÉLULA COM FILETE PRÓPRIO, separada por vão — e não uma
   lista com divisórias dentro de uma moldura só. A moldura única funciona em
   coluna; numa grade ela exige saber quantas células há na última linha para
   não deixar a borda aberta, e esse número muda de pergunta para pergunta.
   Célula com borda própria é robusta a qualquer contagem: 2, 3, 5 ou 9.

   `auto-fit` com mínimo de 260px resolve os dois extremos sem media query:
   em 360px cabe uma, e o teto de três vem do `max-width` da página. */
.opcoes{
  /* O vão é VARIÁVEL porque ele entra em duas contas: no `gap` e no teto de
     colunas logo abaixo. A primeira versão escreveu o número nos dois
     lugares, a tela larga mudou só o `gap`, e três trilhas de um terço mais
     dois vãos maiores passaram a não caber — a grade caiu para duas colunas
     exatamente na tela em que deveria ter três. */
  --vao:16px;
  display:grid;gap:var(--vao);margin:16px 0;
  /* TETO DE TRÊS COLUNAS com a página em largura total. `minmax(260px,1fr)`
     sozinho dava seis colunas numa tela de 1920. O `max()` faz a trilha
     mínima ser pelo menos um terço do que sobra depois dos dois vãos —
     então nunca cabem quatro — e 260px faz a grade descer para uma em tela
     estreita. */
  grid-template-columns:repeat(auto-fit,
    minmax(max(260px,calc((100% - 2 * var(--vao)) / 3)),1fr));
}
.opcao{
  display:flex;align-items:center;gap:16px;
  padding:24px 16px;
  min-height:var(--alvo-opcao);cursor:pointer;
  border:var(--filete);background:var(--papel);
  /* A transição existe para o estado marcado NÃO piscar: sem ela, fundo,
     borda e barra trocam no mesmo quadro e a mudança lê como falha de
     render. 120ms é curto o bastante para não parecer animação.
     `prefers-reduced-motion` já zera tudo isto no reset. */
  transition:background 120ms ease-out,border-color 120ms ease-out,
    box-shadow 120ms ease-out;
}
/* O texto da opção vive numa célula, não numa linha de lista: a entrelinha
   de 1,85 do texto corrido deixa duas linhas parecendo dois parágrafos. */
.opcao .t-corrido{font-size:15px;line-height:1.5;}
/* Passar o mouse NÃO pode parecer selecionar. O hover mexe só no fundo; a
   borda em acento fica reservada para quem está de fato marcado. */
.opcao:hover{background:var(--algodao);}
/* O ícone precisa de TAMANHO para ser ícone. A 24px, ao lado de texto
   de 14px numa linha de 60px, ele vira cisco — foi o que o cliente viu.
   Cresceu de novo com a célula: 56 dentro de 104 de altura. */
.opcao__icone{flex:0 0 auto;display:block;
  width:56px;height:56px;}
/* O quadrado da opção acompanha: 18px numa célula de 104 vira detalhe, e ele
   é o único sinal que funciona sem cor nenhuma. */
.opcao .marca-quadrado{width:22px;height:22px;margin-top:0;}
.opcao .marca-quadrado::after{left:7px;top:3px;width:7px;height:13px;}
/* EM TELA LARGA A CÉLULA CRESCE COM A PÁGINA. Com o formulário tomando a
   largura inteira, uma célula de 1920/3 com texto de 15px e ícone de 56 lê
   como um formulário de celular esticado: muita caixa, pouco conteúdo.
   Acima de 1280px tudo sobe um degrau — célula, ícone, quadrado, texto e o
   enunciado —, e a proporção entre eles fica a mesma. */
@media (min-width:1280px){
  .larga .opcao{min-height:132px;padding:32px 24px;gap:24px;}
  .larga .opcao .t-corrido{font-size:18px;}
  .larga .opcao__icone{width:72px;height:72px;}
  .larga .opcao .marca-quadrado{width:28px;height:28px;}
  .larga .opcao .marca-quadrado::after{left:9px;top:3px;width:9px;height:17px;}
  .larga fieldset.bloco > legend{font-size:28px;}
  .larga .opcoes{--vao:24px;}
  .larga .progresso .t-tecnico{font-size:13px;}
}

/* ── O ESTADO MARCADO ──────────────────────────────────────────────────

   Escrito depois de um defeito real. A pintura dependia da classe
   `.marcado`, e quem punha essa classe ao clicar era o `funil.js`. Sem
   JavaScript a pessoa marcava a opção e NADA mudava na tela: o controle
   nativo está com `opacity:0`, então não havia sinal nenhum. O funil inteiro
   foi feito para funcionar sem script, e esta era a peça que não funcionava.

   Agora quem manda é `:has(input:checked)` — puro CSS, sem script. A classe
   `.marcado` continua listada em cada regra por dois motivos: o navegador
   sem `:has()` ainda acerta, e o servidor já entrega a tela pintada na
   primeira carga.

   São TRÊS sinais redundantes, porque cor sozinha não serve de sinal
   (doc 08 §5): fundo no véu do acento, filete esquerdo no acento, e o check
   dentro do quadrado. */
.opcao.marcado,.opcao:has(input:checked){
  background:var(--veu);
  /* A BORDA INTEIRA vira acento. Era o sinal que faltava: com a borda em
     tinta, a célula marcada continuava desenhada igual às vizinhas, e só o
     fundo mudava — pouco para a pessoa achar de relance o que já marcou
     numa grade de nove. */
  border-color:var(--acento);
  /* Duas sombras internas, e cada uma faz uma coisa:
     1. a barra da esquerda, que é o sinal de forma (cor sozinha não serve
        de sinal — doc 08 §5). 8px, e não 5: a célula dobrou de altura e a
        barra antiga sumia nela.
     2. um filete interno em toda a volta, que ENGROSSA a moldura marcada
        sem violar o filete de 1px da marca — a borda continua sendo 1px;
        o que há por dentro é estado, não ornamento. */
  box-shadow:inset 8px 0 0 0 var(--acento),
    inset 0 0 0 1px var(--acento);
}
.opcao.marcado .marca-quadrado,
.opcao:has(input:checked) .marca-quadrado{
  background:var(--acento);border-color:var(--acento);
}
.opcao.marcado .marca-quadrado::after,
.opcao:has(input:checked) .marca-quadrado::after{opacity:1;}
/* O consentimento recebe EXATAMENTE os mesmos três sinais da opção.

   Antes só o quadrado de 14px mudava, dentro de um bloco de duas linhas de
   texto: a pessoa clicava e a tela quase não respondia. E era a caixa mais
   importante da aplicação — sem ela o diagnóstico não começa. Dois controles
   com a mesma função precisam responder do mesmo jeito. */
.consentimento.marcado,.consentimento:has(input:checked){
  background:var(--veu);
  box-shadow:inset 5px 0 0 0 var(--acento);
  border-color:var(--acento);
}
.consentimento.marcado .marca-quadrado,
.consentimento:has(input:checked) .marca-quadrado{
  background:var(--acento);border-color:var(--acento);
}
.consentimento.marcado .marca-quadrado::after,
.consentimento:has(input:checked) .marca-quadrado::after{opacity:1;}

/* O controle real continua no documento, focável e anunciável: o quadrado é
   só estilo. Trocá-lo por div com clique excluiria quem usa leitor de tela.

   `position:relative` no rótulo NÃO é enfeite: sem ele o `absolute` do input
   resolve contra a página, o controle vai parar longe da opção que ele
   representa, e o navegador rola a tela para um lugar errado ao focá-lo pelo
   teclado. */
.opcao,.consentimento{position:relative;}
.opcao input,.consentimento input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
  left:16px;top:16px;
}
.campo{display:block;margin:0 0 16px;}
.campo__rotulo{display:block;margin-bottom:4px;}
.campo input[type=email],.campo input[type=text]{
  width:100%;padding:8px 16px;min-height:var(--toque);
  background:var(--papel);
}
.erro{color:var(--alerta);margin:8px 0 0;}
.consentimento{display:flex;align-items:flex-start;gap:16px;
  border:var(--filete);padding:16px;margin:0 0 16px;
  cursor:pointer;}
.tabela-envelope{border:var(--filete);
  margin:0 0 16px;overflow-x:auto;}
table.filete{width:100%;border-collapse:collapse;}
table.filete th,table.filete td{
  border-bottom:var(--filete);padding:8px 16px;
  text-align:left;vertical-align:top;
}
table.filete tr:last-child th,table.filete tr:last-child td{border-bottom:0;}
table.filete th{
  font-weight:400;text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.2em;
  white-space:nowrap;background:var(--algodao);
}
table.filete td.numero{text-align:right;white-space:nowrap;}
table.filete tr.total td{background:var(--algodao);}
:root{--acento:#7A4A1E;--veu:#EDE7DA;}
.ativo-rizoma{--acento:#7A4A1E;--veu:#E6DED5;}
.ativo-fibra{--acento:#6F5412;--veu:#E5E0D4;}
.ativo-lipidio{--acento:#4A5526;--veu:#E1E0D6;}
.ativo-zinco{--acento:#355668;--veu:#DFE0DC;}
.faixa{background:var(--acento);color:#F2EFE9;
  border:var(--filete);padding:16px;margin:0 0 16px;}
.faixa .t-tecnico,.faixa .t-bloco{color:#F2EFE9;}
.faixa__codigo{opacity:0.82;}
.bloco--veu{background:var(--veu);}
.bloco--acento{border-left:4px solid var(--acento);}
/* O enunciado é `<legend>`: sem respiro lateral, o filete do bloco encosta
   nas letras e sobra um toco de linha antes da primeira palavra. */
fieldset.bloco{padding-top:8px;}
fieldset.bloco > legend{padding:0 8px;margin-left:-8px;}
/* **Enunciado que quebra em duas linhas.** Em 390px, "Qual é a textura
   natural do seu fio?" ocupa duas linhas, e `<legend>` monta sobre o filete
   do topo: a primeira linha ficava FORA da moldura, com a borda cortada no
   meio do texto. `float:left` tira a legenda do encaixe da borda e a faz
   fluir como bloco dentro do campo — em todos os navegadores. O respiro
   lateral negativo sai junto, porque já não há filete para descolar. */
@media (max-width:639px){
  fieldset.bloco > legend{
    float:left;width:100%;padding:0;margin:0 0 8px;
  }
  fieldset.bloco > legend + *{clear:both;}
}
.t-acento{color:var(--acento);}
.banner{position:relative;margin:0 0 40px;border:var(--filete);
  background:var(--veu);overflow:hidden;}
.banner picture,.banner__foto{display:block;width:100%;}
.banner__foto{height:clamp(240px,30vw,400px);object-fit:cover;object-position:78% 60%;}
.banner__cartao{background:var(--papel);border-top:var(--filete);
  padding:24px;display:flex;flex-direction:column;gap:8px;}
.banner__rotulo{margin:0;color:var(--acento);}
.banner__manifesto{margin:0 0 8px;max-width:12em;font-weight:400;}
.banner__botao{align-self:flex-start;}
@media (min-width:1024px){
  .banner__cartao{position:absolute;left:clamp(24px,6%,96px);top:50%;
    transform:translateY(-50%);width:min(400px,44%);border:var(--filete);
    padding:40px;}
}
/* Abaixo do banner, a coluna de leitura: o formulário é texto e campo, e
   texto em linha de 1200px não se lê. */
/* A abertura é UMA coluna, mais larga que a de leitura: cabeçalho, banner e
   formulário dividem as mesmas bordas, e o texto fica alinhado à foto —
   pedido do cliente depois de ver o formulário estreito embaixo de uma foto
   de página inteira. 1040px segura a foto sem virar faixa e deixa o campo
   do nome com largura de formulário, não de linha de texto corrido. */
.abertura-pagina .pagina{max-width:1040px;}
.abertura-pagina p.t-corrido{max-width:none;}
.abertura{scroll-margin-top:24px;margin-bottom:40px;}
.progresso{margin:0 0 16px;}
.progresso__trilha{display:flex;gap:4px;margin:8px 0 0;}
.progresso__passo{width:12px;height:12px;border:var(--filete);
  flex:0 0 auto;}
.progresso__passo--feito{background:#1A1815;}
.progresso__passo--atual{background:var(--acento);
  outline:1px solid var(--acento);outline-offset:2px;}
.identidade{display:grid;gap:16px;
  margin:0 0 24px;align-items:start;}
/* O frasco DESENHADO que ficava à direita saiu (doc 08 §8.29): o cliente
   pediu foto, não desenho, e as fotos estão nos cartões logo abaixo. */
/* ── O KIT RECOMENDADO — um só, compacto (doc 08 §8.34) ──────────────

   Foto pequena ao lado, não em cima: a foto é a mesma para os quatro kits e
   não merece a metade da tela. Abaixo de 520px ela fica no alto, à esquerda,
   ainda pequena. */
.meu-kit{display:grid;grid-template-columns:1fr;margin:0 0 40px;
  border:var(--filete);background:var(--papel);}
@media (min-width:520px){.meu-kit{grid-template-columns:136px 1fr;}}
.meu-kit__foto{width:112px;height:112px;object-fit:cover;display:block;
  margin:16px 0 0 16px;background:var(--veu);}
.meu-kit__corpo{padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.meu-kit__corpo p{margin:0;}
.meu-kit__selo,.meu-kit__para{color:var(--acento);}
.meu-kit__nome{margin:0;font-size:18px;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;}
.meu-kit__indicacao{font-size:14px;line-height:1.45;}
.meu-kit__itens{list-style:none;margin:2px 0;padding:0;display:grid;gap:2px;font-size:13px;}
.meu-kit__itens li{display:flex;align-items:center;gap:8px;}
.meu-kit__itens img{flex:0 0 14px;width:14px;height:14px;opacity:0.75;}
.meu-kit__preco{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.meu-kit__de{opacity:0.55;font-size:12px;}
.meu-kit__valor{font-size:18px;letter-spacing:0.02em;color:var(--acento);}
/* A única ação cheia da página: é a compra, e o resto (refazer, imprimir,
   outros kits) fica em filete. */
.meu-kit__botao{width:100%;margin-top:8px;cursor:pointer;font-family:inherit;
  background:var(--tinta);color:var(--papel);border-color:var(--tinta);}
.meu-kit__botao:hover{background:var(--acento);border-color:var(--acento);}
.meu-kit__sob{opacity:0.70;}
/* Os outros kits: uma linha cada, no fim. Nome, indicação e um botão
   discreto — estão lá para quem quiser, sem disputar com o recomendado. */
.outros-kits{list-style:none;margin:0 0 40px;padding:0;border-top:var(--filete-fraco);}
.outro-kit{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:var(--filete-fraco);margin:0;}
.outro-kit__texto{margin:0;font-size:13px;line-height:1.45;}
.outro-kit__nome{text-transform:uppercase;letter-spacing:0.18em;
  margin-right:8px;}
.outro-kit__botao{flex:0 0 auto;border:var(--filete-fraco);background:var(--papel);
  color:var(--tinta);cursor:pointer;min-height:var(--toque);padding:0 16px;
  font-family:inherit;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;}
.outro-kit__botao:hover{border-color:var(--tinta);}
/* ── SEUS PRODUTOS — a etiqueta de cada frasco (doc 08 §8.29, §8.34) ──

   Três por linha na medida de leitura, dois no celular: foto baixa (4:3)
   e etiqueta em corpo pequeno. A versão em página inteira fazia fotos de
   340px e etiquetas de 17px — o cliente achou tudo exagerado, e era. */
.produtos{display:grid;gap:12px;margin:0 0 40px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.produto{margin:0;border:var(--filete-fraco);background:var(--papel);
  display:flex;flex-direction:column;}
.produto img{width:100%;display:block;}
/* A FOTO tem proporção própria e vem de fora — do Odoo ou da pasta. `cover`
   num quadro fixo é o que impede que uma foto vertical e uma horizontal
   desalinhem a grade inteira. O DESENHO já nasce na caixa certa. */
.produto__foto{aspect-ratio:4 / 3;object-fit:cover;background:var(--veu);}
.produto__desenho{height:auto;}
.produto__ficha{padding:12px;display:flex;flex-direction:column;
  gap:6px;flex:1 0 auto;}
.produto__ficha p{margin:0;}
.produto__descricao{font-size:13px;line-height:1.45;opacity:0.80;}
.produto__preco{font-size:15px;letter-spacing:0.02em;}
/* A etiqueta é o RÓTULO do frasco, desenhado: papel de rótulo, filete, e a
   linha pontilhada que no rótulo de verdade separa o produto de quem vai
   usá-lo. A da máscara é kraft, porque o pote tem etiqueta de papel pardo. */
.etiqueta{border:var(--filete-fraco);background:#F6F2E7;
  padding:10px;display:flex;flex-direction:column;gap:1px;}
.etiqueta--kraft{background:#E9DAC3;}
.etiqueta p{margin:0;}
.etiqueta .t-tecnico{font-size:11px;}
.etiqueta__ativo{font-size:14px;letter-spacing:0.18em;
  text-transform:uppercase;}
.etiqueta__volume{margin-top:4px !important;}
.etiqueta__corte{border:0;border-top:1px dashed var(--concreto);
  margin:6px 0;width:100%;}
.etiqueta__nome{font-size:13px;letter-spacing:0.18em;
  text-transform:uppercase;margin-bottom:4px !important;}
/* 11px, o piso do dado técnico — e mesmo assim a assinatura pode quebrar
   numa célula de 180px; quebra, em vez de encolher abaixo do piso. */
.etiqueta__marca{opacity:0.80;letter-spacing:0.18em;}
details.dobra{border:var(--filete);margin:0 0 16px;}
details.dobra > summary{padding:16px;cursor:pointer;
  list-style:none;text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:12px;min-height:var(--toque);
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
details.dobra > summary::-webkit-details-marker{display:none;}
/* Sem o triângulo do navegador, nada diz que a dobra abre. `+` e `−` são
   caracteres, não ícone: o manual pede "apenas texto, filete e quadrado", e
   isto é texto. O marcador é decorativo — quem usa leitor de tela já ouve o
   estado do `<details>`, e ouvir "mais" depois do rótulo seria ruído. O
   fechado é `+` e o aberto é `−` (sinal de menos, U+2212, não hífen). */
details.dobra > summary::after{content:"+";speak:never;
  letter-spacing:0;font-size:14px;
  color:var(--acento);}
details.dobra[open] > summary::after{content:"−";}
details.dobra[open] > summary{border-bottom:var(--filete);
  background:var(--veu);}
details.dobra .tabela-envelope{border:0;margin:0;}
.contador{color:var(--acento);white-space:nowrap;}
.contador--cheio{border-bottom:var(--filete);}
:focus-visible{
  outline:2px solid var(--tinta);outline-offset:2px;
}
.opcao:focus-within,.consentimento:focus-within{
  outline:2px solid var(--tinta);outline-offset:-2px;
}
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}
[hidden]{display:none !important;}
@media print{
  /* A folha é o que a pessoa leva para a farmácia: o kit inteiro
     precisa sair, e o que na tela é decoração não ocupa tinta. */
  body{background:#fff;}
  .acoes,.botao,.rodape a{display:none;}
  details.dobra{display:none;}
  .faixa{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .bloco,.meu-kit,.produto,.tabela-envelope{break-inside:avoid;}
  h1,h2{break-after:avoid;}
}