/* ============================================================
   Prometheus — Base styles (reset + tipografia + utilities)
   Carga DESPUES de tokens.css.
   Target compilado: <12 KB minificado.
   ============================================================ */

/* =========== RESET MINIMO (Josh Comeau pattern adaptado) =========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* =========== SKIP LINK (a11y) =========== */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  background: var(--color-navy-900);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* =========== FOCUS VISIBLE (a11y) =========== */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* =========== TIPOGRAFIA SEMANTICA =========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-headline);
  line-height: var(--leading-snug);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.2rem, 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-black);
  margin-bottom: var(--space-4);
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, var(--text-3xl));
  margin-bottom: var(--space-4);
}
h3 {
  font-size: clamp(1.35rem, 2.4vw, var(--text-2xl));
  margin-bottom: var(--space-3);
}
h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}
h5 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

p {
  margin-bottom: var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200, 16, 46, .35);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

strong, b { font-weight: var(--weight-semibold); color: var(--text-primary); }
em, i { font-style: italic; }

small { font-size: var(--text-sm); }
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-soft);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
}

blockquote {
  border-left: 3px solid var(--color-fire-600);
  padding: var(--space-3) var(--space-6);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--text-secondary);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}

/* =========== LAYOUT UTILITIES =========== */
.container {
  width: min(var(--container-wide), 100% - calc(var(--container-pad) * 2));
  margin-inline: auto;
}
.container--prose  { max-width: var(--container-prose); }
.container--narrow { max-width: var(--container-narrow); }
.container--base   { max-width: var(--container-base); }

.section {
  padding-block: var(--section-py);
}
@media (min-width: 768px) {
  .section { padding-block: var(--section-py-lg); }
}
.section--soft   { background: var(--bg-soft); }
.section--dark   { background: var(--bg-dark);   color: var(--text-on-dark); }
.section--darker { background: var(--bg-darker); color: var(--text-on-dark); }
.section--accent { background: var(--bg-accent); }
.section--accent-soft { background: var(--bg-accent-soft); }
.section--fire   { background: var(--color-fire-600); color: #fff; }

.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--darker h1, .section--darker h2, .section--darker h3, .section--darker h4 {
  color: var(--text-on-dark);
}
.section--dark p, .section--darker p { color: var(--text-on-dark-soft); }
.section--dark a, .section--darker a { color: var(--link-on-dark); }

/* =========== TYPOGRAPHIC HELPERS =========== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-eyebrow);
  margin-bottom: var(--space-3);
}
.section--dark .eyebrow, .section--darker .eyebrow { color: var(--color-fire-500); }
.section--fire .eyebrow { color: #fff; }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 0; }

/* =========== PROSE (contenido editorial generado por writer) =========== */
.prose {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  max-width: var(--container-prose);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose h4 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose ul, .prose ol {
  margin-block: var(--space-4);
  padding-left: var(--space-6);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-fire-600); }
.prose a { font-weight: var(--weight-medium); }
.prose img {
  margin-block: var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.prose figure { margin-block: var(--space-8); }
.prose figcaption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-6);
  font-size: var(--text-sm);
}
.prose th, .prose td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.prose th {
  background: var(--bg-soft);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-headline);
}

/* =========== SCREEN READER ONLY =========== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}