/* ==========================================================================
   DOCTOR PÉ BLOG — v1.css  ·  "Marca atual, refinada"
   Azul do logo + navy + azul claro #73A8D3 (só em botões de ação). Fundo branco, faixas
   lavanda claras. Montserrat nos títulos (mesma família do logo), Nunito Sans
   no corpo, 19px.
   ========================================================================== */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-sans-italic-latin.woff2") format("woff2"); }

:root {
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-display: 700;
  --tracking-display: -0.015em;

  --c-ink: #0B3E66;          /* navy: títulos */
  --c-body: #2A3A4B;         /* texto corrido · 11.6:1 no branco */
  --c-mute: #5A6B7D;         /* meta · 5.4:1 */
  --c-paper: #FFFFFF;
  --c-paper-2: #F3F5FA;      /* faixa lavanda do site atual */
  --c-line: #DDE4EE;
  --c-brand: #2877BC;        /* azul do logo: links, marcadores · 4.6:1 */
  --c-brand-soft: #E6F0FA;
  --c-band: #0B3E66;         /* faixas escuras */
  --c-on-band: #FFFFFF;
  --c-on-band-soft: #C9D8E8; /* tinted, não cinza */
  --c-on-band-line: rgba(201,216,232,.25);
  --cta: #73A8D3;            /* azul claro: só ação (pedido do cliente, 26/09/2026) */
  --cta-text: #FFFFFF;       /* texto do botão: branco (pedido do cliente, 26/09/2026) */
  --cta-hover: #2877BD;      /* hover: azul do logo, branco 4.7:1 */
  --cta-shadow: rgba(115,168,211,.55);
  --cta-on-band: #73A8D3;    /* destaques sobre a faixa navy · 4.4:1 */
  --c-error: #B3261E;

  --fs-micro: 13px; --fs-small: 15px; --fs-body: 19px; --fs-lead: 22px;
  --fs-h4: 19px; --fs-h3: 22px; --fs-h2: 30px; --fs-h1: 42px; --fs-display: 44px;
  --lh-body: 1.7;

  --container: 1240px; --content: 720px; --gutter: 24px; --section-y: 72px;
  --radius: 10px; --radius-lg: 18px;
  --shadow-md: 0 8px 24px -12px rgba(11,62,102,.25);
  --shadow-lg: 0 24px 48px -20px rgba(11,62,102,.35);
  --t: 180ms; --t-slow: 500ms; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1);
}
@media (max-width: 980px) { :root { --fs-h1: 34px; --fs-display: 34px; --fs-h2: 26px; --section-y: 56px; } }
@media (max-width: 560px) { :root { --fs-h1: 30px; --fs-display: 30px; --fs-h2: 24px; --fs-h3: 20px; --fs-lead: 20px; --gutter: 18px; --section-y: 44px; } }

/* home: destaque em faixa lavanda, título navy */
.hero { background: var(--c-paper-2); }
.hero__media { border: 6px solid #fff; }

/* faixa de incômodos entra "por cima" do destaque */
.symptoms { padding-top: 36px; }

/* cards: categoria como selo sobre a foto (como no site atual) */
.card__cat { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--c-ink); color: #fff; padding: 5px 10px; border-radius: 999px; font-size: 12px; }
.post-grid .card:not(.card--featured) .card__cat { position: static; background: none; color: var(--c-brand); padding: 0; }
.card-grid .card__cat, .related-grid .card__cat { top: 12px; }

/* faixa da newsletter: navy com azul claro no número */
.nl-band .ticket__off b { color: var(--c-ink); }

/* botão da loja no cabeçalho */
.header-actions .btn--secondary { border-color: var(--c-brand); color: var(--c-brand); }
.header-actions .btn--secondary:hover { background: var(--c-brand); color: #fff; }