/* =====================================================================
   SAÚDE TOTAL — folha principal
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` do HTML vale `display: none` na folha do navegador, que
   perde para qualquer regra de autor que declare `display`. Foi o que
   aconteceu com `.kit__valor { display: inline-flex }`: o JS marcava
   `hidden = true` nos sete cartões que não são o melhor valor por dia e o selo
   "Melhor valor por dia" aparecia nos oito assim mesmo — dizendo do kit 1+1
   uma coisa que só vale para o 4+4.

   Havia remendos pontuais espalhados (`.oferta[hidden]`, `.estoque[hidden]`,
   `.saida[hidden]`), sinal de que o problema já tinha aparecido três vezes e
   sido resolvido caso a caso. Esta regra resolve para todo o site: `hidden`
   sempre esconde. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: var(--linha-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  color: var(--tinta);
  margin: 0 0 .65rem;
  line-height: 1.22;
  letter-spacing: -.015em;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Estrutura ---------- */
.cx { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.cx--estreita { max-width: var(--largura-estreita); }
.secao { padding-block: var(--secao-y); }
.secao--alt { background: var(--fundo-alt); }
.secao--azul { background: var(--azul-900); color: #c3d3e8; }
.secao--azul h2, .secao--azul h3 { color: #fff; }
.centro { text-align: center; }

.titulo-secao { font-size: var(--t-h2); font-weight: 700; }
.sobre-titulo {
  display: block; font-family: var(--f-texto); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul-600); margin-bottom: .5rem;
}
.secao--azul .sobre-titulo { color: #7fb0f5; }
.apoio { max-width: 60ch; color: var(--texto-fraco); }
.centro .apoio { margin-inline: auto; }
.secao--azul .apoio { color: #9db3d0; }
.cabecalho-secao { margin-bottom: 2.5rem; }

/* ---------- Placeholders ---------- */
.pd {
  display: inline-block; padding: 0 .3em; border-radius: 3px;
  background: #fff6da; border: 1px dashed #c08c00; color: #7a5800;
  font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .2rem .5rem; padding: 1.05rem 2rem; border: 0; border-radius: var(--r);
  background: var(--verde); color: #fff;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; line-height: 1.25;
  text-align: center; box-shadow: var(--sombra-2);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:hover { background: var(--verde-claro); box-shadow: var(--sombra-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.btn:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 3px; }
.btn--g { padding: 1.25rem 2.5rem; font-size: 1.1875rem; }
.btn--bloco { display: flex; width: 100%; }
.btn--azul { background: var(--azul-700); }
.btn--azul:hover { background: var(--azul-600); }
.btn--linha {
  background: transparent; color: var(--azul-700); box-shadow: none;
  border: 1px solid var(--linha-forte); font-weight: 500;
}
.btn--linha:hover { background: var(--azul-050); box-shadow: none; transform: none; }
.btn__sub {
  flex: 0 0 100%; font-family: var(--f-texto); font-weight: 400;
  font-size: var(--t-micro); opacity: .9; line-height: 1.4;
}

/* ---------- Fita de aviso ---------- */
.aviso-topo {
  background: var(--azul-900); color: #cfe0f7;
  font-size: var(--t-micro); text-align: center; padding: .55rem var(--gutter);
}
.aviso-topo b { color: #fff; font-weight: 500; }
.aviso-topo .ponto { color: #6f9ae0; margin-inline: .5rem; }

/* ---------- Cabeçalho ---------- */
.cabecalho { border-bottom: 1px solid var(--linha); background: #fff; position: sticky; top: 0; z-index: 40; }
.cabecalho__int { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.marca { display: flex; align-items: center; gap: .6rem; }
.marca__nome {
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.4rem;
  color: var(--azul-800); letter-spacing: -.02em;
}
.marca__selo {
  font-size: var(--t-micro); color: var(--texto-fraco); padding-left: .6rem;
  border-left: 1px solid var(--linha-forte); line-height: 1.2;
}
.cabecalho .btn { padding: .7rem 1.35rem; font-size: var(--t-peq); box-shadow: none; }
@media (max-width: 600px) { .marca__selo { display: none; } }

/* ---------- Herói ----------
   A foto é o fundo da seção inteira, não uma coluna ao lado. Ela foi
   fotografada com o frasco no terço direito e a metade esquerda em degradê
   claro; enquanto vivia dentro de um cartão, esse vazio era espaço morto e o
   texto ficava preso em meia largura, quebrando o h1 em cinco linhas.

   A legibilidade vem de um véu branco que sai da esquerda e morre antes do
   frasco — não de escurecer a foto por cima, que apagaria o produto. */
.heroi {
  position: relative; isolation: isolate;
  background: var(--azul-050);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.heroi__fundo { position: absolute; inset: 0; z-index: -2; display: block; }
.heroi__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.heroi::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.93) 34%,
    rgba(255,255,255,.72) 48%,
    rgba(255,255,255,0) 64%);
}
.heroi__grade { display: grid; }
.heroi__texto { max-width: 40rem; }
.heroi__titulo { font-size: var(--t-hero); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 1rem; text-wrap: balance; }
.heroi__titulo b { color: var(--azul-700); font-weight: 800; }
.heroi__chapeu {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-700); background: var(--azul-050);
  border: 1px solid var(--azul-100); border-radius: 100px; padding: .35rem .85rem; margin-bottom: 1.1rem;
}
.heroi__linha { font-size: 1.125rem; color: var(--texto); max-width: 40ch; }
.heroi__checks { margin: 1.5rem 0 1.75rem; display: grid; gap: .7rem; max-width: 34rem; }
.heroi__aviso { margin: 1.1rem 0 0; font-size: var(--t-micro); color: var(--texto-fraco); }
.produto__foto img { width: 100%; }

/* O botão vinha esticado na largura toda da coluna e virava um bloco verde do
   tamanho de um cartaz. Botão de ação tem a largura do que ele diz. */
.heroi__cta { display: inline-flex; width: auto; }

/* No celular a foto não é fundo. Foi tentado: numa tela de 375px o frasco fica
   no meio do caminho do texto, e qualquer véu forte o bastante para o texto
   ficar legível apaga o produto junto. Duas versões desse meio-termo saíram
   lavadas, e uma terceira mostrava só a bancada vazia — o frasco tinha ficado
   atrás do véu.

   Aqui ela sai do fundo e vira uma faixa no fim da seção, com o recorte mirando
   o frasco. Texto sobre branco puro em cima, produto inteiro embaixo. Cada um
   com o seu espaço, nenhum dos dois pela metade. */
@media (max-width: 880px) {
  /* A foto vem antes do texto no DOM, então no fluxo normal ela encabeça a
     seção — que é o que se quer no celular: o produto aparece antes de
     qualquer promessa. Sem padding no topo, senão sobra uma faixa azul vazia
     entre o cabeçalho e a foto. */
  .heroi { padding-block: 0 clamp(2rem, 7vw, 3rem); }
  .heroi::before { display: none; }
  /* `z-index: -2` é o que a põe atrás do fundo da seção quando ela é fundo.
     Fora do `position: absolute` ela precisa voltar ao fluxo normal, senão
     some por trás do azul-050 do herói. */
  .heroi__fundo { position: static; z-index: auto; display: block; margin-bottom: 1.75rem; }
  .heroi__fundo img { height: 17rem; object-position: 58% 42%; }
  .heroi__texto, .heroi__checks { max-width: none; }
}

.check { display: flex; align-items: flex-start; gap: .65rem; }
.check::before {
  content: ""; flex: none; width: 21px; height: 21px; margin-top: .3rem; border-radius: 50%;
  background: var(--verde-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23148f45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.check b { color: var(--tinta); font-weight: 700; }

/* Selo de garantia — arte em SVG, número em texto para ser editável */
.selo {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  background: url("../img/selo-garantia.svg") center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(7, 59, 44, .2));
  color: var(--azul-800); font-family: var(--f-titulo); line-height: 1;
}
.selo strong { display: block; font-weight: 800; letter-spacing: -.03em; }
.selo span {
  display: block; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.selo--grande { width: clamp(162px, 21vw, 210px); }
.selo--grande strong { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
.selo--grande span { font-size: 11.5px; margin-top: .25rem; }

/* Faixa de confiança */
.confianca { border-top: 1px solid var(--linha); background: #fff; }
/* A faixa de confiança encostava na seção seguinte e as duas liam como um
   bloco só. A borda inferior e o respiro extra separam o fim do herói do
   começo do argumento. */
.confianca { border-bottom: 1px solid var(--linha); }
.dores { padding-top: clamp(3.5rem, 7vw, 6rem); }
.confianca__lista { display: grid; grid-template-columns: repeat(4, 1fr); }
.confianca__item {
  display: flex; align-items: center; gap: .7rem; justify-content: center;
  padding: 1.15rem .75rem; border-left: 1px solid var(--linha); font-size: var(--t-peq);
}
.confianca__item:first-child { border-left: 0; }
.confianca__item svg { flex: none; color: var(--azul-600); }
.confianca__item b { display: block; color: var(--tinta); font-weight: 700; font-size: var(--t-peq); line-height: 1.3; }
.confianca__item span { color: var(--texto-fraco); font-size: var(--t-micro); line-height: 1.3; }
@media (max-width: 900px) { .confianca__lista { grid-template-columns: 1fr 1fr; }
  .confianca__item:nth-child(odd) { border-left: 0; }
  .confianca__item:nth-child(n+3) { border-top: 1px solid var(--linha); } }
@media (max-width: 520px) { .confianca__lista { grid-template-columns: 1fr; }
  .confianca__item { border-left: 0; border-top: 1px solid var(--linha); justify-content: flex-start; }
  .confianca__item:first-child { border-top: 0; } }

@media (max-width: 880px) {
  .heroi__grade { grid-template-columns: 1fr; gap: 1rem; }
  .heroi__linha { font-size: 1.0625rem; }
  .selo--heroi { right: -10px; bottom: 2%; width: clamp(88px, 26vw, 108px); }

  /* No celular o botão sobe para antes da lista de garantias. A pessoa
     precisa ver o preço e o botão sem rolar duas telas; a lista continua
     logo abaixo, para quem quiser confirmar antes de clicar. */
  .heroi__texto { display: flex; flex-direction: column; }
  .heroi__chapeu { order: 1; align-self: flex-start; }
  .heroi__titulo { order: 2; }
  .heroi__linha  { order: 3; }
  .heroi__cta    { order: 4; margin-bottom: 1.5rem; }
  .heroi__checks { order: 5; margin: 0 0 1rem; }
  .heroi__aviso  { order: 6; margin: 0; }
}


/* ---------- Foto como apoio, não como conteúdo ----------
   As artes antigas tentavam explicar tudo dentro da imagem. Estas só ancoram
   credibilidade: a foto mostra, a copy vende, os cards organizam. Por isso
   nenhuma delas recebe texto sobreposto nem ícone flutuando. */
.foto-apoio { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-2); }
.foto-apoio img { width: 100%; display: block; }

/* ---------- Dores: imagem à esquerda, texto à direita ---------- */
.dores__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.dores__foto { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-2); }
.dores__foto img { width: 100%; display: block; }
.dores__lista { display: grid; gap: .7rem; margin: 1.5rem 0 1.75rem; }
@media (max-width: 860px) { .dores__grade { grid-template-columns: 1fr; } }

/* ---------- Como tomar ----------
   Os três cards são o conteúdo da seção; a foto é apoio. Por isso ela fica ao
   lado do cabeçalho, e não disputando espaço com os cards — que seguem em
   linha, com a largura toda. Uma tentativa anterior punha a foto na coluna da
   direita e espremia os cards numa só coluna: a seção virou uma torre de
   1.200px de altura. */
.uso__topo { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: 2.5rem; }
.uso__foto { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-2); }
.uso__foto img { width: 100%; display: block; }
@media (max-width: 860px) {
  .uso__topo { grid-template-columns: 1fr; }
  .uso__foto { max-width: 520px; margin-inline: auto; }
}

/* ---------- Garantia: foto à esquerda, texto à direita ---------- */
.garantia__foto { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-2); max-width: 520px; }
.garantia__foto img { width: 100%; display: block; }
@media (max-width: 700px) { .garantia__foto { max-width: 100%; } }

/* ---------- Público ---------- */
.publico { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.publico li {
  border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
  padding: .45rem 1.05rem; font-size: var(--t-peq); color: #dce8f7;
}

/* ---------- Produto ---------- */
.produto { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.produto__foto { border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sombra-1); }
.lista-detalhe { display: grid; gap: 1.1rem; margin: 1.75rem 0; }
.lista-detalhe li { display: flex; gap: .9rem; align-items: flex-start; }
.lista-detalhe .n {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--azul-050); color: var(--azul-700); font-family: var(--f-titulo); font-weight: 700; font-size: .95rem;
}
.lista-detalhe b { display: block; color: var(--tinta); font-size: 1.0625rem; }
.lista-detalhe p { margin: 0; font-size: var(--t-peq); color: var(--texto-fraco); }
@media (max-width: 860px) { .produto { grid-template-columns: 1fr; } }

/* ---------- Comparativo ---------- */
.tabela-cx { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r-md); background: #fff; box-shadow: var(--sombra-1); }
.comparativo { min-width: 580px; font-size: var(--t-peq); }
.comparativo th, .comparativo td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--linha); }
.comparativo thead th { background: var(--azul-050); color: var(--azul-800); font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-micro); }
.comparativo thead th:nth-child(2) { background: var(--azul-700); color: #fff; }
.comparativo td:nth-child(2) { background: var(--azul-050); font-weight: 700; color: var(--azul-800); }
.comparativo tbody tr:last-child td { border-bottom: 0; }
.sim { color: var(--verde); font-weight: 700; }
.nao { color: var(--texto-fraco); }

/* ---------- Passos ---------- */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.passo { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra-1); }
.passo img { border-bottom: 1px solid var(--linha); }
.passo__txt { padding: 1.35rem; }
.passo__n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--azul-700); color: #fff; font-family: var(--f-titulo); font-weight: 700; font-size: .8125rem;
  margin-bottom: .6rem;
}
.passo h3 { font-size: var(--t-h3); }
.passo p { margin: 0; font-size: var(--t-peq); color: var(--texto-fraco); }

/* ---------- Prova ---------- */
.prints { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.print { border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--sombra-1); }
/* Medida de leitura. O container cresceu para 1320px e as notas, que ocupam a
   largura toda, passaram de 188 caracteres por linha — o olho perde a linha
   seguinte muito antes disso. Largura de continente e largura de leitura são
   coisas diferentes: a primeira serve aos grids, a segunda ao texto. */
.nota {
  margin: 1.25rem auto 0; max-width: 68ch;
  font-size: var(--t-micro); color: var(--texto-fraco); text-align: center;
}

.depoimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.depoimento { background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md); padding: 1.6rem; box-shadow: var(--sombra-1); }
.depoimento__estrelas { color: #e8a33d; letter-spacing: .12em; font-size: .9rem; }
.depoimento p { font-size: var(--t-peq); margin: .6rem 0 1.1rem; color: var(--texto); }
.depoimento__quem { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.depoimento__quem img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.depoimento__quem b { display: block; color: var(--tinta); font-size: var(--t-peq); }
.depoimento__quem span { font-size: var(--t-micro); color: var(--texto-fraco); }

/* ---------- Credenciais do vendedor ---------- */
/* Eram quatro cartões num `auto-fit` de 290px: em 1140px cabiam três e o
   quarto descia sozinho para uma linha inteira. Quatro colunas fixas no
   desktop, duas no tablet, uma no celular — sempre linha cheia. */
.credenciais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1080px) { .credenciais { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .credenciais { grid-template-columns: 1fr; } }
.credencial {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
  padding: 1.35rem 1.4rem; box-shadow: var(--sombra-1);
}
.credencial svg { flex: none; color: var(--azul-600); margin-top: .15rem; }
.credencial b { display: block; color: var(--tinta); font-size: 1.0625rem; line-height: 1.35; }
.credencial p { margin: .15rem 0 0; font-size: var(--t-peq); color: var(--texto-fraco); }

/* ---------- Números ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-md); overflow: hidden; margin-top: 2rem; }
.numero { background: var(--azul-900); padding: 1.75rem 1rem; text-align: center; }
.numero b { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.85rem, 3.6vw, 2.5rem); color: #fff; line-height: 1.1; }
.numero span { font-size: var(--t-micro); color: #9db3d0; }

/* ---------- Kits ---------- */
/* `auto-fit` com minmax de 240px cabia quatro cartões em 1320px e três em
   1024 — deixando o quarto sozinho numa linha, o mesmo cartão órfão que já
   tinha sido corrigido nas credenciais. Quatro são quatro opções que se
   comparam; a comparação precisa dos quatro na mesma linha, ou de duas linhas
   simétricas. Colunas explícitas, sem meio-termo. */
.kits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 1080px) { .kits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .kits { grid-template-columns: 1fr; } }
.kit {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
  box-shadow: var(--sombra-1); cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease;
}
.kit:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); }
.kit--destaque { border: 2px solid var(--azul-600); box-shadow: var(--sombra-2); }

/* A terceira geração de arte de combo é a que funciona, e vale registrar por
   quê. A primeira era IA — pódio escuro, brilho, números flutuando — e lia como
   montagem à distância. A segunda eram fotos dos frascos empilhados sobre fundo
   claro: nítidas até o kit 2+2, uma parede de rótulos sobrepostos a partir do
   4+4, e sem dizer se aquilo era um kit de oito ou de oitenta.

   Esta resolve o que faltava nas duas: fundo escuro que separa os frascos
   brancos, profundidade que deixa a fileira da frente legível mesmo com cem
   unidades no quadro, e a condição escrita em cima, onde o olho chega primeiro.

   A arte traz "PAGUE 4 · LEVE 8" impresso. Isso não dispensa o texto: imagem
   não cresce com o botão A/A+ nem é lida por leitor de tela, então a mesma
   condição aparece na linha de duração, abaixo do preço. A arte convence, o
   texto garante.

   O bloco escuro no topo de um cartão claro é intencional — é o mesmo azul do
   rótulo, e dá ao produto o contraste que ele não tem sobre fundo branco. */
.kit__topo { position: relative; background: var(--azul-900); }
.kit__arte {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
}

/* A ação principal é "Comprar"; a linha menor identifica o checkout
   seguro sem competir com o rótulo do botão. */
.kit__btn { flex-direction: column; gap: .1rem; padding-block: .85rem; }
.kit__btn .btn__sub { flex: none; }

.kit__corpo { position: relative; display: flex; flex-direction: column; padding: 1.15rem 1.15rem 1.25rem; text-align: center; flex: 1; }
/* A fita era uma pílula flutuando meio para fora do cartão, com `overflow:
   hidden` cortando o que saía. Funcionava quando o topo era um gradiente vazio;
   com a arte do combo ali, ela passou a tapar o "TOTAL 8 FRASCOS" — a linha que
   diz o que o cartão vende. Virou faixa de largura cheia acima da arte: não
   cobre nada e continua sendo a primeira coisa que se lê no cartão certo. */
.kit__fita {
  display: block; width: 100%; padding: .45rem .9rem; text-align: center;
  background: var(--azul-600); color: #fff; font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: .04em; white-space: nowrap;
}
/* Mesma razão: sobre a arte escura, o selo de desconto cairia em cima dos
   frascos. Desce para o corpo claro do cartão, ancorado ao canto. */
.kit__economia {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  background: var(--verde); color: #fff; font-family: var(--f-titulo); font-weight: 800;
  font-size: var(--t-micro); border-radius: 100px; padding: .2rem .6rem;
}
.kit__selos { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-bottom: .25rem; }
.kit__frete {
  display: inline-flex; align-items: center; font-size: var(--t-micro); font-weight: 700;
  color: var(--verde); background: var(--verde-fundo); border-radius: 100px; padding: .2rem .65rem;
}
.kit__valor {
  display: inline-flex; align-items: center; font-size: var(--t-micro); font-weight: 700;
  color: var(--azul-800); background: var(--azul-050); border: 1px solid var(--azul-100);
  border-radius: 100px; padding: .2rem .65rem;
}
.kit__precos { margin: .85rem 0 .2rem; }
.kit__de { font-size: var(--t-micro); color: var(--texto-fraco); text-decoration: line-through; }
.kit__parcela { font-family: var(--f-titulo); font-weight: 800; font-size: 1.6rem; color: var(--tinta); line-height: 1.15; }
.kit__parcela small { font-family: var(--f-texto); font-weight: 400; font-size: .9375rem; color: var(--texto-fraco); }
.kit__avista { font-size: var(--t-micro); color: var(--texto-fraco); }
.kit__dia { font-family: var(--f-titulo); font-weight: 700; color: var(--verde); font-size: 1.0625rem; margin-top: .6rem; }
.kit__dura { font-size: var(--t-micro); color: var(--texto-fraco); margin-bottom: 1rem; }
.kit__nudge { margin: -.5rem 0 1rem; font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5; }
.kit__nudge button {
  border: 0; background: none; padding: 0; color: var(--azul-700);
  font-weight: 700; font-size: inherit; text-decoration: underline;
}
.kit .btn { margin-top: auto; }
.kit.is-escolhido { border-color: var(--azul-600); box-shadow: 0 0 0 3px var(--azul-100), var(--sombra-2); }
@keyframes zd-piscar { 0%, 100% { box-shadow: 0 0 0 3px var(--azul-100), var(--sombra-2); } 50% { box-shadow: 0 0 0 8px var(--azul-100), var(--sombra-3); } }
.kit.is-piscando { animation: zd-piscar 1.1s ease 2; }
@media (prefers-reduced-motion: reduce) { .kit.is-piscando { animation: none; } }

.kits__nota { margin: 1.75rem auto 0; max-width: 60ch; text-align: center; font-size: var(--t-peq); color: var(--texto-fraco); }
.kits__nota a { color: var(--azul-700); font-weight: 700; text-decoration: underline; }


/* ---------- Formas de pagamento ---------- */
.pagamentos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem;
  margin: 1.75rem auto 0; max-width: 620px;
}
.pagamento {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r);
  padding: .7rem 1rem; box-shadow: var(--sombra-1); flex: 1 1 175px;
}
.pagamento svg { flex: none; }
.pagamento span { display: grid; font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.35; }
.pagamento b { font-size: var(--t-peq); color: var(--tinta); }

/* ---------- Garantia ---------- */
.garantia { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (max-width: 700px) { .garantia { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------- Alívio ----------
   Espelho da seção de dores: lá a foto vem à esquerda, aqui à direita. A
   inversão marca a virada do problema para a rotina sem precisar de título
   dizendo isso. No celular a foto desce para depois do texto — quem chega
   rolando já leu a promessa e a imagem confirma, em vez de anunciar. */
.alivio__grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
.alivio__foto { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-2); }
.alivio__foto img { width: 100%; display: block; }
@media (max-width: 860px) { .alivio__grade { grid-template-columns: 1fr; } }

/* ---------- Composição ----------
   Transcrição do verso do rótulo. A tabela é o conteúdo principal e ganha a
   coluna maior; o texto de composição fica ao lado porque é lido depois, para
   confirmar, não para descobrir. */
.comp {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
}
.comp__tabela-cx {
  background: #fff; border: 1px solid var(--linha);
  border-radius: var(--r-md); padding: 1.25rem 1.25rem 1rem; box-shadow: var(--sombra-1);
}
.comp__tabela { width: 100%; border-collapse: collapse; }
.comp__tabela caption {
  caption-side: top; text-align: left; padding-bottom: .85rem;
  font-family: var(--f-titulo); font-weight: 700; color: var(--azul-800);
}
.comp__tabela th, .comp__tabela td { padding: .6rem .5rem; border-bottom: 1px solid var(--linha); }
.comp__tabela thead th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); font-weight: 700; border-bottom-width: 2px;
}
.comp__tabela thead th + th, .comp__tabela td { text-align: right; }
.comp__tabela tbody th { text-align: left; font-weight: 500; color: var(--tinta); }
.comp__tabela tbody td { font-variant-numeric: tabular-nums; }
.comp__tabela tbody tr:last-child th, .comp__tabela tbody tr:last-child td { border-bottom: 0; }
.comp__rodape { margin: .9rem 0 0; max-width: 66ch; font-size: var(--t-micro); line-height: 1.55; color: var(--texto-fraco); }

.comp__sub { font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; margin: 0 0 .5rem; color: var(--azul-800); }
.comp__exc { margin-top: .75rem; }
.comp__selos { display: grid; gap: .6rem; margin: 1.25rem 0 1.5rem; }
.comp__nota {
  margin-top: 1.25rem; max-width: 62ch;
  font-size: var(--t-micro); line-height: 1.6; color: var(--texto-fraco);
}
@media (max-width: 860px) { .comp { grid-template-columns: 1fr; } }

/* No celular a caixa perde a folga lateral e as três colunas cabem sem rolagem:
   o cabeçalho da primeira quebra em duas linhas e os números seguem alinhados
   à direita. Uma versão anterior forçava min-width de 320px e a tabela
   transbordava 19px dentro do próprio cartão. */
@media (max-width: 420px) {
  .comp__tabela-cx { padding: 1rem .85rem .85rem; }
  .comp__tabela th, .comp__tabela td { padding: .55rem .3rem; }
}

/* Colunas de texto das seções de conteúdo. Com 1320px de container elas
   chegavam a 79 caracteres por linha; 68 mantém a leitura confortável sem
   deixar buraco ao lado. */
.produto p, .garantia p, .alivio__grade p, .dores__grade p, .comp__texto p { max-width: 68ch; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--largura-estreita); margin-inline: auto; border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__p {
  width: 100%; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 1.25rem 0; text-align: left;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; color: var(--tinta);
}
.faq__p:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 3px; }
.faq__mais {
  flex: none; width: 24px; height: 24px; color: var(--azul-600);
  display: grid; place-items: center; font-size: 1.25rem; line-height: 1;
  transition: transform .2s ease;
}
.faq__item.aberto .faq__mais { transform: rotate(45deg); }
.faq__r { overflow: hidden; height: 0; }
.faq__r p { padding-bottom: 1.25rem; margin: 0; color: var(--texto-fraco); font-size: var(--t-peq); max-width: 68ch; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--azul-900); color: #8fa5c4; padding-block: 3rem 6.5rem; font-size: var(--t-peq); }
.rodape__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.rodape h4 { color: #fff; font-size: var(--t-peq); }
.rodape li { margin-bottom: .4rem; }
.rodape a:hover { color: #fff; }
.rodape__legal { margin-top: 2.5rem; padding-top: 1.5rem; max-width: 86ch; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-micro); line-height: 1.7; color: #7b90ae; }
.rodape__legal strong { color: #adc0da; font-weight: 500; }

/* ---------- Barra fixa ---------- */
/* A barra colava o conteúdo nas bordas da tela e ignorava o grid do resto da
   página: o título começava num x diferente de todo o conteúdo acima e o botão
   ficava grudado na borda direita. Agora o conteúdo vive dentro do mesmo `.cx`
   das seções, então o texto alinha com a página e o botão respeita a margem.
   O frasco entrou com 36px, do tamanho de um favicon; a 52px ele é
   reconhecível como o produto que a pessoa está prestes a comprar. */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--linha); box-shadow: 0 -6px 24px rgba(10,37,64,.1);
  padding-block: .8rem; transform: translateY(110%);
}
.barra__cx {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.barra__info { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.barra__info img { width: 52px; height: auto; flex: none; }
.barra__info b { display: block; font-size: var(--t-peq); color: var(--tinta); line-height: 1.3; }
.barra__info span { font-size: var(--t-micro); color: var(--texto-fraco); }
.barra .btn { padding: .85rem 1.75rem; font-size: var(--t-peq); box-shadow: none; flex: none; }
@media (max-width: 520px) { .barra__info span { display: none; } }

/* ---------- WhatsApp ---------- */
.zap {
  position: fixed; right: 1rem; bottom: 5rem; z-index: 55;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: var(--sombra-2);
  transition: transform .15s ease;
}
.zap:hover { transform: scale(1.05); }


/* =====================================================================
   Recursos de loja
   ===================================================================== */

/* ---------- Aviso de modo demonstração ---------- */
.aviso-demo {
  background: #7a2e00; color: #ffe9d6; text-align: center;
  padding: .7rem var(--gutter); font-size: var(--t-peq); line-height: 1.5;
}
.aviso-demo strong { color: #fff; }
.aviso-demo code { background: rgba(255,255,255,.16); padding: .1em .4em; border-radius: 4px; font-size: .95em; }

/* ---------- Tamanho do texto ---------- */
.cabecalho__acoes { display: flex; align-items: center; gap: 1rem; }
.texto-tamanho { display: flex; align-items: center; gap: .35rem; }
.texto-tamanho__rotulo { font-size: var(--t-micro); color: var(--texto-fraco); margin-right: .15rem; }
.texto-tamanho button {
  width: 34px; height: 34px; border-radius: var(--r); background: #fff;
  border: 1px solid var(--linha-forte); color: var(--texto);
  font-family: var(--f-titulo); font-weight: 700; line-height: 1;
}
.texto-tamanho button:nth-of-type(2) { font-size: 1.15rem; }
.texto-tamanho button[aria-pressed="true"] { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.texto-tamanho button:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
@media (max-width: 760px) { .texto-tamanho { display: none; } }

html.texto-grande { --t-corpo: 1.1875rem; --t-peq: 1.0625rem; --t-micro: .9375rem; --linha-texto: 1.75; }

/* A lupa e o visor de rótulo em tela cheia saíram em 03/09/2026.

   O que a ampliação entregava não era leitura: era um close da arte do rótulo,
   com os defeitos que ela tem. Ampliar aquilo trabalhava contra o produto
   justamente no momento em que a pessoa está conferindo se ele é sério.

   O que a pessoa procurava ali — composição, tabela nutricional, dose — ficou
   na seção "Composição e informação nutricional", em texto: escala com o botão
   A/A+, é lido por leitor de tela e não depende de nenhuma foto ficar boa. */

/* ---------- Calculadora de kit ---------- */
.calc { max-width: 860px; margin-inline: auto; }
.calc__opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.calc__op {
  padding: .95rem .5rem; border-radius: var(--r); border: 1px solid var(--linha-forte);
  background: #fff; color: var(--texto); font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-peq);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.calc__op:hover { border-color: var(--azul-500); }
.calc__op.is-ativo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.calc__op:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
@media (max-width: 520px) { .calc__opcoes { grid-template-columns: 1fr 1fr; } }

.calc__saida { margin-top: 1rem; }
.calc__resultado {
  display: grid; grid-template-columns: 160px 1fr; align-items: stretch; gap: 1.5rem;
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--azul-600);
  border-radius: var(--r-md); padding: 1.5rem 1.75rem; text-align: left; box-shadow: var(--sombra-1);
}
/* O frasco entrava com 96px ao lado de um bloco de texto alto e ficava
   pequeno e desencontrado — lia como imagem quebrada, não como produto.
   Agora ele tem uma coluna própria, com fundo e altura casada com o texto. */
.calc__frasco {
  width: 100%; max-width: 160px; height: 100%; max-height: 220px;
  object-fit: contain; align-self: center;
  background: var(--azul-050); border-radius: var(--r); padding: .75rem;
}
.calc__texto { display: grid; justify-items: start; }
@media (max-width: 520px) {
  .calc__resultado { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .calc__texto { justify-items: center; }
  .calc__frasco { max-width: 120px; max-height: 160px; }
}
.calc__chapeu { margin: 0; font-size: var(--t-peq); color: var(--texto-fraco); }
.calc__kit { margin: .2rem 0 .35rem; font-family: var(--f-titulo); font-weight: 800; font-size: 1.75rem; color: var(--tinta); line-height: 1.2; }
.calc__detalhe { margin: 0 0 .85rem; font-size: var(--t-peq); color: var(--texto); }
.calc__detalhe b { color: var(--verde); }
.calc__preco { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: 1.35rem; color: var(--tinta); }
.calc__dia { display: block; font-size: var(--t-peq); color: var(--texto-fraco); margin-bottom: 1.1rem; }
.calc__btn { margin-top: .25rem; }
.calc__pendente { margin: 0; font-size: var(--t-peq); color: var(--texto-fraco); background: #fff; border: 1px dashed var(--linha-forte); border-radius: var(--r-md); padding: 1.25rem; text-align: center; }
.calc__pendente code { background: var(--azul-050); padding: .1em .4em; border-radius: 4px; }

/* ---------- Extras no cartão de kit ----------
   `.kit__selos`, `.kit__valor` e `.kit__economia` estavam declarados duas
   vezes, com valores iguais. Ficou a declaração de cima. */

.kit__dia { font-family: var(--f-titulo); font-weight: 700; color: var(--verde); font-size: 1.0625rem; margin-bottom: .2rem; }
.kit__dura { font-size: var(--t-micro); color: var(--texto-fraco); margin-bottom: 1rem; }
.kit.is-escolhido { border-color: var(--azul-600); box-shadow: 0 0 0 3px var(--azul-100), var(--sombra-2); }
@keyframes zd-piscar { 0%, 100% { box-shadow: 0 0 0 3px var(--azul-100), var(--sombra-2); } 50% { box-shadow: 0 0 0 8px var(--azul-100), var(--sombra-3); } }
.kit.is-piscando { animation: zd-piscar 1.1s ease 2; }
@media (prefers-reduced-motion: reduce) { .kit.is-piscando { animation: none; } }


/* ---------- Faixa de oferta com prazo ---------- */
.oferta { background: var(--vermelho); color: #fff; }
.oferta.is-encerrada { background: var(--texto-fraco); }
.oferta__int {
  max-width: var(--largura); margin-inline: auto; padding: .6rem var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: .35rem 1rem;
  flex-wrap: wrap; font-size: var(--t-peq); text-align: center;
}
.oferta__rotulo { font-weight: 700; }
.oferta__relogio {
  font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .22);
  border-radius: 100px; padding: .15rem .75rem; font-weight: 700;
}
.oferta__link { text-decoration: underline; font-weight: 500; }
@media (max-width: 700px) {
  .oferta__int { padding-block: .45rem; font-size: var(--t-micro); gap: .2rem .6rem; }
  .oferta__relogio { padding: .1rem .55rem; }
}

body.tem-oferta [data-so-sem-oferta] { display: none; }
@media (max-width: 700px) { body.tem-oferta .aviso-topo { display: none; } }

/* ---------- Aviso de estoque ---------- */
.estoque {
  max-width: 620px; margin: 0 auto 1.75rem; text-align: center;
  background: #fff6ec; border: 1px solid #f3d5b0; border-radius: var(--r-md);
  padding: .85rem 1.15rem; font-size: var(--t-peq); color: #7a4a12;
}
.estoque strong { color: #8a3d06; }

/* ---------- Comparação entre kits ---------- */
.kit__nudge {
  margin: -.5rem 0 1rem; font-size: var(--t-micro); color: var(--texto-fraco); line-height: 1.5;
}
.kit__nudge button {
  border: 0; background: none; padding: 0; color: var(--azul-700);
  font-weight: 700; font-size: inherit; text-decoration: underline;
}

/* ---------- Modal de saída ---------- */
.saida { position: fixed; inset: 0; z-index: 95; background: rgba(6, 20, 38, .82); display: grid; place-items: center; padding: var(--gutter); }
.saida__caixa {
  position: relative; background: #fff; border-radius: var(--r-lg);
  padding: 2.25rem 2rem 2rem; max-width: 440px; width: 100%; text-align: center;
  box-shadow: var(--sombra-3);
}
.saida__fechar {
  position: absolute; top: .6rem; right: .75rem; width: 36px; height: 36px;
  border: 0; background: none; color: var(--texto-fraco); font-size: 1.6rem; line-height: 1; border-radius: 50%;
}
.saida__fechar:hover { background: var(--fundo-alt); color: var(--tinta); }
.saida__chapeu { margin: 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-600); }
.saida__titulo { font-size: 1.5rem; margin: .35rem 0 .6rem; }
.saida__texto { font-size: var(--t-peq); color: var(--texto-fraco); }
.saida__sugestao {
  background: var(--azul-050); border: 1px solid var(--azul-100); border-radius: var(--r-md);
  padding: 1rem; margin: 1.25rem 0; display: grid; gap: .1rem;
}
.saida__sugestao span { font-size: var(--t-micro); color: var(--texto-fraco); }
.saida__sugestao strong { font-family: var(--f-titulo); font-size: 1.35rem; color: var(--tinta); }
.saida__acoes { display: grid; gap: .6rem; margin-top: 1.25rem; }


/* ---------- Pular para o conteúdo ---------- */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--azul-900); color: #fff; padding: .85rem 1.35rem;
  border-radius: 0 0 var(--r) 0; font-weight: 700; font-size: var(--t-peq);
}
.pular:focus { left: 0; }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 96;
  max-width: 620px; margin-inline: auto;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg);
  box-shadow: var(--sombra-3); padding: 1.35rem 1.5rem;
  display: grid; gap: 1rem;
}
.cookies__texto { margin: 0; font-size: var(--t-peq); color: var(--texto); }
.cookies__texto a { color: var(--azul-700); text-decoration: underline; }
.cookies__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cookies__btn { padding: .85rem 1rem; font-size: var(--t-peq); box-shadow: none; }
@media (max-width: 520px) { .cookies { bottom: 4.75rem; } .cookies__acoes { grid-template-columns: 1fr; } }

/* ---------- Páginas internas ---------- */
.corpo-simples { background: var(--fundo-alt); }
.corpo-simples .rodape { padding-block: 2rem; text-align: center; }
.corpo-simples .rodape a { text-decoration: underline; }

.documento { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.documento h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.documento h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.documento p, .documento li { color: var(--texto); }
.documento__volta { font-size: var(--t-peq); margin-bottom: 1.5rem; }
.documento__volta a { color: var(--azul-700); font-weight: 500; }
.documento__data { font-size: var(--t-peq); color: var(--texto-fraco); margin-bottom: 2rem; }
.documento__lista { display: grid; gap: .5rem; margin: 0 0 1rem; padding-left: 1.35rem; list-style: disc; }
.documento__lista--num { list-style: decimal; }

/* ---------- Página de redirecionamento ---------- */
.simples { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.simples__caixa {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-lg);
  box-shadow: var(--sombra-2); padding: 2.75rem 2rem; text-align: center; max-width: 440px; width: 100%;
}
.simples__marca { font-family: var(--f-titulo); font-weight: 800; font-size: 1.35rem; color: var(--azul-800); }
.simples__zap { color: #25d366; display: grid; place-items: center; margin: 1.5rem 0 .5rem; }
.simples__titulo { font-size: 1.5rem; margin-bottom: .5rem; }
.simples__texto { font-size: var(--t-peq); color: var(--texto-fraco); }
.simples__ref {
  background: var(--azul-050); border: 1px solid var(--azul-100); border-radius: var(--r-md);
  padding: .9rem; font-size: var(--t-micro); color: var(--texto); margin: 1.5rem 0;
}
.simples__ref strong { font-family: var(--f-titulo); font-size: 1.05rem; color: var(--tinta); letter-spacing: .04em; }
.simples__ref span { color: var(--texto-fraco); }
.simples__volta { margin: 1rem 0 0; font-size: var(--t-peq); }
.simples__volta a { color: var(--azul-700); text-decoration: underline; }

/* ---------- Estado inicial ---------- */
.js [data-anima] { opacity: 0; }