/* ============================================================
   APAIXONADOS ALIMENTOS — LANDING DE REVENDEDORES
   revenda/revenda.css

   Página de captação B2B (seja.apaixonadosalimentos.com.br).
   Todos os valores usam tokens de ../tokens/index.css.
   Nenhum valor hardcoded de cor, fonte, espaçamento ou radius.
   ============================================================ */

/* ── Variáveis locais de escopo (--_) ────────────────────────── */
:root {
  --_container-narrow: 48rem;
  --_header-h: var(--apx-sizing-scale-56);
  --_estampa-off: url("../../../assets/estampas/svg/estampa_azulejo_fundo_transparente_off_white.svg");
  --_estampa-janela-off: url("../../../assets/estampas/svg/estampa_janela_fundo_transparente_off_white.svg");
  --_estampa-vinho: url("../../../assets/estampas/svg/estampa_azulejo_fundo_transparente_vinho.svg");

  /* Sombras em camadas (ambiente + contato) — compostas a partir das
     transparências dos tokens. Profundidade premium sem peso.
     Camada 1 = contato (curta, nítida); camada 2 = ambiente (difusa). */
  --_shadow-soft:
    0 1px 2px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.05),
    0 2px 8px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.05);
  --_shadow-card:
    0 1px 2px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.05),
    0 8px 20px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.08);
  --_shadow-card-hover:
    0 2px 4px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.07),
    0 18px 36px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.14);
  --_shadow-hero:
    0 6px 16px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.14),
    0 28px 56px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.2);
  --_shadow-cta:
    0 2px 8px rgba(var(--apx-palette-rgb-vinho-bordo-profundo), 0.2),
    0 14px 30px rgba(var(--apx-palette-rgb-vinho-bordo-profundo), 0.26);
  --_shadow-cream:
    0 2px 6px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.18),
    0 12px 26px rgba(var(--apx-palette-rgb-marrom-chocolate), 0.24);

  /* Easing ease-out (quart): saída ágil, assentamento suave. */
  --_ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Ritmo vertical fluido: respira mais no desktop. Seções narrativas
     (sobre, cta) ganham folga maior que as de lista, criando cadência. */
  --_section-y: clamp(
    var(--apx-spacing-scale-64),
    7vw,
    var(--apx-spacing-scale-128)
  );
  --_section-y-lg: clamp(
    var(--apx-spacing-scale-80),
    9vw,
    var(--apx-spacing-scale-160)
  );
}

/* ── Reset leve / base de página ─────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--_header-h) + var(--apx-spacing-scale-16));
}

body {
  margin: 0;
  background-color: var(--apx-background-color-primary);
  color: var(--apx-text-color-primary);
  font-family: var(--apx-font-family-body);
  font-size: var(--apx-font-size-scale-md);
  line-height: var(--apx-font-line-height-scale-4xl);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--apx-spacing-scale-16);
  top: calc(-1 * var(--apx-spacing-scale-96));
  z-index: var(--apx-z-index-tooltip);
  background-color: var(--apx-background-color-brand);
  color: var(--apx-text-color-on-brand);
  font-family: var(--apx-font-family-body);
  font-size: var(--apx-font-size-scale-xs);
  font-weight: var(--apx-font-weight-medium);
  padding: var(--apx-spacing-scale-12) var(--apx-spacing-scale-20);
  border-radius: var(--apx-border-radius-md);
  transition: top var(--apx-motion-duration-fast)
    var(--apx-motion-timing-function-default);
}
.skip-link:focus {
  top: var(--apx-spacing-scale-16);
}

/* ── Containers ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--apx-layout-max-width-desktop);
  margin-inline: auto;
  padding-inline: var(--apx-layout-margin-mobile);
}
.container--narrow {
  max-width: var(--_container-narrow);
}
@media (min-width: 640px) {
  .container {
    padding-inline: var(--apx-layout-margin-tablet);
  }
}
@media (min-width: 1024px) {
  .container {
    padding-inline: var(--apx-layout-margin-desktop);
  }
}

/* ── Seção: cabeçalhos ───────────────────────────────────────── */
.secao-head {
  max-width: 52rem;
  margin-bottom: var(--apx-spacing-scale-48);
}
.secao-head--center {
  margin-inline: auto;
  text-align: center;
}
.secao-titulo {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-xl);
  line-height: var(--apx-font-line-height-scale-xs);
  letter-spacing: var(--apx-font-letter-spacing-super-tight);
  color: var(--apx-text-color-brand);
  margin: 0 0 var(--apx-spacing-scale-20);
  text-wrap: balance;
}
.secao-titulo--light {
  color: var(--apx-palette-color-creme-baunilha-suave);
}
.secao-intro {
  font-size: var(--apx-font-size-scale-sm-lg);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-text-color-secondary);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.secao-head--center .secao-intro {
  margin-inline: auto;
}
@media (min-width: 768px) {
  .secao-titulo {
    font-size: var(--apx-font-size-scale-2xl);
  }
}

/* ── Botões ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--apx-spacing-scale-8);
  font-family: var(--apx-font-family-body);
  font-size: var(--apx-button-font-size);
  font-weight: var(--apx-button-font-weight);
  line-height: var(--apx-button-line-height);
  letter-spacing: var(--apx-button-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  border: var(--apx-border-width-none) solid transparent;
  border-radius: var(--apx-button-radius);
  padding: var(--apx-button-padding-y) var(--apx-button-padding-x);
  /* Única declaração de transição — todas as props com mesma curva
     para que hover e active se movam sempre em sincronia. */
  transition:
    background-color var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    color var(--apx-motion-duration-base) var(--apx-motion-timing-function-soft),
    border-color var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    box-shadow var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    transform var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft);
}
.btn:focus-visible {
  outline: var(--apx-focus-ring-width) solid var(--apx-focus-ring-color);
  outline-offset: var(--apx-focus-ring-offset);
}
.btn__icon {
  display: inline-flex;
  margin-left: calc(-1 * var(--apx-spacing-scale-4));
}
.btn--sm {
  font-size: var(--apx-font-size-scale-xs);
  padding: var(--apx-spacing-scale-8) var(--apx-spacing-scale-16);
}
.btn--lg {
  font-size: var(--apx-font-size-scale-sm);
  padding: var(--apx-spacing-scale-20) var(--apx-spacing-scale-32);
}
.btn--block {
  width: 100%;
}

.btn--primary {
  background-color: var(--apx-button-primary-bg);
  color: var(--apx-button-primary-text);
}
/* ── Hover/active padronizados ────────────────────────────────
   Mesma gramática em todas as variantes:
     hover  → lift -3px + sombra elevada
     active → press +1px (sombra reduzida — sensação tátil)
──────────────────────────────────────────────────────────── */
.btn:hover {
  transform: translateY(-3px);
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary:hover {
  background-color: var(--apx-button-primary-bg-hover);
  box-shadow: var(--_shadow-cta);
}
.btn--primary:active {
  background-color: var(--apx-button-primary-bg-pressed);
  box-shadow: var(--_shadow-soft);
}

/* Variante creme — sobre fundo bordô/chocolate */
.btn--cream {
  background-color: var(--apx-palette-color-creme-baunilha-suave);
  color: var(--apx-text-color-brand);
  box-shadow: var(--_shadow-soft);
}
.btn--cream:hover {
  background-color: var(--apx-palette-color-branco-marfim);
  box-shadow: var(--_shadow-cream);
}
.btn--cream:active {
  box-shadow: var(--_shadow-soft);
}

/* Variante ghost clara — sobre fundo escuro */
.btn--ghost-light {
  background-color: transparent;
  color: var(--apx-palette-color-creme-baunilha-suave);
  border: var(--apx-border-width-regular) solid
    rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.4);
}
.btn--ghost-light:hover {
  background-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.1);
  border-color: var(--apx-palette-color-creme-baunilha-suave);
  box-shadow: 0 4px 16px rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.12);
}
.btn--ghost-light:active {
  background-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.06);
  box-shadow: none;
}

/* Ícone: scale sutil sincronizado com a mesma curva do botão. */
.btn .btn__icon {
  transition: transform var(--apx-motion-duration-base)
    var(--apx-motion-timing-function-soft);
}
.btn:hover .btn__icon {
  transform: scale(1.1);
}
.btn:active .btn__icon {
  transform: scale(0.96);
}

/* ── Foco visível unificado (acessibilidade + acabamento) ─────── */
a:focus-visible {
  outline: var(--apx-focus-ring-width) solid var(--apx-focus-ring-color);
  outline-offset: var(--apx-focus-ring-offset);
  border-radius: var(--apx-border-radius-sm);
}
/* Sobre fundos escuros, anel claro para manter contraste do foco. */
.hero a:focus-visible,
.cta a:focus-visible,
.vantagens a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--apx-palette-color-creme-baunilha-suave);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn .btn__icon {
    transition:
      background-color var(--apx-motion-duration-fast) linear,
      border-color var(--apx-motion-duration-fast) linear,
      box-shadow var(--apx-motion-duration-fast) linear;
  }
  .btn:hover,
  .btn:active,
  .btn:hover .btn__icon,
  .btn:active .btn__icon {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--apx-z-index-sticky);
  background-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0);
  backdrop-filter: saturate(120%) blur(8px);
  background-color: color-mix(
    in srgb,
    var(--apx-background-color-primary) 88%,
    transparent
  );
  border-bottom: var(--apx-border-width-hairline) solid
    var(--apx-outline-color-subtle);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--apx-spacing-scale-16);
  width: 100%;
  max-width: var(--apx-layout-max-width-desktop);
  margin-inline: auto;
  height: var(--_header-h);
  padding-inline: var(--apx-layout-margin-mobile);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo {
  height: var(--apx-spacing-scale-40);
  width: auto;
  display: block;
}
.site-nav {
  display: none;
  gap: var(--apx-spacing-scale-32);
}
.site-nav a {
  font-family: var(--apx-font-family-body);
  font-size: var(--apx-nav-font-size);
  font-weight: var(--apx-nav-font-weight);
  color: var(--apx-nav-link-color);
  text-decoration: none;
  padding-block: var(--apx-spacing-scale-4);
  position: relative;
  transition: color var(--apx-motion-duration-fast)
    var(--apx-motion-timing-function-default);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--apx-border-width-thick);
  background-color: var(--apx-palette-color-coral-doce-artesanal);
  transition: width var(--apx-motion-duration-base)
    var(--apx-motion-timing-function-default);
}
.site-nav a:hover {
  color: var(--apx-nav-link-hover);
}
.site-nav a:hover::after,
.site-nav a.is-active::after {
  width: 100%;
}
.site-nav a.is-active {
  color: var(--apx-text-color-brand);
}
@media (min-width: 768px) {
  .site-header__inner {
    padding-inline: var(--apx-layout-margin-tablet);
  }
  .site-nav {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .site-header__inner {
    height: var(--apx-sizing-scale-64);
    padding-inline: var(--apx-layout-margin-desktop);
  }
}
/* Em telas muito estreitas, o CTA do header recolhe o texto */
@media (max-width: 419px) {
  .site-header .btn--sm {
    font-size: 0;
    gap: 0;
    padding-inline: var(--apx-spacing-scale-12);
  }
  .site-header .btn--sm .btn__icon {
    margin: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background-color: var(--apx-background-color-brand);
  color: var(--apx-palette-color-creme-baunilha-suave);
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - 65px);
}
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--_estampa-off);
  background-size: 420px;
  opacity: var(--apx-opacity-pattern-min);
  z-index: var(--apx-z-index-underlay);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: var(--apx-z-index-surface);
  width: 100%;
  max-width: var(--apx-layout-max-width-desktop);
  margin-inline: auto;
  padding-inline: var(--apx-layout-margin-mobile);
  padding-block: var(--apx-spacing-scale-64) var(--apx-spacing-scale-80);
  display: grid;
  gap: var(--apx-spacing-scale-48);
}
.hero__kicker {
  display: inline-block;
  font-family: var(--apx-font-family-body);
  font-size: var(--apx-font-size-scale-4xs);
  font-weight: var(--apx-font-weight-bold);
  letter-spacing: var(--apx-font-letter-spacing-widest);
  text-transform: uppercase;
  color: var(--apx-palette-color-coral-suave);
  margin: 0 0 var(--apx-spacing-scale-20);
}
.hero__title {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-2xl);
  color: var(--apx-palette-color-creme-baunilha-suave);
  line-height: var(--apx-font-line-height-scale-xs);
  letter-spacing: var(--apx-font-letter-spacing-super-tight);
  margin: 0 0 var(--apx-spacing-scale-24);
  text-wrap: balance;
}
.hero__lead {
  font-size: var(--apx-font-size-scale-sm-lg);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-palette-color-branco-marfim);
  margin: 0 0 var(--apx-spacing-scale-32);
  max-width: 54ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--apx-spacing-scale-16);
  margin-bottom: var(--apx-spacing-scale-40);
}
.hero__proof {
  list-style: none;
  margin: 0;
  padding: var(--apx-spacing-scale-24) 0 0;
  border-top: var(--apx-border-width-hairline) solid
    rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.18);
  display: grid;
  gap: var(--apx-spacing-scale-12);
}
.hero__proof li {
  position: relative;
  padding-left: var(--apx-spacing-scale-24);
  font-size: var(--apx-font-size-scale-xs);
  color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.86);
  line-height: var(--apx-font-line-height-scale-md);
}
.hero__proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: var(--apx-spacing-scale-8);
  height: var(--apx-spacing-scale-8);
  border-radius: var(--apx-border-radius-circle);
  background-color: var(--apx-palette-color-coral-doce-artesanal);
}
.hero__media {
  position: relative;
  margin: 0;
}
.hero__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--apx-border-radius-xl);
  box-shadow: var(--_shadow-hero);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero__selo {
  position: absolute;
  width: var(--apx-spacing-scale-96);
  height: auto;
  top: calc(-1 * var(--apx-spacing-scale-16));
  left: calc(-1 * var(--apx-spacing-scale-12));
  filter: drop-shadow(var(--apx-shadow-stamp));
  rotate: -8deg;
}

@media (min-width: 640px) {
  .hero__proof {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--apx-spacing-scale-20);
  }
  .hero__selo {
    width: var(--apx-spacing-scale-128);
  }
}
@media (min-width: 768px) {
  .hero__inner {
    padding-inline: var(--apx-layout-margin-tablet);
  }
  .hero__title {
    font-size: var(--apx-font-size-scale-3xl);
  }
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--apx-spacing-scale-80);
    padding-inline: var(--apx-layout-margin-desktop);
    padding-block: var(--apx-spacing-scale-96) var(--apx-spacing-scale-96);
    min-height: calc(100vh - 65px);
  }
  .hero__selo {
    bottom: calc(-1 * var(--apx-spacing-scale-24));
    left: calc(-1 * var(--apx-spacing-scale-32));
  }
}

/* ════════════════════════════════════════════════════════════
   PRODUTOS
═══════════════════════════════════════════════════════════════ */
.produtos {
  padding-block: var(--_section-y);
  background-color: var(--apx-background-color-primary);
}
.produtos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--apx-spacing-scale-32);
}
.produto {
  background-color: var(--apx-card-bg);
  border: var(--apx-border-width-hairline) solid var(--apx-outline-color-subtle);
  border-radius: var(--apx-border-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--_shadow-card);
  transition:
    transform var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    box-shadow var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    border-color var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft);
}
.produto:hover {
  transform: translateY(-6px);
  box-shadow: var(--_shadow-card-hover);
  border-color: rgba(var(--apx-palette-rgb-vinho-bordo-profundo), 0.18);
}
.produto__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.produto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--apx-motion-duration-slow)
    var(--apx-motion-timing-function-soft);
}
.produto:hover .produto__img {
  transform: scale(1.04);
}
.produto__media {
  position: relative;
}
/* Badge comercial sobre a imagem: a informação que o revendedor
   procura primeiro (unidade de venda) visível num relance. */
.produto__tag {
  position: absolute;
  top: var(--apx-spacing-scale-12);
  left: var(--apx-spacing-scale-12);
  z-index: var(--apx-z-index-surface);
  background-color: color-mix(
    in srgb,
    var(--apx-background-color-brand) 92%,
    transparent
  );
  color: var(--apx-text-color-on-brand);
  font-size: var(--apx-font-size-scale-4xs);
  font-weight: var(--apx-font-weight-bold);
  letter-spacing: var(--apx-font-letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--apx-spacing-scale-4) var(--apx-spacing-scale-12);
  border-radius: var(--apx-border-radius-pill);
  backdrop-filter: blur(4px);
}
.produto__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--apx-spacing-scale-24) var(--apx-spacing-scale-24)
    var(--apx-spacing-scale-24);
}
.produto__nome {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-2md);
  color: var(--apx-text-color-brand);
  margin: 0 0 var(--apx-spacing-scale-16);
}
/* Specs comerciais: hierarquia clara, label discreto + valor forte. */
.produto__specs {
  margin: 0 0 var(--apx-spacing-scale-16);
  display: grid;
  gap: var(--apx-spacing-scale-12);
}
.produto__spec {
  display: flex;
  flex-direction: column;
  gap: var(--apx-spacing-scale-4);
}
.produto__spec dt {
  font-size: var(--apx-font-size-scale-4xs);
  font-weight: var(--apx-font-weight-medium);
  letter-spacing: var(--apx-font-letter-spacing-widest);
  text-transform: uppercase;
  color: var(--apx-text-color-muted);
}
.produto__spec dd {
  margin: 0;
  font-size: var(--apx-font-size-scale-sm);
  font-weight: var(--apx-font-weight-medium);
  color: var(--apx-text-color-primary);
  line-height: var(--apx-font-line-height-scale-sm);
}
/* Ficha técnica: detalhe de embalagem, recolhido por padrão. */
.produto__ficha {
  margin-top: auto;
  border-top: var(--apx-border-width-hairline) solid
    var(--apx-outline-color-subtle);
  padding-top: var(--apx-spacing-scale-12);
}
.produto__ficha summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--apx-font-size-scale-2xs);
  font-weight: var(--apx-font-weight-medium);
  letter-spacing: var(--apx-font-letter-spacing-wide);
  color: var(--apx-text-color-secondary);
  display: flex;
  align-items: center;
  gap: var(--apx-spacing-scale-8);
  padding-block: var(--apx-spacing-scale-4);
  transition: color var(--apx-motion-duration-fast)
    var(--apx-motion-timing-function-default);
}
.produto__ficha summary::-webkit-details-marker {
  display: none;
}
.produto__ficha summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--apx-font-size-scale-md);
  font-weight: var(--apx-font-weight-regular);
  color: var(--apx-palette-color-coral-doce-artesanal);
  line-height: 1;
  transition: transform var(--apx-motion-duration-base)
    var(--apx-motion-timing-function-default);
}
.produto__ficha[open] summary::after {
  transform: rotate(45deg);
}
.produto__ficha summary:hover {
  color: var(--apx-text-color-brand);
}
.produto__ficha summary:focus-visible {
  outline: var(--apx-focus-ring-width) solid var(--apx-focus-ring-color);
  outline-offset: var(--apx-focus-ring-offset);
  border-radius: var(--apx-border-radius-sm);
}
.produto__ficha p {
  font-size: var(--apx-font-size-scale-xs);
  line-height: var(--apx-font-line-height-scale-3xl);
  color: var(--apx-text-color-secondary);
  margin: var(--apx-spacing-scale-8) 0 0;
}
/* Link "ver na loja": bordô (AA ~9:1) com sublinhado coral como
   acento. Coral puro em texto pequeno reprovava WCAG (2.87:1). */
.produto__desc_link {
  margin-top: var(--apx-spacing-scale-12);
  font-size: var(--apx-font-size-scale-4xs);
}
.produto__desc_link a {
  color: var(--apx-text-color-accent);
  font-weight: var(--apx-font-weight-medium);
  text-decoration: underline;
  text-transform: uppercase;
  text-decoration-color: var(--apx-palette-color-coral-doce-artesanal);
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--apx-border-width-regular);
  transition: color var(--apx-motion-duration-fast)
    var(--apx-motion-timing-function-default);
}
.produto__desc_link a:hover {
  color: var(--apx-palette-color-bordo-hover);
  text-decoration-color: var(--apx-palette-color-bordo-hover);
}

/* ════════════════════════════════════════════════════════════
   SOBRE
═══════════════════════════════════════════════════════════════ */
.sobre {
  padding-block: var(--_section-y-lg);
  background-color: var(--apx-background-color-secondary);
}
.sobre__grid {
  display: grid;
  gap: var(--apx-spacing-scale-48);
  align-items: center;
}
.sobre__media {
  position: relative;
  margin: 0;
}
.sobre__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--apx-border-radius-xl);
  box-shadow: var(--_shadow-hero);
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
.sobre__selo {
  position: absolute;
  width: var(--apx-spacing-scale-96);
  height: auto;
  top: calc(-1 * var(--apx-spacing-scale-20));
  right: calc(-1 * var(--apx-spacing-scale-8));
  filter: drop-shadow(var(--apx-shadow-stamp));
  rotate: 7deg;
}
.sobre__lead {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-md);
  line-height: var(--apx-font-line-height-scale-md);
  color: var(--apx-text-color-primary);
  margin: 0 0 var(--apx-spacing-scale-20);
}
.sobre__texto {
  font-size: var(--apx-font-size-scale-sm);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-text-color-secondary);
  margin: 0 0 var(--apx-spacing-scale-24);
  max-width: 56ch;
}
.sobre__assinatura {
  font-family: var(--apx-font-family-accent);
  font-size: var(--apx-font-size-scale-2md);
  line-height: var(--apx-font-line-height-scale-sm);
  color: var(--apx-text-color-brand);
  margin: 0;
}
@media (min-width: 900px) {
  .sobre__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--apx-spacing-scale-80);
  }
  .sobre__selo {
    width: var(--apx-spacing-scale-128);
  }
}

/* ════════════════════════════════════════════════════════════
   PERFIS (Para quem é)
═══════════════════════════════════════════════════════════════ */
.perfis {
  padding-block: var(--_section-y);
}
.perfis__grid {
  display: grid;
  gap: var(--apx-spacing-scale-32);
}
.perfil {
  background-color: var(--apx-card-bg);
  border: var(--apx-border-width-hairline) solid var(--apx-outline-color-subtle);
  border-radius: var(--apx-border-radius-xl);
  padding: var(--apx-spacing-scale-40) var(--apx-spacing-scale-32);
  box-shadow: var(--_shadow-soft);
  transition:
    transform var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    box-shadow var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft);
}
.perfil:hover {
  transform: translateY(-4px);
  box-shadow: var(--_shadow-card);
}
.perfil__titulo {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-xl);
  color: var(--apx-text-color-brand);
  margin: 0 0 var(--apx-spacing-scale-12);
}
.perfil__desc {
  font-size: var(--apx-font-size-scale-sm);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-text-color-secondary);
  margin: 0 0 var(--apx-spacing-scale-24);
}
.perfil__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--apx-spacing-scale-12);
}
.perfil__lista li {
  position: relative;
  padding-left: var(--apx-spacing-scale-32);
  font-size: var(--apx-font-size-scale-sm);
  line-height: var(--apx-font-line-height-scale-md);
  color: var(--apx-text-color-secondary);
}
.perfil__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: var(--apx-spacing-scale-20);
  height: var(--apx-spacing-scale-20);
  border-radius: var(--apx-border-radius-circle);
  background-color: var(--apx-palette-color-verde-oliva-tradicional);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
    center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
    center / 70% no-repeat;
}
@media (min-width: 768px) {
  .perfis__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   VANTAGENS  (fundo chocolate, em camadas)
═══════════════════════════════════════════════════════════════ */
.vantagens {
  position: relative;
  padding-block: var(--_section-y);
  background-color: var(--apx-background-color-inverse);
  overflow: hidden;
  isolation: isolate;
}
.vantagens__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--_estampa-janela-off);
  background-size: 380px;
  opacity: var(--apx-opacity-paper-texture);
  z-index: var(--apx-z-index-underlay);
  pointer-events: none;
}
.vantagens .container {
  position: relative;
  z-index: var(--apx-z-index-surface);
}
.vantagens__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--apx-spacing-scale-24);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .vantagens__lista {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .vantagens__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}
.vantagem {
  background-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.05);
  border: var(--apx-border-width-hairline) solid
    rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.14);
  border-radius: var(--apx-border-radius-lg);
  padding: var(--apx-spacing-scale-32);
  transition: background-color var(--apx-motion-duration-base)
    var(--apx-motion-timing-function-default);
}
.vantagem:hover {
  background-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.09);
}
.vantagem__icon {
  display: block;
  width: var(--apx-spacing-scale-32);
  height: var(--apx-spacing-scale-32);
  margin-bottom: var(--apx-spacing-scale-20);
  color: var(--apx-palette-color-creme-baunilha-suave);
}
.vantagem__titulo {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-md);
  color: var(--apx-palette-color-creme-baunilha-suave);
  margin: 0 0 var(--apx-spacing-scale-12);
  line-height: var(--apx-font-line-height-scale-lg);
}
.vantagem__desc {
  font-size: var(--apx-font-size-scale-xs);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-palette-color-branco-marfim);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   PASSOS (Como funciona)
═══════════════════════════════════════════════════════════════ */
.passos {
  padding-block: var(--_section-y);
}
.passos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: passo;
  display: grid;
  gap: var(--apx-spacing-scale-32);
}
.passo {
  position: relative;
  padding-top: var(--apx-spacing-scale-12);
}
.passo__num {
  flex-shrink: 0;
  width: var(--apx-spacing-scale-48);
  height: var(--apx-spacing-scale-48);
  border-radius: var(--apx-border-radius-circle);
  background-color: var(--apx-background-color-brand);
  color: var(--apx-palette-color-creme-baunilha-suave);
  border: var(--apx-border-width-regular) solid
    var(--apx-palette-color-creme-baunilha-suave);
  box-shadow:
    0 0 0 var(--apx-border-width-hairline)
      rgba(var(--apx-palette-rgb-vinho-bordo-profundo), 0.25),
    var(--_shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-md);
  margin-bottom: var(--apx-spacing-scale-16);
}
.passo__titulo {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-md);
  color: var(--apx-text-color-brand);
  margin: 0 0 var(--apx-spacing-scale-8);
}
.passo__desc {
  font-size: var(--apx-font-size-scale-xs);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-text-color-secondary);
  margin: 0;
}
@media (min-width: 640px) {
  .passos__lista {
    grid-template-columns: 1fr 1fr;
    gap: var(--apx-spacing-scale-48);
  }
}
@media (min-width: 1024px) {
  .passos__lista {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--apx-spacing-scale-32);
  }
}

/* ════════════════════════════════════════════════════════════
   DEPOIMENTOS
═══════════════════════════════════════════════════════════════ */
.depoimentos {
  padding-block: var(--_section-y);
  background-color: var(--apx-background-color-secondary);
}
.depoimentos__grid {
  display: grid;
  gap: var(--apx-spacing-scale-24);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.depoimento {
  margin: 0;
  background-color: var(--apx-background-color-primary);
  border: var(--apx-border-width-hairline) solid var(--apx-outline-color-subtle);
  border-radius: var(--apx-border-radius-xl);
  padding: var(--apx-spacing-scale-32);
  display: flex;
  flex-direction: column;
  gap: var(--apx-spacing-scale-24);
  box-shadow: var(--_shadow-card);
  transition:
    transform var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft),
    box-shadow var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-soft);
}
.depoimento:hover {
  transform: translateY(-4px);
  box-shadow: var(--_shadow-card-hover);
}
.depoimento__texto {
  position: relative;
  margin: 0;
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-regular);
  font-size: var(--apx-font-size-scale-md);
  line-height: var(--apx-font-line-height-scale-md);
  font-style: italic;
  color: var(--apx-text-color-primary);
  text-wrap: pretty;
}
/* Aspa de abertura como acento gráfico (Comico, decorativo). */
.depoimento__texto::before {
  content: "\201C";
  display: block;
  font-family: var(--apx-font-family-accent);
  font-style: normal;
  font-size: var(--apx-font-size-scale-2xl);
  line-height: 0.4;
  margin-bottom: var(--apx-spacing-scale-8);
  color: var(--apx-palette-color-coral-doce-artesanal);
}
.depoimento__autor {
  display: flex;
  align-items: center;
  gap: var(--apx-spacing-scale-12);
}
.depoimento__avatar {
  flex-shrink: 0;
  width: var(--apx-spacing-scale-48);
  height: var(--apx-spacing-scale-48);
  border-radius: var(--apx-border-radius-circle);
  background-color: var(--apx-background-color-brand);
  color: var(--apx-palette-color-creme-baunilha-suave);
  border: var(--apx-border-width-regular) solid
    var(--apx-palette-color-creme-baunilha-suave);
  box-shadow:
    0 0 0 var(--apx-border-width-hairline)
      rgba(var(--apx-palette-rgb-vinho-bordo-profundo), 0.25),
    var(--_shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-md);
}
.depoimento__id {
  display: flex;
  flex-direction: column;
  font-size: var(--apx-font-size-scale-2xs);
  color: rgba(var(--apx-palette-rgb-marrom-chocolate), 0.78);
  line-height: var(--apx-font-line-height-scale-md);
}
.depoimento__id strong {
  font-size: var(--apx-font-size-scale-xs);
  font-weight: var(--apx-font-weight-medium);
  color: var(--apx-text-color-primary);
}

/* ════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════ */
.faq {
  padding-block: var(--_section-y);
  background-color: var(--apx-background-color-primary);
}
.faq__lista {
  display: grid;
  gap: var(--apx-spacing-scale-12);
}
.faq__item {
  background-color: var(--apx-background-color-primary);
  border: var(--apx-border-width-hairline) solid var(--apx-outline-color-subtle);
  border-radius: var(--apx-border-radius-lg);
  padding: var(--apx-spacing-scale-4) var(--apx-spacing-scale-24);
  box-shadow: var(--apx-shadow-sm);
  transition:
    border-color var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-default),
    box-shadow var(--apx-motion-duration-base)
      var(--apx-motion-timing-function-default);
}
.faq__item[open] {
  box-shadow: var(--apx-shadow-card);
}
.faq__item[open] {
  border-color: var(--apx-palette-color-vinho-bordo-profundo);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-sm-lg);
  color: var(--apx-text-color-brand);
  padding-block: var(--apx-spacing-scale-20);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--apx-spacing-scale-16);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  font-family: var(--apx-font-family-body);
  font-size: var(--apx-font-size-scale-xl);
  font-weight: var(--apx-font-weight-regular);
  color: var(--apx-palette-color-coral-doce-artesanal);
  line-height: 1;
  transition: transform var(--apx-motion-duration-base)
    var(--apx-motion-timing-function-default);
}
.faq__item[open] summary::after {
  transform: rotate(45deg);
}
.faq__item summary:focus-visible {
  outline: var(--apx-focus-ring-width) solid var(--apx-focus-ring-color);
  outline-offset: var(--apx-focus-ring-offset);
  border-radius: var(--apx-border-radius-sm);
}
.faq__item p {
  margin: 0;
  padding-bottom: var(--apx-spacing-scale-24);
  font-size: var(--apx-font-size-scale-sm);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-text-color-secondary);
  max-width: 64ch;
}

/* ════════════════════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════════════════════ */
.cta {
  position: relative;
  background-color: var(--apx-background-color-brand);
  color: var(--apx-palette-color-creme-baunilha-suave);
  overflow: hidden;
  isolation: isolate;
}
.cta__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--_estampa-off);
  background-size: 320px;
  opacity: var(--apx-opacity-pattern-min);
  z-index: var(--apx-z-index-underlay);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: var(--apx-z-index-surface);
  text-align: center;
  padding-block: var(--_section-y-lg);
  max-width: 44rem;
}
.cta__frase {
  font-family: var(--apx-font-family-accent);
  font-size: var(--apx-font-size-scale-2md);
  line-height: var(--apx-font-line-height-scale-sm);
  color: var(--apx-palette-color-coral-suave);
  margin: 0 0 var(--apx-spacing-scale-16);
}
.cta__titulo {
  font-family: var(--apx-font-family-heading);
  font-weight: var(--apx-font-weight-medium);
  font-size: var(--apx-font-size-scale-2xl);
  line-height: var(--apx-font-line-height-scale-xs);
  letter-spacing: var(--apx-font-letter-spacing-super-tight);
  color: var(--apx-palette-color-creme-baunilha-suave);
  margin: 0 0 var(--apx-spacing-scale-20);
  text-wrap: balance;
}
.cta__lead {
  font-size: var(--apx-font-size-scale-sm-lg);
  line-height: var(--apx-font-line-height-scale-4xl);
  color: var(--apx-palette-color-branco-marfim);
  margin: 0 auto var(--apx-spacing-scale-40);
  max-width: 46ch;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--apx-spacing-scale-16);
  justify-content: center;
  margin-bottom: var(--apx-spacing-scale-16);
}
/* Telefone como apoio discreto ao CTA principal. */
.cta__phone {
  display: inline-block;
  font-size: var(--apx-font-size-scale-sm);
  font-weight: var(--apx-font-weight-medium);
  letter-spacing: var(--apx-font-letter-spacing-wide);
  color: var(--apx-palette-color-branco-marfim);
  text-decoration: underline;
  text-decoration-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.4);
  text-underline-offset: 0.25em;
  text-decoration-thickness: var(--apx-border-width-hairline);
  transition:
    color var(--apx-motion-duration-fast)
      var(--apx-motion-timing-function-default),
    text-decoration-color var(--apx-motion-duration-fast)
      var(--apx-motion-timing-function-default);
}
.cta__phone:hover {
  color: var(--apx-palette-color-coral-suave);
  text-decoration-color: var(--apx-palette-color-coral-suave);
}
@media (min-width: 768px) {
  .cta__titulo {
    font-size: var(--apx-font-size-scale-3xl);
  }
}

/* ════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer {
  background-color: var(--apx-background-color-inverse);
  padding-block: var(--apx-spacing-scale-64) var(--apx-spacing-scale-48);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--apx-spacing-scale-24);
  text-align: center;
}
.site-footer__logo {
  height: var(--apx-spacing-scale-40);
  width: auto;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--apx-spacing-scale-24);
}
.site-footer__nav a {
  font-size: var(--apx-font-size-scale-xs);
  color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.78);
  text-decoration: none;
  transition: color var(--apx-motion-duration-fast)
    var(--apx-motion-timing-function-default);
}
.site-footer__nav a:hover {
  color: var(--apx-palette-color-creme-baunilha-suave);
}
.site-footer__divisor {
  width: var(--apx-spacing-scale-48);
  height: var(--apx-border-width-hairline);
  background-color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.2);
}
.site-footer__copy {
  font-size: var(--apx-font-size-scale-4xs);
  color: rgba(var(--apx-palette-rgb-creme-baunilha-suave), 0.5);
  margin: 0;
  letter-spacing: var(--apx-font-letter-spacing-wide);
}

/* ════════════════════════════════════════════════════════════
   MOTION — reveals via Motion.dev (sem gating de conteúdo)
   ────────────────────────────────────────────────────────────
   Princípio: o conteúdo é SEMPRE visível por padrão. O estado
   inicial (oculto) só é aplicado quando o <head> confirmou
   suporte real (classe .has-motion: JS + IntersectionObserver)
   e o usuário não pediu redução de movimento. A Motion anima
   inline e o estilo final persiste ao concluir.

   Três redes de segurança garantem que NADA fique preso invisível:
   1. Sem JS / sem .has-motion  → regra abaixo nem aplica (visível).
   2. prefers-reduced-motion    → escopo no-preference não aplica.
   3. .motion-failsafe (timeout / falha de import) → revela tudo.
═══════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────
   PRINCÍPIO ANTI-TELA-VAZIA
   O CSS NUNCA esconde conteúdo. Tudo é visível por padrão.
   - Reveals on-scroll: o JS (e somente após confirmar que a
     Motion.dev carregou) aplica opacity:0 inline APENAS em
     elementos fora da viewport, e é o único responsável por
     revelá-los. Se o JS falhar em qualquer ponto, nada fica oculto.
   - Hero: entrada por @keyframes com fill `backwards` e repouso
     VISÍVEL (opacity base 1). Gated só por prefers-reduced-motion.
     Qualquer renderizador que não toque a animação mostra o hero.
──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="hero"] {
    animation: apx-hero-rise var(--apx-motion-duration-slow) var(--_ease-out)
      backwards;
  }
  [data-reveal="hero-selo"] {
    transform-origin: center;
    animation: apx-hero-stamp var(--apx-motion-duration-slow) var(--_ease-out)
      0.62s backwards;
  }
  .hero__kicker {
    animation-delay: 0.05s;
  }
  .hero__title {
    animation-delay: 0.14s;
  }
  .hero__lead {
    animation-delay: 0.26s;
  }
  .hero__actions {
    animation-delay: 0.38s;
  }
  .hero__proof {
    animation-delay: 0.48s;
  }
  .hero__media {
    animation-delay: 0.2s;
  }
}

@keyframes apx-hero-rise {
  from {
    opacity: 0;
    transform: translateY(var(--apx-spacing-scale-16));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes apx-hero-stamp {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Abertura suave de <details> (FAQ e ficha técnica) onde suportado;
   degrada para instantâneo nos demais navegadores. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }
    .faq__item::details-content,
    .produto__ficha::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--apx-motion-duration-base) var(--_ease-out),
        content-visibility var(--apx-motion-duration-base) allow-discrete;
    }
    .faq__item[open]::details-content,
    .produto__ficha[open]::details-content {
      block-size: auto;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .produto,
  .produto__img,
  .btn,
  .faq__item summary::after,
  .produto__ficha summary::after {
    transition: none;
  }
}