/* ============================================================
   PIPOCAS FELIPPE — STYLESHEET
   Identidade visual: tradição catarinense + sabor + modernidade
   ============================================================ */

/* ============ DESIGN TOKENS ============ */
:root {
  /* Cores */
  --cream: #FAF3E3;
  --cream-2: #F3E7C8;
  --butter: #F2C94C;
  --butter-deep: #E5A627;
  --tomato: #D8341C;
  --tomato-deep: #A8200E;
  --cocoa: #2A1A12;
  --cocoa-soft: #3D2A1F;
  --leaf: #3F6B3A;
  --ink: #1A0F0A;

  /* Efeitos */
  --shadow: 0 30px 60px -20px rgba(168, 32, 14, .25);

  /* Tipografia */
  --font-display: 'Fraunces', serif;
  --font-body: 'DM Sans', sans-serif;

  /* Altura da barra fixa: 100px de logo mais 12px de folga em cima e embaixo.

     Toda pagina que comeca logo abaixo da barra tira o proprio recuo daqui, e nao de um
     numero escrito a mao. Escrito a mao, cada pagina chutou um valor diferente e tres
     erraram: o catalogo deixava 5px de respiro, a pagina de produto escondia a trilha
     atras da barra e a de revendedores escondia a tarja do topo. */
  --altura-nav: 124px;
  --topo-pagina: calc(var(--altura-nav) + 3rem);
}

/* No celular o respiro extra encolhe, mas nunca some: a barra continua com a mesma
   altura, e e ela que manda no minimo. */
@media (max-width: 700px) {
  :root {
    --topo-pagina: calc(var(--altura-nav) + 2rem);
  }
}

/* ============ RESET / BASE ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--cocoa);
  background: var(--cream);
  overflow-x: hidden;
  line-height: 1.55;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ============ NAVBAR ============ */
/* Tres zonas: logo na esquerda, paginas no centro, botoes na direita. As colunas das
   pontas sao 1fr iguais, e e isso que deixa o miolo centrado na barra, e nao apenas
   no espaco que sobrou depois do logo. */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 6vw;
  background: rgba(250, 243, 227, .85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(42, 26, 18, .08);
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* flex-shrink zero de proposito. Sem ele a barra apertada roubava largura do logo:
   media a 1000px, a imagem aparecia com 96px onde o natural seriam 150, achatada. */
.logo img {
  height: 100px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* display: contents faz o invólucro sumir do layout e as duas caixas de dentro virarem
   itens da grade da barra. Ele continua existindo na marcacao porque e ele que o menu
   do celular abre e fecha, com as duas caixas juntas. */
.nav-links {
  display: contents;
  font-size: .95rem;
  font-weight: 500;
}

.nav-paginas {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  justify-self: center;
}

.nav-acoes {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-self: end;
}

.nav-links a {
  position: relative;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--tomato);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--tomato);
  transition: width .3s;
}

.nav-links a:hover::after {
  width: 100%;
}

.btn-wpp {
  background: var(--tomato);
  color: var(--cream) !important;
  padding: .7rem 1.3rem;
  border-radius: 99px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: transform .2s, box-shadow .2s;
}

.btn-wpp:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(216, 52, 28, .5);
}

.btn-wpp::after {
  display: none !important;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  color: var(--cocoa);
  border-radius: 10px;
  transition: background .2s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: rgba(42, 26, 18, .07);
}

/* A caixa tem altura fixa para as barras girarem em torno do centro dela: sem altura
   definida, o X ficaria descentralizado no giro. */
.menu-barras {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}

.menu-barras i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .18s ease;
}

.menu-barras i:nth-child(1) { top: 0; }
.menu-barras i:nth-child(2) { top: 8px; }
.menu-barras i:nth-child(3) { top: 16px; }

/* Aberto: as das pontas caminham ate o meio e cruzam, a do meio some. Some por
   opacidade, e nao por display, senao ela sumiria de uma vez no comeco do movimento. */
.menu-toggle.aberto .menu-barras i:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.aberto .menu-barras i:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}

.menu-toggle.aberto .menu-barras i:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============ HERO ============ */
/* O fundo era um MP4 que tocava a cada carregamento. Virou uma montagem estatica dos
   doze produtos, gerada por bin/gerar-hero.php, em 08/09/2026.
   No desktop ela e background da propria secao, com os pacotes na direita e o texto na
   esquerda. No celular ela sai do fundo e vira um bloco depois do texto: ali o conteudo
   do hero ocupa quase a tela inteira, e atras dele os numeros caiam em cima dos pacotes. */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 180px 6vw 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--cream);
  background-image: url('../public/images/hero-desktop.jpg');
  /* A declaracao com image-set repete o JPG como ultima opcao, e navegador que nao
     entende image-set simplesmente descarta esta linha e fica com a de cima. */
  background-image: image-set(
    url('../public/images/hero-desktop.webp') type('image/webp'),
    url('../public/images/hero-desktop.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* O degrade para de cobrir antes dos pacotes. Ele nasceu para dar legibilidade sobre o
   video, e com a montagem no lugar ele desbotava os produtos: o creme chegava a 15%
   ainda em cima deles. Agora o texto continua com o fundo cheio e a direita sai limpa. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(250, 243, 227, 0.97) 0%,
      rgba(250, 243, 227, 0.92) 26%,
      rgba(250, 243, 227, 0.35) 46%,
      rgba(250, 243, 227, 0) 62%);
  pointer-events: none;
}

/* Fora do celular a montagem vem pelo background da secao, entao o bloco nao existe. */
.hero-montagem { display: none; }

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(216, 52, 28, .1);
  color: var(--tomato-deep);
  padding: .5rem 1rem;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: fadeUp .8s ease both;
}

.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tomato);
  box-shadow: 0 0 0 0 var(--tomato);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 52, 28, .6); }
  70%  { box-shadow: 0 0 0 12px rgba(216, 52, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 52, 28, 0); }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--cocoa);
  margin-bottom: 1.5rem;
  animation: fadeUp .9s .1s ease both;
}

.hero h1 .accent {
  color: var(--tomato);
  font-style: italic;
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.hero h1 .accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .05em;
  width: 100%;
  height: .18em;
  background: var(--butter);
  z-index: -1;
  border-radius: 4px;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--cocoa-soft);
  max-width: 520px;
  margin-bottom: 2.2rem;
  animation: fadeUp .9s .25s ease both;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeUp .9s .4s ease both;
}

/* ============ BOTÕES ============ */
.btn {
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  border: none;
  transition: all .25s;
}

.btn-primary {
  background: var(--cocoa);
  color: var(--cream);
  box-shadow: 0 15px 30px -10px rgba(42, 26, 18, .4);
}

.btn-primary:hover {
  background: var(--tomato);
  transform: translateY(-2px);
  box-shadow: 0 18px 35px -10px rgba(216, 52, 28, .5);
}

.btn-ghost {
  background: transparent;
  color: var(--cocoa);
  border: 2px solid var(--cocoa);
}

.btn-ghost:hover {
  background: var(--cocoa);
  color: var(--cream);
}

/* Hero stats */
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.5rem;
  animation: fadeUp .9s .55s ease both;
}

.stat .num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--tomato);
  letter-spacing: -.03em;
  line-height: 1;
}

.stat .label {
  font-size: .85rem;
  color: var(--cocoa-soft);
  margin-top: .3rem;
  font-weight: 500;
}



/* ============ MARQUEE ============ */
.marquee {
  background: var(--cocoa);
  color: var(--cream);
  padding: 1.2rem 0;
  overflow: hidden;
  border-top: 3px solid var(--butter);
  border-bottom: 3px solid var(--butter);
}

.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  /* --passo e --duracao sao medidos por js/main.js: o conteudo e clonado ate
     cobrir a tela, entao o laco nunca deixa vazio, em nenhuma largura. */
  animation: loopInfinito var(--duracao, 30s) linear infinite;
  animation-play-state: paused;
}

.js-loop-pronto .marquee-track {
  animation-play-state: running;
}

.marquee-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.marquee-track span::after {
  content: '★';
  color: var(--butter);
  font-size: 1rem;
}

/* O passo e exatamente a largura de um conjunto de itens, medida em pixel,
   entao a emenda e invisivel. */
@keyframes loopInfinito {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--passo, 50%))); }
}

/* ============ HISTÓRIA ============ */
.story {
  padding: 120px 6vw;
  background: var(--cream);
  position: relative;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
}

.story-visual {
  position: relative;
  aspect-ratio: 4/5;
  background-image: 
    linear-gradient(180deg, rgba(42, 26, 18, 0.15) 0%, rgba(42, 26, 18, 0.55) 100%),
    url('../public/images/humberto.jpeg');
  background-size: cover;
  background-position: center;
  border-radius: 200px 200px 20px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 30px 30px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.story-visual-content {
  background: var(--cocoa);
  color: var(--cream);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  width: 100%;
  border: 3px solid var(--cream);
}

.story-visual-content .badge {
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--butter);
  font-weight: 700;
}

/* Era .story-visual-content h3. Virou classe em 09/09/2026: o cartao e decorativo e
   vinha antes do <h2> da secao, entao a home pulava de h1 para h3 na estrutura. */
.story-visual-content .cidade {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: .5rem;
}

.story-visual-content .line {
  width: 40px;
  height: 2px;
  background: var(--butter);
  margin: 1rem auto;
}

.story .story-visual-content p {
  font-size: .9rem;
  color: var(--cream) !important;
  margin-top: .6rem;
  margin-bottom: 0;
  line-height: 1.5;
  max-width: 100%;
}

/* Section eyebrow (rótulo decorativo) */
.section-eyebrow {
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--tomato);
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.section-eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--tomato);
}

.story h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cocoa);
  margin-bottom: 1.5rem;
}

.story h2 em {
  color: var(--tomato);
  font-style: italic;
  font-weight: 600;
}

.story p {
  font-size: 1.05rem;
  color: var(--cocoa-soft);
  margin-bottom: 1.2rem;
  max-width: 520px;
}

.story-features {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.2rem;
}

.feat {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--tomato);
  color: var(--cream);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.feat-text strong {
  display: block;
  font-weight: 700;
  color: var(--cocoa);
  margin-bottom: .2rem;
}

.feat-text span {
  font-size: .93rem;
  color: var(--cocoa-soft);
}

/* ============ PRODUTOS ============ */
.products {
  padding: 120px 6vw;
  background: var(--cocoa);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.products::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(242, 201, 76, .15), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(216, 52, 28, .2), transparent 50%);
  pointer-events: none;
}

.products-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 70px;
  position: relative;
}

.products-header .section-eyebrow {
  color: var(--butter);
  justify-content: center;
}

.products-header .section-eyebrow::before {
  background: var(--butter);
}

/* h1 e h2 no mesmo seletor: a home usa h2 aqui, porque o titulo de primeiro nivel dela e
   o do hero, e a pagina de catalogo usa h1, porque la este e o titulo da pagina. */
.products-header h1,
.products-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.products-header h1 em,
.products-header h2 em {
  color: var(--butter);
  font-style: italic;
  font-weight: 600;
}

.products-header p {
  font-size: 1.05rem;
  opacity: .75;
  margin-top: 1rem;
}

/* ============ CARROSSEL DE PRODUTOS ============ */
/* Tres cards por vez e navegacao por seta. A area rolavel e o proprio trilho:
   assim o arrasto no celular, a roda do mouse e o teclado continuam funcionando
   de graca, e as setas so empurram o scroll de um card por vez. */
.carousel {
  --carousel-gap: 24px;
  --carousel-por-pagina: 3;
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
}

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--carousel-por-pagina) - 1) * var(--carousel-gap)) / var(--carousel-por-pagina)
  );
  gap: var(--carousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* A suavidade do movimento fica no scrollTo do js/main.js, nao aqui: com o
     scroll-behavior no CSS o navegador tratava o reposicionamento silencioso
     como animacao, e o snap cancelava o pedido no meio do caminho. */
  /* Folga para o card subir no hover sem que a sombra seja cortada pelo scroll.
     Sem folga lateral: ela deslocaria o ponto de parada do primeiro card. */
  padding: 10px 0 34px;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

/* Setas. Entram pelo JavaScript: sem ele o trilho continua rolavel a dedo. */
.carousel-nav {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  background: var(--cocoa);
  color: var(--cream);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .25s ease, border-color .25s ease, color .25s ease,
              opacity .25s ease, box-shadow .25s ease;
}

.carousel-nav[hidden] { display: none; }

.carousel-nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-nav:hover:not(:disabled) {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--cocoa);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6);
}

.carousel-nav:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

.carousel-nav:disabled {
  opacity: .25;
  cursor: default;
}

.carousel-prev { left: -24px; }
.carousel-next { right: -24px; }

/* Indicador de pagina */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.carousel-dots:empty { display: none; }

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(250, 243, 227, .3);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.carousel-dot:hover { background: rgba(250, 243, 227, .55); }

.carousel-dot.ativo {
  width: 30px;
  background: var(--butter);
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--butter);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .carousel { --carousel-por-pagina: 2; }
}

@media (max-width: 700px) {
  .carousel { --carousel-gap: 16px; }
  /* Um card por tela, com uma fatia do proximo aparecendo para convidar ao arrasto. */
  .carousel-track { grid-auto-columns: 86%; }
  .carousel-nav { display: none; }
}

/* Card individual */
.product-card {
  scroll-snap-align: start;
  min-height: 460px;
  border-radius: 24px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* O ultimo card ancora pela direita. Quando a divisao nao fecha (seis cards de
   dois em dois), o inicio dele cai depois do fim da rolagem, e o snap devolvia o
   trilho para o card anterior: os dois ultimos produtos ficavam inalcancaveis.
   Ancorado no fim, existe ponto de parada valido ali. */
.carousel-track > .product-card:last-child {
  scroll-snap-align: end;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .5);
}

/* Variantes de cor (rotação creme → vermelho → verde) */
.product-card.variant-cream {
  background: var(--cream);
  color: var(--cocoa);
}

.product-card.variant-red {
  background: var(--tomato);
  color: var(--cream);
}

.product-card.variant-green {
  background: var(--leaf);
  color: var(--cream);
}

/* Tag de categoria (canto superior direito) */
.product-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(42, 26, 18, .12);
  color: inherit;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-card.variant-red .product-tag,
.product-card.variant-green .product-tag {
  background: rgba(255, 255, 255, .22);
}

/* Corpo do card: foto em cima, texto embaixo.
   Era foto e texto lado a lado, com a foto numa caixa de 90x130. Duas coisas davam
   errado ali: a caixa era estreita demais para o produto aparecer, e como cada
   embalagem tem um formato, o contain encaixava cada foto num tamanho diferente
   dentro dela, e as fotos pareciam desiguais de card para card. */
.product-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* A etiqueta flutua no canto e nao ocupa espaco no fluxo. Esta folga e o que
     impede a foto de passar por baixo dela. */
  margin-top: 30px;
  margin-bottom: 18px;
  flex: 1;
}

/* Altura fixa, largura inteira do card. E a altura que iguala: seja a embalagem
   quadrada ou comprida, o contain limita pela altura e toda foto termina medindo o
   mesmo de cima a baixo.

   Ancorada a esquerda, e nao centralizada: como cada embalagem tem uma largura
   diferente, o centro fazia cada foto comecar num ponto proprio, e a fileira de cards
   ficava sem prumo. Pela esquerda todas partem da mesma linha vertical, a mesma do
   titulo e do texto logo abaixo. */
.product-image {
  width: 100%;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-info h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .5rem;
}

.product-info p {
  font-size: .88rem;
  line-height: 1.45;
  opacity: .88;
  margin: 0;
}

/* Tags de atributos na base */
.flavors {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.flavors span {
  background: rgba(42, 26, 18, .08);
  padding: .25rem .7rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 500;
}

.product-card.variant-red .flavors span,
.product-card.variant-green .flavors span {
  background: rgba(255, 255, 255, .2);
}

/* ============ DIFERENCIAIS ============ */
.values {
  padding: 120px 6vw;
  background: var(--cream);
}

.values-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.values-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 70px;
}

.values-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cocoa);
}

.values-header h2 em {
  color: var(--tomato);
  font-style: italic;
  font-weight: 600;
}

.values-header p {
  font-size: 1.05rem;
  color: var(--cocoa-soft);
  max-width: 420px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.value-card {
  background: var(--cream-2);
  padding: 36px 28px;
  border-radius: 24px;
  border: 1px solid rgba(42, 26, 18, .06);
  position: relative;
  transition: all .3s;
}

.value-card:hover {
  background: var(--cocoa);
  color: var(--cream);
  transform: translateY(-4px);
}

.value-card:hover .value-num {
  color: var(--butter);
}

.value-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--tomato);
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 1.2rem;
  transition: color .3s;
}

.value-card h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .6rem;
  letter-spacing: -.01em;
}

.value-card p {
  font-size: .9rem;
  line-height: 1.5;
  opacity: .8;
}

/* ============ PARCERIA ============ */
.partnership {
  padding: 80px 6vw;
  background: var(--tomato);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.partnership::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(242, 201, 76, .25), transparent 70%);
  border-radius: 50%;
}

.partnership-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

.partnership .section-eyebrow {
  color: var(--butter);
}

.partnership .section-eyebrow::before {
  background: var(--butter);
}

.partnership h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.partnership h2 em {
  color: var(--butter);
  font-style: italic;
  font-weight: 600;
}

.partnership p {
  font-size: 1.05rem;
  opacity: .9;
  max-width: 500px;
}

.partnership-badge {
  background: var(--cream);
  color: var(--cocoa);
  padding: 2rem;
  border-radius: 24px;
  text-align: center;
  transform: rotate(3deg);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .4);
}

.partnership-badge .small {
  font-size: .7rem;
  letter-spacing: .3em;
  font-weight: 700;
  color: var(--tomato);
}

.partnership-badge .big {
  margin: .5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}

.partnership-badge .big img {
  max-height: 110px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partnership-badge .line {
  width: 40px;
  height: 3px;
  background: var(--cocoa);
  margin: 1rem auto;
}

.partnership-badge .desc {
  font-size: .85rem;
  color: var(--cocoa-soft);
}

/* ============ CTA FINAL ============ */
.cta {
  padding: 120px 6vw;
  background: var(--cream);
  position: relative;
}

.cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--cocoa);
  color: var(--cream);
  padding: 80px 60px;
  border-radius: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Os dois circulos sao decoracao, e decoracao nao pode receber clique.
   Sem o pointer-events, o ::after engolia os tres botoes da secao no celular: ele e o
   ultimo filho, tem z-index auto igual ao .cta-buttons, entao pintava por cima. Como e
   um degrade que termina transparente, nada denunciava a camada: o botao aparecia
   inteiro e o toque simplesmente nao chegava nele. Estava assim desde o prototipo.
   O ::before nunca chegou a atrapalhar, por vir antes do conteudo e ficar no canto
   oposto, mas leva a mesma marca: os dois sao a mesma decoracao. */
.cta-inner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(242, 201, 76, .3), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-inner::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(216, 52, 28, .3), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 1rem;
  position: relative;
}

.cta h2 em {
  color: var(--butter);
  font-style: italic;
  font-weight: 600;
}

.cta p {
  font-size: 1.15rem;
  opacity: .85;
  margin-bottom: 2.5rem;
  position: relative;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

.cta .btn-primary {
  background: var(--butter);
  color: var(--cocoa);
  box-shadow: 0 15px 30px -10px rgba(242, 201, 76, .5);
}

.cta .btn-primary:hover {
  background: var(--cream);
  color: var(--cocoa);
}

.cta .btn-ghost {
  border-color: var(--cream);
  color: var(--cream);
}

.cta .btn-ghost:hover {
  background: var(--cream);
  color: var(--cocoa);
}

/* ============ FOOTER ============ */
footer {
  background: var(--cocoa);
  color: var(--cream);
  padding: 60px 6vw 30px;
}

.footer-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
}

.footer-brand .logo {
  margin-bottom: 1rem;
}

.footer-brand .logo img {
  width: 150px;
  height: 150px;
  max-width: 100%;
  object-fit: contain;
}

.footer-brand p {
  font-size: .92rem;
  opacity: .7;
  max-width: 320px;
  line-height: 1.6;
}

.footer-col h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  color: var(--butter);
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: .7rem;
  font-size: .92rem;
  opacity: .8;
}

.footer-col a:hover {
  opacity: 1;
  color: var(--butter);
}

.footer-col .contact-line {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9rem;
  opacity: .8;
  margin-bottom: .8rem;
}

.footer-col .contact-line svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--butter);
}

.socials {
  display: flex;
  gap: .8rem;
  margin-top: 1.5rem;
}

.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}

.socials a:hover {
  background: var(--butter);
  color: var(--cocoa);
  transform: translateY(-3px);
}

.footer-bottom {
  max-width: 1300px;
  margin: 50px auto 0;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  /* Discreto pela cor, e nao por opacity. Com opacity o elemento inteiro desbota, e
     junto com o texto ia o emoji da assinatura, que perdia a cor propria e ficava
     acinzentado. Na cor, so o texto obedece. */
  color: rgba(250, 243, 227, .6);
  flex-wrap: wrap;
  gap: 1rem;
}

/* A espiga fica na mesma linha do texto e encolhe junto com ele. O flex-shrink zero
   existe porque, quando o rodape aperta, o texto quebra e o icone seria esmagado. */
.footer-bottom .assinatura {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* O credito e a espiga andam juntos: sao uma coisa so quando a assinatura quebra em
   duas linhas, e o nome da agencia fica sozinho embaixo. */
.footer-bottom .assinatura-credito {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* O emoji vem com a cor dele, e nao com a do texto: aqui ele so precisa nao ser
   espremido quando o rodape aperta e o texto quebra. O tamanho e um pouco maior que
   o da linha porque emoji desenha menor que a letra na mesma medida. */
.footer-bottom .assinatura .emoji {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}

/* A assinatura leva ao site de quem fez, em outra aba. Herda a cor da linha para nao
   competir com o conteudo do cliente, e so se anuncia como link no hover e no foco. */
.footer-bottom .assinatura a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 243, 227, .35);
}

.footer-bottom .assinatura a:hover,
.footer-bottom .assinatura a:focus-visible {
  color: var(--butter);
  border-bottom-color: var(--butter);
}

/* ============ WHATSAPP FLUTUANTE ============ */
.wpp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 40;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -5px rgba(37, 211, 102, .5);
  transition: transform .25s;
}

.wpp-float:hover {
  transform: scale(1.1);
}

.wpp-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: .5;
  animation: ringPulse 2s infinite;
}

@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============ ANIMAÇÕES UTILITÁRIAS ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============ RESPONSIVO ============ */
/* ============ PRODUTOS LICENCIADOS DOS CLUBES ============
   Secao pronta, desativada na home ate o cliente liberar.
   Para ativar: remover as marcas de comentario em volta do bloco
   <section class="licensed"> no index.html.
   ========================================================= */
.licensed {
  padding: 110px 6vw;
  background: var(--cream-2);
}

.licensed-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.licensed-header {
  max-width: 760px;
  margin-bottom: 60px;
}

.licensed-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cocoa);
}

.licensed-header h2 em {
  color: var(--tomato);
  font-style: italic;
  font-weight: 600;
}

.licensed-header p {
  margin-top: 1.2rem;
  font-size: 1.05rem;
  color: var(--cocoa-soft);
}

.licensed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
}

.club {
  background: var(--cream);
  border: 1px solid rgba(42, 26, 18, .06);
  border-radius: 24px;
  padding: 36px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: transform .3s, box-shadow .3s;
}

.club:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(42, 26, 18, .45);
}

.club img {
  height: 90px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.club span {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cocoa-soft);
  text-align: center;
}

/* A barra completa so cabe a partir de 1300px, medido no navegador. Abaixo disso quem
   atende e o menu sanduiche. O ponto de corte era 960px, depois 1180px, e nenhum dos
   dois dava conta: nessa faixa a barra ficava espremida, com o logo achatado.

   Duas coisas que a conta anterior nao pegou, e que sao a razao de 1180 nao bastar:

   1. O botao "Pedido" so aparece quando ha item no carrinho, e ele custa uns 90px na
      ponta direita. Medir a barra com o carrinho vazio da um numero que so vale para
      quem nunca montou pedido. O ponto de corte tem de valer para a barra no seu
      estado mais largo, e nao no mais estreito.
   2. "Contato" existe so na home, entao a home e a pagina de barra mais longa.

   1320 e nao 1300 porque a 1300 sobram 3px entre o ultimo link e os botoes, o que e
   ausencia de sobreposicao, nao folga. A 1320 sobram 12px, a mesma folga que a barra
   tinha antes de o item do menu virar "Revendedor/Distribuidor".

   O sanduiche entra bem acima do celular, e isso e proposital. */
@media (max-width: 1320px) {
  /* Sem a grade aqui: com .nav-links escondido sobrariam logo e sanduiche, e o
     sanduiche cairia na coluna do meio em vez de na ponta direita. */
  nav {
    display: flex;
    justify-content: space-between;
  }

  .menu-toggle { display: block; }

  /* O painel fica ancorado na propria barra, com top 100%, e nao num numero fixo de
     pixels: assim ele acompanha a altura da barra em vez de cortar o logo, que e o que
     acontecia quando o JavaScript cravava top 70px.

     Escondido por visibilidade e opacidade, nunca por display none: display nao
     transiciona, e o menu fecharia num corte seco. */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--cream);
    border-bottom: 1px solid rgba(42, 26, 18, .08);
    box-shadow: 0 18px 40px -22px rgba(42, 26, 18, .55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity .24s ease,
      transform .32s cubic-bezier(.2, .8, .2, 1),
      visibility 0s linear .32s;
  }

  /* Na abertura a visibilidade vale na hora, sem a espera que existe no fechamento. */
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity .24s ease,
      transform .32s cubic-bezier(.2, .8, .2, 1),
      visibility 0s;
  }

  /* As paginas viram uma lista: uma por linha, separadas por um fio. O respiro sai do
     gap e vai para o padding de cada item, senao o fio ficaria solto no meio do vao em
     vez de encostar nas duas linhas que ele separa. */
  .nav-paginas {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav-paginas a {
    padding: .95rem 0;
    border-bottom: 1px solid rgba(42, 26, 18, .1);
  }

  /* O sublinhado de hover nasce colado embaixo do texto e encostaria no fio.
     No painel ele nao faz falta: quem toca ja tem o proprio toque como resposta. */
  .nav-paginas a::after {
    display: none;
  }

  /* Os botoes ficam lado a lado, na mesma linha, e o fio de cima os separa do bloco
     de paginas. Com flex-wrap para o caso de a tela ser estreita demais para os dois. */
  .nav-acoes {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    width: 100%;
    margin-top: 1.3rem;
  }

  /* Os itens entram em cascata, um logo depois do outro. So na abertura: no fechamento
     o painel inteiro sai junto, que e mais rapido e nao deixa o visitante esperando. */
  .nav-links.open .nav-paginas a,
  .nav-links.open .nav-acoes > * {
    animation: nav-item-entra .34s cubic-bezier(.2, .8, .2, 1) both;
  }

  .nav-links.open .nav-paginas a:nth-child(1) { animation-delay: .06s; }
  .nav-links.open .nav-paginas a:nth-child(2) { animation-delay: .1s; }
  .nav-links.open .nav-paginas a:nth-child(3) { animation-delay: .14s; }
  .nav-links.open .nav-paginas a:nth-child(4) { animation-delay: .18s; }
  .nav-links.open .nav-paginas a:nth-child(5) { animation-delay: .22s; }
  .nav-links.open .nav-paginas a:nth-child(6) { animation-delay: .26s; }
  .nav-links.open .nav-acoes > *:nth-child(1) { animation-delay: .3s; }
  .nav-links.open .nav-acoes > *:nth-child(2) { animation-delay: .34s; }
}

@keyframes nav-item-entra {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Quem pediu menos movimento no sistema recebe a troca sem deslocamento nenhum. O menu
   continua abrindo e fechando, e o botao continua virando X: o que sai e o movimento. */
@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links.open {
    transform: none;
    transition: opacity .01s linear, visibility 0s;
  }

  .nav-links.open .nav-paginas a,
  .nav-links.open .nav-acoes > * {
    animation: none;
  }

  .menu-barras i {
    transition: none;
  }
}

/* Entre o ponto de corte e a tela larga a folga e curta: o respiro entre os links
   diminui para a fila caber sem encostar nos botoes. */
@media (min-width: 1181px) and (max-width: 1440px) {
  .nav-paginas {
    gap: 1.4rem;
  }
}

@media (max-width: 960px) {

  /* A montagem sai do fundo e vira bloco depois do texto. Por isso a secao deixa de ser
     uma linha centralizada e passa a empilhar, e o padding de baixo zera: quem encosta
     no marquee agora e a propria imagem. */
  .hero {
    text-align: center;
    padding-top: 180px;
    padding-bottom: 0;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    background-image: none;
    background-color: var(--cream);
  }

  .hero-content {
    margin: 0 auto;
    max-width: 100%;
  }

  /* Sem imagem atras do texto, nao ha o que velar. */
  .hero-overlay { display: none; }

  /* Sangra ate as bordas: a secao tem 6vw de padding lateral, e a montagem devolve os
     dois lados para ocupar a largura inteira da tela. */
  .hero-montagem {
    display: block;
    width: calc(100% + 12vw);
    margin: 2.5rem -6vw 0;
  }

  .hero-montagem img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .eyebrow { margin-left: auto; margin-right: auto; }

  .story-grid { grid-template-columns: 1fr; gap: 50px; }
  .values-header { grid-template-columns: 1fr; gap: 20px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .partnership-inner { grid-template-columns: 1fr; gap: 40px; }
  .licensed-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { padding: 50px 30px; }
  .marquee-track span { font-size: 1.2rem; }
}

@media (max-width: 560px) {
  .story-visual { padding: 0 15px 15px; }
  .story-visual-content { padding: 1.5rem 1rem; }
  .story .story-visual-content p { font-size: 0.75rem; }
  .values-grid { grid-template-columns: 1fr; }
  .licensed-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .club { padding: 26px 16px 20px; }
  .club img { height: 70px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: 1.5rem; }
  .stat { display: flex; align-items: baseline; gap: 1rem; justify-content: center; }
  /* Os tres blocos empilham e ganham ar entre eles: no celular eles viravam tres
     linhas coladas, e a assinatura parecia continuacao do aviso de venda. */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }

  /* No celular a assinatura e sempre duas linhas: o credito em cima, o nome da agencia
     embaixo. Em uma linha so ela nao cabia, e o link saia cortado pela direita. */
  .footer-bottom .assinatura {
    flex-direction: column;
    align-items: center;
    gap: .2rem;
  }

  /* O botao flutuante do WhatsApp ocupa dos 30px aos 90px de baixo da tela, e fica por
     cima do que estiver ali. Com a pagina rolada ate o fim, era a assinatura que ficava
     embaixo dele: medido, o clique no link da Freela chegava no botao, e nao no link.
     Esta folga tira a ultima linha do caminho dele. */
  footer {
    padding-bottom: 110px;
  }
}

/* ---------- contador do pedido na navegacao ---------- */
.nav-pedido {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border: 2px solid var(--cocoa);
  border-radius: 99px;
  background: transparent;
  color: var(--cocoa);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: all .25s;
}

.nav-pedido:hover {
  background: var(--cocoa);
  color: var(--cream);
}

.nav-pedido[hidden] {
  display: none;
}

.nav-pedido-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 99px;
  background: var(--tomato);
  color: #fff;
  font-size: .78rem;
}

.nav-pedido:hover .nav-pedido-num {
  background: var(--butter);
  color: var(--cocoa);
}

.btn.adicionado {
  background: var(--leaf);
  color: #fff;
  border-color: var(--leaf);
}

/* ---------- acoes do card de produto ---------- */
.product-acoes {
  display: flex;
  /* Alinhados a esquerda, na mesma margem do texto e das etiquetas do card, com a
     largura do proprio conteudo. Quando o card aperta, quebram para a linha de
     baixo continuando alinhados a esquerda. */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .6rem;
  /* margin-top auto empurra os botoes para a base: cards de alturas diferentes
     terminam com a mesma linha de acao. */
  margin-top: auto;
  /* Sem padding lateral: o proprio card ja tem 24px, e somar de novo jogava os
     botoes para dentro, desalinhados das etiquetas logo acima. */
  padding: 1.2rem 0 0;
}

.product-acoes .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .45rem 1.1rem;
  font-size: clamp(.72rem, .95vw, .82rem);
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

.product-acoes .btn-ghost {
  border-width: 2px;
}

/* A secao de produtos tem fundo escuro: o aviso usa o amarelo da marca, nao o vermelho. */
.produtos-disclaimer {
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--butter);
}

/* Nos cards vermelho e verde, o contorno escuro do botao some no fundo. */
.product-card.variant-red .product-acoes .btn-ghost,
.product-card.variant-green .product-acoes .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
}

.product-card.variant-red .product-acoes .btn-ghost:hover,
.product-card.variant-green .product-acoes .btn-ghost:hover {
  background: #fff;
  color: var(--cocoa);
}

@media (max-width: 600px) {
  .product-acoes {
    padding-top: 1rem;
  }
}
/* ============ PAGINA DE CATALOGO ============ */
/* A secao escura comeca no alto da pagina e a barra fixa flutua por cima dela, como
   acontece com o hero da home. A folga para nao passar por baixo da barra fica no
   padding da propria secao, logo abaixo. */
.catalogo-pagina {
  background: var(--cream);
}

.catalogo-pagina .products {
  padding-top: var(--topo-pagina);
}

/* O card e o mesmo da home. Muda so o continente: no lugar do trilho rolavel, uma
   grade. Tres colunas fixas, e nao auto-fit: com auto-fit a tela larga cabia quatro
   cards, o card ficava estreito e o titulo quebrava em tres linhas. Tres e a mesma
   contagem do carrossel, e as quebras acompanham as dele, em 1024px e 700px. */
.produtos-grid {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* Folga embaixo para a sombra do card no hover nao ser cortada. */
  padding-bottom: 10px;
}

/* Fora do trilho nao ha rolagem para encaixar: o snap so atrapalharia. */
.produtos-grid .product-card {
  scroll-snap-align: none;
}

.catalogo-vazio {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  opacity: .8;
}

@media (max-width: 1024px) {
  .produtos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .produtos-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* Fecha a secao de produtos da home levando ao catalogo completo. O fundo ali e
   escuro, entao o contorno do botao vem claro, como nos cards vermelho e verde. */
.products-todos {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.products-todos .btn-ghost {
  color: var(--cream);
  border-color: rgba(250, 243, 227, .5);
}

.products-todos .btn-ghost:hover {
  background: var(--cream);
  color: var(--cocoa);
  border-color: var(--cream);
}