@import './tokens.css';

/* ═══ Reset acotado ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Textura de papel muy sutil, sin imágenes ni peticiones extra */
  background-image:
    radial-gradient(circle at 12% 8%,  rgb(197 212 182 / 0.20) 0, transparent 42%),
    radial-gradient(circle at 92% 4%,  rgb(191 216 213 / 0.22) 0, transparent 38%),
    radial-gradient(circle at 50% 100%, rgb(231 169 75 / 0.06) 0, transparent 55%);
  background-attachment: fixed;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ═══ Foco visible, siempre ═══════════════════════════════════════════════ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ═══ Tipografía ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  color: var(--nexo-ink);
  text-wrap: balance;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); line-height: var(--leading-snug); }
h3 { font-size: var(--step-1); line-height: var(--leading-snug); font-weight: 600; }
h4 { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 700; }

p, li { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

strong { font-weight: 700; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--sage); color: var(--nexo-ink); }

/* ═══ Primitivas de composición ═══════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 78ch; }

.stack > * + * { margin-block-start: var(--flow, var(--sp-4)); }

.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: -100%;
  z-index: 100; background: var(--nexo-ink); color: var(--text-invert);
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; }

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Regla editorial con nodo: gramática del símbolo del logo */
.rule-node {
  border: 0; height: 1px; background: var(--rule);
  position: relative; margin-block: var(--sp-6);
}
.rule-node::after {
  content: ''; position: absolute; inset-block-start: -3px; inset-inline-start: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--nexo-forest);
}

/* ═══ Contenido largo (prose) ═════════════════════════════════════════════ */
.prose { max-width: var(--measure); font-size: var(--step-0); min-inline-size: 0; }
.prose > * + * { margin-block-start: var(--sp-5); }
.prose h2 {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
  position: relative;
}
.prose h2::before {
  content: ''; position: absolute; inset-block-start: -4px; inset-inline-start: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--nexo-leaf);
}
.prose h3 { margin-block-start: var(--sp-6); }
.prose h2 + p, .prose h3 + p { margin-block-start: var(--sp-3); }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: var(--sp-2); }
.prose ul { list-style: none; padding-inline-start: 1.15em; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: ''; position: absolute; inset-inline-start: -1.05em; inset-block-start: 0.66em;
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--nexo-forest);
}
.prose ol > li::marker { font-family: var(--font-mono); color: var(--nexo-forest); font-size: 0.9em; }
.prose blockquote {
  margin-inline: 0; padding: var(--sp-4) var(--sp-5);
  border-inline-start: 3px solid var(--nexo-leaf);
  background: var(--surface-raised);
  font-family: var(--font-display); font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose :where(table) th, .prose :where(table) td {
  text-align: start; padding: var(--sp-3); border-block-end: 1px solid var(--rule);
  vertical-align: top;
}
.prose :where(table) th { font-weight: 700; background: var(--surface-sunken); }
.prose figure { margin: 0; }
.prose figcaption {
  font-size: var(--step--1); color: var(--text-muted);
  margin-block-start: var(--sp-3); max-width: var(--measure-narrow);
}
.prose hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--sp-7); }

/* Toda tabla ancha debe poder desplazarse sin romper la página */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-inline-size: 100%;
}
.table-scroll table { min-width: 32rem; }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ═══ Botones y enlaces de acción ═════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.01em; text-decoration: none;
  padding: 0.7em 1.25em; border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--nexo-ink); color: var(--text-invert); }
.btn--primary:hover { background: var(--forest-deep); color: var(--text-invert); }
.btn--ghost { border-color: var(--rule-strong); color: var(--nexo-ink); background: transparent; }
.btn--ghost:hover { border-color: var(--nexo-ink); background: var(--surface-raised); color: var(--nexo-ink); }

/* Enlace con flecha que se desplaza (microinteracción discreta) */
.link-next { display: inline-flex; align-items: baseline; gap: 0.4em; font-weight: 600; text-decoration: none; }
.link-next::after {
  content: '→'; transition: transform var(--dur-1) var(--ease); font-family: var(--font-ui);
}
.link-next:hover { text-decoration: underline; }
.link-next:hover::after { transform: translateX(3px); }

/* ═══ Tarjetas ════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.card--link { transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
.card--link:hover { border-color: var(--nexo-forest); box-shadow: var(--shadow-md); }

/* ═══ Etiquetas ═══════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25em 0.7em; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--ink-70);
  border: 1px solid var(--rule);
}

/* ═══ Secciones oscuras (uso puntual, nunca bajo el logo) ═════════════════ */
.section-ink {
  background: var(--surface-ink); color: var(--text-invert);
  background-image: radial-gradient(circle at 85% 15%, rgb(127 166 74 / 0.14) 0, transparent 45%);
}
.section-ink :where(h1, h2, h3, h4) { color: var(--text-invert); }
.section-ink :where(p, li) { color: var(--text-invert-soft); }
.section-ink a { color: #C8DCA8; }
.section-ink a:hover { color: #FFFFFF; }
.section-ink :where(a):focus-visible { outline-color: #C8DCA8; }

/* ═══ Impresión ═══════════════════════════════════════════════════════════ */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .toc, .newsletter-card, .no-print { display: none !important; }
  .prose a::after { content: ' (' attr(href) ')'; font-size: 0.8em; word-break: break-all; }
}