/* ==========================================================================
   Whole — Hero Section
   Fiel ao Figma (node 370:830). Referência de design: 1920px de largura.
   ========================================================================== */

:root {
  --color-accent: #b38c69;
  --color-accent-light: #d9b48f;
  --color-accent-dark: #7c5b3c;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Regra de construção: espaçamento vertical padrão entre seções (do fim da
     segunda faixa da Hero em diante). Referência: o gap entre a seção dos
     cards de produto e "Seja cliente Whole". Cada seção define só o próprio
     padding-bottom com este valor; a seção seguinte usa padding-top: 0 —
     assim o gap nunca dobra e fica igual em toda a página. */
  --section-gap: 7.25vw; /* 139px */

  --font-manrope: "Manrope", sans-serif;
  --font-poppins: "Poppins", sans-serif;

  /* Referência: valores em px do Figma convertidos para vw (base 1920px) */
  --headline-size: 2.3786vw;   /* 45.69px */
  --headline-lh: 3.5695vw;     /* 68.54px */
  --subhead-size: 1.2254vw;    /* 23.53px */
  --subhead-lh: 1.889vw;       /* 36.27px */
  --button-text-size: 1.0417vw;/* 20px */
  --badge-text-size: 0.8579vw; /* 16.47px */
  --badge-text-lh: 1.2870vw;   /* 24.71px */
  --promo-text-size: 0.6771vw; /* 13px */
  --bottom-text-size: 0.8333vw;/* 16px */
  --bottom-text-lh: 1.25vw;    /* 24px */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Impede o iOS Safari de auto-inflar o tamanho da fonte em telas estreitas
     (comportamento nativo que não aparece em emuladores/devtools) — sem isso,
     o texto da Hero cresce além do previsto e "empurra" o conteúdo pra fora
     da imagem de fundo no mobile. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-manrope);
  background: #f3f3f3;
}

img {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   Hero — layout geral
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: var(--section-gap); /* gap padrão até a próxima seção */
  background: var(--color-white);
}

/* ==========================================================================
   Marquees (faixas com movimento contínuo)
   ========================================================================== */

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee--top {
  background: var(--color-black);
  height: 3.5417vw; /* 68px */
  min-height: 44px;
  display: flex;
  align-items: center;
}

.marquee--bottom {
  height: 4.4792vw; /* 86px */
  min-height: 56px;
  display: flex;
  align-items: center;
  background: linear-gradient(83.45deg, rgb(92, 71, 143) 0.23%, rgb(145, 121, 89) 79.39%);
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll 32s linear infinite;
}

.marquee--top .marquee__track {
  animation-name: marquee-scroll-2;
  animation-duration: 34s;
}

.marquee--bottom .marquee__track {
  animation-name: marquee-scroll-3;
  animation-duration: 34s; /* mesma velocidade exata da faixa de cima */
  animation-direction: reverse;
  gap: 1.8229vw; /* 35px — mesmo valor do gap interno do grupo, garante o check sempre centralizado entre os nomes */
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 1.1979vw; /* 23px */
  padding-right: 1.1979vw;
}

.marquee--bottom .marquee__group {
  gap: 1.8229vw; /* 35px */
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4688vw; /* ~9px */
  color: var(--color-white);
  font-family: var(--font-poppins);
  font-size: var(--promo-text-size);
  font-weight: 500;
  white-space: nowrap;
}

.marquee--top .marquee__item strong {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--promo-text-size);
}

.marquee__label {
  color: var(--color-white);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--bottom-text-size);
  line-height: var(--bottom-text-lh);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.marquee__icon {
  height: 0.6771vw; /* 13px top / adjusted per context below */
  width: auto;
  flex: 0 0 auto;
}

.marquee--bottom .marquee__icon {
  height: 0.5521vw; /* ~10.6px */
}

@keyframes marquee-scroll-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-scroll-3 {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================================
   Faixa gradiente repetida (abaixo da seção "Seja cliente Whole")
   Mesma faixa da Hero (marquee--bottom), girando pro lado oposto (esquerda,
   sem animation-direction: reverse) e mais rápida (26s em vez de 34s), a pedido do usuário.
   ========================================================================== */

.marquee-repeat-section {
  width: 100%;
  padding-top: 0;    /* gap com a seção anterior já vem do padding-bottom dela (regra de construção) */
  padding-bottom: var(--section-gap);
  background: var(--color-white);
}

.marquee--repeat .marquee__track {
  animation-direction: normal; /* oposto ao "reverse" da faixa da Hero */
  animation-duration: 26s;     /* mais rápida que os 34s originais */
}

/* ==========================================================================
   Hero — palco (imagem de fundo + conteúdo sobreposto)
   ========================================================================== */

.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 874;
  background-color: #14101d;
  overflow: hidden;
}

.hero__bg-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__content {
  position: absolute;
  left: 11.8229%;  /* 227 / 1920 */
  top: 13.844%;    /* 121 / 874 */
  width: 32.1354%; /* 617 / 1920 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.0833vw; /* ajustado: 64px -> 40px, layout mais compacto a pedido do usuário */
}

.hero__logo {
  width: 9.5833vw; /* 184px */
  height: auto;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6667vw; /* ajustado: 50px -> 32px, layout mais compacto a pedido do usuário */
  width: 100%;
}

.hero__headline {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--headline-size);
  line-height: var(--headline-lh);
  color: var(--color-white);
}

.hero__headline--medium {
  font-weight: 500;
}

.hero__subheadline {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: var(--subhead-size);
  line-height: var(--subhead-lh);
  color: var(--color-white);
}

.hero__subheadline--accent {
  font-weight: 600;
  color: var(--color-accent);
}

/* CTA — efeito "shiny button" na paleta/tipografia do Figma */
.hero__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.5729vw;  /* 299px */
  height: 4.6875vw;  /* 90px */
  padding: 0.5208vw; /* 10px */
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: var(--button-text-size);
  color: var(--color-white);
  background: linear-gradient(325deg, var(--color-accent-dark) 0%, var(--color-accent-light) 55%, var(--color-accent-dark) 90%);
  background-size: 280% auto;
  background-position: left center;
  box-shadow:
    0px 4px 44.5px rgba(179, 140, 105, 0.62),
    inset 4px 4px 8px rgba(255, 235, 214, 0.45),
    inset -4px -4px 8px rgba(90, 66, 44, 0.35);
  transition: background-position 700ms ease, box-shadow 300ms ease, transform 200ms ease;
}

.hero__cta:hover {
  background-position: right center;
  box-shadow:
    0px 4px 54px rgba(179, 140, 105, 0.75),
    inset 4px 4px 8px rgba(255, 235, 214, 0.55),
    inset -4px -4px 8px rgba(90, 66, 44, 0.4);
}

.hero__cta:active {
  transform: scale(0.98);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.hero__badges {
  display: flex;
  align-items: center;
  gap: 1.7757vw; /* 34.09px */
  width: 100%;
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 1.3406vw; /* 25.74px */
}

.hero__badge-icon {
  width: 1.1375vw; /* ~21.8px */
  height: auto;
  flex: 0 0 auto;
}

.hero__badge p {
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: var(--badge-text-size);
  line-height: var(--badge-text-lh);
  color: var(--color-white);
}

/* Quebra em exatamente 2 linhas controlada via <br> no HTML (fiel ao Figma,
   independe de largura de container ou métrica de fonte) */
.hero__badge-text--clients,
.hero__badge-text--dye,
.hero__badge-text--shipping {
  width: max-content;
  white-space: normal;
}

.hero__badge p strong {
  font-family: var(--font-manrope);
  font-weight: 600;
}

/* ==========================================================================
   Responsivo (fallback — a fidelidade pixel-perfect é garantida em desktop,
   a partir da referência de 1920px do Figma)
   ========================================================================== */

@media (max-width: 1024px) {
  /* Fiel ao frame "Mobile oficial" do Figma (node 410:2, referência 390px de
     largura). Mesma lógica de conversão do desktop: valor_px / 3.9 (390/100). */
  :root {
    --headline-size: 6.608vw;   /* 25.771px */
    --headline-lh: 9.912vw;     /* 38.656px */
    --subhead-size: 3.403vw;    /* 13.27px */
    --subhead-lh: 5.246vw;      /* 20.458px */
    --button-text-size: 2.892vw;/* 11.28px */
    --badge-text-size: 2.006vw; /* 7.823px */
    --badge-text-lh: 3.009vw;   /* 11.734px */
    --promo-text-size: 2.206vw; /* 8.603px */
    --bottom-text-size: 2.433vw;/* 9.488px */
    --bottom-text-lh: 3.649vw;  /* 14.233px */
  }

  .marquee--top {
    height: 11.538vw; /* 45px */
    min-height: 0;
  }

  .marquee--top .marquee__group {
    gap: 3.903vw; /* 15.221px */
    padding-right: 3.903vw;
  }

  .marquee--top .marquee__track {
    /* Iguala a velocidade (px/s) à faixa de baixo — no mobile o texto da
       faixa de promo é mais longo por ciclo, então precisa de mais tempo
       pra percorrer a mesma distância por segundo que a faixa de baixo. */
    animation-duration: 78s;
  }

  .marquee--top .marquee__icon {
    height: 2.206vw; /* 8.603px */
  }

  .marquee--bottom {
    height: 13.077vw; /* 51px */
    min-height: 0;
  }

  .marquee--bottom .marquee__group {
    gap: 5.322vw; /* 20.756px */
  }

  .marquee--bottom .marquee__track {
    gap: 5.322vw;
  }

  .marquee--bottom .marquee__icon {
    height: 1.61vw; /* 6.278px */
  }

  .hero__stage {
    aspect-ratio: 390 / 659; /* área da imagem, entre a faixa de promo e a faixa de benefícios */
  }

  /* Recorte exato do layer "Bg hero mobile_ 1" no Figma: o contêiner da
     imagem (475.7 x 728px) é mais alto que a janela visível e sangra por
     trás da faixa de promo (top:-2) — a imagem é ancorada no topo desse
     contêiner e o excesso é cortado só por baixo (não centralizado). */
  .hero__bg-crop {
    inset: auto;
    top: -12.051vw;    /* -47px = -2 (posição no frame) - 45 (faixa de promo) */
    left: -10.987vw;   /* -42.85px */
    width: 121.975vw;  /* 475.70px */
    height: 186.667vw; /* 728px */
  }

  .hero__bg {
    object-position: center top;
  }

  .hero__content {
    left: 7.692vw;   /* 30px */
    top: 10.256vw;   /* 40px (85px do frame - 45px da faixa de promo) */
    width: 79.686vw; /* 310.775px */
    gap: 9.256vw;    /* 36.097px, logo -> bloco de texto */
  }

  .hero__copy {
    gap: 7.231vw; /* 28.201px */
  }

  .hero__badges {
    gap: 4.152vw;      /* 16.191px */
    margin-top: -2.756vw; /* corrige o gap de 9.256vw herdado do pai para 6.499vw (25.347px) */
    width: auto;
  }

  .hero__badge {
    gap: 3.134vw; /* 12.223px */
  }

  .hero__logo { width: 26.61vw; } /* 103.78px */

  .hero__cta {
    width: 43.097vw;  /* 168.078px */
    height: 13.016vw; /* 50.762px */
    padding: 1.446vw; /* 5.64px */
  }

  .hero__badge-icon { width: 2.6vw; }
}

/* ==========================================================================
   Seção 02 — Carrossel de banners + texto de apresentação
   Fiel ao Figma (node 374:1720 "Frame 1707483419" + 374:2157 "INFO 2").
   Referência de design: 1920px de largura (mesma base da hero).
   ========================================================================== */

.carousel-section {
  width: 100%;
  padding-top: 0;    /* gap com a seção anterior já vem do padding-bottom dela (regra de construção) */
  padding-bottom: var(--section-gap);
  background: var(--color-white);
}

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-white);
  padding: 2.6vw 0;
}

/* Carrossel 3D interativo — mesmo efeito do componente de referência
   (tilt em perspectiva, parallax de mouse no slide ativo, avanço por índice contínuo em loop infinito),
   aplicado aos banners retangulares (proporção fiel ao Figma 869x383), sobre fundo branco. */
.carousel3d {
  position: relative;
  width: var(--slide-w, 62vw);
  height: var(--slide-h, 27.33vw);
  margin: 0 auto;
  cursor: grab;
  user-select: none;
}

.carousel3d--dragging {
  cursor: grabbing;
}

.carousel3d__track {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: calc(-1 * var(--slide-gap, 2vw));
  transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
  list-style: none;
}

.carousel3d__track--no-transition {
  transition: none;
}

/* Durante o reset instantâneo do loop, o slide que recebe o "--active" é um
   elemento diferente do clone que tinha acabado de terminar a mesma
   transição (escala/opacidade) — sem isto, ele reinicia do zero e dá um
   "flash" de encolher e voltar ao aparecer. Desliga a transição desses
   estados também nesse instante, junto com a do track. */
.carousel3d__track--no-transition .carousel3d__tilt,
.carousel3d__track--no-transition .carousel3d__media,
.carousel3d__track--no-transition .carousel3d__media img,
.carousel3d__track--no-transition .carousel3d__overlay {
  transition: none;
}

.carousel3d__slide {
  flex: 0 0 auto;
  width: var(--slide-w, 62vw);
  height: 100%;
  margin: 0 var(--slide-gap, 2vw);
  perspective: 1400px;
  cursor: pointer;
}

.carousel3d__tilt {
  width: 100%;
  height: 100%;
  transform: scale(0.92) rotateX(9deg);
  transform-origin: bottom;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel3d__slide--active .carousel3d__tilt {
  transform: scale(1) rotateX(0deg);
}

.carousel3d__media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1%;
  overflow: hidden;
  background: #1d1f2f;
  transition: transform 150ms ease-out;
}

.carousel3d__slide--active .carousel3d__media {
  transform: translate3d(calc(var(--x, 0px) / 30), calc(var(--y, 0px) / 30), 0);
}

.carousel3d__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.5;
  transition: opacity 500ms ease-in-out;
}

.carousel3d__slide--active .carousel3d__media img {
  opacity: 1;
}

.carousel3d__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}

.carousel3d__slide--active .carousel3d__overlay {
  opacity: 0;
}

.carousel-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5vw; /* 48px */
  width: 100%;
  margin-top: 2.1vw; /* aproximado ainda mais a pedido do usuário — proporcional aos banners maiores */
  padding: 0 5vw;
  text-align: center;
}

.carousel-info__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.4063vw;  /* 219px */
  height: 2.9167vw;  /* 56px */
  padding: 0.5208vw; /* 10px */
  border-radius: 999px;
  background: linear-gradient(106.02deg, #5e488e 3.58%, #907859 95.69%);
}

.carousel-info__pill span {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.7292vw; /* 14px */
  color: #ededed;
  white-space: nowrap;
}

.carousel-info__heading {
  max-width: 55.7813vw; /* 1071px */
  font-family: var(--font-manrope);
  font-size: 2.5vw;     /* 48px */
  line-height: 3.9063vw;/* 75px */
}

.carousel-info__heading--strong {
  font-weight: 600;
  color: #2b2b2b;
}

.carousel-info__heading--medium {
  font-weight: 500;
  color: #565656;
}

.carousel-info__text {
  max-width: 35.1563vw; /* 675px */
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 1.1458vw;  /* 22px */
  line-height: 1.8229vw;/* 35px */
  color: #2b2b2b;
}

@media (prefers-reduced-motion: reduce) {
  .carousel3d__track { transition: none; }
  .carousel3d__tilt { transition: none; }
}

@media (max-width: 1024px) {
  /* Banners maiores, mantendo a proporção fiel ao Figma mobile (403.923 x
     178px = mesma proporção 2.269:1 do banner desktop). */
  .carousel3d { --slide-w: 92vw; --slide-h: 40.53vw; --slide-gap: 3vw; }

  /* Espaçamento padrão acima dos banners — estavam mais próximos da faixa
     da Hero do que da seção de texto logo abaixo. */
  .carousel {
    padding: var(--section-gap) 0;
  }

  /* Bloco de texto "INFO 2": base fiel ao Figma (node 410:511), com o gap
     entre badge/h1/h2 reduzido a pedido do usuário (ficou muito espaçado). */
  .carousel-info {
    gap: 2.8vw;
    /* mesma distância dos banners que os banners têm da faixa 2 (hero):
       carousel já fecha com padding-bottom: var(--section-gap), então o
       gap adicional aqui usa o mesmo valor pra ficar simétrico. */
    margin-top: var(--section-gap);
  }

  .carousel-info__pill {
    width: 29.31vw;  /* 114.317px */
    height: 7.495vw; /* 29.232px */
    padding: 1.338vw;/* 5.22px */
  }

  .carousel-info__pill span {
    font-size: 1.874vw; /* 7.308px */
  }

  .carousel-info__heading {
    font-size: 5.897vw;  /* 23px */
    line-height: 8.974vw;/* 35px */
    max-width: 73.85vw;  /* 288px */
  }

  .carousel-info__text {
    font-size: 2.821vw;  /* 11px */
    line-height: 4.888vw;/* 19.065px */
    max-width: 81.03vw;  /* 316px */
  }
}

/* ==========================================================================
   Seção 04 — Seja cliente Whole (benefícios)
   Fiel ao Figma (node 370:540 "Frame 129").
   Referência de design: 1920px de largura (mesma base das demais seções).
   ========================================================================== */

.benefits-section {
  width: 100%;
  padding-top: 0;    /* gap com a seção anterior já vem do padding-bottom dela (regra de construção) */
  padding-bottom: var(--section-gap);
  background: var(--color-white);
}

.benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.4271vw; /* 85px */
}

.benefits__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2396vw; /* 43px */
  max-width: 53.4896vw; /* 1027px */
  text-align: center;
}

.benefits__heading {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 2.5vw;      /* 48px */
  line-height: 3.9063vw; /* 75px */
  color: #2b2b2b;
}

.benefits__text {
  max-width: 47.3958vw; /* 910px */
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 1.1458vw;  /* 22px */
  line-height: 1.8229vw;/* 35px */
  color: #2b2b2b;
}

.benefits__text strong {
  font-weight: 600;
}

.benefits__row {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3.9542vw; /* 75.921px */
  max-width: 59.1667vw; /* 1136px */
}

.benefits__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5622vw; /* 29.993px */
  text-align: center;
}

.benefits__icon {
  width: 5.5911vw;  /* 107.35px */
  height: 5.5911vw;
  flex: 0 0 auto;
}

.benefits__item-text {
  display: flex;
  flex-direction: column;
  gap: 0.8299vw; /* 15.934px */
  width: 100%;
}

.benefits__item-title {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.9763vw; /* 18.746px */
  line-height: 1.3;
  color: #2b2b2b;
  white-space: nowrap;
}

.benefits__item-subtitle {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7322vw; /* 14.059px */
  line-height: 1.3;
  color: #aaaaaa;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  /* Fiel ao Figma "Mobile oficial" (node 418:625), base 390px (valor_px / 3.9). */
  .benefits-section { padding-top: 0; padding-bottom: var(--section-gap); }
  .benefits { width: 100%; padding: 0 5vw; gap: 6vw; /* mais próximo do bloco de texto acima, a pedido do usuário (Figma tinha 41px/10.513vw) */ }
  .benefits__intro { max-width: 100%; gap: 7.949vw; /* 31px */ }
  .benefits__heading { font-size: 5.897vw; /* 23px */ line-height: 9.943vw; /* 38.777px */ }
  .benefits__text { max-width: 72.821vw; /* 284px */ font-size: 2.821vw; /* 11px */ line-height: 4.897vw; /* 19.1px */ }
  /* Sem cap de largura: os textos ficaram maiores que o literal do Figma, então a
     largura do grupo precisa se adaptar ao conteúdo real pra caber 3 por linha. */
  .benefits__row { max-width: 100%; flex-wrap: wrap; row-gap: 7.891vw; /* 30.773px */ column-gap: 2.5vw; }
  .benefits__item { max-width: none; gap: 4.265vw; /* 16.634px */ }
  .benefits__icon { width: 15.265vw; height: 15.265vw; /* 59.534px */ }
  .benefits__item-text { gap: 1.8vw; }
  .benefits__item-title { font-size: 3vw; line-height: 4vw; white-space: nowrap; }
  .benefits__item-subtitle { font-size: 2.3vw; line-height: 3.2vw; white-space: nowrap; }
}

/* ==========================================================================
   Seção 03 — Cards de produto CALM + FOCUS (foto + texto + CTAs)
   Fiel ao Figma (node 370:509 "Frame 1707483423", dentro do mesmo container
   do carrossel/INFO2 — node 370:503 "Frame 1707483424").
   Referência de design: 1920px de largura (mesma base das demais seções).
   ========================================================================== */

.product-cards {
  display: flex;
  justify-content: center;
  gap: 2.0313vw; /* 39px */
  max-width: 65.1563vw; /* 1251px */
  margin: 4.1146vw auto 0; /* 79px — gap real do Figma entre o texto do carrossel e os cards */
}

.product-card {
  display: flex;
  flex-direction: column;
  width: 31.5625vw;  /* 606px */
  height: 40.5208vw; /* 778px */
  border-radius: 0.78125vw; /* 15px */
  overflow: hidden;
}

.product-card__photo {
  flex: 0 0 19.1667vw; /* 368px */
  width: 100%;
}

.product-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card--calm .product-card__photo img {
  object-position: center 38%;
}

.product-card--focus .product-card__photo img {
  object-position: center 32%;
}

.product-card__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.9271vw; /* 37px */
  padding: 1.8229vw 2.8125vw; /* 35px / 54px */
}

.product-card--calm .product-card__panel {
  background: #f6e5ff;
  color: #66578e;
}

.product-card--focus .product-card__panel {
  background: #f8eee0;
  color: #735e4e;
}

.product-card__title {
  max-width: 22.0833vw; /* 424px */
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 1.6667vw;  /* 32px */
  line-height: 2.6042vw;/* 50px */
  color: inherit;
}

.product-card__text {
  max-width: 22.0833vw; /* 424px */
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 1.0453vw;  /* 20.071px */
  line-height: 1.5681vw;/* 30.107px */
  color: inherit;
}

.product-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5208vw; /* 10px */
}

.product-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5208vw; /* 10px */
  height: 3.4896vw; /* 67px */
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.8333vw; /* 16px */
  white-space: nowrap;
  transition: filter 200ms ease, transform 200ms ease;
}

.product-card__btn:hover { filter: brightness(1.05); transform: scale(1.03); }
.product-card__btn:active { transform: scale(0.97); }

.product-card__btn--primary {
  width: 9.5313vw; /* 183px */
  color: var(--color-white);
}

.product-card--calm .product-card__btn--primary { background: #7845ba; }
.product-card--focus .product-card__btn--primary { background: #cc9564; }

.product-card__btn--secondary {
  width: 8.9063vw; /* 171px */
}

.product-card--calm .product-card__btn--secondary { background: #e2cbff; color: #7845ba; }
.product-card--focus .product-card__btn--secondary { background: #f7dcc3; color: #cc9564; }

.product-card__btn-icon {
  width: 0.78125vw; /* 15px */
  height: 0.8333vw;  /* 16px */
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .product-cards { flex-direction: column; align-items: center; max-width: 90%; gap: 5vw; margin-top: 6vw; }
  .product-card { width: 100%; max-width: 500px; height: auto; border-radius: 5vw; }
  .product-card__photo { flex-basis: 60vw; max-height: 320px; }
  .product-card__panel { padding: 5vw; gap: 4vw; }
  .product-card__title, .product-card__text { max-width: 100%; }
  .product-card__title { font-size: 4.4vw; line-height: 6vw; }
  .product-card__text { font-size: 2.8vw; line-height: 4.2vw; }
  .product-card__actions { flex-wrap: wrap; }
  .product-card__btn { height: 11vw; font-size: 3vw; }
  .product-card__btn--primary { width: 30vw; }
  .product-card__btn--secondary { width: 28vw; }
  .product-card__btn-icon { width: 3.6vw; height: 3.8vw; }
}

/* ==========================================================================
   Bento — Produtos CALM + FOCUS (uso futuro)
   Fiel ao Figma (node 370:598 "Frame 427321969") — NÃO é a seção 03 real do site (ver correção no PROJECT_MEMORY.md); mantido para uso futuro.
   Referência de design: 1920px de largura (mesma base das demais seções).
   ========================================================================== */

.bento-section {
  width: 100%;
  padding-top: 0;    /* gap com a seção anterior já vem do padding-bottom dela (regra de construção) */
  padding-bottom: var(--section-gap); /* preparado pra próxima seção que vier depois do Bento */
  background: var(--color-white);
}

.bento {
  max-width: 76.3542vw; /* 1466px */
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0.9067vw; /* 17.409px */
}

.bento__photo {
  position: relative;
  overflow: hidden;
  border-radius: 0.9544vw; /* 18.325px — quatro pontas arredondadas, mesmo raio dos mini-cards */
  color: var(--color-white);
}

.bento__photo--calm {
  flex: 0 0 36.7932vw; /* 706.429px */
  aspect-ratio: 706.429 / 612.055;
}

.bento__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bento__photo--calm .bento__photo-img,
.bento__photo--focus .bento__photo-img {
  object-position: center; /* fotos já cortadas pelo usuário na proporção exata do Figma */
}

.bento__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}

.bento__photo-content {
  position: absolute;
  left: 3.2927vw;  /* 63.22px */
  bottom: 3.6269vw; /* 69.636px */
  max-width: 21.2837vw; /* 408.647px */
  display: flex;
  flex-direction: column;
  gap: 0.7vw; /* aproximado entre título e parágrafo, a pedido do usuário (era 2.0997vw) */
}

.bento__photo-title {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 1.9089vw; /* 36.65px */
  line-height: 1.3;
}

.bento__photo-text {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.9544vw; /* 18.325px */
  line-height: 1.5;
}

.bento__side {
  flex: 0 0 38.6543vw; /* 742.162px */
  display: flex;
  flex-direction: column;
  gap: 1.5271vw; /* 29.32px */
}

.bento__photo--focus {
  width: 100%;
  aspect-ratio: 742.162 / 339.013;
}

.bento__side .bento__photo-content {
  max-width: 17.4183vw; /* 334.431px */
}

.bento__cards {
  display: flex;
  gap: 1.0021vw; /* 19.241px */
  height: 12.6939vw; /* 243.723px */
}

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.9544vw; /* 18.325px */
  padding: 1.7180vw 0 1.5748vw; /* top / bottom, left definido por variante */
}

.bento__card--calm {
  flex: 0 0 18.8022vw; /* 361.003px */
  padding-left: 1.8611vw; /* 35.734px */
  background: linear-gradient(225.458deg, rgb(120, 69, 186) 14.416%, rgb(54, 31, 84) 213.14%);
}

.bento__card--focus {
  flex: 0 0 18.8499vw; /* 361.919px */
  padding-left: 2.2906vw; /* 43.98px */
  background: linear-gradient(222.403deg, rgb(179, 143, 97) 14.526%, rgb(146, 108, 60) 155.78%);
}

.bento__card-logo {
  display: block;
  height: auto;
}

.bento__card-logo--calm {
  width: 2.8739vw; /* 55.179px */
}

.bento__card-logo--focus {
  width: 3.2450vw; /* 62.305px */
}

.bento__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4794vw; /* 28.404px */
  margin-top: 2.3383vw; /* 44.896px — espaço entre logo e bloco de texto */
}

.bento__card-heading {
  font-family: var(--font-manrope);
  font-weight: 400;
  font-size: 1.7180vw; /* 32.985px */
  line-height: 1.3;
  color: var(--color-white);
}

.bento__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.5888vw;  /* 164.925px */
  height: 3.1974vw; /* 61.389px */
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.7635vw; /* 14.66px */
  color: var(--color-white);
  white-space: nowrap;
  transition: filter 200ms ease, transform 200ms ease;
}

.bento__card-btn--calm { background: #8d59d0; }
.bento__card-btn--focus { background: #c8a272; }

.bento__card-btn:hover { filter: brightness(1.08); transform: scale(1.03); }
.bento__card-btn:active { transform: scale(0.97); }

/* Efeito sutil de entrada (fade + subida), disparado ao entrar na viewport (js/reveal.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(2.0833vw); /* 40px */
  transition: opacity 800ms ease, transform 800ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Seção — Depoimentos
   Fiel ao Figma (node 370:630 "Frame 427321982"). A galeria de prints no
   Figma é um colagem estático (masonry); a pedido do usuário, virou uma
   faixa em movimento contínuo pra direita, com pause ao passar o mouse.
   Referência de design: 1920px de largura (mesma base das demais seções).
   ========================================================================== */

.testimonials-section {
  width: 100%;
  padding-top: 0; /* gap com a seção anterior já vem do padding-bottom dela (regra de construção) */
  padding-bottom: var(--section-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.2708vw; /* 82px */
  background: var(--color-white);
}

.testimonials__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2917vw; /* 44px */
  text-align: center;
  padding: 0 5vw;
}

.testimonials__intro-row {
  display: flex;
  align-items: center;
  gap: 0.6771vw; /* 13px */
}

.testimonials__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.0208vw;  /* 154px */
  height: 2.6042vw; /* 50px */
  padding: 0.5208vw;
  border-radius: 999px;
  background: linear-gradient(102.7396deg, rgb(94, 72, 142) 3.5797%, rgb(144, 120, 89) 95.692%);
}

.testimonials__pill span {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.7292vw; /* 14px */
  color: #ededed;
  white-space: nowrap;
}

.testimonials__stars {
  width: 8.3333vw; /* 160px */
  height: 2.6042vw; /* 50px */
}

.testimonials__heading {
  max-width: 38.3854vw; /* 737px */
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 2.5vw;      /* 48px */
  line-height: 3.9063vw; /* 75px */
  color: #2b2b2b;
}

.testimonials__text {
  max-width: 27.8646vw; /* 535px */
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 1.1458vw;  /* 22px */
  line-height: 1.8229vw;/* 35px */
  color: #2b2b2b;
}

.testimonials__text strong {
  font-weight: 600;
}

.marquee--testimonials {
  width: 100%;
}

.marquee__track--testimonials {
  animation-name: testimonials-scroll;
  animation-duration: 30s; /* um pouco mais rápida, a pedido do usuário (era 36s) */
}

.marquee__group--testimonials {
  align-items: stretch;
  gap: 1.5vw;
  padding-right: 1.5vw;
}

.testimonial-card {
  display: block;
  flex: 0 0 auto;
  height: 20.9375vw; /* 402px */
  width: auto;
  object-fit: cover;
  border-radius: 0.5378vw; /* 10.325px */
  border: 1px solid rgba(175, 175, 175, 0.6);
}

@keyframes testimonials-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Passar o mouse pausa o movimento; ao tirar, continua de onde parou.
   Restrito a dispositivos com hover real — em touch, :hover fica "preso"
   após o toque (só some com outro toque em outro lugar), então o touch
   usa a classe .is-touching abaixo (controlada via JS, js/marquee-touch.js). */
@media (hover: hover) and (pointer: fine) {
  .marquee--testimonials:hover .marquee__track {
    animation-play-state: paused;
  }
}

.marquee--testimonials.is-touching .marquee__track {
  animation-play-state: paused;
}

@media (max-width: 1024px) {
  .testimonials-section { gap: 6vw; }
  .testimonials__intro { gap: 3vw; }
  .testimonials__heading { font-size: 5.2vw; line-height: 7vw; max-width: 90%; }
  .testimonials__text { font-size: 2.6vw; line-height: 3.8vw; max-width: 90%; }
  .testimonials__pill { width: 24vw; height: 8vw; }
  .testimonials__pill span { font-size: 2.4vw; }
  .testimonials__stars { width: 26vw; height: 8vw; }
  .testimonial-card { height: 46vw; }
  /* Mais rápida no mobile — em 30s (valor desktop) a faixa mal se movia
     visualmente porque a largura da trilha é bem menor na tela estreita. */
  .marquee__track--testimonials { animation-duration: 16s; }
}

.pricing-section {
  width: 100%;
  padding-top: 0;
  padding-bottom: var(--section-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.7813vw; /* 111px */
  background: var(--color-white);
}

.pricing__heading {
  max-width: 37.7083vw; /* 724px */
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 2.5vw; /* 48px */
  line-height: 3.9063vw; /* 75px */
  color: #2b2b2b;
  text-align: center;
}

.pricing__heading strong {
  font-weight: 600;
}

.pricing__grid {
  width: 83.3333vw; /* 1600px */
  display: flex;
  align-items: stretch;
  gap: 1.3802vw; /* 26.5px */
}

.pricing__card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1.0417vw; /* 20px */
  padding: 0 1.6667vw 3.4896vw; /* 32px laterais, 67px base — margem confortável abaixo do botão */
  box-sizing: border-box;
}

.pricing__card--calm { background: rgba(120, 69, 186, 0.1); }
.pricing__card--focus { background: rgba(152, 110, 55, 0.1); }

.pricing__photo {
  flex: 0 0 auto;
  width: 100%;
  height: 11.9792vw; /* 230px — mesma posição em que o bloco de texto começa no Figma */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing__card--kit .pricing__photo {
  height: 13.0208vw; /* 250px — no Figma o Kit tem o texto começando um pouco mais abaixo */
}

.pricing__photo img {
  max-width: 78%;
  max-height: 94%;
  object-fit: contain;
}

.pricing__card--focus .pricing__photo img {
  max-width: 92%; /* fotos dos combos Focus são mais largas/baixas, precisam de mais espaço horizontal pra ficarem no mesmo tamanho visual das outras */
}

.pricing__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.0833vw; /* 40px, igual ao Figma */
  width: 12.2396vw; /* 235px */
}

.pricing__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6146vw; /* 31px entre badge e título, igual ao Figma */
}

.pricing__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8542vw; /* 74px */
  height: 1.7188vw; /* 33px */
  border-radius: 999px;
  background: rgba(66, 186, 96, 0.2);
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.6771vw; /* 13px */
  color: #42ba60;
  white-space: nowrap;
}

.pricing__title {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 1.5104vw; /* 29px */
  line-height: 1.35;
  color: #2b2b2b;
  text-align: center;
}

.pricing__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0938vw; /* 21px */
  text-align: center;
}

.pricing__price-old {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7760vw; /* 14.9px */
  color: #848484;
  text-decoration: line-through;
}

.pricing__price-new {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.9312vw; /* 17.88px */
  color: #2b2b2b;
}

.pricing__price-installment {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7760vw; /* 14.9px */
  color: #848484;
}

.pricing__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.1771vw; /* 61px */
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.8333vw; /* 16px */
  color: var(--color-white);
  transition: filter 200ms ease, transform 200ms ease;
}

.pricing__btn--calm { background: #7845ba; }
.pricing__btn--focus { background: #cc9564; }

.pricing__btn:hover { filter: brightness(1.08); transform: scale(1.03); }
.pricing__btn:active { transform: scale(0.97); }

@media (max-width: 1024px) {
  /* Grade 2 colunas fiel ao frame "Mobile oficial" do Figma: 5 cards,
     últimos dois em coluna (2x2) e o 5º sozinho na coluna esquerda, nunca
     empilhados em coluna única. */
  .pricing-section { gap: 6vw; }
  .pricing__heading { font-size: 5.2vw; line-height: 7vw; max-width: 90%; }
  .pricing__grid {
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, 40.5vw);
    column-gap: 3.6vw;
    row-gap: 5.5vw;
    align-items: stretch;
  }
  .pricing__card {
    flex: none;
    width: 40.5vw;
    height: auto;
    border-radius: 2.7vw;
    padding: 5.5vw 4.5vw;
    box-sizing: border-box;
  }
  .pricing__photo { height: 28vw; }
  .pricing__card--kit .pricing__photo { height: 30vw; }
  .pricing__body { width: 100%; gap: 3.6vw; }
  .pricing__header { gap: 2.6vw; }
  .pricing__badge { width: 10vw; height: 4.5vw; font-size: 1.8vw; }
  .pricing__title { font-size: 3.9vw; line-height: 1.25; }
  .pricing__price { gap: 1.8vw; }
  .pricing__price-old, .pricing__price-installment { font-size: 2vw; }
  .pricing__price-new { font-size: 2.4vw; }
  .pricing__btn { height: 8.3vw; font-size: 2.2vw; }
}

.video-section {
  width: 100%;
  padding-top: 0;
  padding-bottom: var(--section-gap);
  display: flex;
  justify-content: center;
  background: var(--color-white);
}

.video-frame {
  position: relative;
  width: 76.8229vw; /* 1475px */
  height: 36.9792vw; /* 710px */
  border-radius: 0.9544vw; /* 18.325px */
  overflow: hidden;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.video-frame__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.2083vw; /* 100px */
  height: 5.2083vw;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.video-frame__play svg {
  width: 1.4583vw; /* 28px */
  height: auto;
  margin-left: 0.3vw;
}

.video-frame__play:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 1024px) {
  .video-frame { width: 92vw; height: 60vw; }
}

/* ==========================================================================
   FAQ
   Fiel ao Figma (nodes 370:737 intro + 370:745 lista de perguntas).
   ========================================================================== */

.faq-section {
  width: 100%;
  padding-top: 0;
  padding-bottom: var(--section-gap);
  display: flex;
  justify-content: center;
  background: var(--color-white);
}

.faq {
  width: 76.3542vw; /* 1466px, mesma largura do container do Bento */
  display: flex;
  align-items: flex-start;
  gap: 5.1549vw; /* 98.97px */
}

.faq__intro {
  flex: 0 0 29.6828vw; /* 569.9px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.1474vw; /* 41.231px */
}

.faq__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.3861vw; /* 45.813px */
  padding: 0 1.0417vw;
  border-radius: 999px;
  background: linear-gradient(108.1277deg, rgb(94, 72, 142) 3.5797%, rgb(144, 120, 89) 95.692%);
}

.faq__pill span {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.6681vw; /* 12.828px */
  color: #ededed;
  white-space: nowrap;
}

.faq__intro-text {
  display: flex;
  flex-direction: column;
  gap: 1.9089vw; /* 36.65px */
  color: #2b2b2b;
}

.faq__heading {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 2.3861vw; /* 45.813px */
  line-height: 3.5791vw; /* 68.719px */
}

.faq__text {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 1.1453vw; /* 21.99px */
  line-height: 1.9089vw; /* 36.65px */
}

.faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.9609vw; /* 76.049px */
  height: 3.9609vw;
  border-radius: 50%;
  background: #e2e2e2;
}

.faq__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.0977vw; /* 21.074px */
}

.faq__item {
  width: 100%;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.0417vw;
  width: 100%;
  height: 3.6746vw; /* 70.551px */
  padding: 0.4772vw 1.5vw 0.4772vw 2.0520vw; /* mais respiro à direita, pra setinha não ficar colada na borda */
  border: 1px solid rgba(196, 196, 196, 0.65);
  border-radius: 0.7635vw; /* 14.66px */
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 0.9544vw; /* 18.325px */
  color: #2b2b2b;
  transition: border-color 200ms ease, transform 200ms ease;
}

.faq__question:hover {
  transform: scale(1.01);
}

.faq__item.is-open .faq__question {
  border-color: rgba(43, 43, 43, 0.65);
}

.faq__chevron {
  flex: 0 0 auto;
  width: 0.6vw; /* menor que o tamanho original (15px) */
  height: auto;
  opacity: 0.65;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq__item.is-open .faq__answer-inner {
  padding-top: 0.9674vw; /* 18.58px, aproximado do gap-[35.734px] do Figma entre a pergunta e a resposta */
}

.faq__answer-inner > * {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7635vw; /* 14.66px */
  line-height: 1.1453vw; /* 21.99px */
  color: #2b2b2b;
  max-width: 22.9063vw; /* 439.8px */
  padding-left: 2.0520vw; /* alinhado com o texto da pergunta */
}

@media (prefers-reduced-motion: reduce) {
  .faq__chevron, .faq__answer { transition: none; }
}

@media (max-width: 1024px) {
  .faq { width: 90%; flex-direction: column; gap: 9vw; }
  .faq__intro { flex-basis: auto; width: 100%; gap: 4vw; }
  .faq__list { gap: 4vw; }
  .faq__heading { font-size: 6vw; line-height: 7.5vw; }
  .faq__text { font-size: 3.2vw; line-height: 4.6vw; }
  .faq__pill { height: 8vw; padding: 0 4vw; }
  .faq__pill span { font-size: 2.6vw; }
  .faq__icon { width: 12vw; height: 12vw; }
  .faq__icon svg { width: 4vw; height: 4vw; }
  .faq__question { height: auto; min-height: 14vw; padding: 3vw 4vw 3vw 5vw; border-radius: 4vw; font-size: 3.4vw; }
  .faq__chevron { width: 2.6vw; }
  .faq__answer-inner > * { font-size: 2.8vw; line-height: 4vw; max-width: 100%; padding-left: 5vw; }
  .faq__item.is-open .faq__answer-inner { padding-top: 2vw; padding-bottom: 3vw; }
}

@media (max-width: 1024px) {
  .bento { flex-direction: column; max-width: 90%; gap: 4vw; }
  /* Arredondamento padronizado com os cards CALM/FOCUS da seção acima (5vw). */
  .bento__photo { border-radius: 5vw; }
  .bento__photo--calm { flex-basis: auto; width: 100%; aspect-ratio: 4 / 3; }
  .bento__side { flex-basis: auto; width: 100%; gap: 4vw; }
  .bento__photo-content, .bento__side .bento__photo-content { max-width: 90%; left: 5%; bottom: 9%; gap: 1.5vw; }
  .bento__photo-title { font-size: 4.8vw; }
  .bento__photo-text { font-size: 2.6vw; }
  .bento__cards { flex-direction: row; height: auto; gap: 3vw; }
  .bento__card { border-radius: 5vw; }
  .bento__card--calm, .bento__card--focus { flex: 1 1 0; width: auto; padding: 5vw 4vw; }
  .bento__card-logo--calm { width: 13vw; }
  .bento__card-logo--focus { width: 14.6vw; }
  .bento__card-body { margin-top: 4vw; gap: 2.4vw; }
  .bento__card-heading { font-size: 4vw; }
  .bento__card-btn { width: 30vw; height: 9vw; font-size: 2.3vw; }
}

/* ==========================================================================
   Footer
   Fiel ao Figma (node 370:767). Fundo #AAAAAA confirmado pelo usuário.
   ========================================================================== */

.footer-section {
  width: 100%;
  padding: 6.5vw 0 0;
  background: #aaaaaa;
}

.footer {
  width: 76.3542vw; /* 1466px */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5.5vw;
}

.footer__watermark-wrap {
  width: 100%;
  margin-top: 2vw;
  line-height: 0;
}

.footer__watermark {
  display: block;
  width: 100%;
  height: auto;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  gap: 6.8242vw; /* 131.024px */
}

.footer__newsletter-text {
  flex: 0 0 20.7588vw; /* 398.569px */
  display: flex;
  flex-direction: column;
  gap: 1.5271vw; /* 29.32px */
  color: var(--color-white);
}

.footer__newsletter-heading {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: 1.1453vw; /* 21.99px */
  line-height: 1.9089vw; /* 36.65px */
}

.footer__newsletter-text-body {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7635vw; /* 14.66px */
  line-height: 1.1453vw; /* 21.99px */
}

.footer__newsletter-form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8113vw; /* 15.576px */
}

.footer__newsletter-input {
  display: flex;
  align-items: center;
  gap: 0.7158vw; /* 13.744px */
  height: 3.4836vw; /* 66.886px */
  width: 19.3748vw; /* 371.997px */
  padding: 0 0.4772vw 0 2.0997vw;
  border-radius: 999px;
  background: #8a8a8a;
  box-sizing: border-box;
}

.footer__newsletter-input svg {
  flex: 0 0 auto;
  width: 0.8333vw;
  height: auto;
}

.footer__newsletter-input input {
  flex: 1 1 auto;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7635vw; /* 14.66px */
  color: var(--color-white);
}

.footer__newsletter-input input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.footer__newsletter-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.4836vw; /* 66.886px */
  width: 8.6857vw; /* 166.757px */
  border: none;
  border-radius: 999px;
  background: #7845ba;
  cursor: pointer;
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7635vw; /* 14.66px */
  color: var(--color-white);
  white-space: nowrap;
  transition: filter 200ms ease, transform 200ms ease;
}

.footer__newsletter-btn:hover { filter: brightness(1.1); transform: scale(1.03); }
.footer__newsletter-btn:active { transform: scale(0.97); }

.footer__social {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1930vw; /* 22.905px */
  margin-left: auto;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7708vw; /* 34px, ícone já traz o círculo branco desenhado */
  height: 1.7708vw;
  transition: transform 200ms ease, opacity 200ms ease;
}

.footer__social-icon svg {
  width: 100%;
  height: 100%;
}

.footer__social-icon:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

.footer__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.footer__bottom {
  display: flex;
  align-items: flex-start;
  gap: 6.1560vw; /* 118.196px */
}

.footer__about {
  flex: 0 0 15.2232vw; /* 292.284px */
  display: flex;
  flex-direction: column;
  gap: 0.4293vw; /* 8.246px, aproximado do gap entre parágrafo e e-mail */
}

.footer__about-text {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7635vw; /* 14.66px */
  line-height: 1.1453vw; /* 21.99px */
  color: var(--color-white);
}

.footer__email {
  display: flex;
  align-items: center;
  gap: 0.4293vw; /* 8.246px */
  color: var(--color-white);
  text-decoration: none;
}

.footer__email svg {
  flex: 0 0 auto;
  width: 0.8333vw;
  height: auto;
}

.footer__email span {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7635vw; /* 14.66px */
}

.footer__links-columns {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3.2450vw; /* 62.305px */
}

.footer__links-group {
  display: flex;
  flex-direction: column;
  gap: 1.5748vw; /* 30.236px */
}

.footer__links-heading {
  font-family: var(--font-manrope);
  font-weight: 700;
  font-size: 0.7635vw; /* 14.66px */
  line-height: 1.1453vw; /* 21.99px */
  color: var(--color-white);
}

.footer__links {
  display: flex;
  flex-direction: column;
}

.footer__links a {
  font-family: var(--font-manrope);
  font-weight: 500;
  font-size: 0.7158vw; /* 13.744px */
  line-height: 1.6702vw; /* 32.069px */
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 200ms ease;
}

.footer__links a:hover {
  color: var(--color-white);
}

.footer__payments {
  flex: 0 0 auto;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(6, 3.4816vw); /* 66.847px */
  grid-auto-rows: 2.0374vw; /* 39.118px */
  column-gap: 0.6705vw; /* 12.873px */
  row-gap: 1.0313vw; /* 19.802px */
}

.footer__payments img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.3095vw; /* 5.942px */
}

@media (max-width: 1024px) {
  .footer { width: 90%; gap: 9.5vw; }
  .footer__top { flex-wrap: wrap; gap: 9.5vw; }
  .footer__newsletter-text { flex-basis: 100%; }
  .footer__newsletter-heading { font-size: 3.6vw; line-height: 4.6vw; }
  .footer__newsletter-text-body { font-size: 2.6vw; line-height: 3.8vw; }
  .footer__newsletter-form { flex-basis: 100%; flex-wrap: wrap; gap: 3vw; }
  .footer__newsletter-input { width: 100%; height: 11vw; }
  .footer__newsletter-input svg { width: 3.2vw; }
  .footer__newsletter-input input { font-size: 2.6vw; }
  .footer__newsletter-btn { width: 100%; height: 11vw; font-size: 2.6vw; }
  .footer__social { margin-left: 0; gap: 4vw; }
  .footer__social-icon { width: 8vw; height: 8vw; }
  .footer__bottom { flex-direction: column; gap: 9.5vw; }
  .footer__about { flex-basis: auto; width: 100%; }
  .footer__about-text, .footer__email span { font-size: 2.6vw; line-height: 3.8vw; }
  .footer__links-columns { flex-wrap: wrap; gap: 6vw; width: 100%; }
  .footer__links-heading { font-size: 2.8vw; line-height: 3.8vw; }
  .footer__links a { font-size: 2.6vw; line-height: 5.5vw; }
  /* 6 colunas x 2 linhas, igual ao frame "Mobile oficial" do Figma (página "footer 2") */
  .footer__payments {
    margin-left: 0;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    column-gap: 3vw;
    row-gap: 4.5vw;
  }
  .footer__payments img { aspect-ratio: 1.71 / 1; height: auto; border-radius: 1.2vw; }
  /* Respiro entre os logos de pagamento e a marca d'água: soma ao gap de 9.5vw do .footer
     para alcançar os ~15vw medidos no frame "Mobile oficial" do Figma. */
  .footer__watermark-wrap { margin-top: 5.5vw; }
}

/* ==========================================================================
   Modal "Ver tabela" — popup com blur no fundo (tabela nutricional CALM/FOCUS)
   ========================================================================== */

body.modal-open {
  overflow: hidden;
}

.table-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0ms linear 300ms;
}

.table-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0ms linear 0ms;
}

.table-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 29, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  will-change: backdrop-filter; /* evita o navegador criar a camada só no momento da abertura */
}

/* Enquanto o modal está aberto, pausa as animações contínuas (marquees) atrás do blur —
   sem isso, o navegador recompõe o backdrop-filter a cada frame e a abertura do popup
   fica visivelmente lenta. */
body.modal-open .marquee__track {
  animation-play-state: paused;
}

.table-modal__dialog {
  position: relative;
  max-width: min(90vw, 46vw);
  max-height: 88vh;
  border-radius: 0.8333vw; /* 16px */
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  transform: scale(0.94) translateY(12px);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.table-modal.is-open .table-modal__dialog {
  transform: scale(1) translateY(0);
}

.table-modal__img {
  display: block;
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
}

.table-modal__close {
  position: absolute;
  top: 0.8333vw; /* 16px */
  right: 0.8333vw;
  width: 2.0833vw; /* 40px */
  height: 2.0833vw;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 16, 29, 0.55);
  color: var(--color-white);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.table-modal__close svg {
  width: 0.7292vw; /* 14px */
  height: 0.7292vw;
  min-width: 12px;
  min-height: 12px;
}

.table-modal__close:hover {
  background: rgba(20, 16, 29, 0.8);
  transform: scale(1.06);
}

.table-modal__close:active {
  transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .table-modal, .table-modal__dialog { transition: none; }
}

@media (max-width: 1024px) {
  .table-modal__dialog { max-width: 90vw; }
  .table-modal__close { width: 9vw; height: 9vw; }
  .table-modal__close svg { width: 3.2vw; height: 3.2vw; }
}

/* Cursor personalizado */
html.custom-cursor-active,
html.custom-cursor-active * {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.5vw 1.25vw;
  background: #581FA1;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.85vw;
  white-space: nowrap;
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  box-shadow: 0 0.3vw 1vw rgba(88, 31, 161, 0.35);
  transition: opacity 0.2s ease;
  will-change: transform;
}

.custom-cursor.is-active {
  opacity: 1;
}

.custom-cursor-arrow {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  filter: drop-shadow(0 0.25vw 0.4vw rgba(0, 0, 0, 0.35));
  transition: opacity 0.2s ease;
  will-change: transform;
}

.custom-cursor-arrow.is-active {
  opacity: 1;
}

@media (max-width: 1024px) {
  .custom-cursor,
  .custom-cursor-arrow {
    display: none !important;
  }
}