/* ==========================================================================
   Suco de Uva — Design System
   Paleta inspirada em uva (roxo/vinho) + bege/branco para leveza e contraste.
   Mobile-first: estilos base = celular; media queries ampliam para telas maiores.
   ========================================================================== */

:root {
  /* Textura de fundo (rabisco de videira + grão) — reaproveitada em body,
     .hero e .article-hero, ver comentário completo junto ao uso em body. */
  --bg-vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%233B1233' stroke-opacity='0.075' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 420c60-40 85-75 110-110s70-55 120-95'/%3E%3Cpath d='M190 265c-16-20-16-42 4-54 21 11 22 34 4 54z'/%3E%3Cpath d='M270 178c-16-20-16-42 4-54 21 11 22 34 4 54z'/%3E%3C/g%3E%3Cg fill='%236B2557' fill-opacity='0.07'%3E%3Ccircle cx='345' cy='85' r='8'/%3E%3Ccircle cx='362' cy='96' r='8'/%3E%3Ccircle cx='336' cy='103' r='8'/%3E%3Ccircle cx='354' cy='114' r='8'/%3E%3Ccircle cx='338' cy='122' r='8'/%3E%3Ccircle cx='356' cy='132' r='8'/%3E%3C/g%3E%3C/svg%3E");
  --bg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.23 0 0 0 0 0.07 0 0 0 0 0.2 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Mesmo rabisco de videira acima, mas num ladrilho baixo e largo — o
     header é uma faixa curta (~60-70px), então o tile diagonal de 460px
     ficaria cortado de forma imprevisível. Esta versão desenha a gavinha
     na horizontal, com duas folhinhas e um mini-cacho, na mesma opacidade
     discreta (7-7,5%) — preenche o vão vazio entre a marca e as ações do
     header sem competir com nenhum dos dois. Ver uso em .site-header__bar. */
  --bg-vine-header: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke='%233B1233' stroke-opacity='0.075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-8,34C24,12,40,50,72,30C104,10,120,48,152,28C176,14,196,26,216,18C224,15,232,16,248,20'/%3E%3Cpath d='M0,0c-9,-11,-9,-23,2,-30c12,6,12,19,2,30z' transform='translate(66,20) rotate(25)'/%3E%3Cpath d='M0,0c-9,-11,-9,-23,2,-30c12,6,12,19,2,30z' transform='translate(150,18) rotate(-15) scale(0.85)'/%3E%3C/g%3E%3Cg fill='%236B2557' fill-opacity='0.07'%3E%3Ccircle cx='205' cy='30' r='4.5'/%3E%3Ccircle cx='213' cy='35' r='4.5'/%3E%3Ccircle cx='201' cy='39' r='4.5'/%3E%3Ccircle cx='209' cy='44' r='4.5'/%3E%3C/g%3E%3C/svg%3E");

  /* Cores — uva/vinho */
  --wine-900: #3B1233;
  --wine-800: #4A1942;
  --grape-700: #6B2557;
  --grape-600: #7E2E68;
  --grape-500: #9C3D8C;
  --grape-400: #B565A7;
  --grape-100: #F3E6EF;
  --grape-50:  #FAF3F8;

  /* Neutros — bege/branco para leveza */
  --cream:     #FFFDF8;
  --beige-50:  #FBF6EC;
  --beige-100: #F4EADA;
  --ink:       #2B1B26;
  --ink-soft:  #5B4A54;
  --line:      #E8DCCB;

  /* Apoio */
  --gold-500:  #C08A2E;   /* destaques sutis (badges, curiosidades) */
  --green-600: #3D7A4E;   /* sucesso / confirmação */
  --red-600:   #B03434;   /* alerta / contraindicação */

  /* Tipografia — sans geométrica e assertiva para títulos (inspirada em
     marcas como Tesla: confiante e "tech"), Inter para leitura no corpo */
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Espaçamento & forma — cantos mais geométricos, menos "pílula" */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(59, 18, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(59, 18, 51, 0.12);
  --container: 1120px;

  /* Altura real do header fixo/sticky (.site-header), em cada faixa de
     largura — usada abaixo em scroll-padding-top. Sem isso, qualquer
     pulo para uma âncora (#fonte-1, links de "Ver receita" da roleta,
     #newsletter, #quiz etc.) alinha o topo do alvo exatamente com o
     topo da viewport, que é onde o header sticky mora — o título fica
     escondido atrás dele. Os valores têm ~12-16px de folga além da
     altura medida do header, pra sobrar uma respiração visual acima
     do título em vez de encostar. */
  --header-h: 78px;
}
@media (min-width: 768px) {
  :root { --header-h: 138px; }
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Fundo: um traço de videira desenhado à mão (uma folha + um cacho),
     repetido num ladrilho grande (460px) para aparecer só de vez em quando —
     não é papel de parede de ícones, é mais como um rabisco ocasional, com
     uma camada fina de grão por baixo para dar textura de papel. Aparece em
     qualquer respiro da página (entre seções, margens), em qualquer tamanho
     de tela — tentativas anteriores (manchas de cor só nos cantos) ficavam
     invisíveis porque os cards brancos ocupam quase toda a largura útil.  */
  background-color: var(--beige-50);
  background-image: var(--bg-vine), var(--bg-grain);
  background-repeat: repeat, repeat;
  background-size: 460px 460px, auto;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--grape-600); text-decoration-color: var(--grape-400); }
a:hover { color: var(--wine-800); }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--wine-900);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Animações pontuais ----------
   Discretas de propósito: uma entrada suave no topo de cada página e um
   "scroll-reveal" leve nos blocos de conteúdo. A regra de prefers-reduced-motion
   acima já zera a duração de tudo isso para quem pediu menos movimento. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .article-hero h1 { animation: heroFadeUp 0.6s ease both; }
.hero .lede, .article-hero .lede { animation: heroFadeUp 0.6s ease 0.08s both; }
.hero__photo, .article-hero__photo { animation: heroFadeUp 0.7s ease 0.16s both; }

/* Elementos com .reveal começam invisíveis e sobem de leve quando entram na
   tela; a classe só é adicionada via JS (main.js), então sem JavaScript o
   conteúdo aparece normalmente — nunca fica escondido. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Foco visível para acessibilidade/teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--grape-500);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--wine-900);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout utilitário ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.section { padding: 2.75rem 0; }
.section--tint { background: var(--grape-50); }
.section--wine {
  background: linear-gradient(160deg, var(--wine-900), var(--grape-700));
  color: #fff;
}
.section--wine h2, .section--wine h3 { color: #fff; }
.section--wine a { color: var(--beige-100); }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grape-600);
  font-weight: 700;
  margin-bottom: 0.6em;
}
.section--wine .eyebrow { color: var(--grape-100); }
.lede {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- Header / Navegação ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--beige-50) 0%, var(--beige-100) 100%);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  max-width: var(--container);
  margin: 0 auto;
  gap: 0.75rem;
  /* Preenche o vão vazio entre a marca (esquerda) e as ações (direita) —
     antes só ficava vazio a não ser nos extremos. Mesma família visual do
     rabisco de fundo do site (--bg-vine), só que numa faixa baixa e
     horizontal (ver --bg-vine-header). repeat-x porque a largura da barra
     varia por página/tela; a altura do tile já casa com a altura do header. */
  background-image: var(--bg-vine-header);
  background-repeat: repeat-x;
  background-position: center;
}
/* Marca — ícone (uva + folha) + nome e slogan empilhados à direita, tudo
   dentro de uma única pílula. O slogan usa o mesmo tratamento de .eyebrow
   (versalete, letter-spacing largo) mas numa proporção bem menor/discreta,
   claramente secundária ao nome — nunca disputando atenção com ele. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  white-space: nowrap;
  background: var(--grape-100);
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(59,18,51,0.15);
}
.brand:hover .brand__name { color: var(--wine-900); }
.brand__mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--wine-900);
}
.brand__slogan {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grape-600);
  margin-top: 0.15em;
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.header-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--grape-600);
  flex-shrink: 0;
}
.header-social:hover { border-color: var(--grape-500); background: var(--grape-50); color: var(--wine-800); }
.header-social svg { width: 18px; height: 18px; }

.lang-toggle {
  display: inline-flex;
  border: 1.5px solid var(--grape-400);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 700;
}
.lang-toggle a {
  padding: 0.4em 0.75em;
  text-decoration: none;
  color: var(--grape-600);
}
.lang-toggle a[aria-current="true"] {
  background: var(--grape-600);
  color: #fff;
}

.nav-toggle {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* Narrow-phone overrides for the header — placed here, after every base
   rule they touch (.brand, .header-social, .lang-toggle), so they
   actually win the cascade. An earlier version of these same rules sat
   above .header-social/.lang-toggle in the file and silently lost to
   them at equal specificity — this is the fix for that. The brand lockup
   grew (icon + two stacked text lines) once the slogan moved inside it,
   and on narrow phones that left too little room for the Instagram/
   PT-EN/menu cluster — confirmed overflowing at 320–375px widths
   (older/smaller phones), not just tight. */
@media (max-width: 420px) {
  .site-header__bar { padding: 0.75rem 0.75rem; gap: 0.4rem; }
  .header-actions { gap: 0.35rem; }
  .brand { padding-right: 0.75rem; gap: 0.5rem; }
}
@media (max-width: 400px) {
  /* Slogan stays on one line, shrunk down — dropping it read as an
     inconsistency (every other page/surface keeps the tagline in the
     brand lockup), and once the header's own Instagram icon goes
     (redundant with the nav menu's), there's just enough room even at
     320px: measured 111px natural width for the slogan text against a
     126px budget before it'd touch the PT/EN toggle. */
  .brand__slogan { font-size: 0.48rem; letter-spacing: 0.02em; white-space: nowrap; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 0.85rem; }
  /* The header's own Instagram button is redundant with the Instagram
     link already in the nav menu — on the narrowest phones (~320–360px)
     the full Instagram + PT/EN + menu cluster doesn't fit next to the
     brand pill even with the slogan gone, so this is the one that goes. */
  .header-social { display: none; }
  .lang-toggle a { padding: 0.4em 0.55em; }
}

.site-nav {
  display: none;
  flex-direction: column;
  background: var(--beige-100);
  border-top: 1px solid var(--line);
}
.site-nav.is-open { display: flex; }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.site-nav__list a {
  display: block;
  padding: 0.65em 0.25em;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.site-nav__list a[aria-current="page"] { color: var(--grape-600); }

/* Dropdown "Fases da vida" via <details>/<summary> (funciona sem JS) */
.site-nav__list details.nav-dropdown { position: relative; }
.site-nav__list details.nav-dropdown summary {
  cursor: pointer;
  padding: 0.65em 0.25em;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  color: var(--ink);
}
.site-nav__list details.nav-dropdown summary::-webkit-details-marker { display: none; }
.site-nav__list details.nav-dropdown summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.site-nav__list details[open].nav-dropdown summary::after { transform: rotate(-135deg); }
.nav-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem 0.75rem;
  display: grid;
  gap: 0.15rem;
}
.nav-dropdown__list a { border-bottom: none !important; padding: 0.5em 0.25em; font-weight: 500; }

/* A partir daqui a navegação vira uma linha só (sem o menu hambúrguer),
   em duas etapas: tablet (768px+) primeiro, com tudo mais compacto —
   "Início Fases da vida Receitas Marcas Blog Interativo Sobre Newsletter"
   não cabe numa linha de ~768px com a respiração confortável do desktop
   (testado: ainda quebrava linha mesmo espremendo o espaçamento ao
   limite). O link "Instagram" do menu é removido aqui porque é
   redundante — o ícone da própria barra já cobre o mesmo link sempre
   que a navegação em linha aparece, então cortá-lo abre a folga que
   faltava. Acima de 1024px (tablet paisagem/desktop de verdade, onde
   sobra espaço de sobra) a respiração volta ao normal. */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    background: transparent;
    border-top: none;
  }
  .site-nav__list {
    flex-direction: row;
    padding: 0;
    gap: 0.15rem;
    font-size: 0.92em;
  }
  .site-nav__list > li:last-child { display: none; }
  .site-nav__list a { border-bottom: none; border-radius: 999px; padding: 0.5em 0.65em; }
  .site-nav__list a:hover { background: var(--grape-100); }
  .site-header__bar { flex-wrap: nowrap; }

  .site-nav__list details.nav-dropdown summary {
    border-bottom: none;
    border-radius: 999px;
    padding: 0.5em 0.65em;
  }
  .site-nav__list details.nav-dropdown summary:hover { background: var(--grape-100); }
  .nav-dropdown__list {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
    min-width: 210px;
    margin-top: 0.4rem;
    z-index: 50;
  }
  .nav-dropdown__list a { padding: 0.55em 0.7em; border-radius: var(--radius-sm); }
  .nav-dropdown__list a:hover { background: var(--grape-100); }
}

/* Desktop de verdade: sobra espaço, então a navegação respira como antes
   (o aperto de 768-1023px era só para caber no tablet). */
@media (min-width: 1024px) {
  .site-nav__list { gap: 0.35rem; font-size: 1em; }
  .site-nav__list a { padding: 0.5em 0.9em; }
  .site-nav__list details.nav-dropdown summary { padding: 0.5em 0.9em; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.98rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--grape-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--wine-900); color: #fff; }
.btn-secondary { background: #fff; color: var(--grape-600); border-color: var(--grape-400); }
.btn-secondary:hover { color: var(--wine-900); border-color: var(--wine-900); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-whatsapp { background: #25D366; color: #073B14; }
.btn-whatsapp:hover { background: #1DA851; color: #073B14; }
.btn-block { width: 100%; }

/* ---------- Aviso fixo (informativo, não substitui profissional) ---------- */
.top-disclaimer {
  background: var(--beige-100);
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 0.55rem 0;
}
.top-disclaimer .container {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.top-disclaimer svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--grape-600); margin-top: 0.1em; }
.top-disclaimer a { font-weight: 700; color: var(--grape-700); }
.top-disclaimer p { margin: 0; }

/* ---------- Hero ---------- */
.hero {
  padding: 2.5rem 0 3rem;
  background-color: var(--beige-50);
  background-image:
    radial-gradient(circle at 85% 0%, var(--grape-100) 0%, transparent 55%),
    var(--bg-vine), var(--bg-grain);
  background-repeat: no-repeat, repeat, repeat;
  background-size: auto, 460px 460px, auto;
}
.hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.hero__art { justify-self: center; width: min(320px, 80%); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .hero__art { justify-self: end; width: 100%; }
}

.hero__photo {
  justify-self: center;
  width: min(420px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
@media (min-width: 900px) {
  .hero__photo { justify-self: end; width: 100%; aspect-ratio: 5 / 4; }
}

/* ---------- Cards de fases da vida ---------- */
.phase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 620px) { .phase-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .phase-grid { grid-template-columns: repeat(5, 1fr); } }

.phase-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.phase-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.phase-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grape-100); }
.phase-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phase-card__body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.phase-card__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grape-100);
  border-radius: 50%;
  color: var(--grape-700);
}
.phase-card__icon svg { width: 18px; height: 18px; }
.phase-card h3 { margin: 0.3em 0 0.1em; font-size: 1.1rem; }
.phase-card p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.phase-card__tag {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--grape-600);
}
.badge-soon {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--beige-100);
  color: var(--ink-soft);
  padding: 0.2em 0.6em;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ---------- Faixa "pessoas de verdade" (foto + texto) ---------- */
.people-band {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.people-band__media { aspect-ratio: 16 / 10; overflow: hidden; }
.people-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.people-band__body { padding: 0 1.4rem 1.4rem; }
@media (min-width: 780px) {
  .people-band { grid-template-columns: 1fr 1fr; }
  .people-band__media { aspect-ratio: auto; height: 100%; }
  .people-band__body { padding: 1.6rem 1.8rem 1.6rem 0; }
}

/* ---------- Faixa promocional do jogo ---------- */
.game-promo {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: var(--grape-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 1.75rem;
}
.game-promo__body p.eyebrow { color: var(--grape-600); }
.game-promo__body h2 { margin: 0.25rem 0 0.5rem; }
.game-promo__media { border-radius: var(--radius-md); overflow: hidden; }
.game-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 780px) {
  .game-promo { grid-template-columns: 1.1fr 0.9fr; padding: 2.25rem; }
  .game-promo__media { order: 2; aspect-ratio: 4 / 3; }
  .game-promo__body { order: 1; }
}

/* ---------- Roleta de receitas ---------- */
.roulette { text-align: center; }
.roulette__result {
  max-width: 420px;
  margin: 1.25rem auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.roulette__media {
  margin: -1.25rem -1.25rem 1rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.roulette__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roulette__media.is-spinning img { animation: roulette-flicker 0.12s steps(1) infinite; }
@keyframes roulette-flicker { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .roulette__media.is-spinning img { animation: none; }
}

/* ---------- Cartão genérico ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__media {
  margin: -1.5rem -1.5rem 1.25rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Curiosidade do dia ---------- */
.fact-card {
  background: linear-gradient(160deg, var(--wine-900), var(--grape-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}
.fact-card::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
}
.fact-card__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--beige-100);
  margin-bottom: 0.6em;
}
.fact-card p#fact-text { font-size: 1.15rem; font-family: var(--font-heading); min-height: 3.6em; transition: opacity 0.18s ease; }
.fact-card__source { font-size: 0.8rem; color: var(--grape-100); opacity: 0.85; transition: opacity 0.18s ease; }
.fact-card__controls { margin-top: 1.1rem; display: flex; align-items: center; gap: 0.6rem; }
.fact-btn[aria-pressed="true"] { background: rgba(255,255,255,0.35); }
.fact-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}
.fact-btn:hover { background: rgba(255,255,255,0.28); }
.fact-btn:active { transform: scale(0.96); }
/* Prev/next are icon-only circular buttons so the row never wraps awkwardly
   on narrow screens; "Pausar/Continuar" keeps its text pill in the middle. */
.fact-btn--icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fact-btn--icon svg { width: 1.1rem; height: 1.1rem; }
.fact-btn--pause { flex: 0 1 auto; }

/* ---------- Quiz ---------- */
.quiz {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.quiz__step { display: none; }
.quiz__step.is-active { display: block; }
.quiz__options {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}
.quiz__option {
  text-align: left;
  background: var(--beige-50);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85em 1em;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.quiz__option:hover { border-color: var(--grape-500); background: var(--grape-50); }
.quiz__option.is-selected { border-color: var(--grape-600); background: var(--grape-100); }
.quiz__option--skip { font-weight: 500; color: var(--ink-soft); border-style: dashed; background: transparent; }
.quiz__option--skip:hover { border-color: var(--ink-soft); background: var(--beige-50); }
.quiz__hint { font-size: 0.82rem; color: var(--ink-soft); margin: -0.4em 0 0; }

/* Multi-select steps get a checkbox indicator instead of relying on auto-advance */
.quiz__step[data-multi="true"] .quiz__option { position: relative; padding-left: 2.9em; }
.quiz__step[data-multi="true"] .quiz__option::before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: #fff;
  box-sizing: border-box;
}
.quiz__step[data-multi="true"] .quiz__option.is-selected::before {
  background: var(--grape-600);
  border-color: var(--grape-600);
}
.quiz__step[data-multi="true"] .quiz__option.is-selected::after {
  content: "";
  position: absolute;
  left: 1.42em;
  top: 44%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-55%) rotate(45deg);
}
.quiz__next { margin-top: 0.25rem; }
.quiz__progress {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grape-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quiz__result {
  background: var(--grape-50);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 1rem;
}
.quiz__result strong { color: var(--wine-900); }
.quiz__result .quiz__list { margin: 0 0 1em; padding-left: 1.25em; }
.quiz__result .quiz__list li { margin-bottom: 0.35em; }
.quiz__result .quiz__subhead { margin-bottom: 0.5em; }
.quiz__disclaimer { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.75rem; }
.quiz__share { margin-top: 1rem; }
.quiz__share-label { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 0.5rem; }
.quiz__share-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quiz__share-btn { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.85rem; padding: 0.55em 0.9em; }
.quiz__share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Game (quiz completo) ---------- */
.game {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.game__intro { text-align: center; }
.game__intro h2 { margin-top: 0; }
.game__intro .lede { margin: 0.5rem 0 1.5rem; }

.game__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.game__progress {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--grape-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.game__score { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.game__bar {
  height: 8px;
  background: var(--grape-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.game__bar-fill {
  height: 100%;
  background: var(--grape-600);
  border-radius: 999px;
  width: 0%;
  transition: width 0.3s ease;
}
.game__question { margin: 0 0 1rem; font-size: 1.15rem; }
.game__options { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.game__option {
  text-align: left;
  background: var(--beige-50);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85em 1em;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.game__option:hover { border-color: var(--grape-500); background: var(--grape-50); }
.game__option:disabled { cursor: default; }
.game__option.is-correct { border-color: #2E7D32; background: #EAF6EA; color: #1B5E20; }
.game__option.is-wrong { border-color: #C62828; background: #FBEAEA; color: #8E1717; }
.game__option.is-muted { opacity: 0.55; }

.game__feedback {
  background: var(--grape-50);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
.game__feedback-verdict { margin: 0 0 0.35em; font-weight: 700; color: var(--wine-900); }
.game__feedback-explain { margin: 0 0 0.9em; color: var(--ink-soft); font-size: 0.95rem; }

.game__result { text-align: center; }
.game__result h2 { margin-top: 0; }
.game__result-score {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--grape-600);
  margin: 0.25rem 0;
}
.game__share { margin-top: 1.25rem; text-align: left; }

/* ---------- Favoritos: votação (reaproveita .game__option) ----------
   Virou grid de colunas (era 1 coluna só, 19 botões largos empilhados —
   confuso e comprido demais). auto-fill com minmax deixa 1 col no
   celular, ~2-3 no tablet/desktop, sem precisar de breakpoint manual pro
   tanto de nomes de marca com tamanhos bem diferentes. */
.ranking-options {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ranking-options:last-child { margin-bottom: 0; }
.ranking-options[hidden] { display: none; }
.ranking-option-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; position: relative; z-index: 1; }
.ranking-option-count { font-weight: 400; font-size: 0.82em; color: var(--ink-soft); white-space: nowrap; }
.game__option.is-voted { border-color: var(--grape-500); background: var(--grape-50); }

/* Barra de resultado embutida no próprio botão (em vez de uma linha
   fininha embaixo do texto, quase invisível) — preenche da esquerda pra
   direita conforme a % de votos, tipo enquete do Twitter/Slido. */
.ranking-options .game__option {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ranking-option-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--grape-100);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.game__option.is-voted .ranking-option-fill { background: var(--grape-400); opacity: 0.35; }

.ranking-leader-badge {
  display: inline-block;
  font-size: 0.78em;
  margin-left: 0.35em;
}

/* "Ver todas as N opções" — expande a lista truncada */
.ranking-toggle {
  background: none; border: none; padding: 0.3em 0;
  color: var(--grape-600); font-weight: 700; font-size: 0.92rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
}
.ranking-toggle:hover { color: var(--grape-500); }

/* ---------- Favoritos: destaques + rankings por período ---------- */
.destaque-card__leader { font-size: 1.35rem; font-weight: 700; color: var(--wine-900); margin: 0.2em 0 0.1em; font-family: var(--font-heading); }
.destaque-card__meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* Card de destaque clicável -- leva direto pra lista de votação da
   categoria (marca ou tipo), não só pro topo genérico da seção. */
a.card.destaque-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
a.card.destaque-card-link:hover {
  border-color: var(--grape-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 8px 20px rgba(59,18,51,0.08));
}
.destaque-card__cta { font-size: 0.85rem; font-weight: 700; color: var(--grape-600); margin: 0.6em 0 0; }
a.card.destaque-card-link:hover .destaque-card__cta { color: var(--grape-500); }

.period-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.period-tab {
  background: var(--beige-50); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.5em 1.1em; font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer;
}
.period-tab:hover { border-color: var(--grape-500); color: var(--grape-600); }
.period-tab[aria-selected="true"] { background: var(--wine-900); border-color: var(--wine-900); color: var(--cream); }

.podium-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .podium-grid { grid-template-columns: 1fr 1fr; } }
.podium-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.podium-row { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.7em; border-radius: var(--radius-md); background: var(--beige-50); }
.podium-row__medal { font-size: 1.1rem; flex: none; width: 1.4em; text-align: center; }
.podium-row__name { flex: 1; font-weight: 600; }
.podium-row__count { font-size: 0.82em; color: var(--ink-soft); white-space: nowrap; }
.podium-empty { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- "Continue explorando" (sugestão cíclica de interativo no fim
   das páginas de fase da vida -- ideia do usuário pra criar hábito de
   retenção: cada visita mostra um interativo diferente do anterior) ---------- */
.next-interactive-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.next-interactive-card:hover {
  border-color: var(--grape-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Mesmo tratamento dos ícones dos teaser-card da Home (círculo com
   gradiente uva/vinho + linha branca) -- antes usava emoji solto, que
   destoava do resto do site (nenhum outro lugar usa emoji como ícone
   de interativo). */
.next-interactive-card__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grape-500), var(--wine-900));
  display: inline-flex; align-items: center; justify-content: center;
}
.next-interactive-card__icon svg { width: 55%; height: 55%; color: rgba(255,255,255,0.9); }
.next-interactive-card__body { flex: 1; min-width: 0; }
.next-interactive-card__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grape-600);
  margin-bottom: 0.15em;
}
.next-interactive-card__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wine-900);
  margin-bottom: 0.2em;
}
.next-interactive-card__desc { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.next-interactive-card__cta {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--grape-600);
  white-space: nowrap;
}
.next-interactive-card:hover .next-interactive-card__cta { color: var(--grape-500); }
@media (max-width: 560px) {
  /* linha vira coluna -- em telas estreitas, ícone+corpo+CTA espremidos
     numa linha só sobravam ~150px pro título, quebrando palavra por
     palavra e empurrando o ícone pro meio do texto. */
  .next-interactive-card { flex-direction: column; align-items: flex-start; }
  .next-interactive-card__cta { margin-top: 0.2em; white-space: normal; }
}

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--beige-100);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
}
.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-weight: 700; font-size: 0.9rem; }
.field input[type="text"],
.field input[type="email"],
.field textarea {
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  font-size: 1rem;
  background: #fff;
  font-family: inherit;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--grape-500); }

/* ---------- Botão de seguir no Instagram (rodapé) ---------- */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1rem;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.footer-social:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); color: #fff; }
.footer-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.consent {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.consent input { margin-top: 0.25em; }
.lgpd-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75em 1em;
  margin-top: 0.75rem;
}
.form-success {
  display: none;
  background: #fff;
  border: 1.5px solid var(--green-600);
  color: var(--green-600);
  border-radius: var(--radius-sm);
  padding: 0.9em 1em;
  font-weight: 700;
  margin-top: 0.75rem;
}
.form-success.is-visible { display: block; }

.form-error {
  display: none;
  background: #fff;
  border: 1.5px solid var(--red-600);
  color: var(--red-600);
  border-radius: var(--radius-sm);
  padding: 0.9em 1em;
  font-weight: 700;
  margin-top: 0.75rem;
}
.form-error a { color: var(--red-600); }
.form-error.is-visible { display: block; }

/* ---------- Conteúdo de artigo (fases da vida) ---------- */
.article-hero {
  background-color: var(--beige-50);
  background-image:
    radial-gradient(circle at 88% 10%, var(--grape-100) 0%, transparent 55%),
    var(--bg-vine), var(--bg-grain);
  background-repeat: no-repeat, repeat, repeat;
  background-size: auto, 460px 460px, auto;
  padding: 2rem 0 2.5rem;
}
.article-hero__grid {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
.article-hero__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 11;
}
.article-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) {
  .article-hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}
.article-hero .eyebrow { color: var(--grape-600); }
.article-hero h1 { color: var(--wine-900); }
.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}
.breadcrumb a { color: var(--grape-600); }
.article-hero p.lede { color: var(--ink-soft); }

.article-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.article-nav a {
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--grape-700);
  padding: 0.5em 1em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.article-nav a:hover { border-color: var(--grape-500); }

.content-block { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.content-block:last-of-type { border-bottom: none; }

/* ---------- Grade genérica de cards (várias colunas em telas largas em
   vez de 1 item por linha ocupando a largura toda) — mesmo padrão de 2
   colunas do .podium-grid em favoritos.html, reaproveitado em qualquer
   lista de itens parecidos entre si (receitas, marcas, etc.) ---------- */
.cards-grid {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
.cards-grid { align-items: start; }
.cards-grid .content-block { padding: 0; border-bottom: none; }
.content-block h2 { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.content-block h2 .icon-badge {
  width: 36px; height: 36px;
  background: var(--grape-100);
  color: var(--grape-700);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.content-block h2 .icon-badge svg { width: 20px; height: 20px; }

/* ---------- Recipe cards: accordion (foto + título fecham; clica pra
   abrir ingredientes/modo de preparo/fonte) — mantém a página escaneável
   em vez de mostrar a receita inteira de cara em cada card. ---------- */
.recipe-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.recipe-card__summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.recipe-card__summary::-webkit-details-marker,
.recipe-card__summary::marker { display: none; content: ""; }
.recipe-card__summary:hover { background: var(--beige-50); }
.recipe-card__summary:focus-visible { outline: 2px solid var(--grape-500); outline-offset: -2px; }
.recipe-card__thumb {
  width: 96px; height: auto; aspect-ratio: 900 / 506;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.recipe-card__summary-text {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wine-900);
  font-size: 1.02rem;
  line-height: 1.32;
}
.recipe-card__summary-text .icon-badge {
  width: 32px; height: 32px;
  background: var(--grape-100);
  color: var(--grape-700);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.recipe-card__summary-text .icon-badge svg { width: 18px; height: 18px; }
.recipe-card__chevron {
  width: 20px; height: 20px;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.recipe-card[open] .recipe-card__chevron { transform: rotate(180deg); }
.recipe-card__body {
  padding: 0 1.1rem 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.benefit-list { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.benefit-list li {
  display: flex;
  gap: 0.75em;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9em 1em;
}
.benefit-list li svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--green-600); margin-top: 0.15em; }

.callout {
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--line);
  background: var(--beige-50);
  margin: 1rem 0;
}
.callout--warning { border-color: #E7C9A9; background: #FDF3E7; }
.callout--warning strong { color: var(--red-600); }
.callout h4 { margin-bottom: 0.4em; font-size: 1rem; color: var(--wine-900); }

.myths { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .myths { grid-template-columns: 1fr 1fr; } }
.myth {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.myth__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  margin-bottom: 0.5em;
}
.myth--mito .myth__tag { background: #FBE0E0; color: var(--red-600); }
.myth--verdade .myth__tag { background: #E1F0E4; color: var(--green-600); }

.cite {
  font-size: 0.72em;
  vertical-align: super;
  color: var(--grape-600);
  text-decoration: none;
  font-weight: 700;
  margin-left: 0.1em;
}
.cite:hover { text-decoration: underline; }

.report-issue {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  padding-left: 1.6em;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
  position: relative;
}
/* Note: intentionally not display:flex — the icon + wrapped text + a link are
   mixed inline content (element + bare text nodes), and flex would turn each
   text node into its own anonymous flex item, splitting the sentence into
   separate wrapping columns instead of one flowing paragraph. Positioning the
   icon absolutely keeps it pinned top-left while the text wraps normally. */
.report-issue svg { position: absolute; left: 0; top: 1.2rem; width: 15px; height: 15px; color: var(--ink-soft); }
.report-issue a { font-weight: 700; }

/* ---------- Receitas da comunidade / Community recipes ---------- */
.community-recipes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 720px) { .community-recipes { grid-template-columns: 1fr 1fr; } }
.community-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.community-card__media { aspect-ratio: 1 / 1; overflow: hidden; }
.community-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.community-card__body { padding: 1rem 1.25rem 1.25rem; }
.community-card__author { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--wine-900); margin: 0; }
.community-card__handle { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.5em; }
.community-card__text { font-size: 0.92rem; color: var(--ink); margin: 0; }

.community-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  background: var(--beige-50);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  margin-top: 1.5rem;
}
.community-empty p { max-width: 42ch; margin: 0; }

.community-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 480px;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.community-form__row { display: flex; flex-direction: column; gap: 0.35rem; }
.community-form__row label { font-weight: 700; font-size: 0.9rem; }
.community-form__optional { font-weight: 400; color: var(--ink-soft); }
.community-form__row input[type="text"],
.community-form__row textarea {
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  font-size: 1rem;
  background: #fff;
  font-family: inherit;
  resize: vertical;
}
.community-form__row input[type="file"] {
  font-size: 0.92rem;
  font-family: inherit;
}
.community-form__row input:focus, .community-form__row textarea:focus { border-color: var(--grape-500); outline: none; }
.community-form button[type="submit"] { align-self: flex-start; cursor: pointer; }
.community-form__hint { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.community-form__success, .community-form__error {
  display: none;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  padding: 0.9em 1.1em;
  margin: 0;
}
.community-form__success { background: rgba(61,122,78,0.1); color: #2C5B39; border: 1px solid rgba(61,122,78,0.28); }
.community-form__error { background: rgba(176,52,52,0.08); color: var(--red-600); border: 1px solid rgba(176,52,52,0.25); }
.community-form.is-success .community-form__row,
.community-form.is-success button[type="submit"],
.community-form.is-success .community-form__hint { display: none; }
.community-form.is-success .community-form__success { display: block; }
.community-form.is-error .community-form__error { display: block; }

/* ---------- E-book (lead magnet) — card de captura com double opt-in.
   Migrado da página Em Breve pro site principal: o form posta pra
   /.netlify/functions/subscribe (Supabase + Resend). ---------- */
.ebook-cta {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: linear-gradient(150deg, var(--wine-900), var(--grape-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin: 1.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 760px) { .ebook-cta { grid-template-columns: 1.2fr 1fr; padding: 2rem 2.25rem; } }
.ebook-cta::after {
  content: "";
  position: absolute;
  right: -50px; bottom: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  pointer-events: none;
}
.ebook-cta__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E3A9D4;
  margin: 0 0 0.5em;
}
.ebook-cta h2, .ebook-cta h3 {
  color: #fff;
  font-size: 1.45rem;
  margin: 0 0 0.5em;
  line-height: 1.25;
}
.ebook-cta p { color: #E3C9DA; font-size: 0.95rem; margin: 0; }
.ebook-cta__form { display: flex; flex-direction: column; gap: 0.6rem; position: relative; }
.ebook-cta__form input[type="email"] {
  font: inherit;
  padding: 0.85em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  width: 100%;
}
.ebook-cta__form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.ebook-cta__form input[type="email"]:focus { outline: none; border-color: var(--gold, #C08A2E); background: rgba(255,255,255,0.14); }
.ebook-cta__form button {
  font: inherit;
  font-weight: 700;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  border: none;
  background: #C08A2E;
  color: var(--wine-900);
  cursor: pointer;
}
.ebook-cta__form button:hover { background: #D19A3E; }
.ebook-cta__form button:disabled { opacity: 0.6; cursor: wait; }
.ebook-cta__hint { font-size: 0.78rem !important; color: rgba(255,255,255,0.55) !important; }
.ebook-cta__success, .ebook-cta__error {
  display: none;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  padding: 0.9em 1.1em;
  margin: 0;
}
.ebook-cta__success { background: rgba(138,168,118,0.25); color: #DFF0D5; border: 1px solid rgba(138,168,118,0.5); }
.ebook-cta__error { background: rgba(255,120,120,0.15); color: #FFD9D9; border: 1px solid rgba(255,120,120,0.35); }
.ebook-cta.is-success .ebook-cta__form input,
.ebook-cta.is-success .ebook-cta__form button,
.ebook-cta.is-success .ebook-cta__hint { display: none; }
.ebook-cta.is-success .ebook-cta__success { display: block; }
.ebook-cta.is-error .ebook-cta__error { display: block; }

.updated-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.5em;
}

.sources { font-size: 0.88rem; color: var(--ink-soft); }
.sources ol { padding-left: 1.1em; }
.sources li { margin-bottom: 0.4em; }

.disclaimer-box {
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--beige-100);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}

/* ---------- Compartilhar ---------- */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
}
.share-bar__label { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-right: 0.25rem; }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover { border-color: var(--grape-500); color: var(--grape-600); }
.share-btn--whatsapp { background: #25D366; border-color: #25D366; color: #073B14; }
.share-btn--whatsapp:hover { background: #1DA851; color: #073B14; }
/* Feedback visual do botão "copiar link" quando ele não tem texto (só
   ícone) -- sem isso a cópia funciona mas ninguém enxerga que funcionou. */
.share-btn.is-copied { background: #E1F0E4; border-color: var(--green-600); color: var(--green-600); }

/* Versão compacta -- usada nos botões de compartilhar por seção (Proteste,
   ranking por período) em vez do .share-bar cheio do topo da página, pra
   não repetir o mesmo elemento grande 3x na mesma tela. */
.share-bar--sm { margin: 0.75rem 0 1.25rem; gap: 0.4rem; }
.share-bar--sm .share-bar__label { font-size: 0.8rem; }
.share-bar--sm .share-btn { width: 32px; height: 32px; }
.share-bar--sm .share-btn svg { width: 15px; height: 15px; }

/* ---------- Grid genérico de conteúdo (blog/receitas) ---------- */
.content-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .content-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .content-grid { grid-template-columns: repeat(3, 1fr); } }

.teaser-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.teaser-card__media {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--grape-500), var(--wine-900));
  display: flex; align-items: center; justify-content: center;
}
.teaser-card__media svg { width: 40%; color: rgba(255,255,255,0.85); }
.teaser-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.teaser-card__eyebrow { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grape-600); }
.teaser-card h3 { font-size: 1.05rem; margin-bottom: 0.1em; }
.teaser-card p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* ---------- Página "em breve" ---------- */
.coming-soon {
  text-align: center;
  padding: 3rem 1rem;
}
.coming-soon .icon-wrap {
  width: 84px; height: 84px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--grape-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--grape-700);
}
.coming-soon .icon-wrap svg { width: 40px; height: 40px; }

/* ---------- Uvita (mascote) ---------- */
.uvita { display: inline-block; line-height: 0; flex-shrink: 0; }
.uvita--xs { width: 28px; height: 31px; }
.uvita--sm { width: 44px; height: 48px; }
.uvita--md { width: 64px; height: 70px; }
.uvita--lg { width: 96px; height: 106px; }
/* No desktop sobra muito espaço em volta -- o tamanho mobile (pensado pra
   caber ao lado de texto numa tela estreita) fica minúsculo perdido no
   meio da página. Cresce ~40% a partir de 700px, mesma proporção
   largura/altura. */
@media (min-width: 700px) {
  .uvita--md { width: 88px; height: 96px; }
  .uvita--lg { width: 132px; height: 146px; }
}

/* "Você sabia?" — Uvita curioso ao lado da citação, segurando a lupa */
.fact-card { position: relative; }
.fact-card__uvita { position: absolute; top: -14px; right: -10px; }

/* Resultado de quiz — Uvita feliz acompanhando a recomendação */
.quiz__uvita { display: flex; justify-content: center; margin-bottom: 0.5rem; }

/* Mitos e verdades — Uvita surpreso ao lado do título da seção. flex-wrap
   deixa a Uvita (uvita--lg, 96px) cair pra linha de baixo em telas
   estreitas em vez de espremer o h2 (que também é flex, ícone+texto) até
   ele quebrar sozinho no meio — testado em 375px antes de subir. Em
   desktop/tablet não quebra, sobra espaço de sobra. */
.myths-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.myths-head h2 { margin: 0; }

/* Rodapé — a MESMA pílula da marca do header (ícone + nome + slogan,
   .brand/.brand__mark/.brand__text intactos, reaproveitados tal qual),
   em vez de um tratamento à parte só para o rodapé. A pílula já é
   autocontida (fundo grape-100 próprio, texto escuro) então funciona
   sem ajuste nenhum sobre o fundo wine-900 do rodapé — resolve de
   quebra o problema de contraste do ícone (mesmo wine-900 do fundo)
   sem precisar de nenhum remendo extra. */
.footer-brand-row { display: flex; margin-bottom: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--wine-900);
  color: var(--beige-100);
  padding: 2.5rem 0 1.5rem;
  margin-top: 2rem;
}
.site-footer a { color: #fff; }
.footer-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-col h4 {
  color: var(--grape-100);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5em; }
.footer-col ul a { text-decoration: none; opacity: 0.9; font-size: 0.92rem; }
.footer-col ul a:hover { opacity: 1; text-decoration: underline; }
.footer-disclaimer {
  font-size: 0.8rem;
  opacity: 0.75;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2rem;
  padding-top: 1.25rem;
  line-height: 1.6;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 1rem;
}

/* ---------- Visually hidden (a11y) ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}