/* =============================================================
   GAIA DOCERIA — Landing Page
   Organização do arquivo:
     1. Variáveis (cores, tamanhos)   ← AJUSTES RÁPIDOS AQUI
     2. Reset e base
     3. Utilitários (container, botões, ícones)
     4. Cabeçalho + Menu
     5. Hero
     6. Seções (vitrine, bastidores, como funciona, valor)
     7. Avaliações
     8. FAQ
     9. CTA final + Rodapé
    10. Botão flutuante
    11. Responsivo (mobile)
    12. Movimento reduzido (acessibilidade)
    13. Faixa do cardápio em PDF
   ============================================================= */

/* ---------- 1. VARIÁVEIS ---------- */
:root {
  /* Cores da marca */
  --verde: #08331E;
  --verde-claro: #1A5138;
  --verde-escuro: #061F13;
  --bege: #F2E8CF;
  --creme: #FBF7EC;
  --texto: #2B2B26;
  --texto-suave: #6B6B60;
  --branco: #FFFFFF;
  --wpp: #25D366;
  --estrela: #E0A500;
  --ouro: #C9A24B;      /* fio vintage: molduras, ornamentos, acentos */
  --rosa-antigo: #C98B86;

  /* Tamanho do LOGO — mude aqui pra crescer/diminuir */
  --logo-altura-header: 54px;
  --logo-altura-rodape: 120px;

  /* Layout */
  --largura-max: 1000px;
  --raio: 16px;
  --altura-header: 72px;
  --sombra-card: 0 3px 14px rgba(8, 51, 30, 0.08);
}

/* ---------- 2. RESET E BASE ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* O atributo hidden precisa vencer qualquer display definido depois.
   Usado pelas seções que só aparecem quando têm conteúdo real. */
[hidden] {
  display: none !important;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: var(--altura-header); /* âncoras não ficam atrás do menu */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--bege);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.15;
  text-wrap: balance; /* evita título com uma palavra órfã na última linha */
}

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

a {
  color: inherit;
}

/* Foco visível apenas para quem navega por teclado — não aparece
   no clique de mouse. Requisito de acessibilidade. */
:focus-visible {
  outline: 3px solid var(--wpp);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Link "pular para o conteúdo": escondido até receber foco pelo Tab */
.pular-para-conteudo {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--bege);
  color: var(--verde);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--raio) var(--raio);
  text-decoration: none;
  transition: top 0.2s ease;
}

.pular-para-conteudo:focus {
  top: 0;
}

/* ---------- 3. UTILITÁRIOS ---------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 92px 0;
}

.ico {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  flex-shrink: 0;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--wpp {
  background: var(--wpp);
  color: var(--branco);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.btn--wpp:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(37, 211, 102, 0.45);
}

.btn--sm {
  padding: 9px 18px;
  font-size: 0.9rem;
}

.btn--lg {
  padding: 16px 34px;
  font-size: 1.1rem;
}

/* Títulos de seção */
.secao__titulo {
  text-align: center;
  color: var(--verde);
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.secao__titulo--claro {
  color: var(--bege);
}

.secao__sub {
  text-align: center;
  color: var(--texto-suave);
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.secao__sub--claro {
  color: rgba(242, 232, 207, 0.85);
}

.link-forte {
  color: var(--verde);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(8, 51, 30, 0.25);
  padding-bottom: 2px;
}

.link-forte:hover {
  border-bottom-color: var(--verde);
}

/* ---------- 4. CABEÇALHO + MENU ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--verde);
  box-shadow: 0 2px 14px rgba(6, 31, 19, 0.18);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altura-header);
}

.nav__logo img {
  height: var(--logo-altura-header);
  width: auto;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav__menu a {
  color: var(--bege);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.nav__menu a:hover {
  opacity: 0.75;
}

.nav__menu a.is-active {
  border-bottom-color: var(--bege);
}

/* Ícone do Instagram no header */
.nav__insta {
  display: inline-flex;
  align-items: center;
  color: var(--bege);
  transition: opacity 0.15s ease;
}
.nav__insta:hover { opacity: 0.7; }

/* Botão hambúrguer (só aparece no mobile) */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav__toggle span {
  width: 26px;
  height: 2px;
  background: var(--bege);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- 5. HERO ---------- */
.hero {
  background: var(--creme);
  color: var(--texto);
  text-align: center;
  padding: 64px 0 88px;
}

.hero__selo {
  display: inline-block;
  background: var(--verde);
  color: var(--bege);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 26px;
}

.hero__titulo {
  font-size: 3rem;
  margin-bottom: 20px;
  color: var(--verde);
}

.hero__sub {
  font-size: 1.3rem;
  color: #4A4A42;
  max-width: 580px;
  margin: 0 auto 34px;
}

.hero__script {
  font-family: "Dancing Script", "Fraunces", cursive;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--verde);
  margin-bottom: 4px;
}

/* ---------- Hero editorial em 2 colunas (texto | foto) ---------- */
.hero .container { max-width: 1120px; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
}

.hero__texto { text-align: left; }
.hero__grid .hero__selo { margin-bottom: 18px; }
.hero__grid .hero__script { font-size: 1.75rem; }
.hero__grid .hero__titulo { font-size: 3.5rem; margin-bottom: 22px; }
.hero__grid .hero__sub { max-width: 460px; margin: 0 0 34px; }

/* a foto ocupa a coluna direita, alinhada à borda */
.hero__grid .hero__carrossel {
  margin: 0;
  width: 100%;
  max-width: 500px;
  justify-self: end;
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__texto { text-align: center; }
  .hero__grid .hero__titulo { font-size: 2.4rem; }
  .hero__grid .hero__script { font-size: 1.5rem; }
  .hero__grid .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__grid .hero__carrossel { margin: 0 auto; max-width: 440px; justify-self: center; }
}

/* ---------- 5b. CARROSSEL DE FOTOS (hero) ----------
   Faixa com scroll-snap: swipe nativo no celular, sem biblioteca.
   As setas/pontos/autoplay são ligados por script.js; sem JS,
   continua sendo uma faixa rolável (nada quebra). */
.carrossel {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 44px auto 0;
}

/* Moldura vintage: fio dourado + respiro creme em volta da foto */
.carrossel__moldura {
  padding: 8px;
  background: var(--branco);
  border: 1px solid rgba(8, 51, 30, 0.15);
  border-radius: var(--raio);
  box-shadow: 0 14px 36px rgba(8, 51, 30, 0.14);
}

.carrossel__trilha {
  display: flex;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 10px;
  scrollbar-width: none;            /* Firefox */
}
.carrossel__trilha::-webkit-scrollbar { display: none; }  /* WebKit */

.carrossel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 5;
  background-color: var(--verde-claro);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 1ª camada = foto real (quando existir em fotos/); 2ª = gradiente
   de reserva pra não ficar buraco antes das fotos entrarem. */
.slide-1 { background-image: url("fotos/hero1.jpg"), linear-gradient(135deg, #C98B86, #7d4b47); }
.slide-2 { background-image: url("fotos/hero2.jpg"), linear-gradient(135deg, #1A5138, #08331E); }
.slide-3 { background-image: url("fotos/hero3.jpg"), linear-gradient(135deg, #E4D4A8, #c9b078); }

.carrossel__seta {
  position: absolute;
  top: calc(50% + 4px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--verde);
  background: rgba(251, 247, 236, 0.96);
  border: 1px solid var(--verde);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carrossel__seta:hover { background: var(--bege); transform: translateY(-50%) scale(1.06); }
.carrossel__seta--prev { left: -8px; }
.carrossel__seta--next { right: -8px; }

.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
}
.carrossel__ponto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(8, 51, 30, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carrossel__ponto[aria-current="true"] {
  background: var(--verde);
  transform: scale(1.3);
}

/* ---------- Ornamento vintage sob os títulos de seção ---------- */
.secao__titulo::after {
  content: "❦";
  display: block;
  color: var(--verde);
  font-size: 1.25rem;
  line-height: 1;
  margin: 14px auto 0;
}

/* ---------- Revelar ao rolar (só quando script.js liga .js-anim) ----------
   Sem JS ou com movimento reduzido, tudo já nasce visível. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 6. SEÇÕES ---------- */

/* Vitrine */
.vitrine {
  background: var(--branco);
}

/* container mais largo pra as fotos respirarem */
.vitrine .container { max-width: 1160px; }

.vitrine__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 fotos grandes por linha */
  gap: 24px;
}

/* Fotos grandes, SEM moldura (estilo editorial das referências) */
.vitrine__foto {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background-color: var(--bege);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: background-size 0.6s ease;
}

.vitrine__foto:hover {
  background-size: 105%;                    /* zoom bem sutil, sem borda/sombra */
}

/* 1ª camada = foto real; 2ª = gradiente de reserva enquanto não há foto. */
.foto-1 { background-image: url("fotos/bolo1.jpg"), linear-gradient(135deg, #C98B86, #8a5a56); } /* TROCAR */
.foto-2 { background-image: url("fotos/bolo2.jpg"), linear-gradient(135deg, #1A5138, #08331E); } /* TROCAR */
.foto-3 { background-image: url("fotos/bolo3.jpg"), linear-gradient(135deg, #E4D4A8, #c9b078); } /* TROCAR */
.foto-4 { background-image: url("fotos/bolo4.jpg"), linear-gradient(135deg, #b98a86, #6f4340); } /* TROCAR */

/* Bastidores */
.bastidores {
  background: var(--bege);
  color: var(--texto);
  text-align: center;
}

.bastidores__foto {
  max-width: 400px;
  margin: 0 auto;
  border-radius: var(--raio);
  overflow: hidden;
  background: #E9DCBF;
  box-shadow: 0 12px 32px rgba(8, 51, 30, 0.18);
}

.bastidores__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Como funciona */
.como {
  background: var(--bege);
}

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px;
  list-style: none;
}

.passo {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--sombra-card);
}

.passo__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  background: var(--verde);
  color: var(--bege);
  border-radius: 50%;
  font-family: "Fraunces", serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.passo__titulo {
  color: var(--verde);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.como__entrega {
  text-align: center;
  color: var(--verde);
  margin-top: 32px;
}

/* Valor / objeção de preço */
.valor {
  background: var(--branco);
}

.valor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 680px;
  margin: 0 auto;
}

.valor__col {
  border-radius: var(--raio);
  padding: 28px;
}

.valor__col h3 {
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.valor__col ul {
  list-style: none;
}

.valor__col li {
  padding: 7px 0;
  font-size: 0.98rem;
}

.valor__col li::before {
  content: "•  ";
  font-weight: 700;
}

.valor__col--comum {
  background: #F3F0E8;
  color: #8A8578;
}

.valor__col--gaia {
  background: var(--verde);
  color: var(--bege);
}

/* ---------- 7. AVALIAÇÕES ---------- */
.avaliacoes {
  background: var(--bege);
  text-align: center;
}

.avaliacoes__nota {
  margin-bottom: 32px;
  font-size: 1.1rem;
  color: var(--verde);
  font-weight: 700;
}

.avaliacoes__estrelas {
  color: var(--estrela);
  font-size: 1.5rem;
  letter-spacing: 3px;
  margin-right: 8px;
}

.avaliacoes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.avaliacao-card {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 24px;
  text-align: left;
  box-shadow: var(--sombra-card);
}

.avaliacao-card__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.avaliacao-card__foto {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bege);
  object-fit: cover;
}

.avaliacao-card__nome {
  font-weight: 700;
  color: var(--verde);
  font-size: 0.95rem;
}

.avaliacao-card__estrelas {
  color: var(--estrela);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.avaliacao-card__texto {
  font-style: italic;
  color: #5A5A50;
  font-size: 0.95rem;
}

.avaliacao-card__data {
  margin-top: 12px;
  color: var(--texto-suave);
  font-size: 0.82rem;
}

/* Grid vazio não deve reservar espaço (a seção some via [hidden],
   mas isto protege o caso de 0 avaliações aprovadas no filtro). */
.avaliacoes__grid:empty {
  display: none;
}

/* ---------- 8. FAQ ---------- */
.faq {
  background: var(--branco);
}

.faq__lista {
  max-width: 720px;
  margin: 0 auto;
}

.faq details {
  background: var(--bege);
  border-radius: 12px;
  padding: 2px 22px;
  margin-bottom: 12px;
}

.faq summary {
  font-weight: 700;
  color: var(--verde);
  cursor: pointer;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  padding: 0 0 18px;
  color: #5A5A50;
}

/* ---------- 9. CTA FINAL + RODAPÉ ---------- */
.cta-final {
  background: #E7EDE0;
  color: var(--texto);
  text-align: center;
}

.cta-final h2 {
  color: var(--verde);
  font-size: 2.3rem;
  margin-bottom: 16px;
}

.cta-final p {
  color: #4A4A42;
  margin-bottom: 30px;
}

.site-footer {
  background: var(--verde-escuro);
  color: rgba(242, 232, 207, 0.7);
  text-align: center;
  padding: 44px 24px;
  font-size: 0.92rem;
}

.site-footer__logo {
  height: var(--logo-altura-rodape);
  width: auto;
  margin: 0 auto 20px;
  opacity: 0.95;
}

.site-footer__links {
  margin-top: 8px;
}

.site-footer__links a {
  color: var(--bege);
  text-decoration: none;
}

.site-footer__assinatura {
  margin-top: 16px;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ---------- 10. BOTÃO FLUTUANTE ---------- */
.float-wpp {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wpp);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  animation: pulso 2.4s infinite;
}

/* v3: botão flutuante em verde-escuro da marca (não o verde WhatsApp) */
.float-wpp { background: var(--verde); }

.float-wpp .ico {
  width: 32px;
  height: 32px;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- 11. RESPONSIVO (mobile) ---------- */
@media (max-width: 780px) {
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    position: absolute;
    top: var(--altura-header);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--verde);
    padding: 8px 24px 20px;
    box-shadow: 0 8px 16px rgba(6, 31, 19, 0.25);

    /* Escondido por padrão.
       Usa opacity + visibility em vez de max-height: nada de número
       mágico que corta o menu se um item novo for adicionado, e
       visibility:hidden tira os links da navegação por teclado. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }

  .nav__menu li {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(242, 232, 207, 0.14);
  }
  .nav__logo { margin-right: auto; }
  .nav__insta { margin-left: 18px; }

  .nav__menu.aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* anima o hambúrguer virar X quando aberto */
  .nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 600px) {
  .hero__titulo {
    font-size: 2.2rem;
  }
  .hero__sub {
    font-size: 1.1rem;
  }
  .secao__titulo {
    font-size: 1.8rem;
  }
  .valor__grid {
    grid-template-columns: 1fr;
  }
  .vitrine__grid {
    grid-template-columns: 1fr;
  }
  section {
    padding: 56px 0;
  }
  /* Setas do carrossel pra dentro, pra não vazar da tela */
  .carrossel__seta--prev { left: 4px; }
  .carrossel__seta--next { right: 4px; }
  .carrossel__seta {
    width: 40px;
    height: 40px;
    background: rgba(242, 232, 207, 0.85);
  }
}

/* ---------- 12. MOVIMENTO REDUZIDO ----------
   Respeita quem configurou o sistema para menos animação
   (enjoo, vertigem, sensibilidade vestibular). O botão flutuante
   pulsando é o principal ofensor aqui. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .float-wpp {
    animation: none;
  }

  .btn--wpp:hover {
    transform: none;
  }

  /* Revelar-ao-rolar e carrossel: nada de deslocar/desvanecer. */
  .js-anim .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .carrossel__trilha {
    scroll-behavior: auto;
  }
}

/* =============================================================
   13. HERO V3 — orgânico/vintage (foto em blob + botânicas)
   ============================================================= */
.hero--v3 {
  position: relative;
  overflow: hidden;
  padding-bottom: 128px;   /* espaço pra onda */
}
/* Coluna de texto centralizada (igual à referência) */
.hero--v3 .hero__texto { text-align: center; }
.hero--v3 .hero__sub { margin: 0 auto 34px; }
/* Foto maior: mais espaço pra coluna da direita */
.hero--v3 .hero__grid { grid-template-columns: 0.85fr 1.15fr; gap: 40px; }

/* Ornamentos (fios dourados) acima/abaixo do título */
.hero__flor { display: block; line-height: 0; }
.hero__flor--topo { margin-bottom: 18px; }
.hero__flor--baixo { margin: 8px 0 24px; }
.hero__flor svg { width: 190px; height: auto; }

.hero__titulo em {
  font-style: italic;
  font-weight: 500;
}

/* Chip de localização (verde, com pin) — também é o CTA do WhatsApp */
.chip-local {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--verde);
  color: var(--bege);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 15px 28px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(8, 51, 30, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chip-local:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(8, 51, 30, 0.30);
}

/* Arte: foto recortada em blob + botânicas ao redor */
.hero__arte {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__blob {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(8, 51, 30, 0.16));
}
.botanica {
  position: absolute;
  height: auto;
  opacity: 0.92;
  z-index: 2;
}
/* Botânicas abraçando o contorno orgânico do blob */
.botanica--tl { width: 82px; top: 6%;  left: 3%;   transform: rotate(-34deg); }
.botanica--tr { width: 76px; top: 15%; right: -1%; transform: rotate(42deg) scaleX(-1); }
.botanica--bl { width: 72px; bottom: 15%; left: -1%; transform: rotate(-152deg); }
.botanica--br { width: 90px; bottom: -1%; right: 10%; transform: rotate(150deg); }
.hero__sparkle { position: absolute; top: 8%; right: 7%; width: 22px; z-index: 2; opacity: 0.9; }
.hero__sparkle svg { width: 100%; height: auto; display: block; }

/* Onda de transição pra faixa de features */
.hero__onda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
}
.hero__onda svg { width: 100%; height: 70px; display: block; }

/* ---------- Faixa de features ---------- */
.features {
  background: #F3E9D2;
  padding: 40px 0 58px;
}
.features__grid {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.feature {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--verde);
}
.feature__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(8, 51, 30, 0.35);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--verde);
}
.feature__ico svg { width: 26px; height: 26px; }
.feature p {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--verde);
}

@media (max-width: 860px) {
  .hero--v3 { padding-bottom: 100px; }
  .hero__flor svg { width: 170px; }
  .hero__arte { margin-top: 8px; }
  .features__grid { gap: 28px 40px; }
}

@media (max-width: 600px) {
  .features { padding: 32px 0 44px; }
  .features__grid { flex-direction: column; align-items: center; gap: 20px; }
  .feature { width: 100%; max-width: 280px; }
}



/* ---------- 13. FAIXA DO CARDÁPIO EM PDF ---------- */
.cardapio-pdf {
  background: var(--creme);
  padding: 56px 0;
}

.cardapio-pdf__caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--bege);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  padding: 32px 34px;
}

.cardapio-pdf__texto {
  flex: 1 1 300px;
}

.cardapio-pdf__texto h2 {
  font-size: 1.6rem;
  color: var(--verde);
  margin-bottom: 6px;
}

.cardapio-pdf__texto p {
  color: var(--texto-suave);
  max-width: 46ch;
}

.cardapio-pdf__acao {
  flex: 0 1 auto;
  text-align: center;
}

/* Botão do PDF: verde da marca. O verde do WhatsApp fica reservado
   pro CTA de conversa — dois verdes iguais confundem o que é o quê. */
.btn--pdf {
  background: var(--verde);
  color: var(--creme);
}

.btn--pdf:hover {
  background: var(--verde-claro);
}

.cardapio-pdf__meta {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

@media (max-width: 560px) {
  .cardapio-pdf {
    padding: 44px 0;
  }

  .cardapio-pdf__caixa {
    padding: 26px 20px;
    text-align: center;
  }

  .cardapio-pdf__acao {
    width: 100%;
  }

  .cardapio-pdf__acao .btn {
    width: 100%;
    justify-content: center;
  }
}