/* ==========================================================================
   Home whitelabel — seções da página inicial
   home.css  ·  Seções da Home (vitrine)
   Construção incremental, seção por seção.
   ========================================================================== */

/* ==========================================================================
   1. HERO — Full Banner (imagem estática)
   Imagem 1920×520 com texto/CTA embutidos; o banner inteiro é clicável.
   Para versão mobile dedicada: descomentar o <source> no HTML.
   ========================================================================== */
/* SLIDER de banners (fade + autoplay + setas no hover + dots). Slides empilhados
   (absolutos) → o .hero precisa de altura definida; banners em cover.
   Desktop: trava a altura p/ header+banner+faixa caberem na tela (≈ viewport − 215px). */
/* Altura SEMPRE pela proporção da arte (1920×520 desktop · 1000×1200 mobile) →
   o cover nunca corta o banner, em qualquer zoom/escala (era altura fixa + cover = corte). */
.hero { position: relative; background: var(--marca-secundaria); overflow: hidden; aspect-ratio: 1920 / 520; }
/* mobile (<768): banners têm versão RETRATO dedicada (1000×1200) */
@media (max-width: 767px) { .hero { aspect-ratio: 1000 / 1200; } }

.hero__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-lenta) var(--ease-assenta), visibility var(--dur-lenta) var(--ease-assenta);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* setas — aparecem no hover do banner (em telas touch ficam sempre visíveis) */
.hero__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--marca-secundaria);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer;
  opacity: 0; transition: opacity .25s ease, transform var(--t-rapida);
}
.hero:hover .hero__seta { opacity: 1; }
/* sem efeito de hover na seta (a pedido) — só o :active de clique abaixo */
.hero__seta:active { transform: translateY(-50%) scale(.93); }
.hero__seta svg { width: 22px; height: 22px; }
.hero__seta--prev { left: clamp(8px, 2vw, 24px); }
.hero__seta--next { right: clamp(8px, 2vw, 24px); }
@media (hover: none) { .hero__seta { opacity: 1; background: rgba(255, 255, 255, .82); } }
/* mobile (<768): sem setas — navega por swipe + dots */
@media (max-width: 767px) { .hero__seta { display: none; } }

/* dots */
.hero__dots { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hero__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; transition: background var(--t-rapida), width var(--t-rapida); }
.hero__dot.is-active { background: var(--marca-primaria); width: 24px; border-radius: var(--raio-pill); }

/* ==========================================================================
   2. FAIXA DE BENEFÍCIOS
   Esteira contínua logo abaixo do hero (frete · Pix · fábrica · segurança).
   Modelo aprovado no mock da Forseti (beneficios-marquee.html): fundo da
   PÁGINA (sem cor sólida), fade nas bordas por OVERLAY de gradiente (não usar
   mask-image — causava bug de sumir/repintar), divisor vertical entre itens e
   ícone num chip com tint da primária. Reusa o mecanismo .marquee (style.css).
   ========================================================================== */
.beneficios {
  position: relative;
  border-bottom: 1px solid var(--cor-borda);
  padding-block: 16px;
  --marquee-dur: 44s;   /* rolagem CALMA — velocidade baixa lê premium */
}
/* fade das bordas (overlays por cima do track) */
.beneficios::before,
.beneficios::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px;
  z-index: 2; pointer-events: none;
}
.beneficios::before { left: 0; background: linear-gradient(90deg, var(--cor-fundo), transparent); }
.beneficios::after  { right: 0; background: linear-gradient(270deg, var(--cor-fundo), transparent); }

.beneficio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 4px 44px;
}
/* divisor vertical à direita de CADA item (uniforme → loop sem emenda) */
.beneficio::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--cor-borda);
}
/* Ícone SEM chip — traço fino direto na cor da marca (gramática do header) */
.beneficio__icone {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--marca-primaria);
}
.beneficio__icone svg { width: 22px; height: 22px; stroke-width: 1.8; }

.beneficio__txt { min-width: 0; white-space: nowrap; }
.beneficio__txt b {
  display: block;
  font-weight: var(--peso-semibold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.3;
}
.beneficio__txt span {
  display: block;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
  line-height: 1.35;
  margin-top: 2px;
}

/* mobile: itens compactos e esteira um pouco mais rápida */
@media (max-width: 560px) {
  .beneficio { padding: 4px 28px; gap: 10px; }
  .beneficio__icone svg { width: 20px; height: 20px; }
  .beneficio__txt b { font-size: var(--fs-xs); }
  .beneficio__txt span { font-size: 11px; }
  .beneficio::after { height: 26px; }
  .beneficios { --marquee-dur: 22s; }
}

/* ==========================================================================
   3. COMPRE POR CATEGORIA — tiles automáticos (product_cat de topo).
   auto-fill: com poucas categorias os tiles mantêm ~150-220px (não estouram).
   ========================================================================== */
/* Tiles EDITORIAIS: foto full-bleed em card 12px + véu degradê verde-escuro na
   base + nome em CAPS branco sobre a foto (sálvia no hover). Linguagem
   tática/editorial da marca — não o carrossel de bolinhas de marketplace. */
.categorias { padding-block: var(--sp-8) 0; }
/* Mobile/tablet: TRILHO horizontal 100% NATIVO (scroll + snap, ZERO JS) —
   liso em qualquer aparelho. Finito de propósito: loop infinito via JS
   brigava com o momentum do touch e tremia (testado e descartado). */
.categorias__row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.categorias__row::-webkit-scrollbar { display: none; }
.categorias__row .cat-tile {
  flex: 0 0 clamp(140px, 38vw, 200px);   /* 38vw → o 3º tile "espia" ~50px na borda (convite ao arrasto) */
  scroll-snap-align: start;
}
/* pista de continuação: véu de fade na borda direita (só onde há trilho) */
@media (max-width: 991.98px) {
  .categorias { position: relative; }
  .categorias::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 44px;
    background: linear-gradient(270deg, var(--cor-fundo), transparent);
    pointer-events: none;
  }
}

/* Desktop: grid de UMA fileira (auto-fit) — clones do slider somem */
@media (min-width: 992px) {
  .categorias__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

.cat-tile {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cinza-100);
}
.cat-tile__img { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cinza-400); }
.cat-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.cat-tile__img svg { width: 34px; height: 34px; }
/* véu de leitura: transparente → verde-escuro na base (nome SEMPRE legível) */
.cat-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--marca-primaria) 88%, transparent));
  pointer-events: none;
}
.cat-tile:hover .cat-tile__img img { transform: scale(1.06); }
.cat-tile__nome {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  z-index: 1;
  color: var(--marca-sobre-primaria);
  font-weight: var(--peso-semibold); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.3;
}

/* ==========================================================================
   BANDA EDITORIAL "GUIA LEGAL" — única seção escura da home. Quebra a
   sequência de vitrines vendendo o diferencial (documentação CR/CAC).
   ========================================================================== */
.guia {
  /* clima dos banners da Pro Hunters: trama carbono SUTIL + halo sálvia atrás
     da foto + degradê vertical do verde. Camadas: textura → luz → base. */
  background:
    repeating-linear-gradient(55deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-55deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 6px),
    radial-gradient(640px 340px at 80% 55%, color-mix(in srgb, var(--marca-acento) 16%, transparent), transparent 70%),
    linear-gradient(175deg, var(--marca-primaria-escura) 0%, var(--marca-primaria) 55%);
  color: var(--marca-sobre-primaria);
  padding-block: var(--sp-8);
  overflow: hidden;   /* a arte pode sangrar levemente na base */
}
.guia { position: relative; }
.guia__inner { position: relative; z-index: 1; }
.guia__txt { max-width: 62ch; }

/* Tigre fantasma: gigante, sangrando pela direita, ATRÁS do texto.
   invert(1) vira o tigre preto em branco; lighten apaga o fundo do PNG. */
.guia__tigre {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-46%) scaleX(-1);   /* espelhado: o tigre olha p/ a ESQUERDA (p/ o texto) */
  width: clamp(320px, 44vw, 620px);         /* grande: ocupa o miolo direito, sem corredor vazio */
  height: auto;
  filter: invert(1);
  mix-blend-mode: lighten;
  opacity: .09;
  pointer-events: none;
}
/* Mobile: tigre ancorado no canto inferior direito, com as ARESTAS DO ARQUIVO
   empurradas pra fora da banda (o overflow:hidden recorta na moldura) →
   efeito de imagem realmente sangrando pelas bordas, sem corte aparente. */
@media (max-width: 767px) {
  .guia__tigre {
    top: auto;
    bottom: -12%;
    right: -16%;
    transform: scaleX(-1);
    width: min(340px, 78vw);
  }
}
.guia__eyebrow {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--marca-acento);
}
.guia__titulo {
  margin-top: var(--sp-2);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  max-width: 24ch;
}
.guia__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--marca-sobre-primaria) 72%, transparent);
  max-width: 58ch;
}
.guia__cta {
  flex: none;
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--marca-acento);
  color: var(--marca-primaria);
  font-size: 0.75rem; font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0.95rem 1.5rem;
  border-radius: var(--raio);
  transition: background var(--t-rapida);
}
.guia__cta:hover { background: color-mix(in srgb, var(--marca-acento) 85%, #fff); }
.guia__cta svg { width: 16px; height: 16px; transition: transform var(--t-rapida); }
.guia__cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   MINI BANNERS — faixa simples de 2 artes clicáveis (proporção 635×300 da
   arte atual; artes novas recomendadas em 1270×600). Mobile: empilha.
   ========================================================================== */
.minibanners { padding-block: 0 var(--sp-8); }   /* respiro antes da seção seguinte; o topo vem da vitrine acima */
.minibanners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) { .minibanners__grid { grid-template-columns: 1fr 1fr; } }
.minibanner {
  display: block;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cinza-100);
  aspect-ratio: 635 / 300;
}
.minibanner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t);
}
.minibanner:hover img { transform: scale(1.02); }

/* ==========================================================================
   TRIO DE BANNERS — 3 artes clicáveis (832×960; ex.: marcas em destaque).
   Desktop: 3 colunas · mobile: empilha.
   ========================================================================== */
/* a seção acima (Novidades) é um BLOCO escuro que termina rente — o respiro
   do topo precisa vir daqui (diferente dos mini, que seguem vitrine branca) */
.tribanners { padding-block: var(--sp-8); }
.tribanners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) { .tribanners__grid { grid-template-columns: repeat(3, 1fr); } }
.tribanner {
  display: block;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cinza-100);
  aspect-ratio: 832 / 960;
}
.tribanner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t);
}
.tribanner:hover img { transform: scale(1.02); }

/* ==========================================================================
   DEPOIMENTOS — prova social curada. Cards flat com hairline (gramática da
   casa): estrelas sálvia, texto sereno, autor em caps pequenas.
   Desktop: 3 colunas · mobile: trilho com snap (como as categorias).
   ========================================================================== */
.depoimentos { padding-block: 0 var(--sp-8); }
.depoimentos__row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.depoimentos__row::-webkit-scrollbar { display: none; }
.depoimentos__row .depo { flex: 0 0 min(340px, 84vw); scroll-snap-align: start; }
/* desktop: CARROSSEL de 3 por página (trilho nativo + setas no cabeçalho) */
@media (min-width: 992px) {
  .depoimentos__row .depo { flex-basis: calc( ( 100% - 2 * var(--sp-4) ) / 3 ); }
}

/* setas de carrossel (GENÉRICAS: vitrines + depoimentos) — círculos hairline
   no cabeçalho, discretas; só desktop (no touch o dedo é o controle) */
.car-nav { display: none; }
@media (min-width: 992px) {
  .car-nav { display: inline-flex; gap: var(--sp-2); }
  .car-seta {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    background: var(--marca-clara);
    color: var(--marca-primaria);
    cursor: pointer;
    transition: background var(--t-rapida), opacity var(--t-rapida);
  }
  .car-seta:hover { background: var(--cinza-100); }
  .car-seta:disabled { opacity: .35; cursor: default; }
  .car-seta:disabled:hover { background: var(--marca-clara); }
  .car-seta svg { width: 18px; height: 18px; }

  /* variante pra seção ESCURA (Novidades): hairline e ícone claros */
  .vitrine--marca .car-seta {
    background: transparent;
    border-color: color-mix(in srgb, var(--marca-sobre-primaria) 30%, transparent);
    color: var(--marca-sobre-primaria);
  }
  .vitrine--marca .car-seta:hover { background: color-mix(in srgb, var(--marca-sobre-primaria) 12%, transparent); }
  .vitrine--marca .car-seta:disabled:hover { background: transparent; }
}

/* grupo à direita do cabeçalho: setas + "Ver todos" */
.secao-head__acoes { display: flex; align-items: center; gap: var(--sp-4); }

.depo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--marca-clara);
}
.depo__estrelas { display: inline-flex; gap: 3px; color: var(--marca-acento); }
.depo__estrelas svg { width: 17px; height: 17px; }
.depo__texto {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--cinza-700);
}
/* aspas de abertura discretas (tipográficas, não decoração gigante) */
.depo__texto::before { content: "“"; }
.depo__texto::after { content: "”"; }
.depo__autor { display: grid; gap: 2px; margin-top: auto; }
.depo__autor b {
  font-size: 0.75rem;
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--marca-primaria);
}
.depo__autor span { font-size: 0.75rem; color: var(--cor-texto-suave); }

/* placeholder (só a equipe logada vê) */
.depo--ph {
  border-style: dashed;
  border-color: var(--cinza-300);
  background: var(--cinza-50);
  color: var(--cinza-500);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  min-height: 180px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
}
.depo--ph svg { width: 28px; height: 28px; color: var(--cinza-400); }

/* ==========================================================================
   PRO HUNTERS TV — trilho com os vídeos da playlist do canal, cada card em
   FACADE (thumb + play; o iframe do YouTube só nasce no clique).
   O carrossel é o [data-car] genérico das vitrines: trilho e setas vêm de
   .vitrine-row / .car-nav / .car-seta. Aqui mora só o CARD e o enquadramento.
   ========================================================================== */
.canal { padding-block: 0 var(--sp-8); }

/* Card de vídeo é 16:9 + título — precisa de mais largura que o card de produto,
   senão o título do YouTube (livre, às vezes enorme) vira cinco linhas.
   Por isso 1/2/3 por página, não os 2/3/4 das vitrines. */
.canal-row .video-card {
  flex: 0 0 82%;                 /* mobile: um card cheio + espia o próximo (convida a arrastar) */
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .canal-row .video-card { flex-basis: calc( ( 100% - var(--sp-4) ) / 2 ); }
}
@media (min-width: 992px) {
  .canal-row .video-card { flex-basis: calc( ( 100% - 2 * var(--sp-4) ) / 3 ); }
}

.video-card { display: flex; flex-direction: column; gap: var(--sp-3); }

.video-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cinza-900);
  cursor: pointer;
  padding: 0;
  border: 0;
}
.video-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t);
}
.video-card__thumb:hover img { transform: scale(1.03); }
.video-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;     /* menor que o do vídeo único: agora são 3 na linha */
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marca-primaria) 88%, transparent);
  color: var(--marca-sobre-primaria);
  transition: transform var(--t-rapida), background var(--t-rapida);
}
.video-card__thumb:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); background: var(--marca-primaria); }
.video-card__thumb:focus-visible { outline: 2px solid var(--marca-secundaria); outline-offset: 3px; }
.video-card__play svg { width: 22px; height: 22px; margin-left: 2px; }

.video-card__corpo { display: flex; flex-direction: column; gap: var(--sp-2); }
.video-card__titulo {
  font-size: var(--fs-sm);
  font-weight: var(--peso-semibold);
  line-height: 1.35;
  color: var(--marca-secundaria);
  /* 3 linhas e corta: título de YouTube não tem limite, e um card mais alto
     esticaria a linha inteira do trilho (os itens flex dividem a mesma altura). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card__meta { font-size: var(--fs-xs); color: var(--cor-texto-suave); }

/* CTA do canal: centralizado abaixo do trilho (antes era o fim da coluna de texto) */
.canal__rodape { display: flex; justify-content: center; margin-top: var(--sp-6); }
.canal__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: #FF0000;               /* vermelho OFICIAL do YouTube (como o teal do Pix) */
  color: #fff;
  font-size: 0.75rem; font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0.95rem 1.5rem;
  border-radius: var(--raio);
  transition: background var(--t-rapida);
}
.canal__cta:hover { background: #CC0000; }
.canal__cta svg { width: 19px; height: 19px; }

/* o player substitui o .video-card__thumb no clique → mesma caixa 16:9 */
.canal__player iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--raio);
  display: block;
}

/* placeholder (só a equipe logada vê) */
.canal__ph {
  aspect-ratio: 16 / 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
  background: var(--cinza-50);
  color: var(--cinza-500);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.canal__ph svg { width: 30px; height: 30px; color: var(--cinza-400); }
/* placeholder (só a equipe logada vê): lembrete de configurar no painel */
.minibanner--ph {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  border: 1px dashed var(--cinza-300);
  background: var(--cinza-50);
  color: var(--cinza-500);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  padding: var(--sp-4);
}
.minibanner--ph svg { width: 28px; height: 28px; color: var(--cinza-400); }
/* placeholder do trio: mesmo tratamento */
.tribanner--ph {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  border: 1px dashed var(--cinza-300);
  background: var(--cinza-50);
  color: var(--cinza-500);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  padding: var(--sp-4);
}
.tribanner--ph svg { width: 28px; height: 28px; color: var(--cinza-400); }

/* ==========================================================================
   VITRINES DE PRODUTO (mais vendidos · novidades · ofertas · cross-sell)
   Cards de produto (reusáveis em PLP/cross-sell)
   ========================================================================== */
.vitrine { padding-block: var(--sp-8); }

/* Cabeçalho de seção — REFINADO: título menor em peso 700 (não black gigante),
   eyebrow discreta, link na MESMA linha do título (economiza altura no mobile). */
.secao-head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
/* Countdown de campanha (vitrine Promoções) — BARRA full-width verde-escura
   entre o cabeçalho e a grade, IGUAL em desktop e mobile ("cinto" da campanha). */
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  background: var(--marca-primaria);
  color: var(--marca-sobre-primaria);
  border-radius: var(--raio);
  padding: 0.65rem 1rem;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);   /* encosta no cabeçalho, respira antes da grade */
}
.countdown__lab {
  font-size: 0.6875rem;
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--marca-acento);
  line-height: 1.25;
  margin-right: var(--sp-3);
}
.countdown__cel { display: grid; justify-items: center; min-width: 2em; }
.countdown__cel b {
  font-size: 1.25rem;
  font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown__cel small {
  margin-top: 3px;
  font-size: 0.5625rem;
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--marca-sobre-primaria) 62%, transparent);
}
.countdown i { font-style: normal; font-weight: var(--peso-bold); font-size: 1rem; line-height: 1.4; color: color-mix(in srgb, var(--marca-sobre-primaria) 40%, transparent); }
/* mobile: barra compacta (cabe até em 360px) */
@media (max-width: 639px) {
  .countdown { padding: 0.5rem 0.6rem; gap: .4rem; }
  .countdown__cel b { font-size: 1.125rem; }
  .countdown__lab { margin-right: var(--sp-2); }
}

.secao-head__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--marca-primaria-escura);
  margin-bottom: 0.35rem;
}
.secao-head__eyebrow::before { content:""; width: 28px; height: 2px; background: var(--marca-primaria); }
.secao-head h2 {
  font-size: clamp(1.25rem, 3vw, 1.625rem);   /* 20→26px: presença sem gritar */
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
}
.secao-head__link {
  flex: none;
  font-weight: var(--peso-bold); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--marca-primaria);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color var(--t-rapida);
}
.secao-head__link:hover { color: var(--marca-primaria-escura); }

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

/* Vitrines da HOME em CARROSSEL de uma linha (ref. Tray): trilho nativo com
   snap; 2 cards por página no mobile, 3 no tablet, 4 no desktop (com setas
   no cabeçalho). A PLP continua em grade (.grid-produtos). */
.vitrine-row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.vitrine-row::-webkit-scrollbar { display: none; }
.vitrine-row .card-produto {
  flex: 0 0 calc( ( 100% - var(--sp-4) ) / 2 );
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .vitrine-row .card-produto { flex-basis: calc( ( 100% - 2 * var(--sp-4) ) / 3 ); }
}
@media (min-width: 992px) {
  .vitrine-row .card-produto { flex-basis: calc( ( 100% - 3 * var(--sp-4) ) / 4 ); }
}

/* ---- Card de produto (reusável) ----
   Layout em 3 zonas: imagem · texto · rodapé (preço + botão).
   O rodapé usa margin-top:auto → cola no fundo do card; como os cards do grid
   esticam para a mesma altura, preços e botões ficam SEMPRE alinhados na linha. */
.card-produto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--marca-clara);
  color: var(--cor-texto);            /* card é branco → cor própria (não herda a do fundo, ex.: seção Zero escura) */
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}

/* Badges — pílulas pequenas no padrão da marca:
   oferta = cor da marca (puxa o olho) · sem açúcar = contorno limpo (info) */
.card-produto__tags {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-wrap: wrap; gap: 6px; z-index: 2;
}
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: var(--peso-bold);   /* 700 — mais legível no mobile */
  line-height: 1;
  text-transform: uppercase; letter-spacing: .03em;
  /* nudge óptico: caixa-alta sem descendentes "sobe" e sobra mais embaixo →
     desce o texto 1px (mais padding no topo, menos na base) p/ parecer centrado. Altura igual. */
  padding: calc(.36rem + 1px) .62rem calc(.36rem - 1px);
  border-radius: var(--raio-pill);
}
.tag--promo { background: var(--marca-acento); color: var(--marca-primaria); box-shadow: var(--sombra-sm); }   /* desconto = sálvia da marca ("-25%") */

/* Selo de CONTROLADO — canto superior esquerdo da FOTO.
   Contorno sobre fundo quase branco, não pastilha chapada: a --promo já é um
   bloco de cor, e duas pastilhas preenchidas no mesmo card viram semáforo. A
   diferença aqui é de FORMA, não só de cor — funciona também para quem não
   distingue bem cores.
   Nada de vermelho: ser controlado não é erro nem alerta, é característica
   legal do produto. Vermelho leria como problema.
   O fundo claro existe porque o selo precisa ler tanto sobre foto de fundo
   branco (a maioria do catálogo) quanto sobre foto escura — contorno puro
   sumiria na primeira.
   `pointer-events: none`: não pode comer o clique do link da imagem nem
   interferir no carrossel de hover, que decide o slide pela posição do mouse.
   z-index 4 fica acima do countdown (3), que mora no rodapé da foto — os dois
   nunca se encostam. */
/* FITA de produto controlado — faixa diagonal atravessando o canto superior
   direito da foto (formato pedido pelo cliente, ref. de outra loja).
   Como funciona: a faixa é um bloco largo, rotacionado 45°, ancorado PRA FORA
   da caixa. As pontas somem porque `.card-produto__img` já tem overflow:hidden
   — é ele que recorta a fita no formato de canto. Sem esse overflow, ela
   apareceria como um retângulo torto vazando do card.
   Cor da MARCA e não o amarelo da referência: amarelo entraria como cor
   estranha à paleta. Primária escura + texto claro lê sobre qualquer foto, que
   é o requisito real aqui (o catálogo tem foto de fundo branco e de fundo
   escuro).
   `pointer-events: none`: não pode comer o clique do link da imagem nem
   atrapalhar o carrossel de hover, que decide o slide pela posição do mouse.
   z-index 4 fica acima do countdown (3), que mora no rodapé da foto. */
/* GEOMETRIA (a palavra estava cortando nas duas pontas):
   a faixa gira em torno do PRÓPRIO centro, e o que se vê dela é a corda que ela
   atravessa no canto. Se a corda corta cada borda a `a` px da quina, o trecho
   visível mede a×√2 — e o texto, centralizado na faixa, só fica centralizado
   NESSA janela se o centro da faixa estiver sobre a diagonal do canto, ou seja,
   à mesma distância das duas bordas.
     distância da direita = right + width/2   = -48 + 80 = 32
     distância do topo    = top   + altura/2  =  23 +  9 = 32   ✓
   Antes eram 30 e 24: a faixa estava torta em relação ao canto, sobrando letra
   fora dos dois lados.
   Com 32, a corda visível mede 32×2×√2 ≈ 90px, e "CONTROLADO" a 9px com o
   espaçamento abaixo mede ~72px — sobra folga nas pontas.
   Mexer em font-size ou padding muda a ALTURA e desfaz a conta: recalcular o
   `top` junto. */
.card-produto__fita {
  position: absolute;
  z-index: 4;
  top: 23px;
  right: -48px;
  width: 160px;
  transform: rotate(45deg);
  padding: 4px 0;
  text-align: center;
  white-space: nowrap;      /* quebrar a palavra aqui destruiria a faixa */
  background: var(--marca-primaria);
  color: var(--marca-sobre-primaria);
  font-size: 9px;
  font-weight: var(--peso-heavy);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  pointer-events: none;
}
/* Card menor (2 colunas no mobile): a fita encolhe junto pra não virar a metade
   da foto. O @container já existe aqui — a caixa da imagem é container. */
@container (max-width: 239px) {
  /* Mesma conta com a fonte menor (altura ≈ 17px, metade ≈ 8):
       -47 + 75 = 28   ·   20 + 8 = 28   ✓
     Corda visível ≈ 79px para um texto de ~64px a 8px. */
  .card-produto__fita {
    top: 20px;
    right: -47px;
    width: 150px;
    font-size: 8px;
    letter-spacing: .05em;
  }
}

/* Selo de desconto ao LADO do preço (ref. KaBuM): menor que o da foto e sem
   sombra — aqui ele acompanha o número, não flutua sobre uma imagem. */
.card-produto__preco-row .tag--promo {
  font-size: 10px;
  padding: .26rem .45rem .22rem;
  box-shadow: none;
  align-self: center;
}
/* (.tag--zero removida em 17/08: era do catálogo de energéticos da base) */

/* Desktop: fonte das badges um pouco maior */
@media (min-width: 768px) { .tag { font-size: 13px; } }

/* Imagem — wrapper QUADRADO 1:1; a FOTO preenche 100% do quadro (cover).
   As lojas usam fotos completas de produto (não renders recortados como na
   Baly) → sem palco/gradiente, sem padding e sem sombra. Foto quadrada = nada
   é cortado; overflow segura o zoom do hover dentro do quadro. */
.card-produto__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--marca-clara);   /* branco: funde com o fundo das fotos de produto */
}
.card-produto__img img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;      /* produto INTEIRO, centrado no quadrado (nunca corta) */
  padding: 6%;              /* respiro: o produto não encosta nas bordas do card */
  transition: transform var(--t);
}
/* Hover em qualquer ponto do card → zoom leve só na imagem */
.card-produto:hover .card-produto__img img { transform: scale(1.05); }

/* Hover da MOLDURA — detalhe, não efeito. A hairline sai do cinza e pega o
   verde-sálvia da marca; junto, um halo da MESMA cor, bem diluído.
   Cor do ACENTO (#78B981), não da primária nem preto: a primária é
   verde-quase-preto (#12281E) e dava borda escura, e sombra preta suja um card
   branco em vez de destacá-lo. O acento já é vocabulário do site (topbar, faixa
   de categorias, CTA do WhatsApp), então o hover soa da casa.
   Sem elevar e sem escalar o card: o zoom da foto acima já é o movimento da
   interação, e dois movimentos no mesmo hover competem entre si.
   `color-mix` contra a própria borda (não contra branco) mantém o resultado
   coerente caso o tema mude `--cor-borda`. Percentual mais alto que o de uma
   cor escura porque o acento é claro — a 32% ele quase não se separava do
   cinza. */
.card-produto:hover {
  border-color: color-mix(in srgb, var(--marca-acento) 55%, var(--cor-borda));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--marca-acento) 26%, transparent);
}
/* Teclado enxerga o mesmo destaque (o card inteiro é clicável pelo link do nome). */
.card-produto:focus-within {
  border-color: color-mix(in srgb, var(--marca-acento) 55%, var(--cor-borda));
}
/* Em seção escura a sombra não lê e ainda suja a borda: só a hairline muda. */
.vitrine--marca .card-produto:hover { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .card-produto { transition: none; }
}

/* ==========================================================================
   CARROSSEL DE HOVER NO CARD (ref. Invictus)
   A posição HORIZONTAL do mouse escolhe a foto — não é troca automática por
   tempo (confirmado sondando a ref.: parado 4s o índice não mexe; varrendo da
   esquerda pra direita ele anda). Marcação e hidratação: functions.php (as
   fotos vão num <template>) + home.js.
   ========================================================================== */
.card-produto__trilho {
  position: absolute; inset: 0;
  display: flex;
  pointer-events: none;      /* o clique e o hover continuam sendo do <a> */
  /* ⚠️ o trilho é INSERIDO no fim do <a> pelo JS, então sem z-index explícito
     ele pinta por cima da tarja de countdown (que vem antes no DOM) e comia a
     borda dela. Ordem: trilho < pontinhos < tarja. */
  z-index: 1;
  transition: transform var(--dur-media) var(--ease-assenta);
}
/* ⚠️ Fundo OPACO: a foto principal continua embaixo do trilho, e com
   `object-fit: contain` uma foto não-quadrada deixa faixas vazias no slide —
   por elas aparecia o produto da foto principal, dando dois produtos
   sobrepostos. Mesma cor do `.card-produto__img` (fotos de produto vêm em
   fundo branco), então não se vê emenda. */
.card-produto__slide {
  position: relative;
  flex: 0 0 100%;
  background: var(--marca-clara);
}
/* o <img> do slide herda a regra genérica acima (absolute + contain + padding),
   agora resolvida contra o slide — mesmo enquadramento da foto principal */

/* Zoom e carrossel juntos ficam agitados: com a galeria ativa, quem se move é
   o trilho. (A ref. também não dá zoom.) */
.card-produto__img.tem-galeria img { transform: none !important; }

/* Pontinhos: posição, não controle — some no toque junto com o resto */
.card-produto__dots {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--t-rapida);
}
/* Card em campanha tem a tarja de countdown colada na base da foto: os pontinhos
   sobem pra cima dela. 29px é a altura MEDIDA da tarja — e ela não varia com a
   viewport (o conteúdo é texto de corpo fixo; conferido em 1500/1200/900). */
.card-produto__img:has(.card-produto__cd) .card-produto__dots { bottom: 37px; }
.card-produto__cd { z-index: 3; }
.card-produto__img.tem-galeria .card-produto__dots { opacity: 1; }
.card-produto__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--marca-secundaria) 28%, transparent);
  transition: background var(--t-rapida);
}
.card-produto__dots i.on { background: var(--marca-primaria); }

/* Aparelho de toque não tem hover: nada disso existe lá (a ref. faz igual —
   o carrossel dela é `hidden md:block`). O JS nem hidrata; isto é a rede. */
@media (hover: none) {
  .card-produto__trilho, .card-produto__dots { display: none; }
}

/* Corpo — texto à ESQUERDA. Testamos centralizar (ref. Invictus) em 18/08 e o
   cliente reprovou: com nome de 2 linhas, preço, parcelas e o botão, o card fica
   pesado no centro e a grade perde a espinha que guia a leitura. Fica como está. */
.card-produto__body {
  display: flex; flex-direction: column;
  padding: var(--sp-3);
  flex: 1;
}
/* Nome do produto DISCRETO (ref. Invictus): quem tem que gritar no card é o PREÇO.
   Era 20px/800 — maior e mais pesado que o próprio preço (17px/700), invertendo a
   hierarquia e deixando a grade pesada. Agora 15px/regular com mais entrelinha:
   nome técnico longo ("Bateria Fenix Recarregável 14500 800mAh") fica legível em 2
   linhas e o olho cai no preço. */
.card-produto__nome {
  font-weight: var(--peso-regular);
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-produto__meta { font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-top: 2px; }

/* Rodapé: preço em cima, botão full-width embaixo (mobile/tablet).
   No desktop largo (≥992) vira lado-a-lado (ver media query no fim). */
.card-produto__rodape {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-3);
}

/* Bloco de preço — PIX em destaque (preço principal) + valor no cartão (secundário) */
.card-produto__preco {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px; line-height: 1.05;
  container-type: inline-size;   /* decide "no Pix" ao lado/embaixo pela largura do CARD */
}
/* Preço + selo de desconto lado a lado; o selo só desce quando NÃO couber.
   Antes o limiar era 149px e empilhava sempre no card de 2 colunas do mobile —
   mas "R$ 32,21" + "-79%" medem ~119px e cabiam folgados. Só preço longo
   ("R$ 17.100,00" + selo ≈ 157px) precisa de duas linhas.
   `wrap` no lugar do `nowrap` resolve isso sozinho, sem número mágico: quem
   cabe fica na linha, quem não cabe desce.
   Custo assumido: dentro da MESMA grade, um card de preço longo quebra e o
   vizinho não — o autor original tinha escolhido empilhar todos justamente pra
   manter a linha uniforme. Trocamos uniformidade por não desperdiçar espaço, que
   é o que se via na tela.
   `gap: 4px .35rem` = 4px entre as linhas quando quebra, .35rem entre preço e
   selo na mesma linha. */
.card-produto__preco-row { display: flex; align-items: baseline; gap: 4px .35rem; flex-wrap: wrap; }
/* Piso: em card MUITO estreito nem o preço curto cabe com o selo — aí empilha
   de vez, senão o selo desceria sozinho num espaço apertado e sem alinhamento. */
@container (max-width: 120px) {
  .card-produto__preco-row { flex-direction: column; align-items: flex-start; gap: 1px; }
  /* empilhado, o selo vai pra linha de baixo: alinha com o preço (o `align-self:
     center` da regra base centraliza VERTICALMENTE na linha, mas numa coluna
     viraria centralizar na horizontal e o selo ficava solto no meio do card) */
  .card-produto__preco-row .tag--promo { align-self: flex-start; margin-top: 3px; }
}
/* Tarja de countdown na BASE da foto (só produto em promoção, campanha ativa):
   vincula o preço ao prazo, ref. Tray. Verde translúcido sobre a imagem.
   Card ESTREITO (container query): esconde os rótulos e vira relógio 04:23:36:22. */
.card-produto__img { container-type: inline-size; }
@container (max-width: 239px) {
  .card-produto__cd small { display: none; }
  .card-produto__cd { gap: 0; }
  .card-produto__cd b + b::before,
  .card-produto__cd small + b::before {
    content: ":";
    margin: 0 0.3rem;
    color: color-mix(in srgb, var(--marca-sobre-primaria) 45%, transparent);
  }
}
.card-produto__cd {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--marca-primaria) 86%, transparent);
  color: var(--marca-sobre-primaria);
}
.card-produto__cd b {
  font-size: 0.875rem;
  font-weight: var(--peso-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.card-produto__cd small {
  font-size: 0.5625rem;
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--marca-sobre-primaria) 70%, transparent);
  margin-left: -0.25rem;
}

/* hierarquia: "de" riscado minúsculo → preço PIX dominante → parcelamento discreto */
.card-produto__de { font-size: 0.6875rem; color: var(--cinza-400); }
.card-produto__de s { text-decoration-thickness: 1px; }
.card-produto__preco .agora {
  font-weight: var(--peso-bold);
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;   /* dígitos alinhados entre cards */
}
.card-produto__pix-flag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .05em;
  color: #32BCAD;                 /* teal oficial do Pix (reconhecimento > paleta) */
}
.card-produto__pix-flag svg { width: 13px; height: 13px; flex: none; }
.card-produto__cartao { font-size: 0.75rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.card-produto__cartao strong { font-weight: var(--peso-semibold); color: var(--cor-texto); }

/* Frete grátis — PASTILHA SOBRE A FOTO, canto superior esquerdo.
   A primeira versão era texto miúdo abaixo do parcelamento: o lugar mais
   silencioso do card, e quem sabia que existia ainda precisava procurar. Selo de
   benefício tem que ser notado — foi o oposto do que fazia.
   Canto ESQUERDO porque o direito é da fita de controlado. Os dois nunca
   coincidem (controlado não recebe frete), mas separar torna a regra visível no
   layout em vez de invisível fora do PHP.
   Sálvia com texto escuro: o mesmo par da --promo e do CTA do WhatsApp, já
   vocabulário da casa. Forma diferente da fita de propósito — pastilha reta lê
   como benefício, faixa diagonal lê como classificação. */
.card-produto__frete {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;                       /* acima do countdown (3); nunca divide canto com a fita */
  display: inline-flex; align-items: center; gap: 5px;
  max-width: calc(100% - 16px);
  padding: 6px 10px 5px;
  border-radius: var(--raio-sm);
  background: var(--marca-acento);
  color: var(--marca-primaria);
  font-size: 10px; font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--sombra-sm);
  pointer-events: none;             /* não come o clique do link nem o hover da galeria */
}
.card-produto__frete svg { width: 15px; height: 15px; flex: none; }
/* Card estreito (2 colunas no mobile): encolhe junto, senão atravessa a foto.
   Mesmo reduzido, cabe folgado — a 9px o selo mede ~110px na caixa de ~169px
   úteis do card de 2 colunas, então o `nowrap` nunca estoura. */
@container (max-width: 239px) {
  .card-produto__frete { top: 6px; left: 6px; font-size: 9px; padding: 5px 8px 4px; gap: 5px; }
  .card-produto__frete svg { width: 13px; height: 13px; }
}

/* ESGOTADO — pastilha no canto ESQUERDO, o mesmo do frete grátis. Nunca dividem
   o canto: produto sem estoque não anuncia benefício de entrega (ver o PHP do card).
   Forma de pastilha e não de fita porque fita, aqui, classifica o produto
   ("Controlado"); pastilha diz o ESTADO dele. Cinza-escuro em vez da sálvia: sálvia
   é o par de benefício da casa (frete, promo, CTA), e isto é o contrário de um
   benefício — usar a mesma cor faria o "Esgotado" ler como oferta de relance. */
.card-produto__esgotado {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: inline-flex; align-items: center;
  max-width: calc(100% - 16px);
  padding: 6px 10px 5px;
  border-radius: var(--raio-sm);
  background: rgba(24, 24, 27, .82);
  color: #fff;
  font-size: 10px; font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--sombra-sm);
  pointer-events: none;
}
@container (max-width: 239px) {
  .card-produto__esgotado { top: 6px; left: 6px; font-size: 9px; padding: 5px 8px 4px; }
}

/* A foto perde a cor — é o sinal que se lê antes de qualquer texto, de longe e
   no meio de uma vitrine inteira colorida. Só a FOTO: preço e nome continuam
   legíveis porque a pessoa ainda precisa reconhecer o produto que procurava.
   Grayscale parcial, não total: o produto tem que continuar identificável. */
.card-produto--esgotado .card-produto__img img { filter: grayscale(.85); opacity: .72; }

/* Botão Adicionar — "+ Adicionar" full-width (vira compacto ao lado no desktop largo) */
.card-produto__add {
  flex: none;
  width: 100%; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--marca-primaria);
  color: var(--marca-sobre-primaria);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .03em;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.card-produto__add svg { width: 19px; height: 19px; }
.card-produto__add:hover { background: var(--marca-primaria-escura); }
.card-produto__add:active { transform: scale(.97); }

/* Esgotado: mesma caixa, sem afeto de botão. É um <span>, não um link — não há
   ação nenhuma aqui, e fingir que há (hover, cursor de mão) é o que fazia a
   pessoa clicar pra nada. O caminho pra PDP continua na foto e no título. */
.card-produto__add--esgotado {
  background: transparent;
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda);
  box-shadow: none;
  cursor: default;
}
.card-produto__add--esgotado:hover { background: transparent; }

@media (min-width: 640px) {
  .grid-produtos { grid-template-columns: repeat(3, 1fr); }
  .card-produto__body { padding: var(--sp-4); }
  .card-produto__preco .agora { font-size: 1.125rem; }
}

/* Desktop: vitrine = 4 colunas. Rodapé fica EMPILHADO (preço em cima + botão
   full-width embaixo, = layout do cross-sell) — em card estreito o lado-a-lado
   espremia o preço. */
@media (min-width: 992px) {
  .grid-produtos { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   PRODUTO EM DESTAQUE — CLEAN (estilo do site institucional).
   Painel AMARELO com a lata (esq) + conteúdo clean (dir): pills de formato,
   título controlado, descrição curta, preço, CTAs. Sem degradê/grão/sticker.
   Mobile: empilhado → desktop: 2 colunas.
   ========================================================================== */
.destaque { padding-block: var(--sp-8); }
/* ⚠️ minmax(0, 1fr), não 1fr — `1fr` é `minmax(auto, 1fr)`, e esse `auto` trava a
   coluna no min-content do item. A tira de miniaturas (6 × 64px + gaps = 424px)
   empurrava a coluna pra 424 numa tela de 358, levando o corpo junto e deixando a
   página larga demais no celular. Mesma armadilha do `.pdp__grid` (produto.css) e
   a mesma família do "item flex não encolhe sozinho" do CLAUDE.md.
   No desktop as duas colunas já nascem com minmax(0, …) — por isso só o mobile
   quebrou. */
.destaque__card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4);
  align-items: stretch;
}

/* Painel amarelo da lata — QUADRADO (aspect-ratio 1) no mobile e no desktop.
   ⚠️ A lata é position:absolute + object-fit:contain (senão a altura intrínseca
   da imagem estoura o track e o aspect-ratio não é respeitado — gotcha conhecido). */
.destaque__media {
  position: relative;
  background: var(--cinza-50);   /* aparece só enquanto a foto carrega */
  /* Mesma moldura da foto na PDP (.pdp__media--foto, produto.css): contorno de 1px
     no tom de borda do tema, sobre o mesmo raio de 24px. */
  border: 1px solid var(--cor-borda);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%; max-width: 440px; margin-inline: auto;
}
/* FOTO completa preenchendo o quadro (mesma regra dos cards: produtos são
   fotos, não renders recortados → sem palco, padding ou sombra). */
.destaque__media img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* A foto leva à PDP (o título também). O link cobre o quadro inteiro; a <img>
   dentro dele mantém o mesmo box, porque o link repete o `inset: 0`. */
.destaque__media-link { position: absolute; inset: 0; display: block; }

/* Coluna esquerda = foto + tira de miniaturas. O wrapper existe porque as duas
   são UM item da grade de 2 colunas do .destaque__card — sem ele a tira virava
   uma terceira coluna. */
/* `min-width: 0` aqui e na tira: item de grid/flex não encolhe abaixo do
   min-content sozinho, e `overflow-x: auto` na tira NÃO zera essa contribuição —
   quem tem que ceder é o item. Sem os dois, a coluna volta a ser refém das 6
   miniaturas. */
.destaque__galeria { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* Tira de miniaturas: só aparece com 2+ fotos (ver loja_render_destaque).
   Rola de lado quando não couber, em vez de quebrar em duas fileiras — a
   segunda fileira desalinhava a foto do conteúdo à direita. */
.destaque__thumbs {
  display: flex; gap: var(--sp-2);
  width: 100%; min-width: 0; max-width: 440px; margin-inline: auto;
  overflow-x: auto; scrollbar-width: none;
}
.destaque__thumbs::-webkit-scrollbar { display: none; }
.destaque__thumb {
  flex: none; width: 64px; aspect-ratio: 1;
  padding: 0; cursor: pointer; overflow: hidden;
  background: var(--cinza-50);
  border: 1.5px solid var(--cor-borda); border-radius: 10px;
  transition: border-color var(--t-rapida);
}
.destaque__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destaque__thumb:hover { border-color: var(--cinza-400); }
/* Cinza médio, não preto — mesma decisão do trilho da PDP (ver produto.css):
   o preto pesava demais para uma tira de apoio. */
.destaque__thumb--ativo, .destaque__thumb--ativo:hover { border-color: var(--cinza-400); border-width: 2px; }

/* Conteúdo */
.destaque__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
}

/* Swatches de formato — chips clicáveis, canto reto, menores */
.destaque__formats { display: flex; align-items: center; gap: var(--sp-2); }
.fmt {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 .8rem; border-radius: 8px;
  background: var(--cinza-100); color: var(--marca-secundaria);
  font-weight: var(--peso-bold); font-size: var(--fs-xs);
  cursor: pointer;
  /* Um pouco mais lento que --t-rapida (.15s) e com saída suave: o preenchimento
     preto entrando "seco" era parte do que fazia a seleção parecer grosseira. */
  transition: background var(--t), color var(--t);
}
.fmt:hover { background: var(--cinza-200); }
.fmt--ativo, .fmt--ativo:hover { background: var(--marca-secundaria); color: var(--marca-clara); }

/* eyebrow + nome + social = filhos diretos do body → espaçamento IGUAL entre eles (gap do body, sp-4) */
.destaque__eyebrow { font-size: var(--fs-xs); font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .14em; color: var(--marca-primaria-escura); }
.destaque__nome { font-size: var(--fs-xl); line-height: 1.05; color: var(--marca-secundaria); }   /* = títulos de seção (40px desktop) */
/* o título é link pra PDP, mas continua LENDO como título (sem cor de link) */
.destaque__nome a { color: inherit; text-decoration: none; transition: color var(--t-rapida); }
.destaque__nome a:hover { color: var(--marca-primaria); }
.destaque__social { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-sm); color: var(--cor-texto-suave); }
.destaque__estrelas { color: var(--marca-primaria); font-size: var(--fs-md); letter-spacing: 1px; }
.destaque__aval { font-weight: var(--peso-semibold); color: var(--cor-texto); }
.destaque__sep { opacity: .4; }
/* Formato (label + pills) */
.destaque__opt { display: flex; flex-direction: column; gap: var(--sp-2); }
.destaque__opt-tit { font-size: var(--fs-sm); font-weight: var(--peso-bold); }
.destaque__desc { font-size: var(--fs-base); line-height: 1.6; color: var(--cor-texto-suave); max-width: 48ch; }

/* Preço — limpo: valor no Pix em destaque + linha secundária */
.destaque__preco { display: flex; flex-direction: column; gap: 3px; }
.destaque__preco-topo { display: flex; align-items: baseline; gap: .5rem; }
.destaque__agora { font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: var(--peso-black); line-height: 1; }
.destaque__agora--consulta { font-size: var(--fs-lg); font-weight: var(--peso-bold); } /* sob consulta: frase, não número */
.destaque__pix {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .04em; color: #32BCAD;
}
.destaque__pix svg { width: 14px; height: 14px; }
.destaque__cartao { font-size: var(--fs-sm); color: var(--cor-texto-suave); }

/* CTA — reusa o MESMO botão dos cards (.card-produto__add) p/ consistência;
   aqui só ajusto a largura p/ caber no conteúdo (em vez de 100%). */
.destaque__ctas { width: 100%; margin-top: var(--sp-1); display: flex; gap: var(--sp-3); align-items: stretch; }
.destaque__ctas .qty { flex: none; }
.destaque__ctas .qty button { width: 40px; }
.destaque__add { flex: 1; width: auto; height: auto; min-height: 52px; padding: .95rem 1.5rem; }   /* qty + botão lado a lado; botão preenche o resto */

/* Produto CONTROLADO: WhatsApp no lugar do add-to-cart. Mesma régua do
   .pdp__controlado-btn (produto.css) — que NÃO é carregado na home, por isso a
   regra vive aqui em vez de ser reusada. Sem stepper ao lado: o volume se
   combina na conversa, então o botão ocupa a linha inteira. */
.destaque__wpp {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: 52px; padding: .95rem 1.5rem;
  border-radius: var(--raio-sm);
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  transition: background var(--t-rapida);
}
.destaque__wpp:hover { background: var(--marca-primaria-escura); color: var(--marca-sobre-primaria); }
.destaque__wpp svg { width: 20px; height: 20px; flex: none; }

/* ---- Trocar a variação NÃO anima nada ----------------------------------------
   Aqui existiam três microanimações (dq-fade no card, dq-rise no preço, dq-img +
   dq-pop na imagem/pastilha). Todas saíram, nesta ordem de descoberta:

   1. o "pop" de escala na pastilha pulava enquanto ela trocava de cor;
   2. preço e imagem animando juntos, em colunas opostas, liam como dois eventos
      desencontrados — e o preço fica sob o olhar de quem clicou, não precisa de aceno;
   3. a raiz do "piscando": trocar a `src` esvazia o <img> por ~40ms (medido) enquanto
      o navegador decodifica o arquivo novo. O fade rodava POR CIMA desse buraco, então
      o que se via era a imagem antiga sumir, um vão, e a nova surgir. Resolvido em
      produto.js/sidecart.js pré-carregando a imagem e só então trocando.

   O que ficou: um assentamento discreto NA IMAGEM, e só nela.

   ⚠️ REGRA: a animação de troca NÃO mexe em `opacity`. Opacidade era a origem de tudo
   que se viu como piscada — enquanto a imagem estiver abaixo de 1 aparece o painel
   amarelo através do produto. Aqui só há `transform: scale`, então o produto está
   sempre 100% opaco; o que se percebe é um micro-assentamento na chegada, não um fade.
   Preço e pastilha seguem sem animação própria (a pastilha tem a transição de cor). */
@keyframes loja-troca { from { transform: scale(.975); } to { transform: none; } }
.loja-troca-anim { animation: loja-troca var(--dur-media) var(--ease-assenta) both; }
@media (prefers-reduced-motion: reduce) {
  .loja-troca-anim { animation: none; }
}

@media (min-width: 768px) {
  /* painel (máx. 440px) + conteúdo (máx. 520px), o conjunto CENTRALIZADO na seção */
  .destaque__card { grid-template-columns: minmax(0, 440px) minmax(0, 520px); gap: var(--sp-7); align-items: center; justify-content: center; }
  .destaque__body { justify-content: center; padding: var(--sp-5); }
  .destaque__add { width: auto; }                                          /* desktop: content-width */
  .destaque__wpp { width: auto; }                                          /* idem, pra coluna não mudar de forma entre um produto e outro */
}

/* ==========================================================================
   VITRINE--MARCA — variante com a pele da marca (usada na vitrine Novidades).
   Reusa a mesma grade (.grid-produtos) e o mesmo card (.card-produto), sem
   tocá-los: só troca a "pele" da seção (fundo grafite + filete amarelo no topo)
   → os cards brancos saltam no escuro e a página ganha ritmo (branco·escuro·branco).
   ========================================================================== */
/* Pele AMARELA (os cards brancos saltam no amarelo). Tudo que era claro/amarelo
   (eyebrow, traço, título, link, filete) vira ESCURO — senão sumiria/ficaria sem
   contraste sobre o amarelo. */
.vitrine--marca {
  background: var(--marca-primaria);
  border-top: 1px solid rgba(0, 0, 0, .12);   /* filete escuro (amarelo seria invisível) */
  color: var(--marca-secundaria);
}
.vitrine--marca .secao-head h2 { color: var(--marca-sobre-primaria); }
.vitrine--marca .secao-head__eyebrow { color: var(--marca-sobre-primaria); }
.vitrine--marca .secao-head__eyebrow::before { background: var(--marca-sobre-primaria); }
.vitrine--marca .secao-head__link { color: var(--marca-sobre-primaria); }
.vitrine--marca .secao-head__link:hover { color: var(--marca-sobre-primaria); text-decoration: underline; }

/* ==========================================================================
   COMPRE POR MARCA — seletor de marcas: produto sobre um CÍRCULO AMARELO,
   vazando um pouco a borda do círculo. Fundo branco. (Não copia o balybrasil.)
   ========================================================================== */
.marcas { background: var(--marca-clara); padding-block: var(--sp-8); }

/* Carrossel de LOGOS (option do painel), contido no container: trilho nativo
   com snap + setas + AUTOPLAY por slide (home.js, data-car-auto). Cards
   hairline com logo contido; cinza → cor no hover. */
.marcas__trilho {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.marcas__trilho::-webkit-scrollbar { display: none; }
.marca-logo {
  flex: 0 0 clamp(140px, 22vw, 190px);
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--marca-clara);
}
.marca-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--t);
}
.marca-logo:hover img { transform: scale(1.05); }
.marcas__head { text-align: center; margin-bottom: var(--sp-6); }
.marcas__head h2 {
  display: inline-block; position: relative;
  font-size: var(--fs-xl); text-transform: uppercase; color: var(--marca-secundaria);
  padding-bottom: var(--sp-3);
}
.marcas__head h2::after {                          /* traço amarelo da marca */
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 48px; height: 3px; border-radius: 2px; background: var(--marca-primaria);
}

/* Mobile: ROLAGEM HORIZONTAL. O padding vertical dá espaço p/ a foto VAZAR sem
   ser cortada (overflow-x:auto recorta o eixo Y → a sobra cabe no padding).
   Desktop (≥768): quebra linha centralizado (ver media query no fim). */
.marcas__row {
  display: flex; flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-5) 2px var(--sp-3);   /* topo/baixo = folga p/ o vazamento */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.marcas__row::-webkit-scrollbar { display: none; }

.marca-tile {
  flex: 0 0 auto;
  width: clamp(100px, 28vw, 150px);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  padding: var(--sp-2) var(--sp-2) 0;
  scroll-snap-align: center;
  text-align: center;
}
/* Círculo amarelo (fundo). Sem overflow:hidden → o produto vaza a borda. */
.marca-tile__img {
  position: relative;
  width: clamp(82px, 24vw, 118px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--marca-primaria);
  display: grid; place-items: center;
}
/* produto ABSOLUTO → não estica a altura do círculo (mantém redondo) e vaza a borda.
   max-height escala junto c/ o círculo (clamp) → vazamento sutil também no mobile. */
.marca-tile__img img {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-height: clamp(100px, 29vw, 142px); max-width: 168%; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .22));
  transition: transform var(--t);
}
.marca-tile:hover .marca-tile__img img { transform: translate(-50%, calc(-50% - 6px)) scale(1.05); }
.marca-tile__nome {
  font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--marca-secundaria);
  transition: color var(--t-rapida);
}
.marca-tile:hover .marca-tile__nome { color: var(--marca-primaria-escura); }
/* tile "Outros" — seta dentro do círculo (não vaza) */
.marca-tile--outros .marca-tile__img svg { width: 40px; height: 40px; color: var(--marca-sobre-primaria); }

/* Desktop: tem espaço → quebra linha centralizado, sem scroll */
@media (min-width: 768px) {
  .marcas__row {
    flex-wrap: wrap; justify-content: center;
    overflow: visible;
    padding: var(--sp-3) 0 0;
    row-gap: var(--sp-5);
  }
}

/* ==========================================================================
   PROGRAMA DE AFILIADOS (.lovers) — chamada do programa (gated pelo módulo).
   Cabeçalho reusa .secao-head. Cada peça = caixa tracejada (listrado diagonal,
   igual ao placeholder de banner da PLP) + nome. Trocar .lovers__ph por <img>.
   ========================================================================== */
.lovers { padding-block: var(--sp-8); }
/* card único full-width (largura do container), formato banner responsivo */
.lovers__ph {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border: 1.5px dashed var(--cinza-300); border-radius: var(--raio-lg);
  background: repeating-linear-gradient(135deg, var(--cinza-100) 0 14px, var(--cinza-50) 14px 28px);
  color: var(--cor-texto-suave); text-align: center; padding: var(--sp-4);
}
@media (min-width: 768px) { .lovers__ph { aspect-ratio: 5 / 2; } }   /* desktop = faixa larga */
.lovers__ph span { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

/* ==========================================================================
   LISTA — captação de assinantes (e-mail + WhatsApp)
   Estudo aprovado: mockup/estudos/lista-baly.html (herdado da Baly)

   O CAMPO É A TESE: a única tarefa da seção é receber um contato, então o input
   tem peso de manchete (sem caixa, só a linha) em vez do padrão "título gigante +
   campo espremido". A linha CARREGA em amarelo quando o valor fica válido — CSS
   puro via :not(:placeholder-shown):valid, sem JS.

   PAINEL PRETO (não amarelo): o painel amarelo já é a assinatura do "produto em
   destaque"; repetir daria dois contêineres iguais na mesma página.
   ========================================================================== */
.lista { padding-block: var(--sp-8); }

.lista__painel {
  /* mesma linguagem da banda Guia Legal: trama carbono sutil + halo sálvia
     + degradê do verde — as bandas escuras da home falam uma língua só */
  background:
    repeating-linear-gradient(55deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-55deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 6px),
    radial-gradient(640px 340px at 82% 50%, color-mix(in srgb, var(--marca-acento) 12%, transparent), transparent 70%),
    linear-gradient(175deg, var(--marca-primaria-escura) 0%, var(--marca-primaria) 55%);
  color: var(--marca-clara);
  border-radius: var(--raio);   /* 12px — geometria da casa (era 20) */
  padding: clamp(30px, 6vw, 56px);
}
@media (min-width: 900px) {
  .lista__painel {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(44px, 6vw, 76px);
    align-items: center;
  }
}

.lista__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--marca-acento);   /* sálvia sobre o painel escuro (primária sumia) */
}

.lista__titulo {
  margin: var(--sp-3) 0 0;
  font-size: clamp(1.5rem, 3.5vw, 2rem);   /* escala de banda (igual à TV/Guia) */
  line-height: 1.12;
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.lista__sub {
  margin: var(--sp-3) 0 0;
  max-width: 42ch;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, .64);
}

.lista__form { margin-top: var(--sp-6); }
@media (min-width: 900px) { .lista__form { margin-top: 0; } }

.lista__campo { position: relative; display: block; margin-bottom: var(--sp-5); }
.lista__label {
  display: block; margin-bottom: .45rem;
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .52);
}
.lista__label em { font-style: normal; font-weight: var(--peso-semibold); letter-spacing: .04em; opacity: .7; }

.lista__input {
  width: 100%;
  background: none; border: 0; border-radius: 0;
  padding: 0 0 .7rem;
  color: var(--marca-clara);
  font-family: var(--fonte);
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  font-weight: var(--peso-semibold);
  letter-spacing: -.01em;
}
.lista__input::placeholder { color: rgba(255, 255, 255, .3); font-weight: var(--peso-regular); }
.lista__input:focus { outline: none; }
.lista__input:focus-visible ~ .lista__carga { background: rgba(255, 255, 255, .34); }

.lista__carga {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .16);
  transition: background var(--t-rapida);
}
.lista__carga::after {
  content: ""; display: block; height: 100%; width: 100%;
  background: var(--marca-primaria);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-lenta) var(--ease-painel);
}
.lista__input:not(:placeholder-shown):valid ~ .lista__carga::after { transform: scaleX(1); }

/* Armadilha anti-robô: fora da tela, mas NÃO display:none (robô ignora o que some). */
.lista__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Nota de consentimento informado (LGPD) — o clique no botão é a ação
   afirmativa; esta linha diz o que a pessoa vai receber. */
.lista__nota {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: color-mix(in srgb, var(--marca-clara) 62%, transparent);
}

.lista__cta {
  width: 100%; height: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  /* SÁLVIA sobre o painel escuro (primária na primária sumia — herança Baly,
     onde a primária era amarela e o painel preto) */
  background: var(--marca-acento); color: var(--marca-primaria);
  border: 0; border-radius: var(--raio); cursor: pointer;
  font-family: var(--fonte); font-size: 0.8125rem; font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: .06em;
  transition: background var(--t-rapida), transform var(--t-rapida), opacity var(--t-rapida);
}
.lista__cta:hover { background: color-mix(in srgb, var(--marca-acento) 85%, #fff); }
.lista__cta:active { transform: translateY(1px); }
.lista__cta:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 3px; }
.lista__cta[disabled] { opacity: .6; cursor: default; }

/* Mensagem de retorno. Só ocupa espaço quando tem texto (senão abre um vão morto). */
.lista__msg { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.lista__msg:not(:empty) { margin-top: var(--sp-3); }
/* ⚠️ SÁLVIA, NÃO PRIMÁRIA. A primária é #12281E — verde quase preto — e este
   painel tem fundo escuro: a confirmação saía invisível, escrita em preto sobre
   preto. O mesmo tropeço que o .lista__eyebrow acima já registra ("primária
   sumia") e que o .lista__cta repete. A primária não é "a cor verde" da marca. */
.lista__msg--ok { color: var(--marca-acento); font-weight: var(--peso-bold); }
.lista__msg--erro { color: #ff8a8a; }

/* Estado final: some o formulário e fica só a confirmação. */
.lista__form.is-pronto .lista__campo,
.lista__form.is-pronto .lista__consent,
/* A nota de consentimento explica o que vai acontecer AO CLICAR. Depois de
   inscrito ela é passado, e ficava embaixo da confirmação como se fosse parte
   dela — as duas linhas se atropelavam. */
.lista__form.is-pronto .lista__nota,
.lista__form.is-pronto .lista__cta { display: none; }
.lista__form.is-pronto .lista__msg { font-size: var(--fs-md); margin-top: 0; }

@media (max-width: 899px) {
  .lista__titulo { font-size: clamp(1.6rem, 7vw, 2rem); }
  /* --fs-md (18px) é peso de corpo de texto: abaixo de um título em caixa-alta e num
     painel estreito, competia com ele em vez de apoiar. */
  .lista__sub { font-size: var(--fs-base); margin-top: var(--sp-2); }
  .lista__form { margin-top: var(--sp-5); }
  .lista__campo { margin-bottom: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .lista__carga::after, .lista__check, .lista__cta { transition: none; }
}