/* ==========================================================================
   SABOREARE MARMITARIA — style.css (blog claro)
   --------------------------------------------------------------------------
   Base herdada das geleias (tokens vinho/creme/dourado, Great Vibes +
   Fraunces + Work Sans), com TEMA CLARO para leitura de blog e seções
   próprias do blog tradicional (cabeçalho, cards, sidebar, artigo).

   ORGANIZAÇÃO:
   1. Fonte da marca (@font-face) + tokens  2. Base/reset  3. Moldura
   4. Logo  5. Copy  6. Form/captura  7. Footer  8. Animações
   9. Blog tradicional  10. Tema claro  11. Pacote topo  12. Pacote receita
   ========================================================================== */

/* Fonte da marca HOSPEDADA AQUI (assets/fonts/): o "Saboreare" não depende
   mais do Google Fonts. Se a rede bloquear fontes externas, o logo continua.
   Nome próprio "Saboreare Script" para não conflitar com a webfont. */
@font-face {
  font-family: "Saboreare Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/great-vibes-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. TOKENS — paleta da marca (vinho + creme + dourado + terracota).
   Só entra aqui o que tem var(--x) referenciado no arquivo.
   -------------------------------------------------------------------------- */
:root {
  /* Vinho (cabeçalho, títulos, botões) + creme (textos sobre vinho) */
  --bg: #7b2d3a;
  --bg-top: #8e3650;      /* luz do gradiente do cabeçalho */
  --bg-bottom: #4e1420;   /* sombra do gradiente + fundo de fallback */

  /* Tinta/texto */
  --ink: #fdfbf7;         /* creme quase branco */
  --muted: #ead9c2;       /* creme escurecido p/ secundários no vinho */

  /* Detalhes de marca */
  --olive-dim: #4e5a34;   /* seleção de texto */
  --gold: #d4a537;        /* divisor, filetes, CTA newsletter */
  --peach: #e8a87c;       /* destaques itálicos + foco */
  --cta: #c66b3d;         /* botão principal */

  --line: rgba(255, 255, 255, 0.22); /* bordas sutis sobre vinho */
}

/* --------------------------------------------------------------------------
   2. BASE / RESET — mesmo comportamento nos dois originais, unificado.
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* remove flash azul no mobile */
}

::selection {
  background: var(--olive-dim);
  color: var(--ink);
}

/* Classe utilitária de acessibilidade (vinda do index_7):
   esconde visualmente mas mantém para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

html {
  background: var(--bg-bottom); /* evita "flash" branco ao rolar */
}

body {
  /* Gradiente radial = truque do index_7, tingido de vinho do index.html */
  background: radial-gradient(110% 80% at 50% 10%, var(--bg-top) 0%, var(--bg) 48%, var(--bg-bottom) 100%);
  color: var(--ink);
  font-family: "Work Sans", system-ui, sans-serif; /* corpo editorial do index_7 */
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* safe-area: herança do index_7 para iPhone com notch */
  padding:
    max(6vh, env(safe-area-inset-top))
    max(7vw, env(safe-area-inset-right))
    max(6vh, env(safe-area-inset-bottom))
    max(7vw, env(safe-area-inset-left));
  overflow-x: hidden;
}

/* Foco visível de teclado — cor pêssego do index.html, espessura do index_7 */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 2px;
}

/* Links sobre vinho: nunca azul padrão. Pêssego no texto, creme discreto
   no rodapé/privacidade — com sublinhado sutil e hover.
   Inclui :link de propósito: sem ele, o User Agent impõe o azul visitado. */
a,
a:link {
  color: var(--peach);
  text-underline-offset: 3px;
}
a:visited {
  color: var(--peach);
}
a:hover {
  filter: brightness(1.1);
}
footer a,
footer a:link,
.privacy-note a,
.privacy-note a:link {
  color: var(--muted);
  text-decoration-color: rgba(234, 217, 194, 0.6);
}
footer a:visited,
.privacy-note a:visited {
  color: var(--muted);
}
footer a:hover,
.privacy-note a:hover {
  color: var(--peach);
  text-decoration-color: var(--peach);
}

/* --------------------------------------------------------------------------
   3. MOLDURA (frame) — trazida do index_7.html.
   Cria a sensação "rótulo premium" sem pesar no layout.
   -------------------------------------------------------------------------- */
.frame {
  position: fixed;
  inset:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  border: 1px solid var(--line);
  pointer-events: none; /* nunca bloqueia clique no form */
}

/* Palco central — coluna estreita (520–560px) como nos dois originais */
.stage {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. LOGO — escrita original do index.html (Great Vibes, sem folha).
   A folha em SVG foi removida: destoava do fundo vinho quente.
   - .wordmark: caligrafia grande, hierarquia máxima da página.
   - .eyebrow: categoria em caixa alta espaçada, herdada do original.
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: "Saboreare Script", "Great Vibes", "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  font-weight: 400;
  font-size: clamp(64px, 14vw, 104px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--ink);
  opacity: 0;
  animation: rise 0.9s ease-out 0.1s forwards;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-top: -4px; /* slogan colado no logo (Great Vibes tem respiro interno) */
  opacity: 0;
  animation: rise 0.9s ease-out 0.25s forwards;
}

/* --------------------------------------------------------------------------
   5. DIVISOR DOURADO — trazido do index.html (era o elemento mais
   "artesanal" dele): dois traços + losango central.
   -------------------------------------------------------------------------- */
.divisor {
  margin: 2rem 0 0.6rem; /* mais respiro ao redor da separação (era 1.4rem/0) */
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: rise 0.8s ease-out 0.4s forwards;
}
.divisor::before,
.divisor::after {
  content: "";
  width: 56px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.divisor span {
  width: 10px;
  height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

/* --------------------------------------------------------------------------
   6. COPY — H1 do index.html (com itálico pêssego) + lede do index_7
   (storytelling de família). Delays encurtados: no index_7 o H1 só
   aparecia aos 2.3s; aqui tudo está visível até ~1.4s.
   -------------------------------------------------------------------------- */
h1 {
  font-family: "Fraunces", Georgia, serif; /* editorial do index_7 */
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.15;
  max-width: 18ch;
  text-wrap: balance; /* evita viúvas no título */
  margin-top: 1.1rem;
  opacity: 0;
  animation: rise 0.9s ease-out 0.5s forwards;
}
h1 em {
  color: var(--peach);
  font-style: italic;
}

.lede {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 44ch;
  margin: 1rem 0 0;
  opacity: 0;
  animation: rise 0.9s ease-out 0.6s forwards;
}

/* --------------------------------------------------------------------------
   8. FORM — corpo do index_7 (honeypot, estados) + "roupa" do index.html
   (input creme sólido + botão CTA sólido). É o ponto de maior conversão.
   -------------------------------------------------------------------------- */
form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-top: 1.5rem;
  opacity: 0;
  animation: rise 0.8s ease-out 0.8s forwards;
}

input[type="email"] {
  flex: 1;
  min-width: 0;
  background: var(--ink); /* creme sólido = contraste máximo (index.html) */
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: #2d2926;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  outline: none;
}
input[type="email"]::placeholder {
  color: #8a7f76;
}
input[type="email"]:focus {
  border-color: var(--gold);
}
/* Corrige o fundo amarelo do autocomplete no Chrome */
input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: #2d2926;
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
}

button {
  background: var(--cta);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  min-height: 52px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.15s;
}
button:hover {
  filter: brightness(1.08);
}
button:active {
  transform: scale(0.98);
}
button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Mensagens de status (validação JS + retorno da api/inscrever.php) */
.note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.9rem;
  min-height: 1.2em;
}
.note.show {
  color: var(--peach);
  font-weight: 500;
}
.privacy-note {
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0;
  margin-top: 0.4rem;
  animation: rise 0.8s ease-out 0.9s forwards;
}

/* Lista local deste aparelho: chips discretos com os e-mails já
   cadastrados aqui. Só memória do próprio navegador (localStorage),
   nunca a lista global — por isso é seguro mostrar. */
.meus-emails {
  max-width: 420px;
  width: 100%;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0;
  animation: rise 0.8s ease-out 0.9s forwards;
}
.meus-emails[hidden] {
  display: none;
}
.meus-emails-titulo {
  opacity: 0.85;
  margin-bottom: 0.35rem;
}
.meus-emails-lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.meus-emails-lista li {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink);
}

/* Consentimento LGPD: checkbox + texto lado a lado, abaixo do form.
   Mesma animação rise do form para entrar junto (0.85s). */
.consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 420px;
  margin-top: 0.7rem;
  cursor: pointer;
  opacity: 0;
  animation: rise 0.8s ease-out 0.85s forwards;
}
.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--cta); /* checkbox na cor do botão */
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. MARMITARIA — captura de e-mail do blog (mesma paleta da base).
   Cardápio, WhatsApp e depoimentos foram removidos: agora é blog puro.
   Fotos reais entram depois sem mexer aqui.
   -------------------------------------------------------------------------- */
.captura h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 0.8rem;
}
.captura {
  width: 100%;
  max-width: 460px;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: rise 0.9s ease-out 0.9s forwards;
}
/* Dentro da captura o form não anima sozinho (a seção já anima) */
.captura form,
.captura .consent,
.captura .privacy-note {
  animation: none;
  opacity: 1;
}

/* Blog de receitas: tipografia do artigo */
.artigo {
  text-align: left;
  max-width: 620px;
}
.artigo h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  margin: 1.4rem 0 0.5rem;
}
.artigo p,
.artigo li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted);
}
.artigo ul,
.artigo ol {
  padding-left: 1.2rem;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.artigo .meta-receita {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.9rem;
}
.artigo .meta-receita span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  color: var(--ink);
}
/* --------------------------------------------------------------------------
   9. FOOTER (base) — mantém o rodapé fixo da base em todas as páginas.
   -------------------------------------------------------------------------- */
footer {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 14px));
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0;
  animation: rise 0.8s ease-out 1s forwards;
}

/* --------------------------------------------------------------------------
   10. ANIMAÇÃO — subida suave (rise) para todos os blocos.
   A folha e o wordmark deslizante foram removidos, então só resta o rise.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Acessibilidade: respeita "reduzir movimento" do SO (do index_7) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* --------------------------------------------------------------------------
   12. BLOG TRADICIONAL (receitas/) — cabeçalho, 2 colunas, cards, sidebar.
   Mantém a identidade vinho; no mobile vira 1 coluna (sidebar embaixo).
   .foto são placeholders — troque por <img> quando as fotos chegarem.
   -------------------------------------------------------------------------- */
.blog-header {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
/* Marca raiz: IGUAL ao .wordmark original das geleias —
   Great Vibes grande em creme puro, sem sombra, sem pílula, sem enfeite.
   (O print da home prova: é assim que o Saboreare nasceu.) */
.blog-marca {
  font-family: "Saboreare Script", "Great Vibes", "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  font-weight: 400;
  /* delicado: presença sem gritar (era até 3.2rem) */
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 1px;
  color: #fdfbf7;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: none;
  /* flex p/ centralizar o "MARMITARIA" na altura óptica do script */
  display: inline-flex;
  align-items: center;
  /* a caligrafia tem haste alta: desce um fio para o S optically center */
  position: relative;
  top: 0.08em;
}
.blog-marca span {
  font-family: "Work Sans", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ead9c2;
  margin-left: 0.55rem;
  text-shadow: none;
}
/* Blindagem: :visited/:hover globais NÃO podem recolorir a marca.
   (a:visited tem especificidade maior que .classe sozinha — por isso o
   logo sumia depois de visitado e só aparecia no hover alaranjado.) */
a.blog-marca:link,
a.blog-marca:visited {
  color: #fdfbf7;
}
a.blog-marca:hover,
a.blog-marca:active {
  color: #fdfbf7;
}
.blog-menu {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-menu a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.blog-wrap {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: start;
  text-align: left;
}
.blog-coluna {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.blog-coluna .artigo {
  width: 100%;
}
.blog-titulo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.15;
  margin-top: 0.6rem;
}
.blog-titulo em {
  color: var(--peach);
  font-style: italic;
}

/* Fotos reais (assets/receitas/, Wikimedia Commons — ver crédito na legenda).
   Quando as fotos da Chef chegarem, é só trocar o src/alt, nada no CSS. */
.foto-real {
  margin: 1rem 0;
  width: 100%;
}
.foto-real img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #e9dcc8;
}
.foto-real figcaption {
  font-size: 0.75rem;
  color: #8a7f76;
  margin-top: 0.35rem;
  text-align: center;
}
/* Crédito minúsculo sob fotos sem legenda (ex: sidebar) */
.foto-credito {
  font-size: 0.72rem;
  color: #8a7f76;
  margin-top: 0.3rem;
  text-align: center;
}
/* Nos cards a foto tem altura fixa com corte (grade alinhada) */
.foto-real.foto-card {
  margin: 0;
}
.foto-real.foto-card img {
  height: 170px;
  object-fit: cover;
}
/* Retrato da Chef: sidebar e caixinha da autora */
img.foto-chef {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e9dcc8;
}
img.foto-chef-peq {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #e9dcc8;
}
/* Destaque + grade de cards */
.destaque {
  width: 100%;
  margin-top: 1.6rem;
  text-align: left;
}
.destaque h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.25;
  margin: 0.6rem 0 0.4rem;
}
.post-cat {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.8rem;
}
.post-resumo {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 0.4rem;
}
.post-meta {
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0.85;
  margin-top: 0.5rem;
}
.post-meta strong {
  color: var(--ink);
}
.leia-mais {
  display: inline-block;
  margin-top: 0.7rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.secao-titulo {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin: 2.2rem 0 1rem;
}
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  width: 100%;
  margin-bottom: 3rem;
}
.card {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 0.9rem;
  text-align: left;
}
.card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  margin-top: 0.6rem;
}
.card .post-cat {
  margin-top: 0.6rem;
}
/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 1.2rem;
}
.widget {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1.2rem;
}
.widget h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0.7rem 0 0.4rem;
}
.widget p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--muted);
}
.widget-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}
.widget-lista span {
  color: var(--muted);
  opacity: 0.7;
}
.widget-cta {
  border-color: rgba(212, 165, 55, 0.55);
}
/* Artigo: migalha, autora, relacionados */
.migalha {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.autora {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 1rem;
  margin-top: 1.4rem;
}
.autora p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.autora p strong {
  color: var(--ink);
}
.relacionados {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.6rem 0 3rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.blog-footer {
  position: static;
  margin: 2rem 0;
  text-align: center;
  animation: none;
  opacity: 1;
}

/* Blog no mobile: 1 coluna, sidebar embaixo, menu quebra */
@media (max-width: 860px) {
  .blog-wrap {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .blog-header {
    flex-direction: column;
    gap: 0.7rem;
  }
  .blog-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   13. TEMA CLARO DO BLOG (fundo branco + cabeçalho vinho).
   Padrão de blog tradicional: leitura no claro, marca no vinho.
   Regras abaixo sobrescrevem a base escura (vêm por último de propósito).
   -------------------------------------------------------------------------- */
html {
  background: #fffdf8;
}
body {
  background: #fffdf8;
  color: #2d2926;
}
::selection {
  background: #ead9c2;
  color: #4e1420;
}
.frame {
  border-color: rgba(123, 45, 58, 0.28);
}

/* Cabeçalho mantém as cores da marca: barra vinho, texto creme */
.blog-header {
  background-color: #7b2d3a; /* fallback se o gradiente falhar */
  background: linear-gradient(120deg, #8e3650 0%, #7b2d3a 55%, #4e1420 100%);
  border: 1px solid rgba(78, 20, 32, 0.4);
  border-radius: 14px;
  padding: 0.65rem 1.2rem;
}
a.blog-marca:link,
a.blog-marca:visited {
  color: #fdfbf7;
}
a.blog-marca:hover,
a.blog-marca:active {
  color: #fdfbf7;
}
.blog-menu a,
.blog-menu a:visited {
  color: #fdfbf7;
}
.blog-marca span {
  color: #ead9c2;
}
.blog-menu a[aria-current="page"] {
  color: #fff;
}

/* Títulos em vinho, textos em tinta suave (legível no branco) */
.blog-titulo,
.captura h2,
.destaque h2,
.card h3,
.widget h3,
.secao-titulo,
.artigo h2,
h1 {
  color: #7b2d3a;
}
.blog-titulo em,
.destaque h2 em,
h1 em {
  color: #c66b3d;
}
.lede,
.post-resumo,
.post-meta,
.widget p,
.widget-lista span,
.artigo p,
.artigo li,
.relacionados,
.meus-emails,
.meus-emails-titulo,
.consent,
.privacy-note,
.note,
.migalha {
  color: #5a524c;
}
.post-meta strong,
.autora p strong {
  color: #2d2926;
}
.post-cat {
  color: #9c7420;
}
.wordmark {
  color: #7b2d3a;
}
.eyebrow {
  color: #8a7f76;
}

/* Links no claro: vinho (nunca azul, nunca pêssego-claro) */
a,
a:link,
a:visited {
  color: #8e2f42;
}
a:hover {
  color: #c66b3d;
  filter: none;
}

/* Cartões e caixas: papel branco com borda creme */
.card,
.widget,
.autora,
.meus-emails-lista li {
  background: #ffffff;
  border-color: #e9dcc8;
  color: #5a524c;
}
.artigo .meta-receita span {
  border-color: #e9dcc8;
  color: #2d2926;
}

/* Form no claro */
input[type="email"] {
  background: #ffffff;
  border-color: #d8cbb6;
  color: #2d2926;
}
input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: #2d2926;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}
.note.show {
  color: #c66b3d;
}

/* Rodapé do blog: barra vinho com texto creme */
.blog-footer {
  background: linear-gradient(120deg, #8e3650 0%, #7b2d3a 55%, #4e1420 100%);
  color: #fdfbf7;
  border-radius: 16px;
  padding: 1rem 1.3rem;
  width: 100%;
  max-width: 1080px;
}
.blog-footer a,
.blog-footer a:link,
.blog-footer a:visited {
  color: #ead9c2;
}
.blog-footer a:hover {
  color: #fff;
}
footer {
  color: #8a7f76;
}

/* Mobile estreito: empilha form (regra da base, mantida) */
@media (max-width: 400px) {
  form { flex-direction: column; }
  button { width: 100%; }
}

/* --------------------------------------------------------------------------
   14. PACOTE TOPO v1 — sticky, CTA assinar, busca, progresso, topo, share.
   Criado a pedido: menu sempre à mão, newsletter em destaque dourado,
   filtro de receitas sem backend e mimos de leitura em posts longos.
   -------------------------------------------------------------------------- */
.blog-header {
  position: sticky;
  top: 12px;
  z-index: 60;
  box-shadow: 0 8px 26px rgba(78, 20, 32, 0.28);
}
/* Último item do menu vira o botão-CTA dourado (sem mexer no HTML) */
.blog-menu a:last-child {
  background: #d4a537;
  color: #4e1420;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.blog-menu a:last-child:visited {
  color: #4e1420;
}
.blog-menu a:last-child:hover {
  background: #e8c05c;
  color: #4e1420;
}

/* Busca do blog: filtra os cards na hora (ver main.js) */
.busca {
  width: 100%;
  max-width: 460px;
  margin-top: 1.2rem;
}
.busca input[type="search"] {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #d8cbb6;
  border-radius: 999px;
  color: #2d2926;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.7rem 1.2rem;
  outline: none;
}
.busca input[type="search"]:focus {
  border-color: #d4a537;
}
.nada-encontrado {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #8a7f76;
}
.nada-encontrado[hidden] {
  display: none;
}

/* Barra de progresso de leitura (criada via JS, só em posts) */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #d4a537, #c66b3d);
  z-index: 100;
}

/* Voltar ao topo (criado via JS, aparece após 600px) */
.voltar-topo {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  background: #7b2d3a;
  color: #fdfbf7;
  border: 1px solid #d4a537;
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  min-height: 0;
}
.voltar-topo.visivel {
  opacity: 1;
  pointer-events: auto;
}

/* Compartilhar nativo no fim do artigo (criado via JS) */
.compartilhar-blog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  border: 1px dashed rgba(156, 116, 32, 0.6);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin-top: 1.6rem;
}
.btn-share {
  background: #d4a537;
  color: #4e1420;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 0;
  white-space: nowrap;
}
.btn-share:hover {
  filter: brightness(1.06);
}
.share-msg {
  font-size: 0.85rem;
  color: #8a7f76;
}

/* --------------------------------------------------------------------------
   15. PACOTE RECEITA v1 — pular, checkboxes e impressão (padrão food blogs).
   -------------------------------------------------------------------------- */
/* Rolagem suave até a âncora (desligada p/ quem reduz movimento) */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Compensa o header fixo ao pular para #receita */
#receita {
  scroll-margin-top: 120px;
}
.btn-pular {
  display: inline-block;
  margin-top: 0.9rem;
  background: #7b2d3a;
  color: #fdfbf7;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
}
.btn-pular:visited {
  color: #fdfbf7;
}
.btn-pular:hover {
  color: #fff;
  filter: brightness(1.12);
}

/* Ingredientes clicáveis: risca o já separado (alvos 44px+) */
.ing-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  min-height: 44px;
  padding: 0.45rem 0.1rem;
  cursor: pointer;
}
.ing-check input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: #7b2d3a;
  flex-shrink: 0;
  cursor: pointer;
}
.ing-check.riscado span {
  text-decoration: line-through;
  opacity: 0.55;
}
.btn-print {
  background: transparent;
  border: 1.5px solid #d4a537;
  color: #7b2d3a;
}

/* Impressão: só o artigo, sem moldura/menus/sidebar/botões */
@media print {
  .blog-header,
  .sidebar,
  .blog-footer,
  footer,
  .frame,
  .progresso,
  .voltar-topo,
  .compartilhar-blog,
  .btn-pular,
  .meus-emails,
  .captura {
    display: none !important;
  }
  html,
  body {
    background: #fff;
  }
  body {
    color: #000;
    display: block;
    padding: 0;
  }
  .blog-wrap {
    display: block;
    max-width: 100%;
  }
  .artigo h1,
  .artigo h2,
  .blog-titulo,
  .secao-titulo {
    color: #000;
  }
  .artigo p,
  .artigo li,
  .lede,
  .post-meta {
    color: #000;
  }
  .foto-real img,
  img.foto-chef,
  img.foto-chef-peq {
    border-color: #ccc;
  }
}