/* repertorio/sda-site.css */
/* =========================================================
   Base das técnicas do repertório SDA (skill sda-web-repertorio) nas
   páginas do site. Carregar DEPOIS do style.css.
   Não redefine nada que o style.css já tem: só acrescenta os tokens
   que as técnicas usam e alinha a tipografia delas com a do site
   (.eyebrow = .sec-tag, .h2 = .sec-h, .lede = .sec-sub).
   Blocos: 1 Tokens · 2 Tipografia · 3 Superfícies · 4 Seções das técnicas
           5 Movimento reduzido
   ========================================================= */

/* ---------- 1. Tokens que o style.css não tem ---------- */
:root {
  --gold-text: #8A6A14;                        /* dourado para texto pequeno em fundo claro (4.5:1) */
  --on-navy: #F6F4F0;
  --on-navy-muted: rgba(246,244,240,.70);
  --on-navy-line: rgba(246,244,240,.14);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --wrap: 1240px;                              /* palco das técnicas fixadas */
  --gutter: 60px;                              /* mesmo respiro lateral do .section do site */
}
@media (max-width: 900px) { :root { --gutter: 24px; } }

/* ---------- 2. Tipografia das técnicas = tipografia do site ---------- */
.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .7; }
.h1, .h2, .h3 { font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1.08; }
.h1 { font-size: clamp(30px, 4vw, 52px); }
.h2 { font-size: clamp(28px, 3.5vw, 46px); }
.h3 { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.025em; line-height: 1.15; }
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--gold); }
.lede { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 46ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* o style.css zera margem e padding, mas não os marcadores de lista (o sda-base.css da skill zerava) */
.h04 ol, .h05 ol, .h07 ol, .h08 ol, .h09 ul, .h09 ol, .est-sec ul, .est-sec ol { list-style: none; }

/* ---------- 3. Superfícies ---------- */
.is-white { background: var(--white); }
.is-offwhite { background: var(--offwhite); }
.is-navy { background: var(--navy); color: var(--on-navy); }
.is-navy .h1, .is-navy .h2, .is-navy .h3 { color: var(--on-navy); }
.is-navy .h1 em, .is-navy .h2 em, .is-navy .h3 em { color: var(--gold-l); }
.is-navy .eyebrow { color: var(--gold-l); }
.is-navy .lede { color: var(--on-navy-muted); }
/* .sda-card no lugar do .card do repertório (o style.css já usa .card) */
.sda-card { background: var(--white); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); }

/* ---------- 4. Seções das técnicas ---------- */
/* Dentro das seções novas, o cinza de texto fica mais escuro: o --muted do site
   (45%) não passa de 4.5:1 em letra pequena, regra da camada fixa. */
.est-sec, .h04, .h05, .h07, .h08, .h09 { --muted: rgba(13,13,13,.62); }
.est-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.est-split .h2 { margin-top: 4px; }
.est-split .lede { margin-top: 16px; }
.est-link { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.est-link:hover { color: var(--gold-text); }
@media (max-width: 900px) {
  .est-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- 5. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .est-sec *, .h04 *, .h05 *, .h07 *, .h08 *, .h09 * { transition: none !important; animation: none !important; }
}