/* =========================================================================
   Bambini | LP campanha Panettones 2026
   Paleta: extraída do logotipo vetorial oficial (bambini-logo.svg).
     laranja  #F57215   amarelo  #FDD205   highlight  #FDEB96
   O manual de marca declara #d57c30 / #f7e939 na página "Paleta De Cores",
   valores que NÃO batem com a arte do logo. A LP segue a arte.

   Sistema de raio (documentado, ver skill 4.4):
     botões e chips  = pílula (999px)
     cards e mídia   = 20px
     campos e blocos = 12px
   ========================================================================= */

:root {
  --bg:          #FFFFFF;
  --bg-alt:      #FFF6EE;
  --surface:     #FFFFFF;
  --plate:       #FFFFFF;   /* fundo das fotos de produto, igual nos 2 modos */
  --ink:         #1E1C1A;
  --ink-2:       #57514B;
  --ink-3:       #8A837C;
  --line:        #F0E2D5;
  --accent:      #F57215;
  --accent-deep: #C85406;
  --accent-soft: #FFF1E4;
  --yellow:      #FDD205;
  --on-accent:   #1E1C1A;   /* texto sobre laranja: escuro (WCAG AA 5.9:1) */
  --shadow:      0 1px 2px rgba(58,38,18,.05), 0 12px 32px -12px rgba(58,38,18,.16);
  --shadow-lift: 0 2px 4px rgba(58,38,18,.06), 0 22px 48px -16px rgba(58,38,18,.26);

  --r-card: 20px;
  --r-box: 12px;
  --wrap: 1220px;
  --ease: cubic-bezier(.16,1,.3,1);

  color-scheme: light only;

  --f-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
@media (max-width: 700px) { .wrap { width: calc(100% - 32px); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 16px; }

:where(a, button):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  padding: 15px 30px; border-radius: 999px;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 10px 24px -12px rgba(245,114,21,.9);
}
/* Só o CTA do menu sai em branco, a pedido do cliente. Branco sobre o laranja
   #F57215 dá 2,9:1 e não passa em WCAG AA — o resto dos botões primários segue
   com texto escuro (5,9:1), que é a regra da marca. */
.nav__cta.btn--primary { color: #FFFFFF; }
.nav__cta.btn--primary:hover { color: var(--on-accent); }
.btn--primary:hover { background: var(--yellow); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--sm { padding: 11px 22px; font-size: .95rem; }
.btn--lg { padding: 18px 40px; font-size: 1.08rem; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  /* O fio de baixo é box-shadow, não border: border somaria 1px à altura do
     nav (77px) e a margem negativa do hero, que é -76px, deixaria escapar uma
     linha do fundo branco no topo da página. Sombra não ocupa layout. */
  box-shadow: inset 0 -1px 0 var(--line);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}

/* Sobre o hero o menu flutua na imagem: fundo e borda somem, tipografia
   vira clara. Ao rolar para fora do hero o JS tira .is-over e ele volta
   ao branco translúcido de sempre. */
.nav--over.is-over {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav--over.is-over .nav__links a { color: rgba(255,255,255,.9); }
.nav--over.is-over .nav__links a:hover { color: #FFFFFF; }
.nav--over.is-over .nav__burger span { background: #FFFFFF; }
.nav--over.is-over .nav__brand img { filter: drop-shadow(0 2px 10px rgba(20,10,4,.5)); }
.nav__inner {
  height: 76px;
  display: flex; align-items: center; gap: 28px;
}
.nav__brand { flex-shrink: 0; }
.nav__brand img { height: 46px; width: auto; }

.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a {
  font-family: var(--f-display); font-weight: 500; font-size: .96rem;
  color: var(--ink-2); text-decoration: none;
  transition: color .18s var(--ease);
}
.nav__links a:hover { color: var(--accent-deep); }

.nav__burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 11px;
  background: none; border: 0; cursor: pointer;
}
.nav__burger span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__burger span + span { margin-top: 5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile { display: none; }

@media (max-width: 940px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__mobile {
    display: grid; gap: 4px; padding: 12px 20px 26px;
    border-top: 1px solid var(--line); background: var(--bg);
  }
  .nav__mobile[hidden] { display: none; }
  .nav__mobile a:not(.btn) {
    font-family: var(--f-display); font-weight: 500; font-size: 1.05rem;
    padding: 13px 4px; text-decoration: none; border-bottom: 1px solid var(--line);
  }
  .nav__mobile .btn { margin-top: 16px; }
}

/* ------------------------------------------------------------------ hero */
/* Full-bleed: a imagem começa no topo absoluto da página e o header flutua
   por cima dela (margem negativa igual à altura do nav). */
.hero {
  position: relative; isolation: isolate;
  margin-top: -76px;
  /* Tela cheia: some a altura do nav, que o hero cobre com a margem negativa.
     svh no lugar de vh porque no celular vh conta a barra do navegador como
     se ela nunca aparecesse, e o banner nasceria mais alto que a tela. */
  min-height: calc(100vh + 76px);
  min-height: calc(100svh + 76px);
  display: flex; align-items: center;
  padding: 150px 0 120px;
  overflow: hidden;
}
@media (max-width: 700px) { .hero { padding: 120px 0 96px; } }

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* Scrim em tom quente da marca (nunca preto puro): escurece a esquerda o
   suficiente para o texto branco e deixa o produto respirar à direita. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(94deg, rgba(46,22,6,.90) 0%, rgba(46,22,6,.74) 38%,
                           rgba(46,22,6,.34) 66%, rgba(46,22,6,.12) 100%),
    linear-gradient(180deg, rgba(30,14,4,.42) 0%, rgba(30,14,4,0) 26%);
}
@media (max-width: 700px) {
  .hero::after {
    background:
      linear-gradient(180deg, rgba(30,14,4,.55) 0%, rgba(46,22,6,.62) 42%, rgba(46,22,6,.90) 100%);
  }
}

.hero__inner { position: relative; }

.hero__copy { max-width: 940px; color: #FFFFFF; }
@media (max-width: 700px) { .hero__copy { max-width: none; } }

/* A quebra manual só existe no desktop, onde ela produz duas linhas
   equilibradas. No celular quem decide é o text-wrap: balance. */
.quebra-desk { display: none; }
@media (min-width: 901px) { .quebra-desk { display: inline; } }

.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.7rem);
  font-weight: 800; letter-spacing: -.036em; color: #FFFFFF;
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(24,10,2,.45);
}
/* "mais especial" é a promessa da campanha: sai no amarelo do swoosh do logo,
   a mesma cor que marca preço e desconto no resto da página. */
.hero h1 em { font-style: normal; color: var(--yellow); }

/* Os dois apoios carregam a informação que decide a compra (desde 1974,
   condições exclusivas). Ficam num degrau bem visível abaixo do h1: corpo
   grande, branco cheio e sombra mais fechada, para não sumirem na foto. */
.hero__sub {
  margin-top: 30px; max-width: 30ch; text-wrap: balance;
  font-size: clamp(1.22rem, 2.2vw, 1.72rem); font-weight: 600; line-height: 1.32;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(24,10,2,.62);
}
/* Segundo apoio: mesma família, um degrau abaixo. É a linha de ação
   ("escolha e garanta"), não a de contexto — cola no primeiro apoio. */
.hero__sub--2 {
  margin-top: 14px; max-width: 32ch;
  font-size: clamp(1.08rem, 1.85vw, 1.42rem); font-weight: 500; line-height: 1.36;
  color: rgba(255,255,255,.94);
}
@media (max-width: 700px) {
  .hero__sub { max-width: 26ch; }
  .hero__sub--2 { max-width: 28ch; }
}

/* CTA do hero: laranja da marca com texto branco, mesma exceção aberta para o
   CTA do menu a pedido do cliente (branco sobre #F57215 dá 2,9:1 e não passa
   em WCAG AA; o padrão da marca continua sendo texto escuro, 5,9:1).
   No hover o fundo vira amarelo, onde branco cai para 1,5:1 e some — por isso
   o texto volta ao escuro junto com a troca de fundo, como no menu.
   A sombra é mais fechada que a dos botões em fundo claro, para o laranja
   destacar do scrim da foto. */
.hero__cta {
  margin-top: 34px;
  color: #FFFFFF;
  box-shadow: 0 14px 34px -14px rgba(20,8,2,.85);
}
.hero__cta:hover { color: var(--on-accent); }
@media (max-width: 700px) {
  .hero__cta { margin-top: 28px; }
}

/* ------------------------------------------------- régua de antecipação */
/* Escala plana: fio horizontal dividido em quatro, número grande e período.
   Sem caixa, sem sombra, sem vidro — a vitrine de produtos logo abaixo é toda
   em card, e repetir a gramática aqui faria as duas seções brigarem. */
.ladder { background: var(--bg); padding: 96px 0; }
@media (max-width: 700px) { .ladder { padding: 64px 0; } }

.ladder__head { max-width: 62ch; }
.ladder h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); font-weight: 800; }

.escala {
  list-style: none; padding: 0; margin: 46px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.step {
  padding: 30px 28px 30px;
  border-left: 1px solid var(--line);
  transition: opacity .3s var(--ease);
}
.step:first-child { border-left: 0; padding-left: 0; }

.step__pct {
  display: block;
  font-family: var(--f-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); letter-spacing: -.04em;
  color: var(--accent);
}
.step__when { display: block; margin-top: 10px; font-size: .98rem; color: var(--ink-2); }
/* Quando o pedido é retirado. A escala vendia só o desconto, e o cliente ficava
   sem saber quando leva o produto (pedido da Sueli em 09/09/2026). Vem em
   caixa alta pequena e no tom fechado do laranja: #C85406 reprova em AA nesse
   tamanho, #A8450A resolve — mesma regra dos outros rótulos pequenos. */
.step__retirada {
  display: block; margin-top: 7px;
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #A8450A;
}
.step.is-passou .step__retirada { color: var(--ink-3); }
.step__tag {
  display: inline-block; margin-top: 14px;
  font-family: var(--f-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--yellow); color: var(--on-accent);
  padding: 5px 11px; border-radius: 999px;
}

/* Janela vigente hoje: o pedaço de fio daquela coluna acende em laranja. */
.step.is-agora { box-shadow: inset 0 3px 0 var(--accent); }
.step.is-agora .step__pct { color: var(--accent-deep); }
.step.is-agora .step__when { color: var(--ink); font-weight: 600; }
/* Janelas já encerradas ficam apagadas para reforçar a urgência. */
.step.is-passou { opacity: .4; }

/* No celular a escala vira lista: número à esquerda, período à direita. Quatro
   colunas viravam números ilegíveis e 2x2 quebrava a leitura de cima para baixo
   da escala, que é o argumento da seção. */
@media (max-width: 700px) {
  .escala { grid-template-columns: 1fr; margin-top: 32px; border-top: 0; }
  .step {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
    padding: 15px 0; border-left: 0; border-bottom: 1px solid var(--line);
  }
  .step:first-child { border-top: 1px solid var(--line); }
  .step__pct { font-size: 2.15rem; min-width: 3.2ch; }
  .step__when { margin-top: 0; }
  /* Na lista do celular a retirada não cabe na mesma linha do período: vai para
     a linha de baixo, largura inteira, depois do badge. */
  .step__tag { margin-top: 0; margin-left: auto; order: 2; }
  .step__retirada { order: 3; flex-basis: 100%; margin-top: 4px; }
  .step.is-agora { box-shadow: inset 3px 0 0 var(--accent); padding-left: 13px; }
}

/* A condição dos Pãonettones vem DEPOIS da escala, nunca antes: lida antes,
   o "5% fixo" ancora a leitura no menor número e apaga a vantagem de até 15%
   dos Panettones (pedido do cliente em 31/08/2026). */
.ladder__apoio {
  margin-top: 34px; font-size: 1.04rem;
  color: var(--ink-2); max-width: 76ch;
}

.ladder__foot {
  margin-top: 12px; font-size: .95rem;
  color: var(--ink-3); max-width: 76ch;
}

/* ------------------------------------------------- títulos de seção */
.sec__title {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem); font-weight: 800;
}
.sec__lead {
  margin-top: 14px; max-width: 58ch; color: var(--ink-2); font-size: 1.05rem;
}

/* ------------------------------------------------------------- a linha */
/* Vitrine em painel escuro (referência enviada pelo cliente em 25/08). As
   fotos são retratos de estúdio em fundo claro; sem tratamento elas ficariam
   como um retângulo branco colado dentro do card. Por isso a moldura carrega
   uma vinheta que dissolve a foto no fundo do card, e o texto sobe por cima
   dessa dissolução. Tokens locais: a seção é a única banda escura da página. */
.linha {
  --vitrine-card:  #191310;   /* escura da paleta da marca */
  --vitrine-ink:   #F7EFE5;   /* vale dentro do card, não na banda */
  --vitrine-ink-2: rgba(247,239,229,.74);
  --vitrine-line:  rgba(247,239,229,.11);
  background: var(--bg-alt);
  padding: 104px 0;
}
@media (max-width: 700px) { .linha { padding: 68px 0; } }

.linha__head { text-align: center; max-width: 64ch; margin: 0 auto; }
.linha .sec__lead { margin-left: auto; margin-right: auto; }

/* Duas famílias, dois blocos: Panettones (a linha da escala de desconto) e
   Pãonettones + Duo (5% fixo). Misturadas num grid só, o visitante não tinha
   como saber a qual regra cada card obedece. */
.linha__grupo {
  margin-top: 56px; text-align: center;
  font-family: var(--f-display); font-size: .82rem; font-weight: 700;
  /* #A8450A, não --accent-deep: em caixa alta pequena o #C85406 dá 4,2:1
     sobre este creme e reprova em AA. Regra já documentada em notes.md. */
  letter-spacing: .18em; text-transform: uppercase; color: #A8450A;
}
@media (max-width: 620px) { .linha__grupo { margin-top: 40px; } }

/* 2-up e centralizado, não 3-up: com 2 e 4 cards, o grid de três deixaria
   uma coluna órfã em cada bloco. A largura máxima mantém o card no mesmo
   tamanho que tinha no grid de três. */
.grid-linha {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
  max-width: 840px; margin-inline: auto;
}
@media (max-width: 620px) {
  .grid-linha { grid-template-columns: 1fr; gap: 16px; }
}

.card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--r-card);
  background: var(--vitrine-card);
  border: 1px solid var(--vitrine-line);
  text-decoration: none; color: var(--vitrine-ink); text-align: center;
  box-shadow: 0 18px 40px -20px rgba(58,38,18,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(253,210,5,.36);
  box-shadow: 0 30px 56px -22px rgba(58,38,18,.55);
}
.card:active { transform: translateY(-2px) scale(.995); }

.card__media { position: relative; display: block; overflow: hidden; }
.card__bg {
  /* height:auto anula o atributo height= do HTML, que é quem manda enquanto
     a altura for auto — sem isso o aspect-ratio nunca entra e o card estica. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  filter: saturate(1.06) contrast(1.03) brightness(.94);
  transition: transform .7s var(--ease);
}
.card:hover .card__bg { transform: scale(1.05); }

/* A dissolução: degradê vertical até a cor do card embaixo, vinheta radial
   nas bordas. É o que faz a foto clara assentar no painel escuro. */
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(25,19,16,.30) 0%, rgba(25,19,16,0) 22%,
                            rgba(25,19,16,.10) 68%, var(--vitrine-card) 100%),
    radial-gradient(126% 84% at 50% 42%, rgba(25,19,16,0) 46%, rgba(25,19,16,.66) 100%);
}

/* Sobe sobre o fim da dissolução para o nome ficar colado no produto. */
.card__body {
  position: relative; margin-top: -54px;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px 26px;
}

/* A categoria é o destaque do card: quem organiza a leitura da vitrine é
   Panettone / Pãonettone / Duo, não o sabor. Por isso ela vem em corpo de
   título, e o sabor desce para linha de apoio. Tracking cai de .18em para
   .06em porque, no corpo maior, o espacejamento largo alargaria demais
   "DUO PÃONETTONE" dentro dos ~360px úteis do card. */
.card__kicker {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.12rem, 1.6vw, 1.34rem); line-height: 1.14;
  letter-spacing: .06em; text-transform: uppercase; color: var(--yellow);
  text-wrap: balance;
}
.card__name {
  margin-top: 6px;
  font-family: var(--f-display); font-weight: 700;
  font-size: .96rem; line-height: 1.2;
  letter-spacing: 0; text-wrap: balance;
}
.card__meta { margin-top: 4px; font-size: .88rem; color: var(--vitrine-ink-2); }

/* Pedido do cliente em 16/09/2026: a regra das 24 unidades já vivia no bloco
   de condições, no fim da página, mas quem entra pela vitrine escolhia sabor
   sem nunca chegar lá. Repetida em cada card, em corpo menor e opacidade
   reduzida, para informar sem competir com nome e CTA. */
.card__nota {
  margin-top: 10px; max-width: 26ch;
  font-size: .76rem; line-height: 1.35; text-align: center;
  color: var(--vitrine-ink-2); opacity: .82; text-wrap: balance;
}

/* A vitrine não tem preço. O "a partir de" saiu em 10/09/2026, a pedido do
   cliente: o card lista dois pesos e o valor era o do mais barato, o que fazia
   o visitante ler o preço de 400 g pensando no de 1 kg. Preço agora vive num
   lugar só, a tabela, onde peso e valor estão na mesma linha. */
.card__cta {
  margin-top: 20px;
  font-family: var(--f-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--vitrine-ink); border: 1.5px solid rgba(247,239,229,.36);
  padding: 9px 22px; border-radius: 999px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.card:hover .card__cta { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Nota dos cremes do Duo. Painel branco sobre a banda creme, na mesma largura
   do grid de cards para não abrir uma coluna nova de leitura. Fica FORA dos
   cards de propósito: o card é um link para o WhatsApp, e texto explicativo
   dentro dele viraria clique perdido em quem só queria entender o sabor. */
.cremes {
  max-width: 840px; margin: 30px auto 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow);
}
.cremes__titulo {
  font-family: var(--f-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #A8450A;
  margin: 0;
}
.cremes__lista {
  margin: 20px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px;
}
@media (max-width: 620px) { .cremes__lista { grid-template-columns: 1fr; gap: 18px; } }
.cremes__lista dt {
  font-family: var(--f-display); font-weight: 700; font-size: 1.06rem;
  color: var(--ink);
}
.cremes__lista dd { margin: 6px 0 0; font-size: .98rem; line-height: 1.5; color: var(--ink-2); }
.cremes__nota {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-2);
}

/* -------------------------------------------------------------- preços */
.precos { background: var(--bg-alt); padding: 96px 0; }
@media (max-width: 700px) { .precos { padding: 64px 0; } }

.segmented {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-top: 34px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; max-width: 640px;
}
@media (max-width: 560px) { .segmented { border-radius: var(--r-box); grid-template-columns: repeat(2, 1fr); } }

.segmented__opt {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 11px 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  font-family: var(--f-display); font-weight: 600; font-size: .93rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
@media (max-width: 560px) { .segmented__opt { border-radius: 8px; } }
.segmented__opt span { font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.segmented__opt:hover { background: var(--accent-soft); }
.segmented__opt.is-active { background: var(--accent); color: var(--on-accent); }
.segmented__opt.is-active span { color: var(--on-accent); opacity: .72; }

/* Responde, junto do seletor, "e quando eu retiro?" — a pergunta que vem logo
   depois do preço. O JS reescreve conforme o mês; o HTML já nasce com o texto
   da janela de setembro, então sem JS a informação continua na tela. */
.precos__retirada {
  margin-top: 16px; max-width: 640px;
  font-size: 1rem; color: var(--ink-2);
}
.precos__retirada strong { color: var(--ink); font-weight: 700; }

.tabela-bloco { margin-top: 46px; }
.tabela-bloco__title { font-size: 1.32rem; font-weight: 700; }
.tabela-bloco__nota { margin-top: 6px; color: var(--ink-3); font-size: .95rem; }

.tabela-scroll {
  margin-top: 18px; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.tabela { width: 100%; border-collapse: collapse; min-width: 720px; }
.tabela th, .tabela td { padding: 14px 22px; text-align: left; }
.tabela thead th {
  font-family: var(--f-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.tabela tbody th {
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
}

/* Cabeçalho agrupado sobre as colunas de preço. O cliente notou que "Simples"
   e "Luxo" sozinhos não diziam que se tratava da embalagem (03/09/2026). No
   celular o thead inteiro desaparece e quem cumpre esse papel é o bloco
   "Escolha sua embalagem" abaixo das tabelas. */
.tabela__grupo {
  text-align: center !important; border-bottom: 0 !important;
  padding-bottom: 0 !important; color: var(--ink-2) !important;
}
/* "Embalagem" é centralizado na CAIXA das duas colunas, mas "Simples" e "Luxo"
   eram alinhados à esquerda e os preços não enchem a coluna: o peso visual das
   duas ficava na metade esquerda e o rótulo do grupo parecia empurrado para a
   direita, quase colado no "Luxo". Centralizar as duas colunas de preço põe
   cada rótulo no centro da sua coluna, e o "Embalagem" cai exatamente no meio
   dos dois. No celular o thead some e o `.de`/`.por` já vão para a direita,
   dentro do card — estas regras não alcançam lá. */
.tabela thead tr + tr th:nth-child(3),
.tabela thead tr + tr th:nth-child(4),
.tabela td[data-rot="Simples"],
.tabela td[data-rot="Luxo"] { text-align: center; }
.tabela__vazio { padding: 0 !important; border-bottom: 0; }

/* Foto do produto na linha. São os MESMOS arquivos da vitrine acima, servidos
   pela mesma URL: o navegador reaproveita o cache e a tabela não pesa nada a
   mais. width/height vêm do CSS de propósito — aqui o atributo height= do
   HTML seria o que manda, e a foto sairia deformada. */
.prod { display: flex; align-items: center; gap: 20px; }
.prod__foto {
  width: 132px; height: 99px; flex: none;     /* 4:3, o mesmo enquadramento da
     vitrine — recortar em quadrado cortava o produto e sobrava embalagem */
  border-radius: 14px; object-fit: cover;
  background: var(--accent-soft);
  box-shadow: 0 10px 24px -12px rgba(58,38,18,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tabela tbody tr:hover .prod__foto {
  transform: scale(1.04);
  box-shadow: 0 16px 32px -12px rgba(58,38,18,.55);
}
.prod__nome { min-width: 0; }
.tabela tbody td { color: var(--ink-2); }
.tabela tbody tr + tr th, .tabela tbody tr + tr td { border-top: 1px solid var(--line); }
.tabela tbody tr:hover { background: var(--accent-soft); }

.de {
  display: block; font-size: .86rem; color: var(--ink-3);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.por {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: 1.18rem; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.por.is-correndo { color: var(--accent-deep); }

.is-vazio { color: var(--ink-3); font-size: .9rem; font-style: italic; }

/* No mobile a tabela vira card por produto: os preços são o conteúdo mais
   importante da página e não podem depender de scroll horizontal. */
@media (max-width: 700px) {
  .tabela-scroll {
    overflow: visible; background: transparent;
    border: 0; border-radius: 0;
  }
  .tabela { min-width: 0; }
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela thead { display: none; }

  .tabela tbody tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-card); padding: 20px 22px; margin-bottom: 12px;
  }
  .tabela tbody tr:hover { background: var(--surface); }
  .tabela tbody tr + tr th, .tabela tbody tr + tr td { border-top: 0; }
  .tabela tbody th { padding: 0; font-size: 1.08rem; line-height: 1.3; }
  /* No card do celular a foto é a capa: largura inteira, acima do nome. */
  .prod { display: block; }
  .prod__foto {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    border-radius: var(--r-box); margin-bottom: 14px;
  }
  .tabela tbody tr:hover .prod__foto { transform: none; }
  .tabela tbody td { padding: 0; }

  .tabela td[data-rot="Peso"] { margin-top: 3px; color: var(--ink-3); font-size: .93rem; }

  .tabela td[data-rot="Simples"], .tabela td[data-rot="Luxo"] {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px;
    align-items: baseline;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .tabela td[data-rot="Simples"]::before, .tabela td[data-rot="Luxo"]::before {
    content: attr(data-rot); grid-row: span 2; align-self: center;
    font-family: var(--f-display); font-size: .76rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  }
  .tabela td[data-rot="Simples"] .de, .tabela td[data-rot="Luxo"] .de,
  .tabela td[data-rot="Simples"] .por, .tabela td[data-rot="Luxo"] .por { text-align: right; }
  .tabela td.is-vazio { display: flex; justify-content: space-between; align-items: baseline; }
  .tabela td.is-vazio::before {
    content: attr(data-rot);
    font-family: var(--f-display); font-size: .76rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-style: normal;
  }
}

.precos__legenda {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
@media (max-width: 620px) { .precos__legenda { grid-template-columns: 1fr; } }
.precos__legenda > div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: 24px 26px;
}
.precos__legenda h4 { font-size: 1.06rem; font-weight: 700; }
.precos__legenda p { margin-top: 8px; color: var(--ink-2); font-size: .98rem; }

/* --------------------------------------------------- como encomendar */
/* Cor sólida no lugar da foto de fundo (pedido do cliente em 31/08/2026):
   é a seção mais densa em texto da página — três passos mais três blocos de
   regra — e a foto disputava com a leitura. O tom é o mesmo #191310 dos cards
   da vitrine, então a página tem uma só banda escura de marca, não duas.
   Sem foto, o contraste deixa de depender de véu: branco sobre #191310 dá
   18,4:1 e o amarelo da marca, 12,6:1 — ambos folgados em AA. */
.encomendar {
  background: #191310;
  padding: clamp(76px, 9vw, 120px) 0;
  color: #FFFFFF;
}

.encomendar .sec__title { color: #FFFFFF; }
.encomendar .sec__lead { color: #FFFFFF; }

/* Trilha de passos: ícone em círculo vazado, ligado ao próximo por fio
   tracejado, e o texto embaixo. O tracejado é ::after do próprio item e
   avança 30 px (a gap do grid) até encostar na coluna seguinte — some no
   último item, que não liga em nada. */
.passos {
  list-style: none; padding: 0; margin: 46px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}

.passos li { position: relative; padding-top: 92px; }

.passo__ico {
  position: absolute; top: 0; left: 0;
  width: 62px; height: 62px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(253,235,150,.78); color: #FDEB96;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.passo__ico svg { width: 26px; height: 26px; }

.passos li:not(:last-child)::after {
  content: ""; position: absolute;
  top: 31px; left: 78px; right: -30px;
  border-top: 1.5px dashed rgba(253,235,150,.5);
}

.passos h3 { font-size: 1.28rem; font-weight: 700; color: #FFFFFF; }
.passos p { margin-top: 10px; color: #FFFFFF; font-size: 1rem; }

/* Empilhado, o fio vira vertical e continua ligando um passo ao outro. */
@media (max-width: 860px) {
  .passos { grid-template-columns: 1fr; gap: 34px; }
  .passos li { padding-top: 0; padding-left: 86px; min-height: 62px; }
  .passos li:not(:last-child)::after {
    top: 74px; left: 31px; right: auto; bottom: -34px;
    border-top: 0; border-left: 1.5px dashed rgba(253,235,150,.5);
  }
}

.regras {
  margin-top: 60px; padding-top: 42px; border-top: 1px solid rgba(255,255,255,.24);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
}
@media (max-width: 860px) { .regras { grid-template-columns: 1fr; gap: 28px; } }
/* Título de verdade, não rótulo: o cliente passou a tratar estes três como
   texto principal ("Um pedido para cada experiência"), e caixa alta com
   entreletra achataria a frase. O amarelo, que sobre o véu antigo dava 3,4:1
   e estava vetado, passa com folga sobre o sólido #191310 (12,6:1). */
.regras h3 {
  font-family: var(--f-display); font-size: 1.14rem; font-weight: 700;
  letter-spacing: -.018em; line-height: 1.2; color: var(--yellow);
}
.regras p { margin-top: 10px; color: #FFFFFF; font-size: .99rem; }

/* ---------------------------------------------------------- propósito */
.proposito {
  position: relative; isolation: isolate;
  padding: clamp(84px, 12vw, 150px) 0;
  overflow: hidden;
}
.proposito__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Mesmo véu de "Como encomendar", porém mais leve: é a última seção antes do
   fechamento e não precisa do mesmo peso. Pode ser mais claro sem risco
   porque aqui o texto vive no painel branco — quem responde pelo contraste é
   o painel, e clarear o véu só clareia o painel translúcido junto. */
.proposito::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,8,3,.46) 0%, rgba(14,8,3,.38) 50%, rgba(14,8,3,.46) 100%);
}
.proposito__inner {
  max-width: 58ch; color: var(--ink);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-card);
  padding: clamp(30px, 4vw, 46px);
  box-shadow: 0 26px 56px -26px rgba(58,26,4,.4);
}
/* Um degrau menor que antes: a frase nova tem o dobro de caracteres da que
   substituiu e, no corpo anterior, ocupava cinco linhas dentro do painel. */
.proposito__quote {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem); line-height: 1.18;
  letter-spacing: -.026em;
  color: var(--accent-deep);
}
.proposito__body {
  margin-top: 20px; font-size: clamp(1.02rem, 1.6vw, 1.14rem);
  color: var(--ink-2);
}
/* A linha das mantenedoras é lastro institucional, não argumento: fica um
   passo atrás do corpo — pelo corpo menor, não pela cor. Em --ink-3 daria
   3,7:1 sobre o painel e reprovaria em AA. */
.proposito__nota {
  margin-top: 18px; font-size: .96rem; color: var(--ink-2);
}
/* Lista das instituições apoiadas. Marcador em laranja da marca, feito com
   ::marker, para não depender de caractere de texto. Duas colunas a partir de
   quatro itens não valem a pena: a lista vai crescer e o painel tem 58ch. */
.proposito__lista {
  margin: 12px 0 0; padding-left: 1.2em;
  font-size: clamp(1.02rem, 1.6vw, 1.14rem); color: var(--ink-2);
}
.proposito__lista li { margin-top: 5px; }
.proposito__lista li::marker { color: var(--accent-deep); }

/* --------------------------------------------------------- empresas */
/* Branco puro entre a banda creme dos preços e a fotografia do propósito: a
   página alterna as bandas, e uma terceira seção creme seguida faria as três
   virarem um bloco só. Os seis itens são texto corrido em duas colunas, sem
   card nem ícone — a vitrine já é a seção de cards da página, e repetir a
   gramática aqui colocaria as duas em concorrência. */
.empresas { background: var(--bg); padding: 96px 0; }
@media (max-width: 700px) { .empresas { padding: 64px 0; } }

/* Título e descrição à esquerda, imagem à direita. A coluna de texto fica
   menor que a da imagem (1fr : 1.05fr) porque o h2 tem só sete palavras e uma
   coluna larga demais deixaria a linha do lead com mais de 75 caracteres. */
.empresas__topo {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .empresas__topo { grid-template-columns: 1fr; gap: 30px; } }

.empresas__head { max-width: 62ch; }
.empresas__head .sec__lead { margin-top: 14px; }

.empresas__figura { margin: 0; }
.empresas__figura img {
  /* 3/2 é o formato nativo do arquivo: em 4/3 o object-fit: cover comia
     ~6% de cada lateral e cortava a caixa da direita. */
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}

.empresas__grid {
  margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px;
}
@media (max-width: 900px) { .empresas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }
@media (max-width: 600px) { .empresas__grid { grid-template-columns: 1fr; gap: 26px; } }

/* Fio superior em vez de moldura: separa os itens sem fechar caixa. */
.empresas__item { padding-top: 18px; border-top: 2px solid var(--accent); }
.empresas__item h3 {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: 1.1rem; line-height: 1.24; letter-spacing: -.01em; color: var(--ink);
  text-wrap: balance;
}
.empresas__item p { margin: 8px 0 0; font-size: .99rem; line-height: 1.55; color: var(--ink-2); }

.empresas__cta { margin-top: 54px; text-align: center; }
.empresas__apoio { margin: 18px auto 0; max-width: 48ch; font-size: .96rem; color: var(--ink-2); }

/* -------------------------------------------------------- fechamento */
.fechamento { background: var(--accent-soft); padding: 92px 0; }
@media (max-width: 700px) { .fechamento { padding: 64px 0; } }
.fechamento__inner { text-align: center; }
.fechamento h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 800; }
.fechamento > .wrap > p { margin: 14px auto 34px; max-width: 46ch; color: var(--ink-2); font-size: 1.06rem; }

.contatos {
  list-style: none; padding: 0; margin: 60px 0 0; text-align: left;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
@media (max-width: 900px) { .contatos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .contatos { grid-template-columns: 1fr; } }
.contatos li {
  display: grid; gap: 3px; align-content: start;
  padding-top: 20px; border-top: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.contatos__rot {
  font-family: var(--f-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 5px;
}
.contatos a {
  text-decoration: none; font-weight: 600; color: var(--ink);
  transition: color .18s var(--ease);
}
.contatos a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ------------------------------------------------------------- rodapé */
/* O padding de baixo abre espaço para o CTA fixo de WhatsApp, que no desktop
   pousa no canto inferior direito e cairia em cima da assinatura. No celular o
   `padding-bottom` do body já resolve. */
.rodape { background: var(--bg); border-top: 1px solid var(--line); padding: 46px 0 92px; }
@media (max-width: 940px) { .rodape { padding-bottom: 46px; } }
.rodape__inner {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.rodape__inner > img { height: 44px; width: auto; }
.rodape__txt { color: var(--ink-3); font-size: .88rem; line-height: 1.6; flex: 1 1 320px; }
/* O rodapé é uma linha flex; a assinatura toma a largura toda para cair
   embaixo, separada por fio. */
.assinatura {
  flex: 1 0 100%;
  margin-top: 6px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-3);
}
/* Inline, e não flex: em flex cada palavra vira item e o `gap` abre buracos
   no meio da frase. */
.assinatura__s2 { display: inline-block; vertical-align: -2px; color: var(--accent); }
.assinatura a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.assinatura a:hover { color: var(--accent-deep); text-decoration: underline; }

.rodape__social { display: flex; gap: 14px; margin-left: auto; }
.rodape__social a {
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-2);
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.rodape__social a:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }


/* ------------------------------------- identidade da campanha na página */
/* A LP precisava falar a mesma língua das peças veiculadas fora dela (pedido
   da Sueli em 09/09/2026): quem vê o anúncio e cai aqui tem de reconhecer a
   campanha na hora. Vieram do flyer duas coisas — o mote, verbatim, e a
   textura de faíscas douradas sobre o creme, que é a assinatura visual da
   peça. Só isso: a LP não vira um flyer, ela cita o flyer.
   As faíscas são um SVG inline em data-URI (sem requisição, sem arquivo novo)
   e ficam atrás do conteúdo, em opacidade baixa, para nunca disputar leitura. */
.faisca { position: relative; isolation: isolate; }
.faisca::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%2814 22%29 scale%280.95%29' fill='%23E0A21A' opacity='0.55'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%28112 8%29 scale%280.5%29' fill='%23E0A21A' opacity='0.4'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%28168 62%29 scale%281.15%29' fill='%23E0A21A' opacity='0.5'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%2858 96%29 scale%280.55%29' fill='%23E0A21A' opacity='0.38'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%286 148%29 scale%280.7%29' fill='%23E0A21A' opacity='0.42'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%28126 140%29 scale%280.95%29' fill='%23E0A21A' opacity='0.5'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%28186 176%29 scale%280.5%29' fill='%23E0A21A' opacity='0.35'/><path d='M12 0c1 8 3 11 12 12-9 1-11 4-12 12-1-8-3-11-12-12 9-1 11-4 12-12z' transform='translate%2872 186%29 scale%280.62%29' fill='%23E0A21A' opacity='0.4'/></svg>");
  background-size: 360px 360px;
  opacity: .34;
  /* A faísca acompanha o começo da seção e se apaga antes da tabela: em cima
     do preço ela vira ruído. Como as seções têm alturas muito diferentes, a
     máscara é medida em pixels, não em porcentagem da altura — em % ela cobria
     a seção de preços inteira. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 120px, transparent 420px);
          mask-image: linear-gradient(to bottom, #000 0, #000 120px, transparent 420px);
}

/* O mote da campanha, verbatim do flyer, em caixa alta bem espaçada — é assim
   que ele aparece na peça impressa. */
.hero__mote {
  margin: 0 0 18px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(.82rem, 1.5vw, 1.02rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 2px 14px rgba(24,10,2,.66);
}

/* Precisa vencer o `.fechamento > .wrap > p` (que limita os parágrafos da seção
   a 46ch): sem isso o mote quebra em duas linhas no meio da frase. */
.fechamento > .wrap > .fechamento__mote {
  margin: 0 auto 14px; max-width: none; text-wrap: balance;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(.78rem, 1.4vw, .95rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: #A8450A;
}

/* -------------------------------------------------- CTA de WhatsApp fixo, sempre visível */
/* Pedido da Sueli em 09/09/2026: o telefoninho tem de estar à mão em qualquer
   ponto da página, para quem acabou de ver o preço encomendar na hora — antes
   ele só existia abaixo de 940 px. Duas formas para a mesma âncora: no desktop
   é pílula no canto inferior direito, fora do caminho da leitura; no celular
   atravessa a largura, onde o polegar alcança.
   Fica no laranja da marca, e não no verde do WhatsApp: o botão é da Bambini,
   o ícone já diz por onde a conversa segue.
   Texto e ícone em branco por pedido do cliente em 10/09/2026. O branco sobre
   o laranja da marca fica em 2,89:1, abaixo do mínimo WCAG; a borda escura e
   a sombra sustentam a leitura da pílula contra o fundo claro da página. */
.wa-sticky {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--accent); color: #FFFFFF;
  border: 1px solid var(--accent-deep);
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(58,38,18,.45);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-sticky:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(58,38,18,.5); }
.wa-sticky:active { transform: translateY(1px) scale(.99); }

@media (max-width: 940px) {
  .wa-sticky {
    left: 16px; right: 16px; bottom: 16px;
    justify-content: center; padding: 15px 22px;
  }
  .wa-sticky:hover { transform: none; }
  body { padding-bottom: 88px; }
}

/* --------------------------------------------------------- reveal (JS) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .65s var(--ease), transform .65s var(--ease);
    transition-delay: var(--d, 0ms);
  }
}

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