/* Blog Cardapio.ai — usa os mesmos design tokens da landing */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://cardapio.ai/cardapio.ai/fonts/google-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://cardapio.ai/cardapio.ai/fonts/inter-latin.woff2') format('woff2');
}

:root {
  /* Tokens do design system da landing (css/inicio.css). Os nomes são os mesmos de lá
     de propósito: o blog e o site precisam continuar comparáveis lado a lado. */

  /* Marca */
  --color-brand-red: #e4002b;
  --color-brand-blue: #1f87ed;
  --color-brand-blue-dark-ct: #0c6ecf;   /* único azul-escuro que passa em AA */
  --color-brand-blue-light: #f2f9ff;
  --color-instruction: var(--color-brand-blue-dark-ct);

  /* Superfícies */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #fbfbfb;
  --color-surface-transparent: rgba(251, 251, 251, 0.4);

  /* Texto */
  --color-text: #1d1d1f;
  --color-text-subtle: rgba(29, 29, 31, 0.75);
  --color-text-muted: #4d4d4d;
  --color-on-brand: #fff;

  /* Contraste (ct) — valores calibrados para WCAG AA */
  --ct-placeholder: #6b6b6b;
  --ct-ghost-red-bg: #fef5f7;         /* repouso do botão secundário */
  --ct-ghost-red-bg-hover: #fdedf0;   /* hover do botão secundário */

  /* Linhas */
  --color-divider: rgb(221 221 221 / 0.4);
  --color-border: rgba(0, 0, 0, 0.2);
  --color-border-soft: rgba(0, 0, 0, 0.05);
  --color-border-subtle: rgba(0, 0, 0, 0.12);
  --color-hover-tint: rgba(135, 135, 135, 0.1);
  --color-pill-border: color-mix(in srgb, var(--color-instruction) 10%, transparent);

  /* Espaçamento */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;

  /* Raio */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-16: 16px;
  --radius-xl: 24px;
  --radius-pill: 400px;

  /* Sombra — o blog é flat: sombra só em hover de card e em elevação alta */
  --shadow-pill: 0 2px 12px -2px color-mix(in srgb, var(--color-instruction) 10%, transparent);
  --shadow-lift: 0 2px 8px -2px rgba(0, 0, 0, 0.12);        /* hover de card, discreto */
  --shadow-float: 0 16px 48px -16px rgba(0, 0, 0, 0.2);     /* elevação alta (menu mobile) */
  --shadow-cta-rest: 0 2px 2px -1.5px rgba(0, 0, 0, 0.614); /* repouso do CTA vermelho */

  /* Movimento */
  --dur-press: 0.06s;
  --dur-quick: 0.15s;
  --dur-hover: 0.18s;
  --dur-base: 0.2s;
  --dur-slow: 0.9s;    /* zoom de imagem no hover */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Tipografia — uma família de interface e uma escala só */
  --font: "Google Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* O corpo do artigo continua em Inter: é a fonte de leitura longa do blog */
  --fonte-texto: 'Inter', system-ui, sans-serif;

  --fs-display: 32px;
  --fs-hero:    40px;
  --fs-title:   24px;
  --fs-lg:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  --lh-tight:   1.03;
  --lh-snug:    1.1;
  --lh-base:    1.3;
  --lh-relaxed: 1.5;

  --tracking-title: -0.03em;
  --tracking-label: -0.02em;
  --tracking-wide:  0.03em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --content-max: 1120px;
  --content-narrow: 736px;

  --menu-open-dur: 400ms;
  --menu-close-dur: 520ms;
  --menu-close-delay: 90ms;
  --menu-ease: var(--ease-out);
  --menu-close-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Degraus da escala no mobile, iguais aos da landing */
@media (max-width: 900px) {
  :root { --fs-display: 24px; --fs-hero: 32px; --fs-title: 20px; }
}
@media (max-width: 320px) {
  :root { --fs-display: 20px; --fs-hero: 26px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
/* A topbar é flutuante (position: fixed), então o corpo abre o espaço dela — no
   mobile o espaço é maior porque a barra cresce com a linha de atalhos. */
body { font-family: var(--fonte-texto); color: var(--color-text); background: var(--color-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; padding-top: 88px; }
@media (max-width: 850px) { body { padding-top: 108px; } }
img { max-width: 100%; display: block; }

/* O SVG da marca é exportado com preserveAspectRatio="none" e não tem proporção
   intrínseca: sem o aspect-ratio abaixo ele estica para 300x150 do navegador. */
.marca { aspect-ratio: 176 / 32; width: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--tracking-label); }

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-24); }
.container--estreito { max-width: 760px; }   /* medida de leitura do artigo */

/* ---------- topbar (cópia da .menubar da landing — css/inicio.css) ---------- */
.menubar {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: var(--content-max);
  z-index: 100;

  display: flex;
  flex-direction: column;
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--color-surface-transparent);
  border: 1px solid var(--color-divider);
  -webkit-backdrop-filter: blur(16px) brightness(1.08) saturate(1.2);
  backdrop-filter: blur(16px) brightness(1.08) saturate(1.2);
  overflow: hidden;
  transition: background-color var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay),
              box-shadow var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay),
              padding var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay);
}

.menubar__main { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-shrink: 0; }
.menubar__nav { display: flex; align-items: center; gap: var(--space-8); }
.menubar__logo-link + .menubar__link { margin-left: var(--space-24); }
.menubar__logo-link { display: inline-flex; align-items: center; height: 32px; }
.menubar__logo { height: 28px; width: auto; cursor: pointer; }
.menubar__logo--symbol { display: none; aspect-ratio: 36 / 32; }

.menubar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  border: 0.18px solid transparent;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease,
              border-color var(--dur-base) ease, backdrop-filter var(--dur-base) ease,
              -webkit-backdrop-filter var(--dur-base) ease;
}

.menubar__link:hover {
  color: var(--color-brand-red);
  cursor: pointer;
  border-color: var(--color-divider);
  -webkit-backdrop-filter: blur(8px) brightness(180%);
  backdrop-filter: blur(8px) brightness(180%);
}

.menubar__actions { display: flex; align-items: center; gap: var(--space-12); }

.menubar__login {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-pill);
  border: 0.18px solid transparent;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-brand-red);
  white-space: nowrap;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease,
              backdrop-filter var(--dur-base) ease, -webkit-backdrop-filter var(--dur-base) ease;
}

.menubar__login:hover {
  cursor: pointer;
  border-color: var(--color-divider);
  -webkit-backdrop-filter: blur(8px) brightness(180%);
  backdrop-filter: blur(8px) brightness(180%);
}

.menubar__cta { position: relative; display: inline-flex; }

/* "Fechar" — visível apenas com o menu aberto (mobile) */
.menubar__close-menu {
  display: none;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.menubar__close-menu:active { background-color: var(--color-hover-tint); color: var(--color-text); }

/* Linha de atalhos + menu completo: só no mobile */
.menubar__floating,
.menubar__menu { display: none; }

@keyframes menubar-menu-item-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes menubar-actions-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 850px) {
  .menubar {
    top: 12px;
    padding: 10px 10px 10px var(--space-16);
    width: calc(100% - 24px);
    border-radius: 32px;
  }

  .menubar__logo--full { display: none; }
  .menubar__logo--symbol { display: block; height: 30px; }

  .menubar__main { min-height: 40px; }
  .menubar__link { display: none; }

  .menubar__actions { gap: var(--space-8); }
  .menubar__login { padding: var(--space-6) var(--space-8); }
  .menubar.is-menu-open .menubar__login { display: none; }

  .menubar__cta .cta-primary { width: 128px; }
  .menubar__cta .cta-primary:active { transform: none; box-shadow: var(--shadow-cta-rest); }
  .menubar__cta .cta-primary:active .cta-primary__inner { filter: none; }
  .menubar__cta .cta-primary:hover .cta-primary__inner svg.cta-primary__arrow,
  .menubar__cta .cta-primary:active .cta-primary__inner svg.cta-primary__arrow { width: 0; margin-left: 0; }

  .menubar__floating {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-8);
    width: 100%;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--menu-ease),
                margin-top 0.3s var(--menu-ease),
                opacity 0.24s ease;
  }
  .menubar.is-opened .menubar__floating {
    max-height: 32px;
    margin-top: 10px;
    opacity: 1;
    transition: max-height 0.38s var(--menu-close-ease) 0.08s,
                margin-top 0.38s var(--menu-close-ease) 0.08s,
                opacity 0.32s var(--menu-close-ease) 0.08s;
  }
  .menubar.is-revealing .menubar__floating {
    transition: max-height var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay),
                margin-top var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay),
                opacity var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay);
  }
  .menubar.is-revealing .menubar__actions {
    animation: menubar-actions-reveal var(--dur-base) var(--menu-close-ease) 0.3s both;
  }
  .menubar__floating-link {
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--font);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-6) 0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-md);
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
  }
  .menubar__floating-link:active { background-color: var(--color-hover-tint); color: var(--color-text); }

  .menubar__menu {
    display: block;
    width: 100%;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay),
                opacity var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay),
                margin-top var(--menu-close-dur) var(--menu-close-ease) var(--menu-close-delay);
  }

  .menubar.is-menu-open {
    padding: 10px var(--space-16) var(--space-24) var(--space-16);
    background: var(--color-surface-transparent);
    box-shadow: var(--shadow-float);
    transition: background-color var(--menu-open-dur) var(--menu-ease),
                box-shadow var(--menu-open-dur) var(--menu-ease),
                padding var(--menu-open-dur) var(--menu-ease);
  }
  .menubar.is-menu-open .menubar__floating { max-height: 0; margin-top: 0; opacity: 0; }
  .menubar.is-menu-open .menubar__cta { display: none; }
  .menubar.is-menu-open .menubar__close-menu { display: inline-flex; }
  .menubar.is-menu-open .menubar__menu {
    max-height: calc(100dvh - 140px);
    opacity: 1;
    overflow-y: auto;
    margin-top: var(--space-16);
    transition: max-height var(--menu-open-dur) var(--menu-ease),
                opacity var(--menu-open-dur) var(--menu-ease),
                margin-top var(--menu-open-dur) var(--menu-ease);
  }

  .menubar__menu-list { width: 100%; margin: 0 0 var(--space-8); }

  /* Precisa ser bloco: o transform da animação de entrada não vale em <a> inline */
  .menubar__menu-list a { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

  .menubar__menu-list a p {
    display: flex;
    align-items: center;
    height: 56px;
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-relaxed);
    color: var(--color-brand-red);
    border-bottom: 0.5px solid var(--color-divider);
  }

  .menubar.is-menu-open .menubar__menu-list a { animation: menubar-menu-item-in 0.45s var(--menu-ease) both; }
  .menubar.is-menu-open .menubar__menu-list a:nth-child(1) { animation-delay: 0.06s; }
  .menubar.is-menu-open .menubar__menu-list a:nth-child(2) { animation-delay: 0.11s; }
  .menubar.is-menu-open .menubar__menu-list a:nth-child(3) { animation-delay: 0.16s; }
  .menubar.is-menu-open .menubar__menu-list a:nth-child(4) { animation-delay: 0.21s; }
  .menubar.is-menu-open .menubar__menu-list a:nth-child(5) { animation-delay: 0.26s; }

  .menubar__menu-title {
    font-family: var(--font);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-8);
    padding-top: var(--space-16);
  }

  .menubar__menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-relaxed);
    color: var(--color-brand-red);
    background: none;
    border: none;
    border-bottom: 0.5px solid var(--color-divider);
    cursor: pointer;
    text-align: left;
  }

  .menubar__menu-note {
    margin-top: var(--space-16);
    font-family: var(--font);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .menubar__menu,
    .menubar.is-menu-open .menubar__menu,
    .menubar__floating { transition: none; }
    .menubar.is-menu-open .menubar__menu-list a { animation: none; }
  }

  html.modal-open,
  html.modal-open body { overflow: hidden; }
}

/* ---------- CTA vermelho (cópia do .cta-primary da landing) ---------- */
.cta-primary {
  position: relative;
  display: inline-flex;
  width: 168px;
  height: 40px;
  background: var(--color-brand-red);
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta-rest);
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: transform var(--dur-hover) ease-out, box-shadow var(--dur-hover) ease-out;
  will-change: transform;
}

.cta-primary--block { width: 100%; }

/* No fim das páginas do blog o texto é longo: largura pelo conteúdo */
.cta-primary--texto { width: auto; height: 48px; }
.cta-primary--texto .cta-primary__inner { padding: var(--space-12) var(--space-24); }

.cta-primary:hover { transform: scale(1.005); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.35); }

.cta-primary:active,
.cta-primary:focus-visible {
  transform: scale(0.995);
  box-shadow: 0 2px 2px -1.5px rgba(0, 0, 0, 0.8);
  transition: transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out;
  outline: none;
}

.cta-primary__inner {
  display: flex;
  padding: var(--space-12) var(--space-8);
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-soft);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.1) inset;
  position: relative;
  overflow: hidden;
  background: var(--color-brand-red);
  user-select: none;
  -webkit-user-select: none;
  color: var(--color-on-brand);
  font-family: var(--font);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  z-index: 2;
  width: 100%;
  white-space: nowrap;
  transition: filter var(--dur-hover) ease-out;
}

.cta-primary:hover .cta-primary__inner { filter: brightness(1.06) saturate(1.04); }

.cta-primary:active .cta-primary__inner,
.cta-primary:focus-visible .cta-primary__inner {
  filter: brightness(0.94);
  transition: filter var(--dur-press) ease-out;
}

.cta-primary__inner svg {
  height: 17px;
  width: 0;
  transition: width var(--dur-hover) ease-out, margin-left var(--dur-hover) ease-out;
}

.cta-primary:hover .cta-primary__inner svg.cta-primary__arrow { width: 16px; margin-left: var(--space-4); }

/* Brilho que atravessa o botão */
.cta-primary__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 100%;
  transform: translateX(-100%) skewX(-30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 1%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(255, 255, 255, 0.85) 40%,
    rgba(255, 255, 255, 0.85) 60%,
    rgba(255, 255, 255, 0.85) 61%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  animation: cta-primary-shine 3s infinite 1.5s;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes cta-primary-shine {
  0%   { transform: translateX(-100%) skewX(-30deg); opacity: 0; }
  5%   { opacity: 0; }
  30%  { opacity: 0.2; }
  60%  { opacity: 0; }
  100% { transform: translateX(800%) skewX(-30deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-primary,
  .cta-primary__inner,
  .cta-primary__inner svg { transition: none; }
  .cta-primary__inner::before { animation: none; opacity: 0; }
}

/* ---------- hero ---------- */
.hero { padding: var(--space-40) var(--space-24) var(--space-24); text-align: center; }
.hero--interna { padding-bottom: var(--space-8); text-align: left; }

.hero__kicker {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-red);
  margin-bottom: var(--space-12);
}
/* padding-block em elemento inline aumenta a área de toque sem mexer na altura da linha */
.hero__kicker a { color: inherit; padding-block: var(--space-6); }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}

.hero__sub {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--color-text-subtle);
  max-width: var(--content-narrow);
  margin: var(--space-16) auto 0;
  text-wrap: pretty;
}
.hero--interna .hero__sub { margin-left: 0; }

/* Campo de busca: sem sombra de repouso, foco pela borda — o blog é flat como a landing */
.hero__busca {
  display: flex;
  max-width: 460px;
  margin: var(--space-24) auto 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface);
  transition: border-color var(--dur-hover) ease-out;
}
.hero__busca:focus-within { border-color: var(--color-instruction); }
.hero__busca input {
  flex: 1;
  /* Sem o min-width: 0 o input não encolhe abaixo da largura intrínseca do campo de
     texto, e a 320px o botão é empurrado para fora e cortado pelo overflow do form. */
  min-width: 0;
  border: 0;
  outline: none;
  padding: var(--space-12) var(--space-24);
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: none;
}
.hero__busca input::placeholder { color: var(--ct-placeholder); }

/* Botão secundário, no padrão .ghost-btn--red da landing */
.hero__busca button {
  border: 0;
  padding: 0 var(--space-24);
  background: var(--ct-ghost-red-bg);
  color: var(--color-brand-red);
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background-color 0.45s ease;
}
.hero__busca button:hover { background: var(--ct-ghost-red-bg-hover); }
@media (max-width: 380px) { .hero__busca button { padding: 0 var(--space-16); } }

/* ---------- categorias ---------- */
.categorias { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: center; padding-top: var(--space-8); padding-bottom: var(--space-32); }

/* Repouso neutro e hover no tom dos botões secundários da landing */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-16);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  transition: background-color var(--dur-hover) ease-out, color var(--dur-hover) ease-out,
              border-color var(--dur-hover) ease-out, transform var(--dur-hover) ease-out;
}
.pill span { font-size: var(--fs-xs); color: inherit; opacity: 0.65; }
.pill:hover {
  background: var(--ct-ghost-red-bg);
  border-color: transparent;
  color: var(--color-brand-red);
  transform: scale(1.005);
}

/* A categoria selecionada usa a .pill azul da landing: separa "ativo" de "sob o cursor" */
.pill--ativa,
.pill--ativa:hover {
  background: var(--color-brand-blue-light);
  border-color: var(--color-pill-border);
  box-shadow: var(--shadow-pill);
  color: var(--color-instruction);
  transform: none;
}

/* Tags do post não são clicáveis: sem estado de hover */
.pill--tag,
.pill--tag:hover {
  cursor: default;
  background: var(--color-surface-soft);
  border-color: var(--color-border-soft);
  color: var(--color-text-muted);
  transform: none;
}

/* ---------- destaque ---------- */
.destaque {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-16);
  overflow: hidden;
  margin-bottom: var(--space-40);
  transition: box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
/* O aspect-ratio define a altura mínima do card. Sem o align-self: stretch a coluna
   pararia exatamente nessa altura (item com proporção intrínseca alinha em start, não
   estica), e sobraria uma faixa vazia embaixo sempre que o texto pedisse mais espaço. */
.destaque__img { aspect-ratio: 16/10; align-self: stretch; overflow: hidden; }
.destaque__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.destaque__conteudo {
  padding: var(--space-32) var(--space-40);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-12);
}
.destaque__conteudo h2 {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
.destaque__conteudo p { color: var(--color-text-subtle); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ---------- cards ---------- */
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); padding-bottom: var(--space-56); }
.grade--3 { padding-bottom: 0; }
@media (max-width: 960px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grade { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
/* O gradiente vale para todos: sem capa aparece a inicial e, se a imagem quebrar,
   o card degrada para o gradiente em vez de um retângulo branco. */
.card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-brand-blue-light) 0%, var(--color-surface-soft) 100%);
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card__img--vazia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  color: var(--color-instruction);
  opacity: 0.25;
}
.card__corpo { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); flex: 1; }
.card__categoria {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-brand-red);
}
.card__corpo h3 { font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-base); }
.card__corpo p { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { color: var(--color-text-muted); font-size: var(--fs-xs); margin-top: auto; padding-top: var(--space-4); }

/* Hover discreto, na mesma medida da landing: o card mal levanta e a imagem mal
   aproxima. Só onde existe cursor — no toque o :hover gruda depois do tap. */
@media (hover: hover) {
  .destaque:hover { box-shadow: var(--shadow-lift); transform: scale(1.004); }
  .destaque:hover .destaque__img img { transform: scale(1.01); }
  .card:hover { box-shadow: var(--shadow-lift); transform: scale(1.008); }
  .card:hover .card__img img { transform: scale(1.01); }
}

@media (max-width: 820px) {
  .destaque { grid-template-columns: 1fr; }
  .destaque__conteudo { padding: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .destaque, .destaque__img img, .card, .card__img img, .pill { transition: none; }
  .destaque:hover, .card:hover { transform: none; }
  .destaque:hover .destaque__img img, .card:hover .card__img img { transform: none; }
}

/* ---------- resultado busca / paginação ---------- */
.resultado-busca { padding-bottom: var(--space-24); }
.resultado-busca h2 { font-size: var(--fs-title); }

.paginacao { display: flex; gap: var(--space-8); justify-content: center; padding-bottom: var(--space-56); }
.paginacao a {
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: background-color var(--dur-hover) ease-out, color var(--dur-hover) ease-out,
              border-color var(--dur-hover) ease-out;
}
.paginacao a:hover { background: var(--ct-ghost-red-bg); border-color: transparent; color: var(--color-brand-red); }
/* Mesma lógica das categorias: a página atual é azul, o hover é vermelho */
.paginacao a.ativa,
.paginacao a.ativa:hover {
  background: var(--color-brand-blue-light);
  border-color: var(--color-pill-border);
  box-shadow: var(--shadow-pill);
  color: var(--color-instruction);
}

/* ---------- post ---------- */
.post__cabecalho { padding-top: var(--space-48); }
.post__trilha { font-family: var(--font); font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-16); display: flex; gap: var(--space-8); }
.post__trilha a:hover { color: var(--color-brand-red); }
.post__cabecalho h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-16);
  text-wrap: balance;
}
.post__descricao {
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-16);
  text-wrap: pretty;
}
/* sem o wrap, no mobile cada item é espremido e o texto quebra dentro do próprio span */
.post__meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center; color: var(--color-text-muted); font-family: var(--font); font-size: var(--fs-sm); }
.post__autor { font-weight: var(--fw-medium); color: var(--color-text); }
.post__capa { margin-top: var(--space-32); }
.post__capa img { border-radius: var(--radius-16); width: 100%; }
.post__conteudo { padding-top: 34px; font-size: 17px; }
.post__conteudo h2 { font-size: 27px; margin: 40px 0 14px; }
.post__conteudo h3 { font-size: 21px; margin: 32px 0 12px; }
.post__conteudo h4 { font-size: 18px; margin: 26px 0 10px; }
.post__conteudo p { margin-bottom: 18px; }
.post__conteudo ul, .post__conteudo ol { margin: 0 0 18px 24px; }
.post__conteudo li { margin-bottom: 8px; }
.post__conteudo a { color: var(--color-instruction); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.post__conteudo strong { font-weight: 700; }
.post__conteudo blockquote { border-left: 4px solid var(--color-brand-red); background: var(--color-surface-soft); padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 0 0 18px; color: var(--color-text-subtle); }
.post__conteudo blockquote p { margin: 0; }
.post__conteudo code { background: var(--color-surface-soft); border: 1px solid var(--color-border-soft); border-radius: 6px; padding: 2px 7px; font-size: 14.5px; }
.post__conteudo pre { background: #1d1d1f; color: #f5f5f7; border-radius: 12px; padding: 18px 20px; overflow-x: auto; margin-bottom: 18px; }
.post__conteudo pre code { background: none; border: 0; color: inherit; padding: 0; }
.post__conteudo hr { border: 0; border-top: 1px solid var(--color-border-soft); margin: 32px 0; }
.post-img { margin: 26px 0; }
.post-img img { border-radius: 12px; margin: 0 auto; }
.post-img figcaption { text-align: center; color: var(--color-text-muted); font-size: 13.5px; margin-top: 8px; }
.post-video { margin: 26px 0; }
.post-video video { width: 100%; border-radius: 12px; background: #000; }
.post-embed { position: relative; aspect-ratio: 16/9; margin: 26px 0; }
.post-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
/* Vertical (Shorts, Reels): na largura toda da coluna passaria de mil pixels de altura */
.post-embed--retrato { max-width: 380px; margin-inline: auto; }
/* Bloco ```html com mais de um elemento — calculadora, tabela de preços, widget */
.post-html { margin: 26px 0; }
.post-html iframe { width: 100%; max-width: 100%; border: 0; border-radius: 12px; }
.post-tabela { overflow-x: auto; margin-bottom: 18px; }
.post-tabela table { border-collapse: collapse; width: 100%; font-size: 15px; }
.post-tabela th, .post-tabela td { border: 1px solid var(--color-border-soft); padding: 10px 14px; text-align: left; }
.post-tabela th { background: var(--color-surface-soft); font-family: var(--font); }
.post__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-top: var(--space-24); }
.post__atualizado { color: var(--color-text-muted); font-size: 13.5px; padding: 18px 24px 44px; }

/* ---------- relacionados / cta ---------- */
.relacionados { background: var(--color-surface-soft); border-top: 1px solid var(--color-border-soft); padding: var(--space-48) 0 var(--space-56); }
.relacionados h2 { font-size: var(--fs-display); margin-bottom: var(--space-24); }
/* Mesmo painel de CTA do site principal (a seção .migracao da landing): cartão claro
   dentro da largura de conteúdo, no lugar da faixa escura de ponta a ponta. */
.cta-final { padding: 8px 0 64px; }
.cta-final__painel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-40);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  text-align: center;
  text-wrap: balance;
}
.cta-final h2 { font-size: 24px; letter-spacing: -0.03em; }
.cta-final p { color: var(--color-text-subtle); max-width: 560px; margin: 0; }
@media (max-width: 620px) { .cta-final__painel { padding: var(--space-24); } }

/* ---------- rodapé (cópia do .site-footer da landing — css/inicio.css) ----------
   Sem o cartão "Solicite contato": ele depende do JS e do POST da landing. No lugar
   dele o nav ocupa a linha inteira ao lado da marca, e uma coluna própria guarda os
   endereços que só existem aqui (feed RSS e llms.txt). */
.site-footer {
  width: 100%;
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text);
  /* o rodapé mantém a margem lateral de 24px mesmo no mobile */
  --content-gutter: 24px;
}

.site-footer__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-40) var(--content-gutter);
}

.site-footer a { cursor: pointer; }

.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;     /* mobile: marca centralizada */
  text-align: center;
  gap: var(--space-16);
}

.site-footer__logo { height: 128px; width: auto; }

.site-footer__tagline {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 300px;
  margin: 0;
}

.site-footer__social { display: flex; gap: var(--space-8); }

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: color var(--dur-base) ease;
}

.site-footer__social a:hover { color: var(--color-brand-red); }
.site-footer__social svg { width: 20px; height: 20px; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24) var(--space-40);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 120px;
}

.site-footer__heading {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text);
  margin: 0;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__links a {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  transition: color var(--dur-quick) ease;
}

.site-footer__links a:hover { color: var(--color-brand-red); }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  font-style: normal;
}

.site-footer__contact a,
.site-footer__contact p {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer__contact a {
  align-self: flex-start;
  transition: color var(--dur-quick) ease;
}

.site-footer__contact a:hover { color: var(--color-brand-red); }

.site-footer__support-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex-basis: 100%;   /* linha inteira abaixo das colunas */
}

.site-footer__support { display: flex; flex-direction: column; gap: var(--space-8); }

.site-footer__support p {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer__support a {
  align-self: flex-start;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text);
  transition: color var(--dur-quick) ease;
}

.site-footer__support a:hover { color: var(--color-brand-red); text-decoration: underline; }

/* "WhatsApp" clicável dentro do texto: atalho discreto pro suporte, sem cara de link */
.site-footer__support a.site-footer__support-inline,
.site-footer__support a.site-footer__support-inline:hover {
  color: inherit;
  text-decoration: none;
  transition: none;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-divider);
}

.site-footer__copy {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer__link {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--dur-quick) ease;
}

.site-footer__link:hover { color: var(--color-brand-red); text-decoration: underline; }

@media (min-width: 600px) {
  .site-footer__inner { padding: var(--space-56) var(--content-gutter); }

  /* Do tablet em diante a marca vira a coluna da esquerda e o nav ocupa o resto */
  .site-footer__info {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--space-40);
    align-items: start;
  }

  .site-footer__brand { align-items: flex-start; text-align: left; }

  /* na linha inteira cabe o suporte como mais uma coluna, não como linha cheia */
  .site-footer__support-block { flex-basis: auto; }

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

@media (min-width: 980px) {
  .site-footer__inner { padding: var(--space-64) var(--space-32); }
  .site-footer__info { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-64); }
  .site-footer__nav { gap: var(--space-40) var(--space-64); }
}