/* =============================================================================
   premium.css — camada editorial por cima do tema do advertorial.
   ADITIVA: não altera o HTML nem remove nada do tema. Se este arquivo sair, a
   página volta exatamente ao que era.

   Direção: revista de saúde séria (o job da página é ser LIDA até o fim, e só
   depois converter). Por isso corpo em serifa, medida de leitura curta e ritmo
   vertical largo — não o visual de anúncio.

   Tipografia: Newsreader, desenhada para notícia em tela, com optical sizing
   real. Escolhida em vez das serifas de sempre justamente por ser de texto, não
   de display: aguenta 240 parágrafos sem cansar.
   ========================================================================== */

:root {
  --ed-ink: #11161c;        /* títulos — quase preto, levemente azulado */
  --ed-body: #313a44;       /* corpo — preto puro cansa em texto longo */
  --ed-muted: #737d89;      /* meta, legenda, crédito */
  --ed-rule: #e6e9ec;       /* filetes */
  --ed-accent: #0b6b3a;     /* verde botânico, da marca */
  --ed-accent-soft: #eff5f1;
  --ed-measure: 34rem;      /* ~68 caracteres: a medida de leitura confortável */
}

/* --- corpo do artigo ------------------------------------------------------ */
.builder-rich-text p {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-size: 1.185rem;
  line-height: 1.72;
  color: var(--ed-body);
  letter-spacing: 0.002em;
  margin: 0 0 1.15em;
  text-wrap: pretty;
}
.builder-rich-text p > strong,
.builder-rich-text p > b {
  color: var(--ed-ink);
  font-weight: 650;
}

/* --- manchete -------------------------------------------------------------
   A manchete vinha em sans pesada, do tema. Com o corpo em serifa isso lia
   como dois artigos colados. Aqui ela passa a ser a mesma família do texto, em
   grau óptico de display: é o que amarra a página numa peça só. */
h1,
.themed-root h1 {
  font-family: 'Newsreader', Georgia, serif !important;
  font-optical-sizing: auto;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.06 !important;
  color: var(--ed-ink) !important;
  text-wrap: balance;
}

/* Deck: a linha vermelha sob a manchete. No tema é um <h3> irmão do <h1>, em
   sans bold vermelha — lê como um segundo título competindo com o primeiro.
   Em serifa itálica ele volta ao papel de linha de apoio. */
h1 + h3 {
  font-family: 'Newsreader', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.32rem !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  color: #b3231f !important;
  margin-top: 0.45em !important;
  text-wrap: pretty;
}

/* --- títulos -------------------------------------------------------------- */
.builder-rich-text h1,
.builder-rich-text h2,
.builder-rich-text h3,
.section-title {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  color: var(--ed-ink);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.builder-rich-text h1 { font-weight: 700; line-height: 1.08; }
.builder-rich-text h2,
.section-title {
  font-weight: 620;
  line-height: 1.16;
  margin-top: 2.4em;
  margin-bottom: 0.55em;
}
.builder-rich-text h3 { font-weight: 600; line-height: 1.25; margin-top: 1.9em; }

/* Filete curto acima das seções: marca a virada de assunto sem enfeitar. */
.section-title::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  background: var(--ed-accent);
  margin-bottom: 0.7em;
  border-radius: 2px;
}

/* --- ASSINATURA: abertura de revista impressa ----------------------------- */
/* Capitular + primeira linha em versalete. É recurso de página impressa, e
   funciona aqui porque isto é de fato um artigo longo — não decoração. */
.builder-rich-text > p:first-of-type::first-letter {
  float: left;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 620;
  font-size: 3.44em;
  line-height: 0.82;
  margin: 0.06em 0.1em 0 0;
  color: var(--ed-accent);
}
.builder-rich-text > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.055em;
  color: var(--ed-ink);
}

/* --- citações ------------------------------------------------------------- */
blockquote {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1.42;
  color: var(--ed-ink);
  border: 0;
  border-left: 3px solid var(--ed-accent);
  background: none;
  margin: 1.9em 0;
  padding: 0.1em 0 0.1em 1.15em;
  font-style: normal;
  text-wrap: pretty;
}
blockquote p { font: inherit !important; color: inherit !important; margin: 0 0 0.4em !important; }
blockquote p:last-child { margin-bottom: 0 !important; }

/* --- listas --------------------------------------------------------------- */
.builder-rich-text ul { padding-left: 1.15em; }
.builder-rich-text li {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.115rem;
  line-height: 1.62;
  color: var(--ed-body);
  margin-bottom: 0.5em;
}
.builder-rich-text ul li::marker { color: var(--ed-accent); }

/* --- imagens -------------------------------------------------------------- */
.img-fill,
.gif-video {
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(17, 22, 28, 0.06);
}
/* legenda: micro-sans em versalete, o contraponto da serifa do corpo */
.img-fill + p em,
figcaption {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.775rem;
  font-style: normal;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ed-muted);
  margin-top: 0.65em;
}

/* --- CTA ------------------------------------------------------------------ */
/* O tema já entrega o botão vermelho. Aqui só o acabamento: peso tipográfico,
   respiro interno e uma sombra que assenta o botão no papel em vez de fazê-lo
   flutuar. */
.cta-btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.015em !important;
  border-radius: 999px !important;
  padding: 1.02em 2.3em !important;
  box-shadow: 0 10px 26px -12px rgba(204, 0, 0, 0.55) !important;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
  .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgba(204, 0, 0, 0.6) !important;
  }
}
.cta-btn:focus-visible { outline: 3px solid var(--ed-ink); outline-offset: 3px; }

/* --- cabeçalho e rodapé --------------------------------------------------- */
.ed-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
}
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.site-footer__nav a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.83rem;
  letter-spacing: 0.03em;
}

/* --- comentários ---------------------------------------------------------- */
/* Ficam em sans de propósito: são interface, não matéria. A troca de família
   separa o que a redação escreveu do que o leitor escreveu. */
.comments,
.comments p,
.comments a,
.comments span {
  font-family: 'Inter', system-ui, sans-serif;
}

/* --- ritmo vertical ------------------------------------------------------- */
.builder-rich-text { padding-top: 0.2em; padding-bottom: 0.2em; }

/* A capitular vinha colada na foto acima. Uma abertura de artigo precisa de ar
   antes dela — é o que separa a imagem da entrada do texto. */
.img-fill + .builder-rich-text,
.gif-video + .builder-rich-text { margin-top: 1.5em; }
.builder-rich-text > p:first-of-type { margin-top: 0.35em; }

@media (min-width: 768px) {
  .builder-rich-text p { font-size: 1.235rem; }
  blockquote { font-size: 1.5rem; margin: 2.3em 0; padding-left: 1.35em; }
  .builder-rich-text > p:first-of-type::first-letter { font-size: 3.85em; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn { transition: none !important; }
  .cta-btn:hover { transform: none; }
}