/* Generado desde tokens.json con build-css.mjs — no editar a mano */
:root {
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-alt: #F6F4F1;
  --surface-sun: #FAF0D2;
  --surface-peach: #FCE9DD;
  --surface-sky: #E6F2F3;
  --surface-plum: #F3ECEF;
  --ink: #251F25;
  --ink-muted: #615762;
  --line: #E8DFD8;
  --line-strong: #A89AA0;
  --on-dark: #FBF8F2;
  --gold-100: #FDF8E7;
  --gold-300: #ECD577;
  --gold-700: #7D5E0C;
  --peach-300: #F2A176;
  --terracotta-700: #A4502A;
  --plum-500: #985D73;
  --plum-700: #7B4459;
  --sky-300: #9FD0D6;
  --sky-700: #2E6870;
  --focus: var(--gold-700);
  --font-display: "Gilda Display", "Cormorant Garamond", Georgia, serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --shadow-card: 0 1px 2px rgba(37,31,37,0.04), 0 8px 24px rgba(37,31,37,0.06);
  --control-height: 48px;
  --container: 1200px;
  --container-narrow: 760px;
}

.t-display-xl { font: 400 64px/68px var(--font-display); letter-spacing: -0.01em; }
.t-display-lg { font: 400 44px/50px var(--font-display); }
.t-display-md { font: 400 28px/34px var(--font-display); }
.t-display-sm { font: 400 21px/28px var(--font-display); }
.t-quote { font: 400 22px/32px var(--font-display); }
.t-body-lg { font: 400 18px/28px var(--font-sans); }
.t-body { font: 400 16px/26px var(--font-sans); }
.t-body-sm { font: 400 14px/22px var(--font-sans); }
.t-button { font: 500 16px/22px var(--font-sans); }
.t-label { font: 500 14px/20px var(--font-sans); }
.t-eyebrow { font: 500 12px/16px var(--font-sans); letter-spacing: 0.08em; }

/* Dharmakirti — componentes. Requiere tokens.css (variables --<token>). Prefijo dk- */
.dk{font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
.dk-h{font-family:var(--font-display);font-weight:400;color:var(--ink);margin:0}

/* Botón — fuente única de verdad para todos los CTA.
   Jerarquía: texto → forma → icono. Flecha opcional AL FINAL, integrada en la línea, sin recuadro. */
.dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
  min-height:var(--control-height);padding:0 var(--space-5);border-radius:var(--radius-sm);
  border:1px solid transparent;font-family:var(--font-sans);font-size:16px;line-height:22px;font-weight:500;
  letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s,border-color .2s,color .2s}
.dk-btn__arrow{width:16px;height:16px;flex:none;transition:transform .2s}
.dk-btn:hover .dk-btn__arrow,.dk-link:hover .dk-btn__arrow{transform:translateX(3px)}
.dk-btn:focus-visible,.dk-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Primary: el CTA de la vista. Uno por pantalla/sección. */
.dk-btn--primary{background:var(--gold-700);color:var(--on-dark)}
.dk-btn--primary:hover{background:var(--plum-700)}
/* Secondary: outline fino, sin relleno. */
.dk-btn--secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.dk-btn--secondary:hover{border-color:var(--ink);background:var(--surface-raised)}
/* Text / link: acción editorial dentro del contenido, sin contenedor. */
.dk-link{display:inline-flex;align-items:center;gap:8px;padding:4px 0;color:var(--gold-700);
  font-family:var(--font-sans);font-size:16px;line-height:22px;font-weight:500;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--gold-300);
  transition:color .2s,text-decoration-color .2s}
.dk-link:hover{color:var(--plum-700);text-decoration-color:currentColor}
.dk-btn--block{width:100%}

/* Eyebrow: pill con icono sobre cada H2 */
.dk-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--gold-700);
  font:500 12px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.dk-eyebrow svg{width:14px;height:14px}

/* Tarjetas */
.dk-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6)}
.dk-card--tint{background:var(--surface-alt);border-color:transparent}
.dk-card__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--surface-raised);border:1px solid var(--line);color:var(--gold-700);margin-bottom:var(--space-6)}
.dk-card__title{font:400 21px/28px var(--font-display);margin:0 0 var(--space-2)}
.dk-card__text{font:400 14px/22px var(--font-sans);color:var(--ink-muted);margin:0}

/* Panel blanco sobre foto (sección 'por qué') */
.dk-feature{background:var(--surface-raised);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-card);max-width:420px}
.dk-feature__item{display:grid;grid-template-columns:40px 1fr;gap:var(--space-4);margin-top:var(--space-6)}
.dk-feature__item .dk-card__icon{margin:0;background:var(--surface-plum);border:0}

/* Suscripción: audios a cambio de correo. El mecanismo principal de la web. */
.dk-subscribe{background:var(--surface-alt);border-radius:var(--radius-xl);padding:var(--space-12) var(--space-8);
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);align-items:center}
.dk-subscribe__form{display:flex;gap:var(--space-2);flex-wrap:wrap}
.dk-input{flex:1 1 220px;box-sizing:border-box;min-height:var(--control-height);padding:0 var(--space-4);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-raised);
  font-family:var(--font-sans);font-size:16px;line-height:22px;color:var(--ink)}
.dk-input::placeholder{color:var(--ink-muted)}
.dk-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--gold-700)}
.dk-subscribe__note{grid-column:1/-1;margin:0;font-size:14px;line-height:22px;color:var(--ink-muted)}
@media (max-width:720px){.dk-subscribe{grid-template-columns:1fr;padding:var(--space-8) var(--space-6)}}