/* ==========================================================================
   Páginas de artigo (conteudos/<slug>/) — carregar DEPOIS de styles.css.
   Cores: somente variáveis do styles.css (paleta oficial do manual de marca);
   transparências derivadas com color-mix().
   ========================================================================== */

/* — Topo: trilha, tag, título, lead, autor — */
.artigo-topo { max-width: 1120px; margin: 0 auto; padding: 56px 32px 0; }
.artigo-trilha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: color-mix(in srgb, var(--text) 78%, transparent);
  margin-bottom: 40px;
}
.artigo-trilha a { text-decoration: none; color: color-mix(in srgb, var(--text) 82%, transparent); }
.artigo-trilha a:hover { color: var(--wine); }
.artigo-trilha__atual { color: color-mix(in srgb, var(--text) 78%, transparent); }
.artigo-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.artigo-tag__folha { width: 11px; height: 11px; border-radius: 100% 2px 100% 2px; background: var(--blush); }
.artigo-titulo {
  font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; letter-spacing: normal;
  margin: 0 0 24px; color: var(--sage); max-width: 22ch; text-wrap: pretty;
}
.artigo-lead {
  font-size: 19px; line-height: 1.65; color: color-mix(in srgb, var(--text) 78%, transparent);
  max-width: 58ch; margin: 0 0 36px;
}
.artigo-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  font-size: 13.5px; color: color-mix(in srgb, var(--text) 78%, transparent);
}
.artigo-meta__autor { font-weight: 500; color: var(--text); }
.artigo-meta__ponto { width: 5px; height: 5px; border-radius: 100% 1px 100% 1px; background: var(--sage-light); }

/* — Grid: artigo + sumário — */
.artigo-grid {
  max-width: 1120px; margin: 0 auto; padding: 56px 32px 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 72px; align-items: start;
}
.artigo-corpo {
  font-size: 17.5px; line-height: 1.8;
  color: color-mix(in srgb, var(--text) 86%, transparent); max-width: 68ch;
}
.artigo-corpo p { margin: 0 0 22px; }
.artigo-corpo .artigo-p--lista { margin: 0 0 14px; }
.artigo-corpo .artigo-p--cta { margin: 0 0 34px; }
.artigo-h2 {
  font-family: var(--font-heading); font-weight: 300; font-size: 33px; line-height: 1.2;
  letter-spacing: normal; color: var(--sage); margin: 48px 0 16px;
}
/* âncoras do sumário não ficam escondidas sob o header sticky */
.artigo-corpo [id] { scroll-margin-top: 110px; }

/* listas com marcador em folha */
.artigo-lista {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 11px;
}
.artigo-lista > li { display: flex; gap: 14px; }
.artigo-marca {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 10px;
  border-radius: 100% 2px 100% 2px; background: var(--sage-light);
}
.artigo-marca--blush { background: var(--blush); }
.artigo-marca--wine { background: var(--wine); }
.artigo-marca--alerta { width: 8px; height: 8px; margin-top: 9px; background: var(--wine); }

/* caixas de atenção (vinho) */
.artigo-alerta {
  background: color-mix(in srgb, var(--wine) 9%, transparent);
  border-radius: 28px 3px 28px 3px; padding: 26px 30px; margin: 0 0 22px;
}
.artigo-alerta--forte { background: color-mix(in srgb, var(--wine) 9%, transparent); }
.artigo-alerta--topo { margin-bottom: 30px; }
.artigo-alerta__rotulo {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wine); margin-bottom: 10px;
}
.artigo-corpo .artigo-alerta__texto { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--wine); }
.artigo-corpo .artigo-alerta__texto--antes { margin: 0 0 14px; }
.artigo-corpo .artigo-alerta__texto--depois { margin: 16px 0 0; }
.artigo-lista--alerta { margin: 0; gap: 10px; font-size: 16px; line-height: 1.65; color: var(--wine); }

/* CTA dentro do artigo (sálvia) */
.artigo-cta {
  position: relative; overflow: hidden; background: var(--sage); color: var(--cream);
  border-radius: 110px 4px 110px 4px; padding: 44px;
}
.artigo-cta__flor { position: absolute; right: -24px; bottom: -28px; width: 140px; opacity: .2; }
.artigo-cta__conteudo { position: relative; max-width: 44ch; }
.artigo-cta__titulo { font-family: var(--font-body); font-weight: 500; font-size: 25px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 14px; }
.artigo-corpo .artigo-cta__texto {
  font-size: 16.5px; line-height: 1.7; margin: 0 0 26px;
  color: var(--cream);
}
.artigo-cta__botao {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--cream); color: var(--text);
  padding: 16px 32px; border-radius: 26px 3px 26px 3px; font-size: 14.5px;
}
.artigo-cta__botao:hover { background: #fff; color: var(--text); }

/* aviso, fontes e autora */
.artigo-corpo .artigo-aviso {
  font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--text) 78%, transparent);
  border-left: 2px solid var(--sage-light); padding-left: 18px; margin: 36px 0 0;
}
.artigo-fontes__titulo {
  font-family: var(--font-body); font-weight: 500; font-size: 21.5px; line-height: 1.3;
  letter-spacing: -.01em; color: var(--sage); margin: 44px 0 14px;
}
.artigo-fontes {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.6;
}
.artigo-autor {
  display: flex; gap: 24px; align-items: flex-start; margin-top: 48px; padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.artigo-autor__flor { width: 58px; flex: 0 0 auto; opacity: .9; }
.artigo-autor__nome { font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; color: var(--sage); margin-bottom: 6px; }
.artigo-corpo .artigo-autor__texto {
  font-size: 15.5px; line-height: 1.7; margin: 0;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

/* sumário */
.artigo-sumario { position: sticky; top: 104px; }
.artigo-sumario__rotulo {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text); margin-bottom: 18px;
}
.artigo-sumario__nav {
  display: flex; flex-direction: column; gap: 11px; font-size: 14px; line-height: 1.45;
  border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent); padding-left: 18px;
}
.artigo-sumario__nav a { text-decoration: none; color: color-mix(in srgb, var(--text) 78%, transparent); }
.artigo-sumario__nav a:hover { color: var(--wine); }
.artigo-sumario__nav .artigo-sumario__alerta { color: var(--wine); }
.artigo-sumario__nav .artigo-sumario__alerta:hover { color: var(--text); }

/* — Outros conteúdos — */
.artigo-relacionados { background: var(--bg-alt); padding: 88px 0; margin-top: 40px; }
.artigo-relacionados__inner { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.artigo-relacionados__titulo {
  font-family: var(--font-heading); font-weight: 300; font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.14; letter-spacing: normal; margin: 18px 0 44px; color: var(--sage);
}
.artigo-relacionados__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px;
}
.artigo-card {
  display: block; text-decoration: none; color: inherit; background: var(--cream);
  border-radius: 90px 4px 90px 4px; padding: 36px 38px;
}
.artigo-card--inverso { border-radius: 4px 90px 4px 90px; }
.artigo-card:hover { background: #fff; color: inherit; }
/* rótulo em vinho: o blush do protótipo sobre creme ficava sem contraste legível */
.artigo-card__rotulo {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wine); margin-bottom: 12px;
}
.artigo-card__titulo { font-family: var(--font-body); font-weight: 500; font-size: 21.5px; line-height: 1.3; letter-spacing: -.01em; color: var(--sage); margin-bottom: 10px; }
.artigo-card__texto { font-size: 15px; line-height: 1.65; color: color-mix(in srgb, var(--text) 78%, transparent); }

/* — Responsivo (breakpoints do protótipo) — */
@media (max-width: 1000px) {
  .artigo-grid { grid-template-columns: 1fr; gap: 40px; }
  .artigo-sumario { position: static; }
}
@media (max-width: 860px) {
  .artigo-topo, .artigo-grid { padding-left: 24px; padding-right: 24px; }
  .artigo-meta { gap: 8px 22px; }
  /* a section já recebe 24px laterais do styles.css */
  .artigo-relacionados__inner { padding: 0; }
  .artigo-cta { padding: 40px 32px; border-radius: 80px 4px 80px 4px; }
  .artigo-card { padding: 32px 30px; }
}