/* =========================================================================
   SESSÕES — cada bloco espelha uma sessão do registry Loom (spec §3).
   header · hero · usps · vitrine(catalogo_whatsapp) · sobre · depoimentos ·
   faq · cta_band · mapa · footer · wpp_fab
   ========================================================================= */

/* ---------- HEADER (fixo, transparente -> sólido) ------------------------ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:78px; transition:height .35s var(--ease);
}
.site-header.is-solid{ background:color-mix(in srgb, var(--brand) 94%, black); box-shadow:0 8px 30px -12px rgba(74,18,15,.5); backdrop-filter:saturate(1.2); }
.site-header.is-solid .site-header__inner{ height:64px; }
.brand{ display:flex; align-items:center; gap:.65rem; color:var(--on-brand); font-family:var(--display); font-weight:600; font-size:1.15rem; }
/* Selo = recorte do rosto da logo OFICIAL (assets/img/marca.png). O fundo e
   creme, nao dourado: a arte tem pele clara e avental branco, e sobre o
   dourado o contorno some. object-fit:cover porque a arte e quadrada mas o
   circulo corta as pontas. */
.brand__mark{ width:44px; height:44px; border-radius:50%; background:var(--paper); flex:none; object-fit:cover; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.brand small{ display:block; font-family:var(--body); font-weight:500; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }

.nav__list{ list-style:none; display:flex; align-items:center; gap:1.7rem; margin:0; padding:0; }
.nav__list a{ color:var(--on-brand); font-weight:500; font-size:.98rem; position:relative; padding:.3rem 0; opacity:.92; }
.nav__list a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .25s var(--ease); }
.nav__list a:hover{ opacity:1; }
.nav__list a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:.8rem; }
.burger{ display:none; width:44px; height:44px; border:0; background:transparent; color:var(--on-brand); }
.burger span{ display:block; width:24px; height:2px; margin:5px auto; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
body.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- HERO --------------------------------------------------------- */
.hero{ position:relative; color:var(--on-brand); padding-top:118px; padding-bottom:clamp(3rem,7vw,6rem); overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%),
    radial-gradient(90% 120% at 10% 100%, var(--brand-dark), transparent 55%),
    linear-gradient(150deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.hero__bg::after{ content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__badge{ display:inline-flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); padding:.45rem .9rem; border-radius:var(--radius-pill); font-size:.82rem; font-weight:600; letter-spacing:.04em; }
.hero__badge b{ color:var(--accent); }
.hero h1{ margin:1.1rem 0 1.1rem; }
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero__sub{ font-size:var(--step-1); line-height:1.5; color:color-mix(in srgb, var(--on-brand) 88%, transparent); max-width:44ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero__trust{ display:flex; align-items:center; gap:1.1rem; margin-top:2rem; font-size:.9rem; opacity:.9; }
.hero__trust .stars{ color:var(--accent); letter-spacing:2px; }

/* placeholder de mídia com cara de proposital (não de quebrado) */
.hero__media{ position:relative; aspect-ratio:1/1; }
.plate{ position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff8ec, #f0dcc0 62%, #e2c69f);
  box-shadow:inset 0 6px 22px rgba(255,255,255,.6), 0 40px 90px -30px rgba(0,0,0,.55), inset 0 -20px 40px rgba(120,80,40,.25);
}
.plate::before{ content:""; position:absolute; inset:14%; border-radius:50%; border:2px dashed rgba(120,80,40,.25); }
.cookie{ position:absolute; filter:drop-shadow(0 10px 18px rgba(90,45,20,.35)); }
.cookie svg{ width:100%; height:100%; }
.cookie--1{ width:34%; top:22%; left:24%; }
.cookie--2{ width:26%; top:46%; left:52%; animation:float 6s var(--ease) infinite; }
.cookie--3{ width:22%; top:16%; left:58%; animation:float 7s var(--ease) infinite reverse; }
.hero__ph-tag{ position:absolute; bottom:2%; left:50%; transform:translateX(-50%); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; background:rgba(0,0,0,.25); padding:.3rem .7rem; border-radius:var(--radius-pill); }
@keyframes float{ 50%{ transform:translateY(-12px); } }

.hero__marquee{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); padding:1rem 0; display:flex; gap:2.5rem; font-family:var(--display); font-size:1.4rem; opacity:.85; overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.hero__marquee span{ display:inline-flex; align-items:center; gap:2.5rem; animation:marq 26s linear infinite; }
.hero__marquee span::after{ content:"·"; color:var(--accent); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- USPS --------------------------------------------------------- */
.usps{ background:var(--surface); }
.usps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2rem); }
.usp{ padding:1.6rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.usp:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.usp__ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 22%, white); color:var(--brand); margin-bottom:1rem; }
.usp__ico svg{ width:26px; height:26px; }
.usp h3{ font-size:1.15rem; margin-bottom:.35rem; }
.usp p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ---------- VITRINE / CATÁLOGO ------------------------------------------ */
.vitrine{ background:var(--paper); }
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.prod-card{ perspective:900px; }
.prod-card__inner{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)); transform-style:preserve-3d;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column;
}
.prod-card:hover .prod-card__inner{ box-shadow:var(--shadow-lg); }
.prod-card__media{ aspect-ratio:4/3; position:relative; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #fff6e8, #f0ddc2 70%, #e6cba4); }
.prod-card__media .cookie{ width:44%; transform:translateZ(30px); transition:transform .35s var(--ease); }
.prod-card:hover .prod-card__media .cookie{ transform:translateZ(50px) scale(1.06) rotate(-4deg); }
.prod-card__tag{ position:absolute; top:.7rem; left:.7rem; background:var(--brand); color:var(--on-brand); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.28rem .6rem; border-radius:var(--radius-pill); }
.prod-card__tag--gluten{ left:auto; right:.7rem; background:var(--accent); color:var(--brand-ink); }
.prod-card__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.prod-card__linha{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-warm-ink); margin:0; }
.prod-card__body h3{ font-size:1.15rem; }
.prod-card__body p{ color:var(--muted); font-size:.9rem; margin:.1rem 0 0; flex:1; }
.prod-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.9rem; }
.prod-card__peso{ font-size:.85rem; color:var(--muted); font-weight:600; }
.prod-card__wpp{ display:inline-flex; align-items:center; gap:.4rem; background:#128C4B; color:#fff; font-size:.85rem; font-weight:600; padding:.5rem .85rem; border-radius:var(--radius-pill); transition:transform .25s var(--ease), background .25s; }
.prod-card__wpp:hover{ background:#0f7a41; transform:translateY(-2px); }
.prod-card__wpp svg{ width:16px; height:16px; }
.vitrine__more{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3rem); }

/* ---------- SOBRE -------------------------------------------------------- */
.sobre{ background:var(--surface); overflow:hidden; }
.sobre__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sobre__media{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(160deg, var(--brand), var(--brand-dark)); box-shadow:var(--shadow-lg); display:grid; place-items:center; }
.sobre__media .plate{ inset:14%; }
.sobre__media .cookie--1{ width:30%; top:26%; left:26%; }
.sobre__media .cookie--2{ width:24%; top:48%; left:50%; }
.sobre__media .hero__ph-tag{ color:var(--on-brand); }
.sobre__body h2{ margin:.6rem 0 1.1rem; }
.sobre__body p{ color:var(--muted); font-size:1.05rem; }
.stats{ display:grid; grid-template-columns:repeat(4,auto); gap:clamp(1.2rem,3vw,2.4rem); margin-top:2rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--brand); line-height:1; }
.stat span{ font-size:.85rem; color:var(--muted); }

/* ---------- DEPOIMENTOS -------------------------------------------------- */
.depo{ background:var(--paper-2); }
.depo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
.depo-card{ background:var(--surface); border-radius:var(--radius-lg); padding:1.8rem; border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1rem; }
.depo-card .stars{ color:var(--accent); letter-spacing:2px; font-size:1.05rem; }
.depo-card p{ font-family:var(--display); font-size:1.2rem; line-height:1.4; margin:0; color:var(--ink); }
.depo-card__who{ margin-top:auto; display:flex; align-items:center; gap:.75rem; }
.depo-card__av{ width:44px; height:44px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:700; font-family:var(--display); }
.depo-card__who b{ display:block; font-size:.95rem; }
.depo-card__who small{ color:var(--muted); }

/* ---------- FAQ ---------------------------------------------------------- */
.faq{ background:var(--surface); }
.faq__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.25rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--display); font-size:1.2rem; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--body); font-weight:400; font-size:1.6rem; color:var(--brand); transition:transform .3s var(--ease); }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ margin:0 0 1.25rem; color:var(--muted); max-width:60ch; }

/* ---------- CTA BAND ----------------------------------------------------- */
.cta-band{ position:relative; color:var(--on-brand); text-align:center; overflow:hidden; isolation:isolate; }
.cta-band__bg{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(100% 120% at 50% 0%, var(--brand), var(--brand-dark)); }
.cta-band h2{ max-width:20ch; margin:0 auto 1rem; }
.cta-band p{ max-width:52ch; margin:0 auto 1.8rem; opacity:.9; font-size:var(--step-1); }
.cta-band__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ---------- MAPA --------------------------------------------------------- */
.mapa{ background:var(--paper); }
.mapa__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:stretch; }
.mapa__info h2{ margin-bottom:1.2rem; }
.mapa__row{ display:flex; gap:.9rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.mapa__row svg{ width:22px; height:22px; color:var(--brand); flex:none; margin-top:.15rem; }
.mapa__row b{ display:block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mapa__embed{ border-radius:var(--radius-lg); overflow:hidden; min-height:340px; box-shadow:var(--shadow); border:1px solid var(--line); }
.mapa__embed iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- FOOTER ------------------------------------------------------- */
.site-footer{ background:var(--ink); color:#e9ddce; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.site-footer .brand{ color:#fff; margin-bottom:1rem; }
.site-footer p{ color:#b7a897; font-size:.95rem; max-width:36ch; }
.site-footer h4{ font-family:var(--body); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.site-footer a:hover{ color:#fff; }
.site-footer__social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.site-footer__social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; transition:background .25s, transform .25s; }
.site-footer__social a:hover{ background:var(--brand); transform:translateY(-3px); }
.site-footer__social svg{ width:18px; height:18px; }
.site-footer__legal{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#8f8171; }

/* ---------- WHATSAPP FAB ------------------------------------------------- */
.wpp-fab{ position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:70;
  width:60px; height:60px; border-radius:50%; background:#128C4B; color:#fff; display:grid; place-items:center;
  box-shadow:0 16px 34px -10px rgba(18,140,75,.7); transition:transform .3s var(--ease); }
.wpp-fab:hover{ transform:scale(1.08) rotate(4deg); }
.wpp-fab svg{ width:32px; height:32px; }
.wpp-fab::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(18,140,75,.5); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ to{ box-shadow:0 0 0 18px rgba(18,140,75,0); } }

/* ---------- RESPONSIVO --------------------------------------------------- */
@media (max-width: 920px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__media{ max-width:420px; margin-inline:auto; order:-1; aspect-ratio:1.3/1; }
  .sobre__grid, .faq__grid, .mapa__grid{ grid-template-columns:1fr; }
  .usps__grid{ grid-template-columns:repeat(2,1fr); }
  .depo__grid{ grid-template-columns:1fr; }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }

  .nav{ position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:color-mix(in srgb, var(--brand) 96%, black);
    transform:translateX(100%); transition:transform .35s var(--ease); padding:6rem 2rem 2rem; z-index:55; }
  body.nav-open .nav{ transform:none; box-shadow:-20px 0 60px -20px rgba(0,0,0,.6); }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:1.3rem; font-size:1.2rem; }
  .burger{ display:block; z-index:56; }
  .header-cta{ display:none; }
}
@media (max-width: 560px){
  .usps__grid, .site-footer__grid{ grid-template-columns:1fr; }
  .site-footer__legal{ flex-direction:column; }
}

/* parallax só onde faz sentido e só no desktop */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference){
  .hero__bg{ background-attachment:fixed; }
}

/* =========================================================================
   PADRÃO MARCUP — hero parallax de tela cheia
   -------------------------------------------------------------------------
   Mesmo padrão da landing do Marcup: banda com foto de fundo, presa no
   desktop, ocupando a tela inteira, com overlay que garante leitura do texto
   branco sobre QUALQUER imagem.

   O que MUDA em relação ao padrão da agência: o overlay usa as cores DESTA
   marca (vermelho/marrom da Madrinha), não o violeta do Marcup. O violeta é
   a marca da agência; no site do cliente quem manda é a marca dele. O que é
   padrão é a ESTRUTURA (tela cheia, foto presa, overlay legível), não a cor.

   `svh` e não `vh`: no celular o `100vh` conta a altura sem a barra de
   endereço, e o conteúdo nasce cortado.

   A foto entra como camada de baixo; os gradientes da marca continuam por
   cima. Enquanto a imagem não existir, o hero fica exatamente como está hoje
   — degradê puro, sem imagem quebrada.
   ========================================================================= */
.hero{
  display:flex;
  /* COLUNA, não linha. O .hero tem mais de um filho no fluxo (o .container do
     conteúdo e o .container do marquee); em `row` eles ficam lado a lado e a
     centralização por margin:auto do .container morre. */
  flex-direction:column;
  justify-content:center;   /* centra na vertical */
  min-height:100svh;
}
.hero--sub{                    /* catálogo e atacado: banda mais baixa */
  min-height:62svh;
}
/* Foto e overlay vivem NA MESMA camada (.hero__bg), com o gradiente como
   primeira camada da lista e a foto como segunda. O .hero__bg fica em
   `z-index:-1`, ou seja, ATRÁS de todo o conteúdo.

   Não mover a foto para o .hero: um filho com z-index NEGATIVO pinta atrás do
   fundo do pai (some a foto), e com z-index 0 ou auto ele pinta DEPOIS do texto
   in-flow (o título e o parágrafo somem embaixo do gradiente). Só o par
   "tudo no filho + z-index negativo" acerta as duas coisas. */
.hero__bg{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--brand-dark);   /* enquanto a foto não carrega */
  z-index:-1;
}
/* SEM `background-attachment: fixed` aqui — e isso é decisão, não esquecimento.
   Neste DOM o .hero tem `overflow:hidden` + `isolation:isolate` e um filho em
   `z-index:-2`; com `fixed` o Chrome quebra a composição da seção INTEIRA:
   a foto de fundo não pinta, a embalagem do produto some e o texto sai
   lavado — mesmo com todo mundo em `opacity:1` no computed style.
   Diagnosticado em produção em 07/08/2026 alternando fixed/scroll ao vivo.
   Num hero de tela cheia o parallax quase não é percebido (ele é a primeira
   coisa na tela), então o custo de abrir mão é baixo e o ganho é a seção
   renderizar certo. */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference){
  .hero__bg{ background-attachment:scroll; }
}
/* O overlay é DIRECIONAL, não uniforme: bem fechado à esquerda, onde mora o
   texto branco (contraste), e leve à direita, onde a foto precisa aparecer.
   Overlay uniforme acima de ~80% não é "sobreposição", é tinta: cobre a
   imagem inteira e o parallax vira degradê caro. */
/* Gradiente em cima, foto embaixo — na MESMA lista de background-image.
   As URLs vêm de variável definida no <head> pelo template (base.html), para
   ganharem ?v=<mtime>: o CSS é estático e não passa pelo asset(), e sem versão
   a URL fica refém do cache — inclusive de um 404 cacheado de quando a arte
   ainda não existia, que foi exatamente o que aconteceu aqui.

   O overlay é DIRECIONAL: fechado à esquerda, onde mora o texto branco, e leve
   à direita, onde a foto precisa aparecer. Overlay uniforme acima de ~80% não
   é sobreposição, é tinta — cobre a imagem e o parallax vira degradê caro. */
/* Home: overlay pesado no lado do texto (a foto ali é fundo desfocado mesmo)
   e leve à direita, onde os biscoitos são o assunto. Os dois primeiros pontos
   usam brand-ink, o tom mais escuro — é o tom, não a porcentagem, que garante
   contraste para o texto creme. */
.hero--home .hero__bg{
  background-image:
    linear-gradient(100deg,
      color-mix(in srgb, var(--brand-ink)  82%, transparent)  0%,
      color-mix(in srgb, var(--brand-dark) 60%, transparent) 45%,
      color-mix(in srgb, var(--brand)      28%, transparent) 100%),
    var(--img-hero);
}
/* Heros secundários pedem overlay MAIS FORTE e quase uniforme, não direcional:
   o texto aqui é centralizado (não fica só à esquerda) e as fotos são claras e
   ocupadas no quadro inteiro — um flat lay não tem canto vazio para o texto se
   apoiar, como tem a foto da home. Com o gradiente direcional o título ficava
   ilegível sobre os biscoitos. */
/* O RUÍDO FICA. Tentei remover o `.hero__bg::after` (textura em
   `mix-blend-mode: soft-light`) para ganhar contraste, e o efeito colateral foi
   pior: `mix-blend-mode` faz o elemento participar da composição do pai, então
   tirar o ::after mudou o empilhamento do .hero__bg e TODO o conteúdo do hero
   saiu lavado. O caminho certo é compensar no gradiente, não remover o ruído.

   Só tons ESCUROS nos overlays (brand-ink e brand-dark), nunca --brand.
   O --brand é o vermelho claro da marca: a 66% sobre uma foto clara ele vira
   salmão, e texto creme sobre salmão não tem contraste. Opacidade alta não
   resolve se a cor for clara — o que escurece é o tom, não a porcentagem. */
.hero--catalogo .hero__bg{ background-image:
    linear-gradient(120deg,
      color-mix(in srgb, var(--brand-ink)  94%, transparent)  0%,
      color-mix(in srgb, var(--brand-ink)  90%, transparent) 55%,
      color-mix(in srgb, var(--brand-ink)  86%, transparent) 100%),
    var(--img-catalogo); }
.hero--atacado .hero__bg{ background-image:
    linear-gradient(120deg,
      color-mix(in srgb, var(--brand-ink)  94%, transparent)  0%,
      color-mix(in srgb, var(--brand-ink)  90%, transparent) 55%,
      color-mix(in srgb, var(--brand-ink)  86%, transparent) 100%),
    var(--img-atacado); }

/* A banda de CTA tem texto centralizado, então overlay uniforme — leve o
   bastante para a foto continuar existindo. */
.cta-band__bg{
  background-size:cover;
  background-position:center;
  background-color:var(--brand-dark);
  background-image:
    linear-gradient(150deg, color-mix(in srgb, var(--brand-ink)  70%, transparent) 0%,
                            color-mix(in srgb, var(--brand-dark) 64%, transparent) 100%),
    var(--img-cta);
}
/* Mesma razão do hero: a banda também tem filho em z-index negativo. */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference){
  .cta-band__bg{ background-attachment:scroll; }
}
@media (min-width: 921px) and (prefers-reduced-motion: no-preference){
  .cta-band__bg{ background-attachment:fixed; }
}
/* Em telas baixas (notebook 768px de altura) o hero cheio empurraria o
   conteúdo para fora; a partir daí ele vira altura natural. */
@media (max-height: 620px){
  .hero{ min-height:auto; }
}

/* =========================================================================
   V2 (SSG) — fotos reais, hero compacto, tabela, resposta-direta, B2B
   ========================================================================= */
.surface-sess{ background:var(--surface); }
.hero--sub{ padding-bottom:clamp(2rem,4vw,3rem); }
.hero__deck{ font-size:var(--step-1); font-weight:600; color:var(--on-brand); margin:.2rem 0 .5rem; max-width:46ch; }

/* foto real no hero (embalagem flutuante emoldurada) */
.hero__media{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:auto; }
.hero__photo{ position:relative; max-width:min(86%,360px); border-radius:24px; overflow:hidden; background:#fff;
  box-shadow:var(--shadow-lg); transform:rotate(-2deg); transition:transform .5s var(--ease); line-height:0; }
.hero__photo:hover{ transform:rotate(0); }
.hero__photo img{ width:100%; height:auto; display:block; }
.hero__seal{ position:absolute; bottom:5%; left:50%; transform:translateX(-50%) rotate(-2deg);
  background:var(--surface); color:var(--brand); font-weight:700; font-size:.8rem; padding:.5rem .9rem;
  border-radius:var(--radius-pill); box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.hero__seal svg{ width:1.05em; height:1.05em; color:var(--accent); }

/* foto real nos cards de produto (substitui o SVG) */
.prod-card__media{ background:#fff; }
.prod-card__media picture{ display:block; width:100%; height:100%; }
.prod-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease); }
.prod-card:hover .prod-card__img{ transform:scale(1.05); }

/* sobre — foto no lugar do painel decorativo */
.sobre__media{ aspect-ratio:auto; background:none; box-shadow:none; display:block; }
.sobre__media .hero__photo{ max-width:100%; transform:rotate(-1.5deg); }

/* resposta-direta citável (GEO) */
.fam-resumo{ font-size:1.05rem; color:var(--text); max-width:72ch; margin:0 0 1rem;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border-left:3px solid var(--accent);
  padding:1rem 1.2rem; border-radius:0 12px 12px 0; }

/* tabela comparativa */
.tabela-wrap{ overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.tabela{ width:100%; border-collapse:collapse; background:var(--surface); min-width:660px; }
.tabela th, .tabela td{ padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.98rem; }
.tabela thead th{ background:var(--brand); color:var(--on-brand); font-family:var(--body); font-weight:600; }
.tabela tbody th{ font-family:var(--display); font-weight:600; color:var(--ink); }
.tabela tbody tr:last-child td, .tabela tbody tr:last-child th{ border-bottom:0; }
.tabela tbody tr:hover{ background:var(--paper); }
.tabela .yes{ color:#128C4B; font-weight:700; }
.tabela .no{ color:var(--muted); }

/* footer: h2 no estilo do antigo h4 */
.footer-h{ font-family:var(--body); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem; font-weight:600; }
.site-footer address{ font-style:normal; }
.link-brand{ color:var(--brand); font-weight:600; }
.muted-line{ color:var(--muted); }
.depo-card blockquote{ margin:0; }
.depo-nota{ font-size:.85rem; color:var(--muted); font-style:italic; margin:.6rem 0 0; }

/* ---- B2B: personas / razões / passos / condições / form ---- */
.razoes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.6rem); }
.razao{ padding:1.6rem; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); }
.razao--alt{ background:var(--surface); }
.razao b{ display:block; font-family:var(--display); font-size:1.2rem; color:var(--brand); margin-bottom:.3rem; }
.razao p{ margin:0; color:var(--muted); font-size:.95rem; }

.passos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,1.8rem); counter-reset:passo; }
.passo{ position:relative; padding:1.9rem 1.4rem 1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.passo::before{ counter-increment:passo; content:counter(passo); position:absolute; top:-18px; left:1.4rem; width:44px; height:44px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-family:var(--display); font-size:1.3rem; font-weight:600; box-shadow:var(--shadow); }
.passo h3{ margin:.6rem 0 .4rem; font-size:1.15rem; }
.passo p{ margin:0; color:var(--muted); font-size:.95rem; }

.cond{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cond__item{ padding:1.5rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.cond__item b{ display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-warm-ink); margin-bottom:.5rem; }
.cond__item span{ font-family:var(--display); font-size:1.3rem; color:var(--ink); }
.cond__item small{ display:block; color:var(--muted); font-size:.9rem; margin-top:.3rem; }

.cadastro-sess{ background:var(--paper-2); }
.lead-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.lead-grid h2{ margin:.6rem 0 1rem; }
.lead-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.field input, .field select, .field textarea{ width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:12px; font:inherit; background:var(--paper); color:var(--text); transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.field textarea{ resize:vertical; min-height:80px; }
.field--full{ grid-column:1 / -1; }
.lead-more{ border:1px dashed var(--line); border-radius:14px; padding:1rem 1.1rem; margin-bottom:1.1rem; }
.lead-more summary{ cursor:pointer; font-weight:600; font-size:.95rem; color:var(--brand); }
.lead-more summary span{ color:var(--muted); font-weight:400; font-size:.85rem; }
.lead-more__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; margin-top:1rem; }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
.consent input{ margin-top:.2rem; }
.lead-form .btn{ width:100%; }

@media (max-width: 920px){
  .razoes, .cond{ grid-template-columns:1fr; }
  .passos{ grid-template-columns:repeat(2,1fr); }
  .lead-grid, .lead-more__grid{ grid-template-columns:1fr; }
  .hero__photo{ max-width:min(70%,300px); }
}
@media (max-width: 560px){
  .passos{ grid-template-columns:1fr; }
}