/* ==========================================================================
   artigo.css — blog e páginas de artigo
   Carregado só em /blog/ e nas páginas de artigo; a home não paga por ele.
   Usa exclusivamente os tokens de tokens.css e as duas regras que não podem
   ser quebradas: o verde musgo nunca preenche caixa, e sombra é sempre ameixa.
   ========================================================================== */

/* --- Trilha de navegação --------------------------------------------------- */
.pg-crumb{font-family:var(--font-body);font-size:14px;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pg-crumb a{color:var(--c-plum);text-decoration:none;border-bottom:1px solid transparent}
.pg-crumb a:hover{border-bottom-color:var(--c-plum)}
.pg-crumb a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.pg-crumb__sep{color:var(--c-lilac)}

/* --- Cabeçalho do artigo -------------------------------------------------- */
.pg-arthead{position:relative;overflow:hidden;
  background:color-mix(in oklab,var(--c-lilac) 16%,var(--c-base));
  padding:clamp(28px,4vw,52px) 0 clamp(32px,4.5vw,60px)}
.pg-arthead__inner{max-width:820px;margin:0 auto;padding:0 var(--gutter);position:relative}
.pg-arthead__eyebrow{display:inline-block;font-family:var(--font-body);text-transform:uppercase;
  letter-spacing:var(--tracking-label);font-weight:600;font-size:var(--fs-label);
  color:var(--c-moss);margin-bottom:12px}
.pg-arthead__title{font-family:var(--font-display);font-weight:800;color:var(--text-title);
  font-size:clamp(1.9rem,3vw,2.75rem);line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);margin:0;text-wrap:balance}
.pg-arthead__lead{font-family:var(--font-body);color:var(--text-muted);font-size:var(--fs-body-lg);
  line-height:1.65;margin:16px 0 0;max-width:60ch;text-wrap:pretty}

/* Data, autora e tempo de leitura. Separador em ponto médio para não competir
   com o título logo acima. */
.pg-artmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--font-body);font-size:14px;color:var(--text-muted)}
.pg-artmeta__autora{color:var(--c-plum);font-weight:600}
.pg-artmeta__sep{color:var(--c-lilac)}

/* --- Capa ----------------------------------------------------------------- */
.pg-artcapa{max-width:900px;margin:clamp(-24px,-2.5vw,-16px) auto 0;padding:0 var(--gutter);position:relative;z-index:1}
.pg-artcapa img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--r-lg);box-shadow:var(--shadow-card)}

/* --- Corpo do texto ------------------------------------------------------- */
/* 68 caracteres por linha é a medida em que o olho não se perde ao voltar
   para o começo da linha seguinte. */
.pg-prose{max-width:min(68ch,100%);margin:0 auto;padding:clamp(36px,5vw,64px) var(--gutter) 0;
  font-family:var(--font-body);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-body)}
.pg-prose > * + *{margin-top:1.15em}
.pg-prose p{margin:0;text-wrap:pretty}
.pg-prose a{color:var(--c-plum);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--c-lilac)}
.pg-prose a:hover{text-decoration-color:var(--c-plum)}
.pg-prose a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
.pg-prose strong{font-weight:700;color:var(--c-plum)}

.pg-prose h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.45rem,2.1vw,1.85rem);
  line-height:1.25;color:var(--text-title);margin:1.9em 0 0;letter-spacing:var(--tracking-tight);text-wrap:balance}
.pg-prose h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  line-height:1.3;color:var(--c-plum-700);margin:1.6em 0 0;text-wrap:balance}
.pg-prose h4{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  line-height:1.35;color:var(--text-body);margin:1.4em 0 0}
.pg-prose h2 + *,.pg-prose h3 + *,.pg-prose h4 + *{margin-top:.6em}

/* Marcador desenhado à mão em vez do bullet do navegador: o padrão fica
   grudado no texto e não aceita cor. */
.pg-prose ul,.pg-prose ol{padding-left:0;list-style:none}
.pg-prose li{position:relative;padding-left:30px;margin-top:.55em}
.pg-prose ul > li::before{content:"";position:absolute;left:8px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--c-apricot)}
.pg-prose ol{counter-reset:passo}
.pg-prose ol > li{counter-increment:passo}
.pg-prose ol > li::before{content:counter(passo);position:absolute;left:0;top:.1em;
  width:21px;height:21px;border-radius:50%;background:var(--c-lilac-tint);color:var(--c-plum);
  font-family:var(--font-display);font-weight:700;font-size:12px;display:grid;place-items:center}

.pg-prose blockquote{margin:1.6em 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--c-lilac);
  font-size:1.0625rem;line-height:1.6;color:var(--text-muted);font-style:italic}
.pg-prose blockquote p{margin:0}

.pg-prose figure{margin:1.8em 0 0}
.pg-prose figure img{width:100%;height:auto;display:block;border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.pg-prose figcaption{font-size:14px;line-height:1.5;color:var(--text-muted);margin-top:10px;text-align:center}

/* Tabela larga não pode empurrar a página: ela rola dentro da própria caixa. */
.pg-tabela{margin:1.8em 0 0;overflow-x:auto;border-radius:var(--r-md);box-shadow:var(--shadow-card);background:var(--c-white)}
.pg-tabela table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55}
.pg-tabela th,.pg-tabela td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border-hair)}
.pg-tabela th{font-family:var(--font-display);font-weight:700;color:var(--c-plum);
  background:var(--c-lilac-tint);white-space:nowrap}
.pg-tabela tr:last-child td{border-bottom:none}

/* --- Vídeo dentro do artigo ------------------------------------------------ */
/* Reaproveita .pg-ig__cell e .pg-yt (do styles.css) para herdar o play, o
   foco e o JS que já existem. Só o formato muda: aqui é paisagem. */
.pg-artvideo{margin:1.9em 0 0}
.pg-artvideo .pg-ig__cell{aspect-ratio:16/9;border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.pg-artvideo .pg-media__thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-card);background:var(--c-lilac-tint)}
.pg-artvideo .pg-media__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pg-artvideo .pg-media__playdot{width:58px;height:58px;border-radius:50%;background:rgba(252,251,254,0.92);
  color:var(--c-plum);display:grid;place-items:center;box-shadow:var(--shadow-badge);
  transition:transform var(--dur) var(--ease-bounce)}
.pg-artvideo .pg-media__playdot svg{width:24px;height:24px;margin-left:3px}

/* --- Perguntas frequentes do artigo --------------------------------------- */
.pg-artfaq{max-width:min(68ch,100%);margin:clamp(40px,5vw,64px) auto 0;padding:0 var(--gutter)}
.pg-artfaq__titulo{font-family:var(--font-display);font-weight:800;font-size:clamp(1.45rem,2.1vw,1.85rem);
  color:var(--text-title);margin:0 0 4px}

/* --- Fecho: chamada para agendar ------------------------------------------ */
.pg-artcta{max-width:820px;margin:clamp(44px,6vw,72px) auto 0;padding:0 var(--gutter)}
.pg-artcta__caixa{position:relative;overflow:hidden;background:var(--c-plum);border-radius:var(--r-lg);
  box-shadow:var(--shadow-feature);padding:clamp(26px,3.5vw,38px);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pg-artcta__blob{position:absolute;right:-70px;bottom:-80px;width:230px;height:230px;
  border-radius:var(--r-blob);background:var(--c-lilac);opacity:0.18}
.pg-artcta__kicker{position:relative;font-family:var(--font-body);font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-lilac)}
.pg-artcta__titulo{position:relative;font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);
  line-height:1.2;color:var(--c-base);margin:0;text-wrap:balance}
.pg-artcta__texto{position:relative;font-family:var(--font-body);font-size:15.5px;line-height:1.65;
  color:var(--c-lilac);margin:0;max-width:52ch}
.pg-artcta .ycl-btn{position:relative;margin-top:4px}

/* Aviso médico: pequeno, mas tem de estar em toda página com conteúdo clínico. */
.pg-artaviso{max-width:820px;margin:26px auto 0;padding:0 var(--gutter);
  font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--text-muted)}

/* --- Leia também ----------------------------------------------------------- */
.pg-rel{padding:clamp(48px,6vw,84px) 0 0}
.pg-rel__titulo{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);
  color:var(--text-title);margin:0 0 22px}

/* --- Cartões de artigo (usados no /blog/ e no "leia também") --------------- */
.pg-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:24px}
.pg-post{display:flex;flex-direction:column;background:var(--c-white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease-bounce),box-shadow var(--dur) var(--ease-soft)}
.pg-post:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.pg-post:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.pg-post__thumb{aspect-ratio:16/10;background:var(--c-lilac-tint);position:relative}
.pg-post__thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Artigo sem foto não ganha placeholder: ganha uma capa tipográfica em lilás,
   que é uma escolha de design e não um buraco. */
.pg-post__semfoto{position:absolute;inset:0;display:grid;place-items:center;padding:20px;
  background:linear-gradient(140deg,var(--c-lilac-tint),color-mix(in oklab,var(--c-lilac) 30%,var(--c-base)))}
.pg-post__semfoto span{font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.3;
  color:var(--c-plum);text-align:center;opacity:.85}
.pg-post__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.pg-post__kicker{font-family:var(--font-body);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-moss)}
.pg-post__titulo{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.35;
  color:var(--c-plum);margin:0;text-wrap:pretty}
.pg-post__resumo{font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--text-muted);margin:0}
.pg-post__data{margin-top:auto;padding-top:12px;font-family:var(--font-body);font-size:13px;color:var(--text-muted)}

/* --- Filtro de categorias do /blog/ --------------------------------------- */
.pg-filtro{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 32px}
.pg-filtro__item{font-family:var(--font-body);font-weight:600;font-size:14px;
  padding:9px 18px;border-radius:var(--r-pill);text-decoration:none;
  background:transparent;color:var(--c-plum);box-shadow:inset 0 0 0 1.5px var(--border-hair);
  transition:background var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft)}
.pg-filtro__item:hover{background:var(--c-lilac-tint)}
.pg-filtro__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pg-filtro__item[aria-current="true"]{background:var(--c-plum);color:var(--c-base);box-shadow:var(--shadow-badge)}

/* --- Celular --------------------------------------------------------------- */
@media (max-width:640px){
  .pg-prose{font-size:1.0625rem}
  .pg-artcapa{margin-top:0;padding-top:22px}
  .pg-artcapa img{aspect-ratio:16/10}
  .pg-tabela table{font-size:14.5px}
  .pg-tabela th,.pg-tabela td{padding:11px 13px}
}