/* ==========================================================================
   Primer Filtro — sistema de diseño
   Mundo visual: editorial-utilitario. Papel cálido, tinta profunda, un solo
   acento reservado para acciones y estado. Serif para lectura, sans para
   interfaz: dos familias, dos trabajos distintos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Escala espacial, base 4 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Tipografía — escala de roles fija, razón ~1.2 */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.25rem;
  --t-3xl: 3rem;

  /* Medidas de lectura */
  --measure: 68ch;
  --measure-tight: 58ch;

  /* Radios */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* Movimiento — curvas fuertes; las nativas de CSS no tienen suficiente carácter */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press: 140ms;
  --d-hover: 180ms;
  --d-pop: 200ms;
  --d-panel: 260ms;

  /* Ancho de página */
  --page: 72rem;
}

/* Tema claro — papel cálido */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #faf8f4;
  --bg-sunken: #f2eee6;
  --surface: #ffffff;
  --surface-2: #f7f4ee;

  --ink: #1b1a17;
  --ink-2: #4a4740;
  --ink-3: #6d6961;
  --ink-faint: #6b665d;

  --line: #e2dcd0;
  --line-strong: #cbc3b4;

  --accent: #0f5f5c;
  --accent-hover: #0c4d4a;
  --accent-soft: #e2f0ef;
  --accent-ink: #ffffff;

  --good: #1f6b3f;
  --good-soft: #e3f1e8;
  --warn: #8a5a10;
  --warn-soft: #fbefdb;
  --bad: #9a2f27;
  --bad-soft: #fbe8e6;

  --shadow-sm: 0 1px 2px rgba(35, 30, 20, 0.06), 0 2px 6px rgba(35, 30, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(35, 30, 20, 0.06), 0 8px 20px rgba(35, 30, 20, 0.07);
  --shadow-lg: 0 4px 8px rgba(35, 30, 20, 0.07), 0 18px 44px rgba(35, 30, 20, 0.1);

  --weight-body: 400;
  --leading-prose: 1.68;
  --tracking-body: 0;
}

/* Tema oscuro — compensado en los tres ejes: interlínea, tracking y peso */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #14130f;
    --bg-sunken: #0e0d0a;
    --surface: #1d1b16;
    --surface-2: #24211b;

    --ink: #f2efe8;
    --ink-2: #c4bfb4;
    --ink-3: #9b958a;
    --ink-faint: #918b80;

    --line: #322e26;
    --line-strong: #4a453a;

    --accent: #55b8b2;
    --accent-hover: #6fc9c3;
    --accent-soft: #14312f;
    --accent-ink: #0b1a19;

    --good: #6fc48c;
    --good-soft: #14291c;
    --warn: #dda44a;
    --warn-soft: #2d2313;
    --bad: #e08078;
    --bad-soft: #2e1815;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.44);

    --weight-body: 420;
    --leading-prose: 1.74;
    --tracking-body: 0.005em;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14130f;
  --bg-sunken: #0e0d0a;
  --surface: #1d1b16;
  --surface-2: #24211b;

  --ink: #f2efe8;
  --ink-2: #c4bfb4;
  --ink-3: #9b958a;
  --ink-faint: #918b80;

  --line: #322e26;
  --line-strong: #4a453a;

  --accent: #55b8b2;
  --accent-hover: #6fc9c3;
  --accent-soft: #14312f;
  --accent-ink: #0b1a19;

  --good: #6fc48c;
  --good-soft: #14291c;
  --warn: #dda44a;
  --warn-soft: #2d2313;
  --bad: #e08078;
  --bad-soft: #2e1815;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.44);

  --weight-body: 420;
  --leading-prose: 1.74;
  --tracking-body: 0.005em;
}

/* --------------------------------------------------------------------------
   2. Reinicio y superficies del navegador
   Las partes que no dibujamos también cargan el diseño.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--line-strong) transparent;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  font-weight: var(--weight-body);
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

:where(input, textarea) {
  caret-color: var(--accent);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

:where(img, svg, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(button, input, textarea, select) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-read);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
  color: var(--ink);
}

h1 {
  font-size: var(--t-2xl);
  letter-spacing: -0.028em;
}

h2 {
  font-size: var(--t-xl);
}

h3 {
  font-size: var(--t-lg);
  letter-spacing: -0.014em;
}

h4 {
  font-size: var(--t-md);
  letter-spacing: -0.008em;
}

@media (min-width: 52rem) {
  h1 {
    font-size: var(--t-3xl);
    letter-spacing: -0.032em;
  }
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition: text-decoration-color var(--d-hover) var(--ease-out),
    color var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-color: currentColor;
  }
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   4. Estructura
   -------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 40rem) {
  .page {
    padding-inline: var(--s-8);
  }
}

.main {
  flex: 1;
  padding-block: var(--s-10) var(--s-20);
}

@media (min-width: 52rem) {
  .main {
    padding-block: var(--s-16) var(--s-24);
  }
}

.stack > * + * {
  margin-top: var(--s-4);
}

.stack-lg > * + * {
  margin-top: var(--s-8);
}

/* --------------------------------------------------------------------------
   5. Cabecera y navegación
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: 60px;
}

.wordmark {
  font-family: var(--font-read);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark__mark {
  width: 19px;
  height: 19px;
  color: var(--accent);
  flex-shrink: 0;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}

@media (min-width: 56rem) {
  .nav {
    display: flex;
  }
}

.nav__link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: background-color var(--d-hover) var(--ease-out),
    color var(--d-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    background: var(--surface-2);
    color: var(--ink);
  }
}

.nav__link[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-2);
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}

@media (min-width: 56rem) {
  .masthead__tools {
    margin-left: var(--s-3);
  }
}

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out),
    color var(--d-hover) var(--ease-out),
    transform var(--d-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover {
    background: var(--surface-2);
    color: var(--ink);
  }
}

.icon-button:active {
  transform: scale(0.94);
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 56rem) {
  .nav-toggle {
    display: none;
  }
}

/* Menú móvil */
.mobile-nav {
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__list {
  list-style: none;
  padding: var(--s-2) 0 var(--s-4);
  margin: 0;
}

.mobile-nav__list a {
  display: block;
  padding: var(--s-3) 0;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.mobile-nav__list a[aria-current="page"] {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.6875rem var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--t-base);
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease-out),
    border-color var(--d-hover) var(--ease-out),
    color var(--d-hover) var(--ease-out),
    box-shadow var(--d-hover) var(--ease-out),
    transform var(--d-press) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  color: var(--accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-md);
  }
}

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn--secondary:hover {
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn--secondary:hover {
    background: var(--surface-2);
    border-color: var(--ink-faint);
  }
}

.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  padding-inline: var(--s-3);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
  }
}

.btn--sm {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */

.field {
  display: block;
}

.field__label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-1);
}

.field__hint {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--t-base);
  transition: border-color var(--d-hover) var(--ease-out),
    box-shadow var(--d-hover) var(--ease-out),
    background-color var(--d-hover) var(--ease-out);
}

.textarea {
  min-height: 15rem;
  resize: vertical;
  line-height: 1.6;
  font-family: var(--font-ui);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-faint);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.select {
  appearance: none;
  padding-right: var(--s-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. Bloques de contenido
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

@media (min-width: 40rem) {
  .panel {
    padding: var(--s-6);
  }
}

.note {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

.note strong {
  color: var(--ink);
}

.eyebrow-free-heading {
  margin-bottom: var(--s-4);
}

/* Prosa de lectura */
.prose {
  font-family: var(--font-read);
  font-size: var(--t-md);
  line-height: var(--leading-prose);
  color: var(--ink-2);
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--s-5);
}

.prose h2 {
  margin-top: var(--s-12);
  margin-bottom: calc(var(--s-5) * -1 + var(--s-4));
  color: var(--ink);
}

.prose h3 {
  margin-top: var(--s-8);
  margin-bottom: calc(var(--s-5) * -1 + var(--s-3));
  color: var(--ink);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--s-4);
}

.prose ul,
.prose ol {
  padding-left: var(--s-6);
}

.prose li + li {
  margin-top: var(--s-2);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  color: var(--ink-3);
  font-style: italic;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  color: var(--ink);
  font-weight: 600;
}

.prose figure {
  margin: 0;
}

.prose figcaption {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   9. Pie
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: var(--s-10) var(--s-8);
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.footer__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-10);
  }
}

.footer h2 {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer li + li {
  margin-top: var(--s-2);
}

.footer a {
  color: var(--ink-2);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: var(--accent);
  }
}

.footer__legal {
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   10. Utilidades
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-md);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--d-pop) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--accent-ink);
}

.lede {
  font-family: var(--font-read);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure-tight);
}

@media (min-width: 52rem) {
  .lede {
    font-size: var(--t-lg);
    line-height: 1.52;
  }
}

.meta {
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--s-10);
}

/* Reducción de movimiento: se conservan opacidad y color, se retira el desplazamiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn,
  .icon-button {
    transition: background-color 120ms linear, color 120ms linear !important;
  }

  .btn:active,
  .icon-button:active {
    transform: none;
  }
}

@media print {
  .masthead,
  .footer,
  .mobile-nav,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* --------------------------------------------------------------------------
   11. Índice lateral de guía
   -------------------------------------------------------------------------- */

.toc {
  display: none;
}

@media (min-width: 72rem) {
  article.has-toc {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) 15rem;
    /* Solo separación entre columnas: el espaciado vertical lo llevan los
       márgenes del propio texto, y una separación de fila lo duplicaría. */
    column-gap: var(--s-16);
    row-gap: 0;
    align-items: start;
    max-width: none !important;
  }

  .article__body {
    grid-column: 1;
    min-width: 0;
  }

  .toc {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 84px;
    padding-left: var(--s-5);
    border-left: 1px solid var(--line);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .toc__title {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-3);
  }

  .toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
  }

  .toc__list li + li {
    margin-top: var(--s-2);
  }

  .toc__list a {
    display: block;
    font-size: var(--t-sm);
    line-height: 1.45;
    color: var(--ink-3);
    text-decoration: none;
    padding: var(--s-1) 0;
    transition: color var(--d-hover) var(--ease-out);
  }

  .toc__list a[aria-current="true"] {
    color: var(--accent);
    font-weight: 550;
  }
}

@media (hover: hover) and (pointer: fine) {
  .toc__list a:hover {
    color: var(--ink);
  }
}

@media print {
  .toc {
    display: none !important;
  }
}