/* ══════════════════════════════════════════════════════════════
   Blog da Pris — folha compartilhada pela listagem e pelos posts.
   Mesmos tokens da home (roxo canônico #4A0E6A, H309).
   ══════════════════════════════════════════════════════════════ */
:root {
  --roxo-100: oklch(97%   0.012 309);
  --roxo-200: oklch(93.5% 0.028 309);
  --roxo-400: oklch(78.3% 0.096 309);
  --roxo-600: oklch(48.7% 0.157 309);
  --roxo-800: oklch(32.3% 0.147 309);
  --roxo-950: oklch(15.1% 0.037 309);
  --roxo-975: oklch(19.7% 0.055 309);

  --neutro-0:   oklch(98.5% 0.011 309);
  --neutro-50:  oklch(96.7% 0.007 309);
  --neutro-100: oklch(91.3% 0.020 309);

  --tinta-900: oklch(24.6% 0.089 309);
  --tinta-700: oklch(41%   0.070 309);
  --tinta-inv: oklch(98.5% 0.011 309);
  --tinta-inv-80: oklch(98.5% 0.011 309 / .80);
  --tinta-inv-65: oklch(98.5% 0.011 309 / .65);

  --sol-500: oklch(85.6% 0.120 84);
  --sol-700: oklch(58%   0.125 78);

  --acao-500: oklch(52.7% 0.137 150);
  --acao-600: oklch(45.8% 0.117 150);

  --alerta-txt: oklch(44.5% 0.127 5);
  --alerta-bg:  oklch(94.5% 0.023 0.5);
  --ok-txt:     oklch(42%   0.110 150);
  --ok-bg:      oklch(95%   0.030 150);

  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  --sombra-sm: 0 2px 12px oklch(32.3% .147 309 / .08);
  --sombra-md: 0 8px 24px oklch(32.3% .147 309 / .14);
  --sombra-acao: 0 8px 24px oklch(52.7% .137 150 / .34);

  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
  --esp-9: 96px;

  --fs-display-xl: clamp(1.95rem, 1.38rem + 2.63vw, 3.4rem);
  --fs-display-lg: clamp(1.6rem, 1.28rem + 1.35vw, 2.4rem);
  --fs-display-md: clamp(1.35rem, 1.19rem + 0.68vw, 1.8rem);
  --fs-display-sm: clamp(1.15rem, 1.06rem + 0.38vw, 1.4rem);

  --fs-corpo-lg: clamp(1.05rem, 1.01rem + 0.15vw, 1.15rem);
  --fs-corpo-md: clamp(0.95rem, 0.91rem + 0.15vw, 1.05rem);
  --fs-corpo-sm: clamp(0.85rem, 0.83rem + 0.11vw, 0.92rem);

  --ease-saida: cubic-bezier(.16,1,.3,1);
  --dur-rapida: 150ms; --dur-normal: 320ms;

  --z-base: 1; --z-sticky: 100;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--neutro-0);
  color: var(--tinta-900);
  font-size: var(--fs-corpo-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400; text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--roxo-400);
  outline-offset: 3px; border-radius: var(--r-sm);
}

.wrap { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }
.leitura { width: min(100% - 2.5rem, 68ch); margin-inline: auto; }

.pular {
  position: absolute; left: -9999px;
  background: var(--roxo-800); color: var(--tinta-inv);
  padding: var(--esp-3) var(--esp-5); border-radius: var(--r-sm); z-index: 400;
}
.pular:focus { left: var(--esp-4); top: var(--esp-4); }

/* ══════════ CABEÇALHO ══════════ */
.cabecalho {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: oklch(15.1% .037 309 / .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(98.5% .011 309 / .10);
}
.cabecalho-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); padding-block: var(--esp-3);
}
.marca { display: flex; align-items: center; gap: var(--esp-3); min-height: 44px; }
.marca img { width: 34px; height: 34px; border-radius: var(--r-sm); }
.marca span {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.08rem; color: var(--tinta-inv); letter-spacing: -.01em;
}
/* Sem botao de venda no topo do blog: quem esta lendo veio ler. */
.nav-blog { display: flex; gap: var(--esp-4); }
.nav-blog a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tinta-inv-80); font-size: var(--fs-corpo-sm); font-weight: 600;
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow var(--dur-rapida) var(--ease-saida), color var(--dur-rapida) var(--ease-saida);
}
.nav-blog a:hover { color: var(--tinta-inv); box-shadow: inset 0 -1px 0 var(--tinta-inv-80); }
@media (max-width: 480px) { .marca span { display: none; } }

/* ══════════ LISTAGEM ══════════ */
.blog-topo {
  background: linear-gradient(155deg, var(--roxo-950) 0%, var(--roxo-975) 55%, var(--roxo-800) 100%);
  color: var(--tinta-inv); padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.blog-topo h1 {
  font-size: var(--fs-display-xl); letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: var(--esp-4);
}
.blog-topo p { color: var(--tinta-inv-80); max-width: 56ch; font-size: var(--fs-corpo-lg); }

.posts { list-style: none; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.posts li { border-top: 1px solid var(--neutro-100); }
.posts li:last-child { border-bottom: 1px solid var(--neutro-100); }
.posts a { display: block; padding: var(--esp-6) 0; transition: background var(--dur-rapida) var(--ease-saida); }
.posts a:hover { background: oklch(93.5% .028 309 / .35); }
.posts h2 { font-size: var(--fs-display-md); letter-spacing: -.016em; line-height: 1.22; margin-bottom: var(--esp-2); max-width: 34ch; }
.posts p { color: var(--tinta-700); font-size: var(--fs-corpo-sm); max-width: 62ch; }
.posts .ler { display: inline-block; margin-top: var(--esp-3); color: var(--roxo-600); font-weight: 700; font-size: var(--fs-corpo-sm); }

/* ══════════ POST ══════════ */
.post-topo { padding: clamp(2.5rem, 7vw, 4.5rem) 0 var(--esp-6); }
.voltar {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--roxo-600); font-weight: 600;
  font-size: var(--fs-corpo-sm); margin-bottom: var(--esp-5);
}
.voltar:hover { text-decoration: underline; }
.post-topo h1 {
  font-size: var(--fs-display-xl); letter-spacing: -.03em;
  line-height: 1.1; margin-bottom: var(--esp-4);
}
.post-sub { font-size: var(--fs-corpo-lg); color: var(--tinta-700); line-height: 1.6; }

.autoria {
  display: flex; align-items: center; gap: var(--esp-4);
  margin-top: var(--esp-7); padding-top: var(--esp-5);
  border-top: 1px solid var(--neutro-100);
}
.autoria img {
  width: clamp(48px, 8vw, 60px); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; border: 2px solid var(--neutro-0);
  box-shadow: var(--sombra-sm);
}
.autoria-nome { font-weight: 700; font-size: var(--fs-corpo-sm); }
.autoria-meta { color: var(--tinta-700); font-size: var(--fs-corpo-sm); }

.post-corpo { padding-bottom: var(--esp-9); }
.post-corpo p {
  font-size: var(--fs-corpo-lg); line-height: 1.78; margin-bottom: var(--esp-5);
}
.post-corpo p strong { font-weight: 700; }
.post-corpo h2 {
  font-size: var(--fs-display-sm); letter-spacing: -.012em;
  line-height: 1.3; margin: var(--esp-8) 0 var(--esp-4);
}
/* Virada de argumento — serifa itálica, dourado escurecido para passar
   contraste sobre fundo claro. Nunca borda lateral colorida. */
.virada {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic; font-size: var(--fs-display-sm);
  line-height: 1.5; color: var(--sol-700);
  margin: var(--esp-8) 0; max-width: 46ch;
}
.post-corpo a:not(.btn-compra) {
  color: var(--roxo-600); font-weight: 600;
  border-bottom: 2px solid var(--roxo-400);
}
.post-corpo a:not(.btn-compra):hover { border-bottom-color: var(--roxo-600); }

/* ══════════ PONTE PARA O PRODUTO — um CTA, no fim, só ══════════ */
.ponte {
  background: var(--neutro-50); border: 1px solid var(--neutro-100);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.25rem);
  margin-top: var(--esp-8);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-5); align-items: center;
}
@media (max-width: 620px) { .ponte { grid-template-columns: 1fr; } }
.ponte img { width: 84px; border-radius: var(--r-md); }
.ponte h2 { font-size: var(--fs-display-sm); margin: 0 0 var(--esp-2); letter-spacing: -.01em; }
.ponte p { font-size: var(--fs-corpo-sm); color: var(--tinta-700); margin-bottom: var(--esp-4); }
.btn-compra {
  display: inline-block; background: var(--acao-500); color: #fff;
  font-weight: 800; font-size: var(--fs-corpo-sm);
  padding: var(--esp-4) var(--esp-5); border-radius: var(--r-pill);
  box-shadow: var(--sombra-acao);
  transition: background var(--dur-rapida) var(--ease-saida),
              transform var(--dur-rapida) var(--ease-saida);
}
.btn-compra:hover { background: var(--acao-600); transform: translateY(-2px); }
.btn-compra:active { transform: scale(.98); }

/* ══════════ CONVERSA (comentários) ══════════
   Rótulo é convite a uma resposta, não "Comentários".
   A lista fica oculta até haver ao menos um aprovado — caixa vazia
   é prova social negativa, e "0 comentários" nunca é renderizado.
   ══════════════════════════════════════════ */
.conversa { background: var(--neutro-50); padding: var(--esp-9) 0; }
.conversa h2 { font-size: var(--fs-display-md); letter-spacing: -.016em; margin-bottom: var(--esp-3); max-width: 26ch; }
.conversa-intro { color: var(--tinta-700); font-size: var(--fs-corpo-sm); margin-bottom: var(--esp-7); max-width: 56ch; }

.lista-conversa { list-style: none; margin-bottom: var(--esp-8); }
.comentario {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-4);
  padding: var(--esp-5) 0; border-bottom: 1px solid var(--neutro-100);
}
.comentario-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--roxo-200), var(--roxo-400));
  display: flex; align-items: center; justify-content: center;
  font: 700 .8rem 'Plus Jakarta Sans', sans-serif; color: var(--roxo-800);
}
.comentario-nome { font-weight: 700; font-size: var(--fs-corpo-sm); }
.comentario-data { color: var(--tinta-700); font-size: .8rem; margin-bottom: var(--esp-2); }
.comentario-txt { font-size: var(--fs-corpo-sm); line-height: 1.7; }
.comentario-resposta {
  margin-top: var(--esp-4); padding: var(--esp-4);
  background: var(--roxo-100); border-radius: var(--r-md);
}
.comentario-resposta .comentario-nome { color: var(--roxo-800); }

.form-conversa { display: grid; gap: var(--esp-4); max-width: 620px; }
.campo { display: grid; gap: var(--esp-2); }
.campo label { font-weight: 600; font-size: var(--fs-corpo-sm); }
.campo input, .campo textarea {
  font-family: inherit; font-size: var(--fs-corpo-md); color: var(--tinta-900);
  background: var(--neutro-0); border: 1px solid var(--neutro-100);
  border-radius: var(--r-md); padding: var(--esp-4);
  transition: border-color var(--dur-rapida) var(--ease-saida),
              box-shadow var(--dur-rapida) var(--ease-saida);
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-700); opacity: 1; }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--roxo-400);
  box-shadow: 0 0 0 3px oklch(78.3% .096 309 / .35);
}
.campo .dica { font-size: .8rem; color: var(--tinta-700); }

/* honeypot — fora da tela, mas não display:none (bots ignoram isso) */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso-moderacao { font-size: .8rem; color: var(--tinta-700); }
.btn-enviar {
  justify-self: start;
  background: var(--roxo-800); color: var(--tinta-inv);
  font-family: inherit; font-weight: 700; font-size: var(--fs-corpo-sm);
  padding: var(--esp-4) var(--esp-6); border: none; border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-saida),
              box-shadow var(--dur-rapida) var(--ease-saida);
}
.btn-enviar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn-enviar:active:not(:disabled) { transform: scale(.98); }
.btn-enviar:disabled { opacity: .6; cursor: not-allowed; }

.recado { padding: var(--esp-4); border-radius: var(--r-md); font-size: var(--fs-corpo-sm); }
.recado[hidden] { display: none; }
.recado-ok  { background: var(--ok-bg);     color: var(--ok-txt); }
.recado-erro{ background: var(--alerta-bg); color: var(--alerta-txt); }

/* ══════════ RODAPÉ ══════════ */
footer { background: var(--roxo-975); color: var(--tinta-inv-65); padding: var(--esp-9) 0 var(--esp-7); }
.rodape-frase {
  font-family: 'DM Serif Display', Georgia, serif; font-style: italic;
  font-size: var(--fs-display-sm); color: var(--sol-500);
  text-align: center; max-width: 26ch; margin: 0 auto var(--esp-8); line-height: 1.5;
}
.rodape-links {
  display: flex; flex-wrap: wrap; gap: 0 var(--esp-4);
  justify-content: center; margin-bottom: var(--esp-5); font-size: var(--fs-corpo-sm);
}
.rodape-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--esp-2);
  color: var(--tinta-inv-80); box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow var(--dur-rapida) var(--ease-saida);
}
.rodape-links a:hover { box-shadow: inset 0 -1px 0 var(--tinta-inv-80); }
.rodape-legal {
  text-align: center; font-size: .8rem; line-height: 1.8;
  border-top: 1px solid oklch(98.5% .011 309 / .12); padding-top: var(--esp-6);
}
.rodape-legal p { margin-bottom: var(--esp-2); }
.rodape-legal a { border-bottom: 1px solid currentColor; }

/* ══════════ MOVIMENTO ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}