/* BodyB Oferta: dobra 2, Oferta (seleção de kits, prêmios, preço e compra).
   Base: Design System BodyB v1.17. Cores comerciais desta dobra aprovadas pelo fundador em 08/11/2026
   (rosa e pêssego oficiais; azul do botão decisivo, Design System v1.9). Fontes por propriedades explícitas. */

:root {
  /* ========================================================================
     2. Cores da Oferta só com a paleta oficial (decisão do fundador, 08/11/2026):
        vermelho substituído por ROSA e amarelo por PÊSSEGO (primitivos OFICIAIS,
        liberados para esta dobra). Todas as cores só clareiam, nunca escurecem.
        Texto sempre grafite. Contraste (WCAG 2.2 AA), grafite sobre:
          verde 8,96:1 · rosa 6,78:1 · pêssego 7,69:1 · rosa 45% 9,45:1 ·
          pêssego 45% 10,03:1 · tons 17% e 25% acima de 10:1.
        Botão decisivo (Comprar, Inscrever...): azul #3483FB (decisão do fundador,
        08/11/2026), texto branco 19 px 700 = texto grande, 3,63:1 (AA exige 3:1).
     ======================================================================== */
  --brand-pink: #FFA7BE;               /* OFICIAL (fundador, 07/11/2026) */
  --brand-peach: #FFBE98;              /* OFICIAL */
  --pink-45: rgba(255,167,190,.45);
  --pink-tint-17: #FFF0F4;
  --peach-45: rgba(255,190,152,.45);
  --peach-tint-17: #FFF4ED;
  --action-blue: #3483FB;              /* botão decisivo (fundador, 08/11/2026) */
  --action-blue-ring: rgba(52,131,251,.35);

  --ease-galeria: cubic-bezier(.65,0,.35,1);
  --ritmo: 3.6s;
}
/* ==========================================================================
   4. Dobra Oferta
   ========================================================================== */
.oferta__grade { width: 100%; max-width: 760px; margin: 0 auto; display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .oferta__grade { max-width: var(--measure-coluna); grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr); gap: 48px; align-items: start; }
  .oferta__produto { position: sticky; top: 96px; }
}
.oferta__grade > * { min-width: 0; }
@media (max-width: 419px) { .faixa .icone-suave { display: none; } .faixa { padding-left: 16px; } .faixa__sub { letter-spacing: .03em; } }
@media (max-width: 639px) { .compra__cabecalho .simbolo { display: none; } }
@media (max-width: 479px) { .premio__estado { letter-spacing: .03em; padding: 3px 7px; } .premio[data-estado="bloqueado"] .premio__estado .ico { display: none; } }
.surge { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.surge.is-visible { opacity: 1; transform: none; }
.surge--2 { transition-delay: .1s; }

.cartao { background: var(--surface-white); border: 1px solid var(--gray-light); border-radius: 16px; }

/* ---------- Faixa frete grátis + cronômetro ---------- */
.faixa { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--green-tint-17); border: 1px solid var(--brand-green); }
.faixa .icone-suave { background: var(--surface-white); }
.faixa .icone-suave { width: 40px; height: 40px; }
.faixa .icone-suave .ico { width: 20px; height: 20px; }
.faixa__texto { flex: 0 1 auto; min-width: 0; text-align: center; }
.faixa__titulo { font-family: var(--font-condensed); font-size: 17px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.faixa__sub { margin-top: 2px; color: var(--text-support); }
.relogio { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--green-45); }
.faixa--entrega { margin-bottom: 0; }
.relogio__valor { font-family: var(--font-condensed); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.relogio__rotulos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: 100%; margin-top: 4px; text-align: center; color: var(--text-support); }
@media (min-width: 640px) {
  .faixa { padding: 14px 18px 14px 14px; gap: 14px; }
  .faixa__titulo { font-size: 19px; }
  .relogio__valor { font-size: 28px; }
}

/* ---------- Galeria ---------- */
.galeria { padding: 10px; }
.galeria__corpo { display: flex; flex-direction: column; gap: 10px; }
.galeria__palco { position: relative; border-radius: var(--radius-12); overflow: hidden; aspect-ratio: 4 / 5; touch-action: pan-y; }
.galeria__trilho { display: flex; height: 100%; transition: transform 1s var(--ease-galeria); will-change: transform; }
.galeria__slide { width: 100%; height: 100%; flex-shrink: 0; }
.galeria__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Espaço de foto pendente (padrão do /elite) */
.foto-pendente { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; text-align: center; background: var(--lilac-20); border: 1.5px dashed var(--lilac-65); border-radius: var(--radius-12); }
.foto-pendente b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--text-support); }
.foto-pendente small { font-family: var(--font-condensed); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--text-support); max-width: 30ch; }
.foto-pendente--mini { gap: 0; padding: 0; border-width: 1px; }
.foto-pendente--mini .simbolo { width: 14px; }
.galeria__selo { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--surface-white); }
.galeria__selo::before { display: none; }
.galeria__selo .ico { width: 14px; height: 14px; fill: var(--brand-peach); stroke: var(--brand-graphite); stroke-width: 1.2; }
.galeria__selo .e { text-transform: lowercase; letter-spacing: 0; color: var(--text-support); }
.seta { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--gray-light); border-radius: 50%; cursor: pointer; background: var(--surface-white); color: var(--brand-graphite); transition: border-color .2s; }
.seta:hover { border-color: var(--brand-gray); }
.seta .ico { width: 20px; height: 20px; }
.seta--ant { left: 12px; } .seta--prox { right: 12px; }
.seta[hidden] { display: none; }
.pontos { position: absolute; left: 50%; bottom: 14px; z-index: 2; translate: -50% 0; display: flex; gap: 6px; }
.ponto { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--brand-gray); cursor: pointer; transition: width .3s, background .3s; }
.ponto::after { content: ""; position: absolute; inset: -12px -5px; }
.ponto[aria-current="true"] { width: 22px; background: var(--brand-graphite); }
.miniaturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mini { padding: 0; aspect-ratio: 1; overflow: hidden; cursor: pointer; border-radius: var(--radius-10); border: 1px solid transparent; background: none; transition: border-color .2s, box-shadow .2s; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini:hover { border-color: var(--brand-gray); }
.mini[aria-current="true"] { border-color: var(--brand-lilac); box-shadow: inset 0 0 0 1px var(--brand-lilac); }
.mini[aria-current="true"] .foto-pendente { border-style: solid; border-color: transparent; background: var(--lilac-45); }
@media (min-width: 640px) {
  .galeria__corpo { flex-direction: row; align-items: flex-start; }
  .miniaturas { order: -1; grid-template-columns: 1fr; width: 72px; flex-shrink: 0; }
  .galeria__palco { flex: 1; min-width: 0; }
}

/* ---------- Coluna de compra ---------- */
.compra { overflow: hidden; scroll-margin-top: 24px; }
.compra__cabecalho { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; text-align: center; background: var(--green-15); border-bottom: 1px solid var(--gray-light); font-family: var(--font-condensed); font-size: 17px; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.compra__cabecalho .simbolo { width: 12px; flex-shrink: 0; background: var(--brand-green); }
.compra__corpo { padding: 22px 16px 20px; display: grid; gap: 12px; }
@media (min-width: 640px) { .compra__corpo { padding: 24px 24px 22px; } }

/* Kits: cartão de escolha do DS (creme, borda cinza estrutural; selecionado com tom e borda dupla na cor da dobra) */
.kits { display: grid; gap: 12px; }
.kit-wrap { position: relative; }
.kit { display: block; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer; background: var(--brand-offwhite); border: 1px solid var(--brand-gray); border-radius: var(--radius-12); transition: background .2s, border-color .2s, box-shadow .2s; }
.kit:hover { border-color: var(--brand-lilac); }
.kit[aria-checked="true"] { background: var(--lilac-20); border-color: var(--brand-lilac); box-shadow: inset 0 0 0 1px var(--brand-lilac); }
.kit__linha { display: flex; align-items: center; gap: 12px; }
.radio { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--brand-gray); background: var(--surface-white); transition: border-color .2s; }
.radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-graphite); transform: scale(0); transition: transform .2s; }
.kit[aria-checked="true"] .radio { border-color: var(--brand-graphite); }
.kit[aria-checked="true"] .radio::after { transform: scale(1); }
.kit__nome { flex: 1; min-width: 0; font-family: var(--font-condensed); font-size: 19px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.kit__preco { font-family: var(--font-condensed); font-size: 19px; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit__preco small { font-family: var(--font-condensed); font-size: 14px; font-weight: 400; line-height: 1; color: var(--text-support); }
.kit__detalhes { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.kit[aria-checked="true"] .kit__detalhes { grid-template-rows: 1fr; }
.kit__dobra { overflow: hidden; min-height: 0; }
.kit__lista { display: grid; gap: 4px; padding: 10px 0 0 32px; }
.kit__item { display: flex; align-items: center; gap: 8px; font-family: var(--font-condensed); font-size: 17px; font-weight: 400; line-height: 1.4; }
.kit__item .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.kit__item b { font-weight: 500; }
.kit__de { color: var(--text-support); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.kit__por { font-weight: 700; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); background: var(--green-45); font-family: var(--font-condensed); font-size: 14px; font-weight: 500; line-height: 1.3; }
.chip .ico { width: 14px; height: 14px; color: var(--brand-graphite); }
/* Etiquetas: pequenas, sobre a borda, como no original */
.etiqueta { position: absolute; top: -9px; right: 14px; z-index: 2; padding: 3px 8px; border-radius: var(--radius-pill); color: var(--brand-graphite); font-family: var(--font-condensed); font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; transform-origin: center; }
.etiqueta--verde { background: var(--brand-green); animation: zoom var(--ritmo) ease-in-out infinite; }
.etiqueta--pessego { background: var(--brand-peach); }

/* Prêmios */
.premios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 4px; }
.premios.entra { animation: entra .3s ease-out both; }
.premio { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 8px 10px; border: 1px solid var(--gray-light); border-radius: var(--radius-12); background: var(--surface-white); cursor: pointer; text-align: center; transition: border-color .25s, box-shadow .25s, background .25s; }
.premio__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-10); }
.premio__foto img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s, opacity .3s; }
.premio__foto .foto-pendente { background: var(--green-15); border-color: var(--green-45); }
.premio__foto .simbolo { background: var(--brand-green); }
.premio__nome { font-family: var(--font-condensed); font-size: 14px; font-weight: 700; line-height: 1.25; min-height: 2.5em; display: grid; place-items: center; }
.premio__estado { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 2; white-space: nowrap; display: inline-flex; align-self: center; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill); font-family: var(--font-condensed); font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; transition: background .25s, color .25s; }
.premio__estado .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.premio[data-estado="gratis"] { border-color: var(--brand-green); }
.premio[data-estado="gratis"] .premio__estado { background: var(--brand-green); color: var(--brand-graphite); }
.premio[data-estado="bloqueado"] { background: var(--brand-offwhite); }
.premio[data-estado="bloqueado"] .premio__foto img, .premio[data-estado="bloqueado"] .premio__foto .foto-pendente { filter: grayscale(1); opacity: .6; }
.premio[data-estado="bloqueado"] .premio__estado { background: var(--brand-peach); color: var(--brand-graphite); }
.premio[data-estado="bloqueado"]:hover { border-color: var(--brand-peach); }
.premio__cadeado { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .25s; }
.premio__cadeado span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-white); border: 1px solid var(--gray-light); }
.premio__cadeado .ico { width: 14px; height: 14px; }
.premio[data-estado="gratis"] .premio__cadeado { opacity: 0; }
.premio:active { transform: scale(.98); }
@media (min-width: 640px) { .premio__nome { font-size: 17px; } }
/* Desbloqueio: um halo suave, uma vez (no lugar de pulsos e enfeites) */
.premio.libera { animation: libera .9s ease-out; }
.premio.libera .premio__estado { animation: estado .45s ease-out; }
.premio__nome { min-height: 2.5em; }

/* Resumo de preço */
/* Resumo de preço nas cores do kit selecionado, com linha tracejada lilás (fundador, 08/11/2026). */
.resumo { padding: 16px 18px; border-radius: var(--radius-12); background: var(--lilac-20); border: 1.5px dashed var(--brand-lilac); }
.resumo__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.resumo__de { font-family: var(--font-condensed); font-size: 17px; font-weight: 400; line-height: 1; color: var(--text-support); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.economia { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--green-45); font-family: var(--font-condensed); font-size: 14px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.economia .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.resumo__cartao { margin-top: 10px; font-family: var(--font-condensed); font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--text-support); }
.resumo__parcela { display: inline-flex; align-items: baseline; gap: 6px; margin: 4px 0 2px -8px; padding: 2px 10px 4px 8px; border-radius: var(--radius-10); background: var(--green-45); font-variant-numeric: tabular-nums; }
.resumo__cartao + .resumo__parcela { margin-top: 6px; }
.resumo__vista { display: block; }
.resumo__parcela .x { font-family: var(--font-condensed); font-size: 24px; font-weight: 700; line-height: 1; }
.resumo__parcela .v { font-family: var(--font-condensed); font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.resumo__vista { margin-top: 2px; font-family: var(--font-condensed); font-size: 17px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.resumo__vista b { font-weight: 700; }

/* CTA */
.cta-wrap { position: relative; isolation: isolate; margin-top: 4px; }
.cta-anel { position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-pill); background: var(--action-blue-ring); transform-origin: center; animation: anel var(--ritmo) ease-in-out infinite; pointer-events: none; }
.cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 14px 24px; border-radius: var(--radius-pill); background: var(--action-blue); color: #fff; text-decoration: none; font-family: var(--font-condensed); font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(0,0,0,.08); animation: zoom var(--ritmo) ease-in-out infinite; transition: scale .15s ease; }
.cta:hover { scale: 1.01; }
.cta:active { scale: .99; }

/* Informações (lista de detalhes do DS) */
.infos { display: grid; gap: 8px; margin-top: 4px; }
.info { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-10); background: var(--green-15); }
.info .icone-suave { background: var(--surface-white); }
.info__titulo { font-family: var(--font-condensed); font-size: 17px; font-weight: 700; line-height: 1.25; }
.info__texto { font-family: var(--font-condensed); font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--text-support); }
.info--hoje { background: var(--peach-tint-17); box-shadow: inset 0 0 0 1px var(--brand-peach); }
.info--hoje .icone-suave { background: var(--peach-45); }
.info--hoje .info__titulo { flex: 1; }
.hoje__relogio { padding: 4px 10px; border-radius: 8px; background: var(--surface-white); border: 1px solid var(--brand-peach); color: var(--brand-graphite); font-family: var(--font-condensed); font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* Garantia: caixa de fechamento do DS (tom claro + barra lateral de 4 px) */
.garantia { display: flex; gap: 12px; margin: 0 16px 16px; padding: 16px 18px; border-radius: 0 var(--radius-12) var(--radius-12) 0; background: var(--green-tint-17); border-left: 4px solid var(--brand-green); }
@media (min-width: 640px) { .garantia { margin: 0 24px 24px; } }
.garantia .icone-suave { background: var(--green-45); }
.garantia h3 { margin: 0; font-family: var(--font-condensed); font-size: 17px; font-weight: 700; line-height: 1.3; }
.garantia p { margin-top: 4px; font-family: var(--font-condensed); font-size: 14px; font-weight: 400; line-height: 1.5; }
.garantia__nota { margin-top: 6px; color: var(--text-support); }

/* ==========================================================================
   5. Movimento (ritmo do original, em versão contida)
   ========================================================================== */
@keyframes zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes anel { 0% { transform: scale(1, 1); opacity: .5; } 50%, 100% { transform: scale(1.12, 1.7); opacity: 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes libera { 0% { box-shadow: 0 0 0 0 rgba(195,233,116,.7); } 100% { box-shadow: 0 0 0 10px rgba(195,233,116,0); } }
@keyframes estado { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cta-anel { display: none; }
  .surge { opacity: 1; transform: none; }
}

/* Símbolo de bolhas oficial (docs/marca/simbolo) */
.simbolo { display: inline-block; width: 26px; aspect-ratio: 90.75 / 164.25; background: var(--brand-lilac); -webkit-mask: url("../marca/bodyb-simbolo-bolhas.svg") center / contain no-repeat; mask: url("../marca/bodyb-simbolo-bolhas.svg") center / contain no-repeat; }
.simbolo--verde { background: var(--brand-green); }
/* Selo (eyebrow) do DS */
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--brand-gray); border-radius: var(--radius-pill); background: var(--brand-offwhite); color: var(--brand-graphite); }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-lilac); }
/* Ícone suave do DS v1.5: círculo no tom claro, traço grafite */
.icone-suave { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--green-45); color: var(--brand-graphite); }
.icone-suave .ico { width: 16px; height: 16px; }