/* ==========================================================================
   Folha de Louro — Landing Page
   Direção visual: rede de produtos naturais tradicional (não fitness/startup).
   Paleta: verde escuro profundo (marca) + off-white/creme (fundo) + terracota (CTA).
   Tipografia: Clash Display peso 400 (títulos) + Work Sans peso 400 (corpo).
   ========================================================================== */

/* Fonte do corpo servida localmente (sem Google Fonts). Arquivo variável:
   um só .woff2 atende 400/500/600. swap = o texto aparece na hora com a
   fonte de sistema e troca quando a Work Sans carrega, sem tela vazia. */
@font-face {
  font-family: "Work Sans";
  src: url("fonts/work-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Clash Display (títulos), também local — convertida do .otf oficial do
   Fontshare para woff2. Nenhuma fonte vem mais de fora. */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cor de marca */
  --color-brand: #1f3b2e;
  --color-brand-dark: #142a20;

  /* Fundo */
  --color-bg: #faf3e6;
  --color-bg-alt: #f2e9d8;

  /* Acento quente — reservado para CTAs */
  --color-accent: #c1622d;
  --color-accent-hover: #a8511f;

  /* Texto */
  --color-text: #1c2420;
  --color-text-inverse: #faf3e6;
  --color-text-inverse-muted: rgba(250, 243, 230, 0.88);

  /* Tipografia */
  --font-heading: "Clash Display", ui-sans-serif, sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Espaçamento generoso, conforme direção visual */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  --radius: 0.5rem;
  --focus-ring: 3px solid var(--color-bg);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.011em;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  font-size: 1rem;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: normal;
  margin: 0;
}

p {
  margin: 0;
  letter-spacing: -0.03em;
}

strong {
  color: #ffffff;
  font-weight: 700;
}

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

a {
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

/* Mobile-first: fonte e padding horizontal menores pra CTA longa
   ("Ativar meu preço especial") caber numa linha dentro do card do
   formulário em telas estreitas. Volta ao tamanho cheio em 640px+,
   onde sobra largura. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.95rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease, transform 150ms ease, box-shadow 200ms ease;
}

/* Rótulo alternativo, mais curto, pras telas mais estreitas (onde nem
   a fonte reduzida evita a quebra em duas linhas). Só um dos dois fica
   no DOM renderizado, então leitor de tela também lê apenas um. */
.btn__label--short {
  display: none;
}

@media (max-width: 400px) {
  .btn__label--full {
    display: none;
  }

  .btn__label--short {
    display: inline;
  }

  /* Aperta mais um pouco: em 320px o rótulo curto ainda quebrava
     dentro do card do formulário com o padding/fonte acima. */
  .btn {
    padding: 0.95rem 1rem;
    font-size: 0.9375rem;
  }
}

@media (min-width: 640px) {
  .btn {
    padding: 1.05rem 2.25rem;
    font-size: 1.125rem;
  }
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: 0 10px 32px -4px rgba(193, 98, 45, 0.55), 0 0 0 1px rgba(193, 98, 45, 0.15);
}

.btn--primary:hover {
  box-shadow: 0 12px 38px -4px rgba(193, 98, 45, 0.7), 0 0 0 1px rgba(193, 98, 45, 0.2);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

.btn--primary:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  justify-content: center;
  min-height: 100svh;
  min-height: 100vh; /* fallback para navegadores sem suporte a svh */
  /* Padding-inline mora AQUI, na seção de fora — igual em toda seção
     da página — não no container. Ver nota completa em .compare. */
  padding-inline: var(--space-md);
  /* Textura de fundo (ondas orgânicas) fornecida pelo cliente, específica
     do Hero — as demais seções (.locations, .clubhow, .signup) continuam
     no verde sólido, sem essa textura. background-color fica como
     fallback enquanto a imagem carrega / caso não cubra 100% da área. */
  background-color: var(--color-brand-dark);
  background-image: url("bg-fundo-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Container padrão da página: mesmo max-width usado em todas as seções,
   pra manter o conteúdo alinhado em qualquer largura. Sem padding
   próprio — o padding-inline sempre mora na seção externa (.hero,
   .compare, .discover...), nunca aqui, pra não dobrar o respiro. */
.hero__container {
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr;
}

/* Coluna esquerda: texto + CTA */
.hero__col--text {
  display: flex;
  align-items: center;
  padding-block: var(--space-xl) var(--space-md);
}

.hero__content {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

/* Logo do cliente, acima da tag — SVG inalterado, só controlamos tamanho/posição.
   display:block é essencial aqui: um <svg> é inline por padrão, então sem isso
   ele fica na mesma linha da tag em vez de empilhar acima dela. */
.hero__logo {
  display: block;
  width: 200px;
  height: auto;
  margin: 0 auto var(--space-lg);
}

/* Tag "glassmorphism" acima do título: círculos de produto à esquerda, texto à direita */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-md);
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  border: 1px solid rgba(250, 243, 230, 0.18);
  border-radius: 999px;
  background: rgba(250, 243, 230, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hero__badge-avatars {
  display: flex;
}

.hero__badge-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(250, 243, 230, 0.85);
  background: var(--color-bg-alt);
}

.hero__badge-avatar + .hero__badge-avatar {
  margin-left: -10px;
}

/* Fotos reais fornecidas pelo cliente (granola, whey, chia). */
.hero__badge-avatar--1 {
  background-image: url("badge-granola.webp");
  background-size: cover;
  background-position: center;
}

.hero__badge-avatar--2 {
  background-image: url("badge-whey.webp");
  background-size: cover;
  background-position: center;
}

.hero__badge-avatar--3 {
  background-image: url("badge-chia.webp");
  background-size: cover;
  background-position: center;
}

.hero__title {
  color: var(--color-text-inverse);
  font-size: 2rem;
  line-height: 1.15;
  text-wrap: balance;
}

.hero__subtitle {
  margin-top: var(--space-sm);
  color: var(--color-text-inverse-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero__cta {
  margin-top: var(--space-lg);
  width: 100%;
}

/* Coluna direita: foto da loja (com a seta já recortada nela via canal
   alfa) + o card "Do seu jeito" flutuando por cima, esse em HTML/CSS.
   Sem fundo próprio — herda o gradiente do .hero.
   No mobile as duas colunas empilham, então o padding vertical daqui
   soma com o da coluna de texto: por isso ele fica enxuto até 1024px
   (senão sobra um vão enorme entre o CTA e a foto) e só volta a
   var(--space-xl) quando viram colunas lado a lado. */
.hero__col--image {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 4rem embaixo: cobre o vazamento de 2.5rem do card flutuante e
     ainda deixa respiro antes do ticker. */
  padding-block: 0 var(--space-xl);
}

/* aspect-ratio explícito (proporção real da foto) em vez de deixar a
   altura vir só do <img> — é o que faz % de top/height do card
   flutuante (abaixo) resolverem certo; % vertical não funciona num
   container cuja altura só existe "de fato" via conteúdo (auto). */
.hero__image {
  position: relative;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1591 / 1731;
}

/* Sem crop/border-radius: a forma (onda, círculo da seta) já vem
   recortada na própria imagem via canal alfa. */
.hero__image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hotspot invisível sobre o círculo da seta, que já está desenhado na
   imagem encostado no canto superior direito — mantém o link acessível/
   clicável sem redesenhar nada por cima. */
.hero__image-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* Card "Do seu jeito": separado da foto de propósito (não é mais parte
   da imagem) pra poder flutuar com uma animação leve e pra renderizar
   o texto de verdade em vez de pixel — fica nítido em qualquer tela. */
.hero__floating-card {
  position: absolute;
  /* Mobile: bem mais embaixo, vazando pra fora da base da foto, e sem
     encostar na borda esquerda da tela. Ancorado por bottom em rem
     (não por top em %) de propósito: o card tem altura fixa no
     mobile, então um top em % fazia o vazamento variar de 0 a 112px
     conforme a largura — a 390px ele cobria o ticker. Assim o
     vazamento é sempre 2.5rem, coberto pelo padding-bottom da
     coluna (4rem, em .hero__col--image). */
  left: 4%;
  bottom: -2.5rem;
  width: clamp(13rem, 36.5%, 14.375rem);
  aspect-ratio: 578 / 660;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 42, 32, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -12px rgba(10, 20, 15, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__floating-card {
    animation: hero-float 4.5s ease-in-out infinite;
  }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5rem); }
}

.hero__floating-card-photo {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.hero__floating-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__floating-card-info {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 1rem;
  background: var(--color-bg);
}

.hero__floating-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Verde vivo (sampleado do card de referência) — mais claro que o
   --color-brand da marca, que aqui ficaria escuro/apagado demais. */
.hero__floating-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: #0c6b2f;
  color: #ffffff;
}

.hero__floating-card-title {
  color: var(--color-brand-dark);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.hero__floating-card-desc {
  margin-top: 0.125rem;
  color: var(--color-text);
  opacity: 0.7;
  font-size: 0.6875rem;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .hero__content {
    text-align: left;
    margin: 0;
  }

  .hero__logo {
    margin: 0 0 var(--space-lg);
  }

  .hero__cta {
    width: auto;
  }
}

@media (min-width: 1024px) {
  /* Coluna da imagem maior que a do texto (7fr vs 5fr) — o texto não
     precisa de mais que ~28rem de largura pra ler bem, e sobra desse
     espaço vai todo pra imagem, que fica visivelmente maior. */
  .hero__container {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--space-xl);
  }

  .hero__content {
    max-width: 28rem;
  }

  /* Colunas lado a lado: o padding vertical não soma mais, então volta
     ao respiro cheio das demais seções. */
  .hero__col--text,
  .hero__col--image {
    padding-block: var(--space-xl);
  }

  /* Sem cap artificial: a imagem ocupa a coluna inteira do grid. */
  .hero__image {
    max-width: none;
  }

  /* Sobra pra fora da foto, invadindo o vão verde — como no layout de
     referência do cliente. */
  .hero__floating-card {
    left: -9%;
    top: 30.5%;
    bottom: auto;
  }
}

/* --------------------------------------------------------------------------
   Ticker — carrossel infinito de destaques, logo abaixo do Hero
   -------------------------------------------------------------------------- */

.ticker {
  background: #ffffff;
  overflow: hidden;
  padding: var(--space-md) 0;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 32s linear infinite;
}

.ticker__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker__item {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  white-space: nowrap;
  padding: 0 1.5rem;
}

.ticker__dot {
  color: var(--color-accent);
  font-size: 1.25rem;
  line-height: 1;
}

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

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

/* --------------------------------------------------------------------------
   Compare — "Por que a granel compensa"
   -------------------------------------------------------------------------- */

/* CONVENÇÃO DE ALINHAMENTO DA PÁGINA (vale pra toda seção):
   padding-inline: var(--space-md) sempre mora na seção externa de fundo
   cheio (.compare, .discover, .hero, .locations, .clubhow, .signup,
   .footer). O container interno (max-width: 72rem + margin:auto) NUNCA
   tem padding próprio. Isso garante que o conteúdo de toda seção comece
   exatamente no mesmo pixel em qualquer largura de tela — se o padding
   morar ora dentro ora fora do container, o alinhamento quebra. */
.compare {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-md);
}

.compare__container {
  max-width: 72rem;
  margin: 0 auto;
}

.compare__header {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.compare__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(31, 59, 46, 0.08);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.compare__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.compare__title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-text);
}

.compare__title strong {
  color: var(--color-accent);
  font-weight: inherit;
}

.compare__intro {
  color: var(--color-text);
  font-size: 1.125rem;
  line-height: 1.6;
}

.compare__intro strong {
  color: var(--color-accent);
  font-weight: inherit;
}

.compare__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.compare-card {
  position: relative;
  min-height: 420px;
  border-radius: 1rem;
  overflow: hidden;
}

.compare-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  /* Mais alto que os 48% originais — com foto real atrás (mais "cheia"
     que o gradiente fictício), o número 01/02/03 ficava sem contraste
     perto do topo, onde o degradê já tinha ido quase todo transparente. */
  height: 66%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md) var(--space-md) var(--space-md);
  background: linear-gradient(
    to top,
    rgba(20, 42, 32, 0.96) 0%,
    rgba(20, 42, 32, 0.85) 45%,
    rgba(20, 42, 32, 0.4) 75%,
    transparent 100%
  );
}

.compare-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  border: 1px solid rgba(250, 243, 230, 0.3);
  background: rgba(250, 243, 230, 0.12);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}

.compare-card__title {
  margin-bottom: 0.5rem;
  color: #ffffff;
  font-size: 1.5rem;
}

.compare-card__desc {
  margin-bottom: var(--space-sm);
  color: rgba(250, 243, 230, 0.85);
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.compare-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #f0a868;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

/* Fotos reais do cliente (castanha, tempero, granola). São <img> e não
   background-image justamente pra poderem ter loading="lazy": como
   background, o navegador baixava as três já na primeira tela. */
.compare-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .compare__header {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .compare__intro {
    text-align: right;
  }

  .compare__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Discover — "O que você encontra"
   -------------------------------------------------------------------------- */

.discover {
  background: #ffffff;
  padding: var(--space-xl) var(--space-md);
}

.discover__container {
  max-width: 72rem;
  margin: 0 auto;
}

.discover__header {
  max-width: 38rem;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.discover__tag {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.discover__title {
  font-size: 2rem;
  line-height: 1.25;
  color: var(--color-text);
}

.discover__title em {
  color: var(--color-accent);
  font-style: normal;
}

.discover__intro {
  margin-top: var(--space-sm);
  color: var(--color-text);
  opacity: 0.7;
  font-size: 1.125rem;
  line-height: 1.6;
}

.discover__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.discover-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  border-radius: 0.75rem;
  background: rgba(31, 59, 46, 0.08);
  color: var(--color-brand);
}

.discover-card__title {
  margin-bottom: 0.375rem;
  font-size: 1.5rem;
  color: var(--color-text);
}

.discover-card__desc {
  color: var(--color-text);
  opacity: 0.7;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Foto real da variedade de produtos a granel, fornecida pelo cliente. */
.discover-card--center {
  position: relative;
  min-height: 320px;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--color-brand-dark);
}

/* Foto de fundo como <img> (e não background-image) pra poder ser lazy;
   fica atrás do badge e do texto, que já são position: absolute. */
.discover-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.625rem;
  background: rgba(20, 42, 32, 0.85);
  color: #ffffff;
}

.discover-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(10, 20, 15, 0.85) 0%, transparent 100%);
}

.discover-card__rule {
  width: 28px;
  height: 2px;
  margin-bottom: 0.625rem;
  background: var(--color-accent);
}

.discover-card__phrase {
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1.25;
}

.discover-card__phrase em {
  color: #f0a868;
  font-style: normal;
}

.discover__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  /* Mobile: alinhado à esquerda, igual o resto do texto da seção.
     Do 640px pra cima cada coluna ganha seu próprio alinhamento
     (ver regras abaixo). */
  text-align: left;
}

@media (min-width: 640px) {
  .discover__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .discover__stat--1 {
    text-align: left;
  }

  .discover__stat--2 {
    text-align: center;
  }

  .discover__stat--3 {
    text-align: right;
  }
}

.discover__stat-number {
  color: var(--color-brand);
  font-size: 3rem;
  line-height: 1;
}

.discover__stat-label {
  margin-top: 0.375rem;
  color: var(--color-text);
  opacity: 0.7;
  font-size: 1.125rem;
  line-height: 1.4;
}

.discover__divider {
  margin: var(--space-lg) 0 0;
  border: none;
  border-top: 1px solid rgba(31, 59, 46, 0.12);
}

.discover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.discover__footer-avatars {
  display: flex;
}

.discover__footer-avatars .hero__badge-avatar {
  width: 36px;
  height: 36px;
  border-color: #ffffff;
}

@media (min-width: 768px) {
  .discover__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "left1 center right1"
      "left2 center right2";
    align-items: center;
  }

  .discover-card--left1 {
    grid-area: left1;
  }

  .discover-card--left2 {
    grid-area: left2;
  }

  .discover-card--right1 {
    grid-area: right1;
  }

  .discover-card--right2 {
    grid-area: right2;
  }

  .discover-card--center {
    grid-area: center;
    min-height: 480px;
  }
}

/* --------------------------------------------------------------------------
   Locations — "Nossas lojas". Mesmo esqueleto visual da Hero (fundo em
   gradiente de marca + coluna de imagem), só com a imagem à esquerda.
   -------------------------------------------------------------------------- */

.locations {
  display: flex;
  justify-content: center;
  padding-inline: var(--space-md);
  /* Verde sólido — mesmo tom exato do .hero e das demais seções. */
  background: var(--color-brand-dark);
}

/* Mesmo container padrão da página (ver convenção em .compare) */
.locations__container {
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr;
}

/* Mesma lógica do .hero__col--image e do .signup__col--form: empilhado
   no mobile o padding daqui somava com o da coluna de texto e abria um
   vão grande entre a foto e a tag "Nossas lojas". Enxuto até 1024px,
   cheio quando viram colunas lado a lado. */
.locations__col--image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-xl) var(--space-md);
}

.locations__image {
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
}

.locations__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.locations__col--text {
  padding-block: 0 var(--space-xl);
}

.locations__content {
  max-width: 34rem;
  margin: 0 auto;
}

.locations__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  padding: 0.4rem 1rem;
  border: 1px solid rgba(250, 243, 230, 0.18);
  border-radius: 999px;
  background: rgba(250, 243, 230, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.locations__tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.locations__title {
  color: var(--color-text-inverse);
  font-size: 2rem;
  line-height: 1.2;
}

.locations__list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.store-card {
  /* Mobile/tablet: link embaixo do endereço, em vez de do lado, pra não
     forçar o texto a quebrar mais do que precisa e inflar a seção. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(250, 243, 230, 0.14);
}

.store-card:last-child {
  border-bottom: 1px solid rgba(250, 243, 230, 0.14);
}

.store-card__name {
  margin-bottom: 0.25rem;
  color: #ffffff;
  font-size: 1.5rem;
}

.store-card__address {
  color: var(--color-text-inverse-muted);
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.store-card__link {
  flex-shrink: 0;
  color: #f0a868;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .locations__container {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
  }

  .locations__col--image,
  .locations__col--text {
    padding-block: var(--space-xl);
  }

  .locations__col--image {
    order: -1;
  }

  /* Sem aspect-ratio fixo: a foto acompanha a altura da coluna de texto
     ao lado (que já estica igual no grid), preenchendo de cima a baixo
     em vez de ficar num recorte 4:5 menor que o conteúdo. */
  .locations__image {
    aspect-ratio: auto;
    height: 100%;
  }

  .store-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Clubhow — "Como funciona o Clube". Cartão bege sobre o fundo verde.
   -------------------------------------------------------------------------- */

.clubhow {
  /* Verde sólido — mesmo tom exato das demais seções.
     Sem padding vertical aqui de propósito: o respiro vertical "de
     verdade" (mesmo var(--space-xl) que todas as outras seções usam
     antes do conteúdo) já vem do padding do .clubhow__card. Se esta
     seção também tivesse padding vertical, o respiro dobraria e a
     seção ficaria visivelmente maior que as demais. O padding-inline
     continua só pra não deixar o cartão colado na borda no mobile. */
  background: var(--color-brand-dark);
  padding-inline: var(--space-md);
}

.clubhow__card {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  border-radius: 1.75rem;
  background: var(--color-bg);
  text-align: center;
}

.clubhow__tag {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.clubhow__title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-text);
}

.clubhow__title em {
  color: var(--color-accent);
  font-style: normal;
}

/* Grupo dos 3 passos: largura menor que o cartão, centralizado.
   Versão em linhas (eyebrow/ícone/texto): só no desktop, onde a
   linha tracejada faz sentido conectando os 3 círculos. */
.clubhow__steps--desktop {
  display: none;
}

/* Versão mobile: um passo por linha, sem colunas lado a lado */
.clubhow__steps--mobile {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-xl);
}

.clubhow__steps--mobile .clubhow-step {
  padding-block: var(--space-md);
  text-align: center;
}

.clubhow__steps--mobile .clubhow-step + .clubhow-step {
  border-top: 1px dashed rgba(31, 59, 46, 0.25);
}

.clubhow__steps--mobile .clubhow-step__eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
}

.clubhow__steps--mobile .clubhow-step__icon-wrap {
  margin: 0 auto var(--space-sm);
}

@media (min-width: 768px) {
  .clubhow__steps--desktop {
    display: block;
    max-width: 56rem;
    margin: var(--space-xl) auto 0;
  }

  .clubhow__steps--mobile {
    display: none;
  }
}

.clubhow__eyebrows-row,
.clubhow__icons-row {
  display: flex;
  justify-content: space-around;
}

.clubhow__icons-row {
  position: relative;
  margin-top: 0.5rem;
}

/* Linha tracejada única, ligando o centro do 1º ao centro do 3º ícone.
   Com justify-content:space-around e 3 itens iguais, os centros caem
   exatamente em 1/6, 1/2 e 5/6 da largura — por isso o inset de 100%/6. */
.clubhow__icons-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 0;
  border-top: 2px dashed rgba(31, 59, 46, 0.3);
  transform: translateY(-50%);
  z-index: 0;
}

.clubhow-step__eyebrow {
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.clubhow-step__icon-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #ffffff;
}

.clubhow-step__icon-wrap.clubhow-step--1,
.clubhow-step__icon-wrap.clubhow-step--3 {
  background: var(--color-brand);
}

.clubhow-step__icon-wrap.clubhow-step--2 {
  background: var(--color-accent);
}

.clubhow__text-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.clubhow-step__title {
  margin-bottom: 0.375rem;
  font-size: 1.5rem;
  color: var(--color-text);
}

.clubhow-step__desc {
  color: var(--color-text);
  opacity: 0.7;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Signup — Formulário de cadastro (âncora #cadastro)
   -------------------------------------------------------------------------- */

.signup {
  display: flex;
  justify-content: center;
  padding-inline: var(--space-md);
  /* Verde sólido — mesmo tom exato das demais seções. */
  background: var(--color-brand-dark);
}

.signup__container {
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr;
}

.signup__col--text {
  display: flex;
  align-items: center;
  padding-block: var(--space-xl) var(--space-md);
}

.signup__content {
  max-width: 30rem;
}

.signup__intro {
  margin-top: var(--space-md);
  color: var(--color-text-inverse-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Mesma lógica do .hero__col--image: empilhado no mobile, o padding
   daqui somava com o da coluna de texto e abria um vão grande antes do
   formulário. Enxuto até 1024px, cheio quando viram colunas. */
.signup__col--form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0 var(--space-xl);
}

.signup-card {
  /* Mobile/tablet: acompanha a largura da tela (cresce pros lados, não
     fica travado num tamanho pequeno). Só volta a ter um max-width fixo
     no desktop, quando divide a linha com a coluna de texto ao lado. */
  width: 100%;
  /* Padding menor no mobile: sobra mais largura útil pros campos e pra
     CTA (que quebrava em duas linhas). Cheio a partir de 640px. */
  padding: var(--space-md);
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 30px 60px -20px rgba(10, 20, 15, 0.45);
}

@media (min-width: 640px) {
  .signup-card {
    padding: var(--space-lg);
  }
}

.form-field {
  display: block;
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-field input,
.form-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(31, 59, 46, 0.2);
  border-radius: 0.625rem;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
  border-color: var(--color-brand);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text);
  opacity: 0.85;
}

.form-checkbox input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.05rem;
  accent-color: var(--color-brand);
}

.form-checkbox a {
  color: var(--color-brand);
  text-decoration: underline;
}

.signup-form__submit {
  width: 100%;
}

.signup-form__microcopy {
  margin-top: var(--space-sm);
  text-align: center;
  color: var(--color-text);
  opacity: 0.65;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.signup-success {
  text-align: center;
  padding-block: var(--space-md);
}

.signup-success__title {
  color: var(--color-brand);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.signup-success__desc {
  color: var(--color-text);
  opacity: 0.8;
  font-size: 1.125rem;
  line-height: 1.5;
}

.signup-success__link {
  margin-top: var(--space-md);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .signup__container {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
    align-items: center;
  }

  .signup__col--text,
  .signup__col--form {
    padding-block: var(--space-xl);
  }

  .signup-card {
    max-width: 28rem;
  }
}

/* Escala tipográfica padronizada: todos os "títulos" de seção (H1/H2)
   usam o mesmo par de tamanhos — 32px no mobile, 48px a partir daqui. */
@media (min-width: 768px) {
  .hero__title,
  .compare__title,
  .discover__title,
  .locations__title,
  .clubhow__title {
    font-size: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-inline: var(--space-md);
  background: var(--color-brand-dark);
}

.footer__container {
  max-width: 72rem;
  margin: 0 auto;
  padding-block: var(--space-lg);
}

.footer__top {
  padding-bottom: var(--space-md);
}

.footer__logo {
  display: block;
  width: 170px;
  height: auto;
}

.footer__divider {
  margin: 0;
  border: none;
  border-top: 1px solid rgba(250, 243, 230, 0.15);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-md);
}

.footer__bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer__cnpj {
  color: var(--color-text-inverse-muted);
  font-size: 0.875rem;
}

/* .footer__link é um <button> (abre o modal de privacidade em vez de
   navegar), então precisa do reset de aparência de botão pra continuar
   parecendo um link do rodapé. */
.footer__link,
.footer__back-to-top {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-text-inverse-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.footer__back-to-top {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__link:hover,
.footer__back-to-top:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Modal de política de privacidade — abre no clique dos dois gatilhos
   (checkbox do cadastro e rodapé), sem sair da página.
   -------------------------------------------------------------------------- */

/* Gatilho dentro do checkbox do formulário: é um <button>, então também
   precisa do reset pra parecer o link que era antes. */
.privacy-link {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(10, 20, 15, 0.6);
}

.privacy-modal[hidden] {
  display: none;
}

.privacy-modal__panel {
  position: relative;
  width: 100%;
  max-width: 34rem;
  /* Limita a altura à tela e rola só o miolo, pra o título e o botão de
     fechar continuarem acessíveis em telas baixas. */
  max-height: min(85vh, 44rem);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 30px 60px -20px rgba(10, 20, 15, 0.45);
}

.privacy-modal__title {
  padding-right: 2.5rem;
  color: var(--color-brand-dark);
  font-size: 1.5rem;
  line-height: 1.2;
}

.privacy-modal__body {
  margin-top: var(--space-md);
  overflow-y: auto;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.privacy-modal__body p + p {
  margin-top: 0.875rem;
}

.privacy-modal__body strong {
  color: var(--color-brand-dark);
}

.privacy-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-brand-dark);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.privacy-modal__close:hover {
  background: #e5d9c2;
}

/* --------------------------------------------------------------------------
   Reveal ao rolar — fade + leve subida, reversível: sai de vista rolando
   pra cima e volta a ficar oculto, pronto pra animar de novo ao descer.
   O JS correspondente fica no fim do body. Desativado por completo se o
   usuário pedir menos movimento no SO (prefers-reduced-motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Legal — páginas de texto corrido (política de privacidade). Mesmo
   vocabulário visual do site: fundo verde da marca, cartão claro no meio.
   -------------------------------------------------------------------------- */

.legal {
  min-height: 100vh;
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-brand-dark);
  background-image: url("bg-fundo-hero.webp");
  background-size: cover;
  background-position: center;
}

.legal__container {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-lg);
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 30px 60px -20px rgba(10, 20, 15, 0.45);
}

.legal__back {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--color-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.legal__back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__title {
  color: var(--color-brand-dark);
  font-size: 2rem;
  line-height: 1.2;
}

.legal__body {
  margin-top: var(--space-md);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
}

.legal__body p + p {
  margin-top: 1rem;
}

.legal__body strong {
  color: var(--color-brand-dark);
}

@media (min-width: 768px) {
  .legal__container {
    padding: var(--space-xl);
  }

  .legal__title {
    font-size: 2.5rem;
  }
}

.privacy-modal__link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Oculta o selo "Powered by Netlify" injetado pela hospedagem.
   Decisão do cliente/agência. O selo não faz parte deste código: ele é
   inserido pela Netlify em tempo de execução, por isso a regra precisa ser
   ampla (a classe real é gerada por eles e pode mudar sem aviso).
   Se o selo vier dentro de Shadow DOM, o CSS não alcança — o fallback em
   assets/hide-host-badge.js cuida desse caso.
   -------------------------------------------------------------------------- */
/* Alvo real, confirmado no inspetor: o selo vive num <iframe srcdoc> com
   id="nl-badge-frame" e o atributo data-nl-ready. Nada nesse iframe contém
   a palavra "netlify" — ela só aparece DENTRO dele, num documento que
   estilo de fora não alcança. Por isso a mira é no iframe, não no selo. */
#nl-badge-frame,
iframe[data-nl-ready],
iframe[id*="nl-badge" i],

/* Rede de segurança: se um dia mudarem o nome do elemento, estes pegam as
   formas mais prováveis sem depender do id atual. */
[class*="netlify" i],
[id*="netlify" i],
[data-netlify-badge],
netlify-badge,
a[href*="netlify.com"],
a[href*="netlify.app"],
iframe[src*="netlify"],
iframe[title*="netlify" i],
[aria-label*="netlify" i],
[title*="Powered by Netlify" i] {
  display: none !important;
}