/* Templates temporários para validação de Notas clínicas e Pílulas. */

.page-conteudo { background: var(--paper); }
.page-conteudo .site-header { background: rgba(51,45,86,.96); }
@supports (backdrop-filter: blur(10px)) {
  .page-conteudo .site-header { background: rgba(51,45,86,.92); backdrop-filter: blur(14px); }
}

.content-hero { padding: 168px 0 92px; background: var(--veil); }
.content-hero__inner { max-width: 920px; }
.content-hero h1 { max-width: 14ch; color: var(--ink); font-size: clamp(2.8rem, 1.65rem + 4vw, 5.6rem); line-height: 1.05; letter-spacing: -.045em; }
.content-hero__lead { max-width: 58ch; margin-top: 28px; color: var(--text-2); font-size: clamp(1rem, .94rem + .2vw, 1.1rem); line-height: 1.8; }
.content-hero__intro { max-width: 34ch; margin-top: 22px; color: var(--ink); font: italic 400 clamp(1.15rem, 1rem + .55vw, 1.45rem)/1.55 var(--serif); }

.archive-tools { padding: 34px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.archive-tools__inner { display: grid; grid-template-columns: minmax(260px, 1fr) 280px; gap: 44px; align-items: end; }
.archive-field { display: grid; gap: 9px; }
.archive-field label { color: var(--text-2); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.archive-field input, .archive-field select { width: 100%; height: 48px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); background: transparent; font: 400 .9rem var(--sans); }
.archive-field input::placeholder { color: rgba(78,102,136,.65); }
.archive-field input:focus, .archive-field select:focus { outline: 0; border-bottom-color: var(--mint-hover); box-shadow: 0 2px 0 var(--mint); }
.prototype-note { margin-top: 10px; color: var(--text-2); font-size: .72rem; }

.notes-archive { padding-block: clamp(76px, 8vw, 118px); }
.notes-list { border-top: 1px solid var(--line); }
.note-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(44px, 7vw, 96px); padding: clamp(42px, 5vw, 68px) 0; border-bottom: 1px solid var(--line); }
.note-row__meta { color: var(--text-2); font-size: .72rem; line-height: 1.7; }
.note-row__meta strong { display: block; margin-bottom: 12px; color: var(--mint-hover); font: italic 400 .9rem var(--serif); }
.note-row__meta span { display: block; letter-spacing: .06em; text-transform: uppercase; }
.note-row__body { max-width: 760px; }
.note-row h2 { max-width: 24ch; color: var(--ink); font-size: clamp(1.55rem, 1.25rem + .95vw, 2.25rem); line-height: 1.28; }
.note-row__body > p { max-width: 62ch; margin-top: 16px; color: var(--text-2); font-size: .94rem; line-height: 1.78; }
.content-read-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.content-read-link span { color: var(--mint-hover); transition: transform 180ms var(--ease); }
.content-read-link:hover span { transform: translateX(4px); }
.content-read-link--sample { color: var(--text-2); cursor: default; }
.content-read-link--sample span { display: none; }

.pills-hero { padding-bottom: 72px; color: var(--paper); background: var(--ink); }
.pills-hero .section-kicker { color: var(--glow); }
.pills-hero h1 { color: var(--paper); }
.pills-hero .content-hero__lead { color: rgba(255,255,255,.7); }
.pills-archive { padding-block: clamp(72px, 8vw, 112px); background: var(--veil); }
.pills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pill-card { min-height: 370px; display: flex; flex-direction: column; padding: clamp(30px, 3vw, 42px); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pill-card:nth-child(2) { background: #EEF2F6; }
.pill-card:nth-child(3) { color: var(--paper); border-color: transparent; background: var(--ink); }
.pill-card__meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 48px; color: var(--text-2); font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pill-card:nth-child(3) .pill-card__meta { color: rgba(255,255,255,.58); }
.pill-card h2 { color: var(--ink); font-size: clamp(1.35rem, 1.15rem + .65vw, 1.78rem); line-height: 1.32; }
.pill-card:nth-child(3) h2 { color: var(--paper); }
.pill-card > p { margin-top: 16px; color: var(--text-2); font-size: .9rem; line-height: 1.72; }
.pill-card:nth-child(3) > p { color: rgba(255,255,255,.67); }
.pill-card .content-read-link { margin-top: auto; padding-top: 30px; }
.pill-card:nth-child(3) .content-read-link { color: var(--paper); }
.pill-card:nth-child(3) .content-read-link--sample { color: rgba(255,255,255,.58); }

.article-hero { padding: 166px 0 86px; background: var(--veil); }
.article-hero__inner { width: min(920px, var(--shell)); margin-inline: auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 24px; color: var(--text-2); font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.article-meta span + span { position: relative; }
.article-meta span + span::before { content: ""; position: absolute; left: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--mint-hover); }
.article-hero h1 { max-width: 17ch; color: var(--ink); font-size: clamp(2.45rem, 1.55rem + 3.1vw, 4.8rem); line-height: 1.08; letter-spacing: -.04em; }
.article-hero__summary { max-width: 62ch; margin-top: 28px; color: var(--text-2); font-size: clamp(1rem, .95rem + .2vw, 1.12rem); line-height: 1.8; }

.article-body { padding-block: clamp(72px, 8vw, 116px); }
.article-body__inner { width: min(760px, var(--shell)); margin-inline: auto; }
.article-body__inner > p { margin-bottom: 24px; color: var(--text-2); line-height: 1.88; }
.article-body__inner > p:first-child { color: var(--ink); font-size: clamp(1.16rem, 1.05rem + .38vw, 1.35rem); line-height: 1.75; }
.article-body h2 { margin: 62px 0 22px; color: var(--ink); font-size: clamp(1.65rem, 1.35rem + .85vw, 2.2rem); }
.article-body h3 { margin: 38px 0 15px; color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 600; }
.article-body ul { margin: 10px 0 30px; padding-left: 22px; color: var(--text-2); }
.article-body li { padding-left: 7px; line-height: 1.75; }
.article-body li + li { margin-top: 10px; }
.article-callout { margin: 44px 0; padding: 28px 30px; border-left: 3px solid var(--mint); color: var(--ink); background: var(--veil); font: 400 clamp(1.08rem, 1rem + .32vw, 1.25rem)/1.7 var(--serif); }
.medical-disclaimer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .78rem; line-height: 1.7; }

.pill-article-hero { color: var(--paper); background: var(--ink); }
.pill-article-hero .article-meta { color: rgba(255,255,255,.58); }
.pill-article-hero h1 { max-width: 13ch; color: var(--paper); }
.pill-answer { max-width: 46ch; margin-top: 32px; padding-left: 24px; border-left: 3px solid var(--mint); color: var(--glow); font: italic 400 clamp(1.18rem, 1.02rem + .6vw, 1.52rem)/1.6 var(--serif); }
.pill-article-body { padding-block: clamp(68px, 7vw, 100px); }
.pill-article-body .article-body__inner { width: min(690px, var(--shell)); }

.article-next { padding-block: clamp(66px, 7vw, 96px); border-top: 1px solid var(--line); background: var(--veil); }
.article-next__inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.article-next p { max-width: 36ch; color: var(--ink); font: 400 clamp(1.35rem, 1.15rem + .72vw, 1.85rem)/1.45 var(--serif); }
.article-next__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.button--outline { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.button--outline:hover { border-color: var(--ink); background: var(--paper); }

@media (max-width: 900px) {
  .pills-grid { grid-template-columns: 1fr 1fr; }
  .article-next__inner { grid-template-columns: 1fr; }
  .article-next__actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .content-hero, .article-hero { padding: 128px 0 64px; }
  .content-hero h1 { font-size: clamp(2.45rem, 12vw, 3.45rem); }
  .archive-tools__inner { grid-template-columns: 1fr; gap: 24px; }
  .note-row { grid-template-columns: 1fr; gap: 22px; }
  .note-row__meta { display: flex; flex-wrap: wrap; gap: 7px 18px; }
  .note-row__meta strong { width: 100%; margin-bottom: 2px; }
  .pills-grid { grid-template-columns: 1fr; }
  .pill-card { min-height: 330px; }
  .article-meta { gap: 8px 18px; }
  .article-meta span + span::before { left: -10px; }
  .article-hero h1 { font-size: clamp(2.1rem, 10.5vw, 3.25rem); }
  .article-callout { padding: 24px 22px; }
  .article-next__actions { display: grid; grid-template-columns: 1fr; }
  .article-next .button { width: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .content-read-link span { transition: none; }
}