/* PÁGINA B (2026-09-14) — `b.html` (não `index-b`: hífen casa com o link curto /avatar-canal e o avatar vira "index"). Carta de venda em coluna única, escrita pro celular.
   Plano: botica-natural/PLANO-CONVERSAO-2026-09-11.md §7 + testes cegos §5.5/§5.6.
   Usa os tokens de tokens.css e reaproveita de sections.css: ticker, review, faq, sticky-atc, aviso, pop, footer.
   Letra maior que a A (juízes 45+: "letra pequeña"). */

/* ⚠️ TUDO escopado em `.b section` (14/09): na 1ª versão as regras eram `.b h2`/`.b b` e vazavam pro que fica
   FORA das seções — o título do pop-up ficou verde no fundo verde (ilegível), o ticker e o rodapé mudaram de cor.
   Ticker, barra fixa, aviso, pop-up e rodapé têm que ser IDÊNTICOS aos da página A (Marcelo). */
.b { background: #FBF6EC; }
.b section { padding: 40px 18px; color: var(--tinta-3); font-family: var(--f-base); font-size: 17.5px; line-height: 1.62; }
.b .b-in { max-width: 680px; margin: 0 auto; }
.b section h2 { font-family: var(--f-serif); font-weight: 400; color: var(--verde); font-size: 31px; line-height: 1.12; margin-bottom: 14px; }
.b section h2 em { font-style: normal; color: var(--terra); }
.b section p + p { margin-top: 12px; }
.b section strong, .b section b { color: var(--tinta); }
.b-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); margin-bottom: 10px; }
@media (min-width: 700px) { .b section { font-size: 18.5px; padding: 56px 24px; } .b section h2 { font-size: 38px; } }

/* botão */
.b-cta {
  display: block; text-align: center; text-decoration: none; background: var(--cta); color: #fff !important;
  font-weight: 700; font-size: 19px; line-height: 1.25; padding: 18px 16px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .32); animation: cta-latido 1.8s ease-in-out infinite;
}
.b-cta:hover { background: var(--cta-hover); animation-play-state: paused; }
.b-micro { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 9px; }
.b-micro--desk { display: none; }   /* só aparece no computador (02/10) */
.b section .b-micro b { color: var(--verde); }

/* 1 · topo */
.b-topo { background: var(--crema); padding-top: 22px !important; }
.b-topo .b-kicker { margin-bottom: 6px; }
/* o topo é flex (.buybox): sem min-width 0 a frase de 1 linha alarga a coluna e a página inteira corta na direita (14/09 noite) */
.b-topo .b-in { min-width: 0; width: 100%; }
.b-h1 { font-family: var(--f-serif); font-weight: 400; color: var(--verde); font-size: 38px; line-height: 1.04; letter-spacing: -.01em; }
.b-h1 em { font-style: normal; color: var(--terra); display: block; }
.b-produto { margin-top: 12px; font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--tinta); }
.b-foto { margin: 16px -18px 0; }
.b-foto img { display: block; width: 100%; height: auto; }
.b-rating { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 12px; }
.b-rating span:first-child { color: var(--estrella); letter-spacing: 2px; }
.b-lista { list-style: none; display: grid; gap: 8px; margin: 14px 0 16px; }
.b-lista li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.b-lista li::before { content: '✓'; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--cta); color: #fff; font-size: 14px;
  font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.b-regalo { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px dashed var(--terra); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px; font-size: 15px; line-height: 1.35; }
.b-regalo img { width: 46px; height: auto; flex-shrink: 0; }
.b-regalo span { font-size: min(15px, 3.45vw); line-height: 1.3; }  /* 02/10: 2 linhas no celular com '+ 3 bonos sorpresa' (medido 360/390/414) */
@media (min-width: 700px) { .b-h1 { font-size: 54px; } .b-foto { margin: 20px 0 0; } .b-foto img { border-radius: 16px; max-width: 460px; } }

/* 2 · a mesma coisa */
.b-dor { background: #fff; }
.b-dor picture img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 6px 0 16px; }
.b-destaque { background: var(--crema); border-left: 4px solid var(--terra); border-radius: 0 12px 12px 0; padding: 14px 16px; margin-top: 16px; font-weight: 500; }

/* 3 · por que não funcionou */
.b-falhas { background: #F3ECDC; }
.b-cards { display: grid; gap: 12px; margin-top: 8px; }
.b-card { background: #fff; border-radius: 14px; padding: 16px 16px 14px; box-shadow: var(--sombra-card); }
.b-card h3 { font-size: 18px; line-height: 1.3; color: var(--tinta); margin-bottom: 4px; display: flex; gap: 10px; align-items: center; }
.b-card h3 i { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--rojo); color: #fff; font-style: normal; font-size: 15px;
  display: grid; place-items: center; }
.b-card p { font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.b-veredito { margin-top: 20px; font-family: var(--f-serif); font-size: 27px; line-height: 1.2; color: var(--verde); text-align: center; }
.b section .b-veredito em { font-style: normal; color: var(--terra); }

/* 4 · mecanismo */
.b section.b-meca { color: #EFE7D6; }
.b-meca { background: radial-gradient(70% 90% at 50% 20%, #1E5A3F 0%, #17402C 50%, #0C231A 100%); color: #EFE7D6; }
.b section.b-meca h2 { color: #fff; }
.b section.b-meca h2 em { color: var(--estrella); }
.b section.b-meca strong, .b section.b-meca b { color: #fff; }
.b-llaves { display: grid; gap: 12px; margin: 18px 0; counter-reset: llave; }
.b-llave { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 14px 16px 14px 58px; position: relative; }
.b-llave::before { counter-increment: llave; content: counter(llave); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--estrella); color: #0C231A; font-weight: 800; display: grid; place-items: center; }
.b-llave h3 { color: #fff; font-size: 18px; margin-bottom: 2px; }
.b-llave p { font-size: 15.5px; line-height: 1.45; color: #D9D0BD; }
.b-numero { display: flex; align-items: center; gap: 14px; background: rgba(251, 183, 84, .12); border-radius: 14px; padding: 12px 16px; margin: 16px 0 20px; }
.b section .b-numero strong { font-family: var(--f-serif); font-weight: 400; font-size: 46px; line-height: 1; color: var(--estrella); }
.b-numero span { font-size: 16px; line-height: 1.35; }
.b-paginas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.b-paginas figure { text-align: center; }
.b-paginas img { width: 100%; height: auto; display: block; }
.b-paginas figcaption { font-size: 12.5px; line-height: 1.3; margin-top: 6px; color: #D9D0BD; }

/* 5 · o que tem dentro */
.b-dentro { background: #fff; }
.b-secs { display: grid; gap: 10px; margin-top: 10px; }
.b-sec { border: 1px solid #E8DFCB; border-radius: 12px; padding: 12px 14px; }
.b-sec h3 { font-size: 17px; color: var(--verde); display: flex; gap: 10px; align-items: baseline; }
.b-sec h3 span { font-family: var(--f-num); font-size: 13px; font-weight: 700; color: var(--terra); }
.b-sec p { font-size: 15px; line-height: 1.45; color: var(--tinta-2); margin-top: 3px !important; }
@media (min-width: 700px) { .b-secs { grid-template-columns: 1fr 1fr; } }

/* 6 · prova — "No estás solo" é o bloco da página A (classe .reviews de sections.css, sem mexer) + carrossel
   "Lo que nos mandan" com fotos de celular (carousel.js, mesmo contrato do .quotes da A) */
.b .reviews { font-size: 16px; line-height: 1.55; }
.b .reviews b { color: inherit; }
.b-ugc { background: #fff; }
.b-ugc h2 { text-align: center; }
/* o .quotes__car da A reserva 56px de cada lado pras setas — no card com foto isso deixava o slide com 197px */
.b-ugc .quotes__car { padding-inline: 0; --spp: 1.12; }
.b-ugc [data-part="slide"] { padding: 0 6px; }   /* respiro por padding, não gap: o carousel.js calcula o deslize pela largura do slide */
.b-ugc-card { background: #FBF6EC; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-card); height: 100%; }
.b-ugc-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.b-ugc-card blockquote { padding: 12px 14px 4px; font-size: 16px; line-height: 1.45; color: var(--tinta-3); }
.b-ugc-card footer { padding: 0 14px 14px; font-size: 13.5px; color: var(--muted); }
.b-ugc-card footer b { color: var(--verde) !important; }
.b-ugc-card .quote__stars { padding: 12px 14px 0; color: var(--estrella); letter-spacing: 2px; }
@media (min-width: 700px) { .b-ugc .quotes__car { --spp: 2.2; } }

/* 7 · quem conta (uma história por avatar) */
.b-quem { background: var(--crema); }
.b-quem .b-foto-av { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; display: block; margin: 0 auto 14px;
  border: 4px solid #fff; box-shadow: 0 8px 22px rgba(20, 69, 47, .2); }
.b-quem h2 { text-align: center; }
[data-av] { display: none; }
html:not([data-av-ativo]) [data-av="opal"],
html[data-av-ativo="opal"] [data-av="opal"],
html[data-av-ativo="terry"] [data-av="terry"],
html[data-av-ativo="delphine"] [data-av="delphine"] { display: block; }
.b-assina { font-family: var(--f-serif); font-size: 26px; color: var(--verde); margin-top: 14px !important; }

/* 8 · primeira semana */
.b-semana { background: #fff; }
.b-dias { list-style: none; display: grid; gap: 0; margin-top: 8px; border-left: 3px solid var(--cta); padding-left: 18px; }
.b-dias li { position: relative; padding: 0 0 18px; }
.b-dias li::before { content: ''; position: absolute; left: -26px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--cta); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cta); }
.b section .b-dias b { display: block; color: var(--verde); font-size: 18px; }

/* 9 · oferta */
.b-oferta { background: var(--crema); }
.b-caja { background: #fff; border: 2px solid var(--cta); border-radius: 18px; padding: 20px 16px; box-shadow: 0 16px 40px rgba(20, 69, 47, .14); }
.b-caja h2 { text-align: center; }
.b-caja .b-pack { display: block; width: 210px; height: auto; margin: 0 auto 12px; }
.b-itens { list-style: none; display: grid; gap: 0; margin: 6px 0 14px; }
.b-itens li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid #EFE6D3; }
.b-itens li b { font-size: 16.5px; }
.b-itens li small { grid-column: 1; font-size: 14px; line-height: 1.35; color: var(--muted); }
.b-itens li s, .b-itens li .b-gratis { grid-column: 2; grid-row: 1; align-self: start; font-size: 15px; color: var(--muted); }
.b-itens li .b-gratis { color: var(--cta); font-weight: 700; text-decoration: none; }
.b-total { text-align: center; margin: 8px 0 14px; }
.b-total s { color: #C0392B; font-size: 17px; }   /* riscado em vermelho (Marcelo 14/09) */
.b section .b-total strong { display: block; font-family: var(--f-num); font-size: 58px; line-height: 1; color: var(--verde); }
.b-total span { font-size: 14px; color: var(--muted); }
.b-sello { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14.5px; line-height: 1.4; }   /* até 2 linhas (Marcelo 14/09) */
.b-sello img { width: 42px; height: auto; flex-shrink: 0; }

/* 10 · garantia com 2 caminhos */
.b-caminos { background: #fff; }
.b-dos { display: grid; gap: 12px; margin: 10px 0 18px; }
.b-camino { border-radius: 14px; padding: 16px; }
.b-camino h3 { font-size: 18px; margin-bottom: 4px; }
.b-camino--no { background: #F4EFE6; color: var(--muted); }
.b-camino--si { background: color-mix(in srgb, var(--cta) 10%, #fff); border: 2px solid var(--cta); }
.b-camino--si h3 { color: var(--verde); }
@media (min-width: 700px) { .b-dos { grid-template-columns: 1fr 1fr; } }

/* 11 · FAQ (reusa .faq de sections.css) */
.b .faq { background: #FBF6EC; }
.b .faq__q { font-size: 16.5px; }
.b .faq__a { font-size: 16px; line-height: 1.55; }

/* 12 · decisão */
.b-decision { background: radial-gradient(60% 80% at 50% 30%, #1E5A3F 0%, #17402C 45%, #0C231A 100%); color: #EFE7D6; text-align: center; }
.b section.b-decision { color: #EFE7D6; }
.b section.b-decision h2 { color: #fff; }
.b section.b-decision b, .b section.b-decision strong { color: #fff; }   /* a regra geral pintava de preto no fundo verde */
.b-decision .b-micro { color: #CFC5B0; }

/* barra fixa: IGUAL à da A (mesmo <button>, mesmo CSS de sections.css) — na B ele aciona o botão de compra do topo */


/* pilha "5 libros · $145 → $19" colada no 1º botão (14/09 noite) */
.b-pilha { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; font-size: 15.5px; line-height: 1.35; color: var(--tinta-2); }
.b-pilha img { width: 84px; height: auto; flex-shrink: 0; }
.b-pilha s { color: var(--terra); }
.b-pilha strong { font-size: 22px; color: var(--verde); }
.b-pilha small, .b-pilha em, .b-pilha i { font: inherit; font-style: normal; color: inherit; }   /* 02/10: marcação pro cartão do desktop; no celular é invisível */

/* ¿Es para ti? (vindo da A) */
.b section.b-parati { color: #EFE7D6; }   /* fundo verde (Marcelo 14/09 noite) via .verde-premium */
.b section.b-parati h2 { color: #fff; }
.b section.b-parati h2 em { color: var(--estrella); }
.b-parati h2 { text-align: center; }
.b-parati__si, .b-parati__no { border-radius: 14px; padding: 16px 16px 12px; margin-top: 14px; }
.b-parati__si { background: #EEF6EF; border: 1px solid #CFE5D3; }
.b-parati__no { background: #FBEFEA; border: 1px solid #F0D2C6; }
.b-parati h3 { font-size: 18px; margin-bottom: 8px; }
.b-parati__si h3 { color: var(--verde); } .b-parati__no h3 { color: var(--terra); }
.b-parati ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.b-parati li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; color: var(--tinta-2); }
.b-parati__si li::before { content: '✓'; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.b-parati__no li::before { content: '✕'; position: absolute; left: 0; color: var(--terra); font-weight: 700; }
.b-parati__no p { margin-top: 10px !important; font-weight: 600; color: var(--terra); }

/* B curta (14/09 noite, virou a B): "por qué no te funcionó" em 4 linhas + 10 secciones que abrem ao tocar */
.b-card--curto{padding:12px 14px}.b-card--curto h3{margin:0;font-size:17px}
details.b-sec summary{list-style:none;cursor:pointer;position:relative;padding-right:26px}
details.b-sec summary::-webkit-details-marker{display:none}
details.b-sec summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--terra);font-weight:600}
details.b-sec[open] summary::after{content:'\2212'}

/* "Una sola no alcanza. Las tres juntas, sí." numa linha só (Marcelo 14/09) */
.b section .b-umalinha { white-space: nowrap; font-size: clamp(14px, 4.3vw, 17.5px); }
/* "No es la edad. Y ahora ya lo sabes." numa linha (Marcelo 14/09) */
.b section h2.b-umalinha-h2 { white-space: nowrap; font-size: clamp(17px, 5.6vw, 31px); }
@media (max-width: 340px) { .b-rating { font-size: 13px; gap: 6px; } }

/* 24/09 — claims de cura: as 4 dores viram "o que as receitas ajudam a fazer" (não promessa de resultado) */
.b-ayudan { margin: 14px 0 -6px; font-size: 15px; font-weight: 600; color: var(--tinta-2, #444); }
.b-lista--dores { margin-bottom: 8px; }
.b-lista--mais { margin-top: 0; }

/* 24/09 — Marcelo: no computador, estas 3 frases em UMA linha. Só em tela larga (≥ 960px): no celular continuam
   quebrando normal. Sem encolher a letra — a caixa da frase é que alarga pros dois lados (texto centralizado),
   e ainda sobra margem da coluna (680px) até a borda da tela. Lição 14/09: nowrap sem espaço corta a página. */
@media (min-width: 960px) {
  .b section .b-veredito { white-space: nowrap; margin-left: -50px; margin-right: -50px; }   /* precisa ~753px */
  .b-quem h2 { white-space: nowrap; margin-left: -80px; margin-right: -80px; }              /* precisa ~813px */
  .b .pop__box { max-width: 450px; }                                                          /* frase precisa ~385px */
  .b .pop__sub { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   02/10 — DESKTOP (≥ 980px), pedido do Marcelo: "a versão desktop parece uma versão mobile, centralizada no meio;
   a primeira seção tem que aparecer completa no viewport; usar melhor o espaço, mesmo estilo do Receitas da Feira".
   Só CSS, só em tela larga: o celular (que ele aprovou) continua a coluna única de sempre.
   TOPO: 2 colunas (texto · foto), ordem de leitura do Receitas — kicker, título, subtítulo, BOTÃO, micro, estrelas,
   bullets, regalo à esquerda; foto + pilha/preço à direita. Grid por áreas: a ordem do HTML (celular) não muda.
   OFERTA: caixa em 2 colunas (pilha · lista + preço + botão). As demais seções seguem em coluna de leitura (720px).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 980px) {
  .b .b-in { max-width: 720px; }
  /* topo ocupa a dobra inteira (ticker ≈ 40px acima) e centra o conteúdo na altura */
  .b section.b-topo { padding: 24px 40px 32px !important; min-height: calc(100vh - 38px);   /* 38px = altura medida do ticker */ display: flex; align-items: center; justify-content: center; }   /* a 1ª seção cobre a dobra: a 2ª ('¿Te suena?') só aparece rolando (Marcelo 02/10) */
  .b-topo .b-in {
    max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 64px; row-gap: 0;
    align-items: start; align-content: center;
    grid-template-rows: repeat(9, auto) 1fr;   /* a última linha absorve a sobra do cartão de preço (que ocupa 3 linhas): regalo e micro ficam colados nos bullets */
    grid-template-areas:
      "kicker  foto"
      "h1      foto"
      "produto foto"
      "cta     foto"
      "rating  foto"
      "ayudan  foto"
      "dores   foto"
      "mais    pilha"
      "regalo  pilha"
      "micro   pilha";
  }
  .b-topo .b-kicker { grid-area: kicker; margin-bottom: 10px; }
  .b-topo .b-h1 { grid-area: h1; font-size: 46px; line-height: 1.04; }
  .b-topo .b-h1 em { display: inline; }   /* no computador o título corre em 2 linhas, sem forçar quebra depois do ponto */
  .b-topo .b-produto { grid-area: produto; font-size: 20px; max-width: 560px; margin-top: 14px; }
  .b-topo .b-cta { grid-area: cta; margin-top: 22px; max-width: 480px; }
  .b-topo .b-micro { grid-area: micro; text-align: left; margin-top: 10px; }   /* 02/10 (Marcelo): abaixo do 'De regalo hoy' */
  .b-topo .b-rating { grid-area: rating; margin-top: 16px; }
  .b-topo .b-ayudan { grid-area: ayudan; margin-top: 14px; }
  .b-topo .b-lista--dores { grid-area: dores; margin: 10px 0 0; grid-template-columns: 1fr; row-gap: 7px; font-size: 16px; }   /* 02/10 (Marcelo): cada bullet numa linha só; ≥1100px vira 2 colunas × 3 linhas */
  .b-topo .b-lista--mais { grid-area: mais; grid-template-columns: 1fr; row-gap: 7px; margin: 7px 0 0; font-size: 16px; }
  .b-topo .b-lista li { white-space: nowrap; }
  .b-topo .b-regalo { grid-area: regalo; margin: 14px 0 0; padding: 12px 16px; }
  .b-topo .b-foto { grid-area: foto; margin: 0; align-self: start; }
  .b-topo .b-foto img { max-width: none; width: 100%; border-radius: 18px; box-shadow: 0 18px 44px rgba(20, 69, 47, .16); }
  .b-topo .b-pilha {   /* cartão de preço embaixo da foto (Marcelo 02/10: "mais profissional/premium") */
    grid-area: pilha; margin: 20px 0 0; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EE 100%); border-radius: 18px; padding: 20px 24px 20px 24px; border: 1px solid #E6DCC6;
    box-shadow: 0 14px 34px rgba(20, 69, 47, .12); gap: 22px; align-items: center; font-size: 15px;
  }
  .b-topo .b-pilha::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--cta), var(--verde)); }
  .b-topo .b-pilha img { width: 138px; filter: drop-shadow(0 10px 14px rgba(20, 69, 47, .20)); }
  .b-topo .b-pilha span { display: block; line-height: 1.3; }
  .b-topo .b-pilha span::before { content: 'Tu paquete de hoy'; display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); font-weight: 700; margin-bottom: 6px; }
  .b-topo .b-pilha b { font-size: 18px; color: var(--verde); }
  .b-topo .b-pilha .b-pilha__sep { display: inline; color: var(--muted); }
  .b-topo .b-pilha .b-pilha__valor { display: inline; font-size: 15px; color: var(--muted); }
  .b-topo .b-pilha .b-pilha__valor s { color: #C0392B; font-weight: 600; }
  .b-topo .b-pilha .b-pilha__br { display: none; }
  .b-topo .b-pilha .b-pilha__hoy { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); font-weight: 700; margin-top: 12px; }
  .b-topo .b-pilha strong { display: block; font-family: var(--f-num); font-size: 48px; line-height: 1; color: var(--verde); margin-top: 4px; }

  /* oferta: caixa larga, pilha à esquerda, lista/preço/botão à direita */
  .b-oferta .b-in { max-width: 1040px; }
  .b-caja {
    display: grid; grid-template-columns: 380px minmax(0, 1fr); column-gap: 40px; padding: 28px 36px 26px; align-items: start;
    grid-template-areas: "kicker kicker" "h2 h2" "pack itens" "pack total" "pack cta" "pack micro" "sello sello";
  }
  .b-caja .b-kicker { grid-area: kicker; }
  .b-caja h2 { grid-area: h2; }
  .b-caja .b-pack { grid-area: pack; width: 100%; max-width: 400px; margin: 8px 0 0; align-self: center; }
  .b-caja .b-itens { grid-area: itens; margin-top: 0; }
  .b-caja .b-itens li small { white-space: nowrap; }   /* 'Platos, postres y bebidas…' em 1 linha no computador (Marcelo 02/10) */
  .b-caja .b-total { grid-area: total; }
  .b-caja .b-cta { grid-area: cta; }
  .b-caja .b-micro { grid-area: micro; }
  .b-caja .b-micro:not(.b-micro--desk), .b-caja .b-total span { display: none; }   /* no computador a linha de baixo do botão é a .b-micro--desk */
  .b-caja .b-micro--desk { display: block; }
  .b-caja .b-sello { grid-area: sello; justify-content: center; }

  /* ¿Te suena? — título + foto à esquerda, texto à direita, centrados (02/10) */
  .b-dor .b-in { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 48px; align-items: center;
    grid-template-areas: "kicker kicker" "h2 h2" "pic texto"; }   /* 02/10: título numa linha atravessando as 2 colunas; foto maior à esquerda, texto à direita */
  .b section.b-dor h2 { white-space: nowrap; }
  .b-dor .b-in > .b-kicker { grid-area: kicker; }
  .b-dor .b-in > h2 { grid-area: h2; }
  .b-dor .b-in > picture { grid-area: pic; }
  .b-dor picture img { margin: 10px 0 0; }
  .b-dor .b-dor__texto { grid-area: texto; align-self: center; }
  .b-dor .b-dor__texto p + p { margin-top: 14px; }
  .b-dor .b-dor__texto .b-destaque { margin-top: 18px; }

  /* Lo que nos mandan — 4 fotos visíveis no computador (02/10) */
  .b-ugc .b-in { max-width: 1140px; }
  .b-ugc .quotes__car { --spp: 4; }

  /* ¿Es para ti? — título numa linha, SÍ e NO lado a lado (02/10) */
  .b-parati .b-in { max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  .b-parati .b-in > .b-kicker, .b-parati .b-in > h2 { grid-column: 1 / -1; }
  .b section.b-parati h2 { white-space: nowrap; }
  .b-parati__si, .b-parati__no { margin-top: 6px; padding: 20px 22px 16px; height: 100%; }
  .b-parati li { font-size: 16.5px; }

  /* 10 secciones — cada seção numa linha, duas colunas largas (02/10) */
  .b-dentro .b-in { max-width: 1040px; }
  .b-secs { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .b-sec h3 { white-space: nowrap; }

  /* Lo que los videos no te dan — na pegada da 1ª seção: texto à esquerda, as páginas reais à direita (02/10) */
  .b-meca .b-in { max-width: 1200px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 48px; align-items: center;
    grid-template-areas: "kicker ." "h2 num" "intro pag" "llaves pag" "uma pag"; }   /* 02/10: o '83' alinhado com o título; celulares embaixo, centrados com o texto */
  .b section.b-meca h2 { white-space: nowrap; font-size: 36px; align-self: center; margin-bottom: 0; }
  .b-meca .b-in > p:not(.b-umalinha) { margin-top: 14px; }
  .b-meca .b-in > .b-kicker { grid-area: kicker; }
  .b-meca .b-in > h2 { grid-area: h2; }
  .b-meca .b-in > p:not(.b-umalinha) { grid-area: intro; }
  .b-meca .b-llaves { grid-area: llaves; }
  .b-meca .b-umalinha { grid-area: uma; text-align: left; }
  .b-meca .b-numero { grid-area: num; margin: 0; align-self: center; }
  .b-meca .b-paginas { grid-area: pag; gap: 16px; align-self: center; }   /* celulares centralizados com o texto ao lado (Marcelo 02/10) */
  .b-meca .b-paginas img { border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
  .b-meca .b-paginas figcaption { font-size: 13.5px; }
}
@media (min-width: 1280px) {
  .b-topo .b-h1 { font-size: 50px; }
  .b-topo .b-in { column-gap: 72px; }
}

/* 02/10 — telas BAIXAS (notebook 768px de altura): o mesmo layout, com menos ar, pra 1ª seção continuar cabendo inteira.
   Em telas altas (≥ 820px) valem os espaçamentos maiores de cima. */
@media (min-width: 980px) and (max-height: 820px) {
  .b section.b-topo { padding: 16px 40px 22px !important; }
  .b-topo .b-kicker { margin-bottom: 6px; }
  .b-topo .b-h1 { font-size: 44px; }
  .b-topo .b-produto { margin-top: 10px; font-size: 19px; }
  .b-topo .b-cta { margin-top: 14px; }
  .b-topo .b-micro { margin-top: 7px; }
  .b-topo .b-rating { margin-top: 10px; }
  .b-topo .b-ayudan { margin-top: 8px; }
  .b-topo .b-lista--dores { margin-top: 8px; row-gap: 4px; }
  .b-topo .b-lista--mais { margin-top: 4px; row-gap: 4px; }
  .b-topo .b-micro { margin-top: 8px; }
  .b-topo .b-regalo { margin-top: 10px; padding: 10px 14px; }
  .b-topo .b-pilha { margin-top: 14px; padding: 14px 18px; gap: 16px; }
  .b-topo .b-pilha img { width: 112px; }
  .b-topo .b-pilha strong { font-size: 40px; }
  .b-topo .b-pilha .b-pilha__hoy { margin-top: 8px; }
}
@media (min-width: 980px) and (max-width: 1099px) {
  .b-caja .b-itens li small { white-space: normal; }   /* coluna estreita demais pra 1 linha */
}
@media (min-width: 1100px) {   /* bullets do herói: 2 colunas × 3 linhas, cada um numa linha (Marcelo 02/10) */
  .b-topo .b-lista--dores, .b-topo .b-lista--mais { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; font-size: 15px; }   /* colunas iguais nas 2 listas: os checks ficam alinhados em cima e embaixo */
  .b-topo .b-lista li { overflow: visible; }
  .b-topo .b-lista li::before { flex-basis: 22px; height: 22px; font-size: 13px; }
}
@media (min-width: 980px) and (max-height: 740px) {   /* notebooks 720p: um degrau a menos pra 1ª seção caber inteira */
  .b section.b-topo { padding-top: 12px !important; padding-bottom: 16px !important; }
  .b-topo .b-h1 { font-size: 40px; }
  .b-topo .b-produto { font-size: 18px; margin-top: 8px; }
  .b-topo .b-cta { padding: 15px 16px; margin-top: 12px; }
  .b-topo .b-rating { margin-top: 8px; }
  .b-topo .b-lista--dores, .b-topo .b-lista--mais { row-gap: 3px; }
  .b-topo .b-regalo { padding: 8px 14px; margin-top: 8px; }
  .b-topo .b-pilha { padding: 12px 16px; }
  .b-topo .b-pilha strong { font-size: 36px; }
}

/* 02/10 (Marcelo) — CELULAR: "¿Es para ti? Seamos claros." em 1 linha (fonte fluida, medida 360/390/414) e
   "No era el remedio. Te faltaba la cucharada justa, a la hora justa." em 2 linhas (1 linha pediria 11px — ilegível). */
@media (max-width: 979px) {
  .b section.b-parati h2 { white-space: nowrap; font-size: min(31px, 7.2vw); }
  .b section .b-veredito { font-size: min(27px, 4.8vw); line-height: 1.25; }
}