/* =========================================================
   N1 - Tokens + tipografía base
   ========================================================= */

/* ---------------------------------------------------------
   N2 - Design tokens
   --------------------------------------------------------- */

:root {
  /* N3 - Color: clusters */
  --cluster-color-1: #ffffff;
  --cluster-color-2: #f0f0ee;
  --cluster-color-3: #fffefb;
  --cluster-color-4: #fbfaf6;
  --cluster-color-5: #f6f4ef;

  --cluster-color-6: #1f1f1f;
  --cluster-color-7: #5f5f5a;
  --cluster-color-8: #777770;

  --cluster-color-9: #e0ddd4;

  --cluster-color-10: #243b53;
  --cluster-color-11: #1a2d40;
  --cluster-color-12: #8a6f3d;

  --cluster-color-13: #2f6b4f;
  --cluster-color-14: #9a6b1f;
  --cluster-color-15: #9b2c2c;

  /* N3 - Color: funcionales de plantilla */

  /* Base global */
  --color-body-text: var(--cluster-color-6);
  --color-body-background: var(--cluster-color-1);
  --color-global-heading: var(--cluster-color-6);
  --color-global-link: var(--cluster-color-10);
  --color-global-link-hover: var(--cluster-color-11);
  --color-focus-outline: var(--cluster-color-12);
  --color-mark-background: color-mix(
    in srgb,
    var(--cluster-color-12) 24%,
    transparent
  );
  --color-blockquote-text: var(--cluster-color-7);
  --color-blockquote-border: var(--cluster-color-9);
  --color-code-background: var(--cluster-color-5);
  --color-rule: var(--cluster-color-9);
  --color-selection-text: var(--cluster-color-1);
  --color-selection-background: var(--cluster-color-10);

  /* Página */
  --color-page-background: var(--cluster-color-2);
  --color-shell-background: var(--cluster-color-3);

  /* Header */
  --color-header-background: var(--cluster-color-1);
  --color-header-border: var(--cluster-color-9);
  --color-header-action-text: var(--cluster-color-6);
  --color-header-action-text-hover: color-mix(
    in srgb,
    var(--cluster-color-6) 72%,
    transparent
  );
  --color-header-action-background-hover: transparent;

  /* Navegación / índice */
  --color-sidebar-background: var(--cluster-color-4);
  --color-sidebar-border: var(--cluster-color-9);
  --color-toc-title: var(--cluster-color-6);
  --color-toc-close: var(--cluster-color-6);
  --color-toc-close-background-hover: var(--cluster-color-5);
  --color-toc-link-text: var(--cluster-color-6);
  --color-toc-link-hover: var(--cluster-color-11);
  --color-toc-link-background-hover: color-mix(
    in srgb,
    var(--cluster-color-5) 56%,
    transparent
  );
  --color-toc-link-active: var(--cluster-color-6);
  --color-toc-link-active-marker: var(--cluster-color-12);
  /* Contenido legal */
  --color-content-text: var(--cluster-color-6);
  --color-content-strong: var(--cluster-color-6);
  --color-content-heading: var(--cluster-color-6);
  --color-content-lead: var(--cluster-color-7);
  --color-content-section-border: var(--cluster-color-9);
  --color-content-link: var(--cluster-color-10);
  --color-content-link-hover: var(--cluster-color-11);
  --color-content-link-visited: var(--cluster-color-10);
  --color-content-link-underline: color-mix(
    in srgb,
    var(--color-content-link) 45%,
    transparent
  );
  --color-content-marker: var(--cluster-color-12);

  /* Índice inline */
  --color-inline-index-background: var(--cluster-color-4);
  --color-inline-index-border: var(--cluster-color-9);
  --color-inline-index-title: var(--cluster-color-7);
  --color-inline-index-link: var(--cluster-color-10);
  --color-inline-index-link-hover: var(--cluster-color-11);
  --color-inline-index-link-background-hover: color-mix(
    in srgb,
    var(--cluster-color-5) 56%,
    transparent
  );
  --color-inline-index-subitem: var(--cluster-color-7);

  /* Cajas informativas */
  --color-box-background: var(--cluster-color-4);
  --color-box-border: var(--cluster-color-9);
  --color-box-accent: var(--cluster-color-12);
  --color-box-text: var(--cluster-color-7);
  --color-box-title: var(--cluster-color-6);

  /* Tooltips */
  --color-tooltip-trigger: var(--cluster-color-10);
  --color-tooltip-trigger-hover: var(--cluster-color-11);
  --color-tooltip-trigger-background-hover: color-mix(
    in srgb,
    var(--cluster-color-12) 12%,
    transparent
  );
  --color-tooltip-background: var(--cluster-color-1);
  --color-tooltip-text: var(--cluster-color-6);
  --color-tooltip-border: var(--cluster-color-9);
  --color-tooltip-arrow-background: var(--color-tooltip-background);
  --color-tooltip-arrow-border: var(--color-tooltip-border);
  --color-tooltip-missing: var(--cluster-color-15);

  /* Footer */
  --color-footer-background: var(--cluster-color-1);
  --color-footer-border: var(--cluster-color-9);
  --color-footer-text: var(--cluster-color-7);
  --color-footer-text-soft: var(--cluster-color-8);
  --color-footer-version: var(--cluster-color-8);
  --color-footer-action-text: var(--cluster-color-6);
  --color-footer-action-text-hover: color-mix(
    in srgb,
    var(--cluster-color-6) 72%,
    transparent
  );
  --color-footer-link: var(--color-footer-action-text);
  --color-footer-link-visited: var(--color-footer-action-text);
  --color-footer-link-hover: var(--color-footer-action-text-hover);
  --color-footer-link-background-hover: transparent;
  --color-footer-back-top: var(--color-footer-action-text);
  --color-footer-back-top-hover: var(--color-footer-action-text-hover);
  --color-footer-back-top-background-hover: transparent;
  --color-footer-back-top-border-mobile: var(--cluster-color-9);
  --color-footer-back-top-background-mobile: var(--cluster-color-4);

  /* N3 - Tipografía: clusters */
  --cluster-font-1:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cluster-font-2: Georgia, "Times New Roman", serif;

  --cluster-font-3:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;

  /* N3 - Tipografía: funcionales */
  --font-content: var(--cluster-font-1);
  --font-title: var(--cluster-font-1);
  --font-interface: var(--cluster-font-1);
  --font-code: var(--cluster-font-3);

  /* N3 - Tipografía: tamaños */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: clamp(2.5rem, 5vw, 4rem);

  /* N3 - Tipografía: pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* N3 - Tipografía: interlineado */
  --line-height-heading: 1.25;
  --line-height-base: 1.6;
  --line-height-loose: 1.75;

  /* N3 - Espaciado */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* N3 - Bordes y radios */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* N3 - Sombras */
  --shadow-soft: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);

  /* N3 - Transiciones */
  --transition-base: 160ms ease;
}

/* ---------------------------------------------------------
   N2 - Tipografía base
   --------------------------------------------------------- */

html {
  font-size: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-content);
  font-size: clamp(
    var(--font-size-sm),
    calc(0.875rem + 0.35vw),
    var(--font-size-base)
  );
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-body-text);
  background: var(--color-body-background);
}

/* N3 - Texto general */

p {
  margin-block: 0 1em;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--font-size-sm);
}

mark {
  color: inherit;
  background: var(--color-mark-background);
}

/* N3 - Encabezados */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 0.6em;
  font-family: var(--font-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-global-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: -0.04em;
}

h2 {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--font-size-xl);
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-md);
}

h6 {
  font-size: var(--font-size-base);
}

/* N3 - Enlaces */

a {
  color: var(--color-global-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition:
    color var(--transition-base),
    text-decoration-color var(--transition-base);
}

a:hover {
  color: var(--color-global-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 0.2em;
}

/* N3 - Listas */

ul,
ol {
  margin-block: 0 1em;
  padding-inline-start: 1.35em;
}

li + li {
  margin-block-start: 0.35em;
}

/* N3 - Citas */

blockquote {
  margin: var(--space-lg) 0;
  padding-inline-start: var(--space-md);
  color: var(--color-blockquote-text);
  border-inline-start: 3px solid var(--color-blockquote-border);
}

/* N3 - Código inline */

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

code {
  padding: 0.12em 0.28em;
  border-radius: var(--radius-sm);
  background: var(--color-code-background);
}

/* N3 - Separadores y selección */

hr {
  border: 0;
  border-block-start: 1px solid var(--color-rule);
  margin-block: var(--space-xl);
}

::selection {
  color: var(--color-selection-text);
  background: var(--color-selection-background);
}

/* ===========================================================================
   N1 - BASE
   =========================================================================== */

/* N2 - B|RESET */

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

/* N2 - B|BODY */

body {
  min-height: 100vh;
  background: var(--color-page-background);
}

/* N2 - B|MEDIA */

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* ===========================================================================
   N1 - LAYOUT GENERAL + BREAKPOINTS
   =========================================================================== */

/* ---------------------------------------------------------
   N2 - L|TOKENS DE LAYOUT
   --------------------------------------------------------- */

:root {
  /* N3 - Header */
  --layout-header-height: calc(
    2.5rem + 1.75rem + 1px
  ); /* Altura funcional del header en layout lateral para sidebar sticky y anclas; debe acompañar cualquier cambio real de altura del header en theme.css. */

  --layout-header-main-height-mobile: clamp(
    3.5rem,
    calc(3.1rem + 2vw),
    4.0625rem
  ); /* Altura funcional del header móvil para offsets de sidebar/anclas; acompaña la escala fluida de la barra principal. */

  /* No se define --layout-header-height-mobile por ahora: la altura móvil funcional coincide con --layout-header-main-height-mobile. Reintroducir solo si el header móvil tiene más de una zona persistente. */

  --layout-toc-bar-height-mobile: clamp(
    1.875rem,
    calc(1.65rem + 1.15vw),
    2.25rem
  ); /* Offset aproximado y fluido del índice móvil abierto; no representa la altura total del desplegable. */

  --layout-anchor-offset-mobile: calc(
    var(--layout-header-main-height-mobile) +
      var(--layout-toc-bar-height-mobile) + var(--space-md)
  ); /* Offset funcional derivado para anclas cuando el índice móvil está abierto. */

  /* N3 - Sidebar */
  --layout-sidebar-width: clamp(
    16rem,
    34vw,
    22rem
  ); /* Ancho fluido de la sidebar lateral desde 48rem; crece hasta su máximo sin necesitar un breakpoint adicional. */

  /* N3 - Contenido */

  /* Sin límite propio de ancho para .content por ahora; si se decide controlar la medida de lectura, reintroducir un token específico. */
  --layout-content-anchor-end-space: 100vh; /* Colchón funcional final para que las últimas anclas puedan subir en el viewport. */

  /* N3 - Página */
  --layout-page-max-width: 68rem; /* Ancho máximo del shell y del dock fijo; revisar junto con sidebar y padding interno si cambian las proporciones del layout lateral. */

  /* N3 - Footer */
  --layout-footer-dock-height: clamp(
    2.75rem,
    calc(2.6rem + 0.75vw),
    3rem
  ); /* Altura fluida del dock fijo en versión móvil; en 48rem pasa a la altura del footer completo. */

  /* N3 - Separación entre sidebar y contenido */

  /* Sin column-gap entre sidebar y content: la separación se materializa con el padding lateral de .content cuando la sidebar lateral está visible. */

  --layout-content-padding-x-with-sidebar: clamp(
    var(--space-lg),
    calc(1rem + 2vw),
    2.75rem
  ); /* Aire horizontal de .content cuando la sidebar lateral está visible; se aplica a ambos lados mediante padding-inline. */

  /* N3 - Padding */

  --layout-page-padding-x: clamp(
    var(--space-sm),
    calc(0.5rem + 2.5vw),
    var(--space-3xl)
  ); /* Coordina la alineación horizontal de header, content, sidebar y footer desde una base mínima fluida. */

  --layout-content-padding-x: var(
    --layout-page-padding-x
  ); /* Padding lateral propio de .content; actualmente alineado con el padding general de página. */

  --layout-content-padding-y: clamp(
    var(--space-xl),
    calc(1.45rem + 2.75vw),
    var(--space-2xl)
  ); /* Aire vertical principal fluido de .content desde anchuras pequeñas hasta el máximo de la plantilla. */

  --layout-sidebar-padding-x: var(
    --layout-page-padding-x
  ); /* Padding izquierdo de la sidebar lateral; alineado con el padding general de página. El índice móvil usa directamente --layout-page-padding-x. */

  --layout-sidebar-padding-end: var(
    --space-md
  ); /* Padding derecho de la sidebar lateral; no crece con el ancho de pantalla para evitar una separación excesiva con .content. */
  --layout-sidebar-padding-y: var(
    --space-xl
  ); /* Padding vertical de la sidebar lateral; revisar si debe pasar a escala fluida según altura disponible. */

  /* N3 - Breakpoints de referencia */

  /*
  20rem = 320px → excepción extrema: botones sin texto y microajustes locales
  48rem = 768px → cambio estructural: sidebar lateral, layout en dos columnas y footer completo
  64rem / 80rem → no activos; usar solo si aparece una necesidad funcional que no pueda resolverse con la base fluida
  */
}

/* ---------------------------------------------------------
   N2 - L|ESTRUCTURA BASE
   --------------------------------------------------------- */

.page-shell {
  width: min(100%, var(--layout-page-max-width));
  margin-inline: auto;
  background: var(--color-shell-background);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  background: var(--color-shell-background);
}

.site-footer {
  background: var(--color-footer-background);
}

.sidebar {
  min-width: 0;
}

.content {
  min-width: 0;
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   N1 - HEADER
   ========================================================================== */

/* N2 - H|ESTRUCTURA GENERAL */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  font-family: var(--font-interface);
  background: var(--color-header-background);
}

/* N2 - H|BARRA PRINCIPAL */

.site-header__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "toggle brand button";
  align-items: center;
  gap: clamp(var(--space-xs), 2.5vw, var(--space-md));
  min-height: var(--layout-header-main-height-mobile);
  padding-block: clamp(0.5625rem, calc(0.45rem + 0.55vw), 0.875rem);
  padding-inline: var(--layout-page-padding-x);
  background: var(--color-header-background);
  border-bottom: 1px solid var(--color-header-border);
}

.site-header__main > * {
  min-width: 0;
}

/* N2 - H|BOTÓN ÍNDICE */

.sidebar-toggle {
  grid-area: toggle;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: clamp(2rem, calc(1.82rem + 0.9vw), 2.25rem);
  max-width: 100%;
  padding-block: clamp(0.4rem, calc(0.32rem + 0.4vw), 0.5rem);
  padding-inline-start: 0;
  padding-inline-end: clamp(0.35rem, 1.5vw, 0.5rem);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-header-action-text);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  color: var(--color-header-action-text-hover);
  background: var(--color-header-action-background-hover);
}

.sidebar-toggle__icons {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: clamp(0.875rem, calc(0.785rem + 0.45vw), 1rem);
  height: clamp(0.875rem, calc(0.785rem + 0.45vw), 1rem);
}

.sidebar-toggle__icon {
  grid-area: 1 / 1;
  display: none;
  width: clamp(0.875rem, calc(0.785rem + 0.45vw), 1rem);
  height: clamp(0.875rem, calc(0.785rem + 0.45vw), 1rem);
}

/* Base: índice compacto cerrado → abrir */
.sidebar-toggle[aria-expanded="false"] .sidebar-toggle__icon--show-mobile {
  display: block;
}

/* Base: índice compacto abierto → cerrar */
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon--hide-mobile {
  display: block;
}

.sidebar-toggle__label {
  line-height: 1;
}

/* N2 - H|LOGOTIPO */

.brand {
  grid-area: brand;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: clamp(2.25rem, calc(2rem + 1.25vw), 2.75rem);
  color: inherit;
  text-decoration: none;
}

.brand__picture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 0;
}

.brand__logo {
  display: block;
  width: auto;
  height: clamp(2rem, calc(1.7rem + 1.5vw), 2.5rem);
  max-width: min(clamp(8rem, 34vw, 11.25rem), 100%);
}

/* N2 - H|BOTÓN VOLVER */

.btn {
  grid-area: button;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: clamp(2rem, calc(1.82rem + 0.9vw), 2.25rem);
  max-width: 100%;
  padding-block: clamp(0.4rem, calc(0.32rem + 0.4vw), 0.5rem);
  padding-inline-start: clamp(0.35rem, 1.5vw, 0.5rem);
  padding-inline-end: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-header-action-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  color: var(--color-header-action-text-hover);
  background: var(--color-header-action-background-hover);
}

.btn__icon {
  flex: 0 0 auto;
  width: clamp(0.875rem, calc(0.785rem + 0.45vw), 1rem);
  height: clamp(0.875rem, calc(0.785rem + 0.45vw), 1rem);
}

.btn__label {
  line-height: 1;
}

/* ===========================================================================
   N1 - NAVEGACIÓN LEGAL
   =========================================================================== */

/* N2 - NL|PANEL ÍNDICE MÓVIL */

.sidebar {
  position: sticky;
  top: var(--layout-header-main-height-mobile);
  z-index: 8;
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(var(--space-xs), 2vw, var(--space-sm));
  font-family: var(--font-interface);
  background: var(--color-sidebar-background);
  border-bottom: 1px solid var(--color-sidebar-border);
  padding-block: clamp(0.2rem, calc(0.05rem + 0.75vw), var(--space-xs));
  padding-inline: var(--layout-page-padding-x);
}

.page-shell.is-mobile-toc-open .sidebar {
  display: grid;
}

.sidebar-title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* N3 - NL|SIDEBAR TOC|Botón cerrar móvil */

.toc-close {
  grid-column: 2;
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: clamp(1.5rem, calc(1.32rem + 0.9vw), 1.75rem);
  height: clamp(1.5rem, calc(1.32rem + 0.9vw), 1.75rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-toc-close);
  background: transparent;
  cursor: pointer;
}

.page-shell.is-mobile-toc-open .toc-close {
  display: inline-flex;
}

.toc-close:hover,
.toc-close:focus-visible {
  background: var(--color-toc-close-background-hover);
}

.toc-close__icon {
  width: clamp(0.75rem, calc(0.66rem + 0.45vw), 0.875rem);
  height: clamp(0.75rem, calc(0.66rem + 0.45vw), 0.875rem);
}

/* N3 - NL|SIDEBAR TOC|Lista */

.toc {
  grid-column: 1 / -1;
  display: none;
  gap: var(--space-xs);
  max-width: 100%;
}

.page-shell.is-mobile-toc-open .toc {
  display: grid;
  max-height: min(60vh, 24rem);
  margin-block-start: clamp(0.2rem, calc(0.05rem + 0.75vw), var(--space-xs));
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.toc-link {
  display: block;
  padding-block: clamp(0.35rem, calc(0.32rem + 0.2vw), 0.4rem);
  padding-inline: clamp(0.45rem, calc(0.4rem + 0.3vw), 0.5rem);
  border-radius: var(--radius-md);
  color: var(--color-toc-link-text);
  opacity: 0.9;
  text-decoration: none;
  transition:
    color var(--transition-base),
    background-color var(--transition-base),
    opacity var(--transition-base);
}

.toc-link:hover {
  color: var(--color-toc-link-hover);
  opacity: 1;
  background: var(--color-toc-link-background-hover);
}

.toc-link.is-active {
  color: var(--color-toc-link-active);
  opacity: 1;
  background: var(--color-toc-link-background-hover);
  font-weight: inherit;
}

.sidebar .toc-link.is-active {
  box-shadow: inset 0.1875rem 0 0 var(--color-toc-link-active-marker);
}

.toc-link.is-active:hover {
  color: var(--color-toc-link-hover);
  background: var(--color-toc-link-background-hover);
}

.toc-h3 {
  padding-inline-start: clamp(var(--space-sm), calc(0.55rem + 1.25vw), 1.25rem);
  opacity: 0.8;
}

/* N2 - NL|OFF-CANVAS MÓVIL */
/* No aplicado: de momento el patrón recomendado es desplegable compacto. */

/* N2 - NL|OFFSET DE ANCLAS */

.content :is(h2, h3) {
  scroll-margin-top: calc(
    var(--layout-header-main-height-mobile) + var(--space-md)
  );
}

.page-shell.is-mobile-toc-open .content :is(h2, h3) {
  scroll-margin-top: var(--layout-anchor-offset-mobile);
}

/* ===========================================================================
   N1 - CONTENIDO LEGAL
   =========================================================================== */

/* N2 - CL|CONTENT AREA */

.content {
  padding-block-start: var(--layout-content-padding-y);
  padding-block-end: calc(
    var(--layout-content-padding-y) + var(--layout-content-anchor-end-space) +
      var(--layout-footer-dock-height)
  );
  padding-inline: var(--layout-content-padding-x);
  color: var(--color-content-text);
  overflow-wrap: anywhere;
}

.content > :first-child {
  margin-block-start: 0;
}

.content > :last-child {
  margin-block-end: 0;
}

/* N2 - CL|TÍTULOS */

.content h1 {
  margin-block: 0 var(--space-md);
  color: var(--color-content-heading);
  font-size: clamp(1.875rem, calc(1.45rem + 2.15vw), 3rem);
  line-height: clamp(1.08, calc(1.12 - 0.03vw), 1.1);
  letter-spacing: clamp(-0.045em, -0.03em - 0.01vw, -0.035em);
}

.content h2 {
  margin-block: clamp(var(--space-xl), calc(1.5rem + 3vw), var(--space-3xl))
    var(--space-md);
  padding-block-start: clamp(
    var(--space-lg),
    calc(1.1rem + 2vw),
    var(--space-xl)
  );
  border-block-start: 1px solid var(--color-content-section-border);
  color: var(--color-content-heading);
  font-size: clamp(1.65rem, calc(1.45rem + 1vw), var(--font-size-2xl));
  line-height: clamp(1.15, calc(1.19 - 0.02vw), 1.18);
  letter-spacing: clamp(-0.035em, -0.025em - 0.006vw, -0.03em);
}

.content > h2:first-of-type {
  margin-block-start: clamp(
    var(--space-xl),
    calc(1.45rem + 2.75vw),
    var(--space-2xl)
  );
}

.content h3 {
  margin-block: clamp(var(--space-lg), calc(1.2rem + 2.2vw), var(--space-2xl))
    var(--space-sm);
  color: var(--color-content-heading);
  font-size: clamp(1.35rem, calc(1.2rem + 0.75vw), var(--font-size-xl));
  line-height: clamp(1.2, calc(1.23 - 0.015vw), 1.22);
  letter-spacing: -0.025em;
}

.content h2 + h3 {
  margin-block-start: var(--space-lg);
}

.content h4 {
  margin-block: clamp(var(--space-lg), calc(1.15rem + 1.5vw), var(--space-xl))
    var(--space-xs);
  color: var(--color-content-heading);
  font-size: clamp(
    var(--font-size-md),
    calc(1rem + 0.8vw),
    var(--font-size-lg)
  );
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* N2 - CL|PÁRRAFOS */

.content p {
  margin-block: 0 var(--space-md);
}

.content p,
.content li {
  line-height: clamp(1.65, calc(1.56 + 0.5vw), var(--line-height-loose));
}

.content > h1 + p,
.content > h1 + .inline-index + p {
  margin-block-end: clamp(
    var(--space-lg),
    calc(1.15rem + 1.5vw),
    var(--space-xl)
  );
  color: var(--color-content-lead);
  font-size: clamp(
    var(--font-size-sm),
    calc(0.85rem + 0.7vw),
    var(--font-size-md)
  );
  line-height: 1.65;
}

.content strong,
.content b {
  color: var(--color-content-strong);
  font-weight: var(--font-weight-semibold);
}

/* N2 - CL|LISTAS */

.content ul,
.content ol {
  margin-block: 0 var(--space-lg);
  padding-inline-start: clamp(1.15em, calc(1em + 0.75vw), 1.35em);
  line-height: clamp(1.65, calc(1.56 + 0.5vw), var(--line-height-loose));
}

.content p + ul,
.content p + ol {
  margin-block-start: calc(-1 * var(--space-xs));
}

.content li {
  padding-inline-start: 0.15em;
}

.content li + li {
  margin-block-start: clamp(0.45em, calc(0.4em + 0.25vw), 0.5em);
}

.content li::marker {
  color: var(--color-content-marker);
  font-weight: var(--font-weight-semibold);
}

.content li > :last-child {
  margin-block-end: 0;
}

.content li > ul,
.content li > ol {
  margin-block-start: var(--space-xs);
  margin-block-end: var(--space-sm);
}

/* N2 - CL|ENLACES */

.content a:not(.toc-link) {
  color: var(--color-content-link);
  font-weight: var(--font-weight-medium);
  text-decoration-color: var(--color-content-link-underline);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.content a:not(.toc-link):visited {
  color: var(--color-content-link-visited);
}

.content a:not(.toc-link):hover {
  color: var(--color-content-link-hover);
  text-decoration-color: currentColor;
}

/* N2 - CL|ÍNDICE INLINE */

.content .inline-index {
  margin-block: clamp(var(--space-md), calc(0.85rem + 2.2vw), var(--space-xl))
    clamp(var(--space-lg), calc(1.15rem + 2.2vw), var(--space-2xl));
  padding: clamp(var(--space-sm), calc(0.45rem + 2vw), var(--space-lg));
  border: 1px solid var(--color-inline-index-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-interface);
  background: var(--color-inline-index-background);
}

.content .inline-index-title {
  margin-block: 0 var(--space-sm);
  color: var(--color-inline-index-title);
  font-size: clamp(
    var(--font-size-xs),
    calc(0.75rem + 0.35vw),
    var(--font-size-sm)
  );
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.content .inline-index nav {
  display: block;
  columns: 14rem 3;
  column-gap: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.content .inline-index .toc-link {
  display: block;
  padding-block: clamp(0.35rem, calc(0.28rem + 0.35vw), 0.45rem);
  padding-inline: 0.5rem;
  border-radius: var(--radius-md);
  color: var(--color-inline-index-link);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  opacity: 1;
  text-decoration: none;
}

.content .inline-index .toc-link {
  break-inside: avoid;
  margin-block-end: var(--space-2xs);
}

.content .inline-index .toc-link:last-child {
  margin-block-end: 0;
}

.content .inline-index .toc-h3 {
  padding-inline-start: clamp(
    var(--space-md),
    calc(0.75rem + 1.5vw),
    var(--space-lg)
  );
  color: var(--color-inline-index-subitem);
}

.content .inline-index .toc-link:hover {
  color: var(--color-inline-index-link-hover);
  background: var(--color-inline-index-link-background-hover);
}

/* N2 - CL|CAJAS INFORMATIVAS */

.content blockquote,
.content :where(.legal-box, .legal-note, .legal-notice) {
  margin-block: clamp(var(--space-lg), calc(1.15rem + 1.5vw), var(--space-xl));
  padding: clamp(var(--space-md), calc(0.75rem + 2vw), var(--space-lg));
  border: 1px solid var(--color-box-border);
  border-inline-start: 4px solid var(--color-box-accent);
  border-radius: var(--radius-lg);
  color: var(--color-box-text);
  background: var(--color-box-background);
}

.content :where(.legal-box, .legal-note, .legal-notice) > :last-child,
.content blockquote > :last-child {
  margin-block-end: 0;
}

.content .legal-box__title {
  margin-block: 0 var(--space-xs);
  color: var(--color-box-title);
  font-weight: var(--font-weight-semibold);
}

/* ===========================================================================
   N1 - COMPONENTES
   =========================================================================== */

/* N2 - C|TOOLTIPS */

.legal-tooltip {
  --tooltip-shift-x: 0px;
  --tooltip-max-width: 20rem;

  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}

.legal-tooltip__trigger {
  display: inline;
  margin: 0;
  padding: 0 0.1em;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-tooltip-trigger);
  background: transparent;
  font: inherit;
  font-weight: var(--font-weight-medium);
  line-height: inherit;
  text-align: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  cursor: help;
}

.legal-tooltip__trigger:hover,
.legal-tooltip__trigger:focus-visible,
.legal-tooltip.is-open .legal-tooltip__trigger {
  color: var(--color-tooltip-trigger-hover);
  background: var(--color-tooltip-trigger-background-hover);
}

.legal-tooltip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 0.55rem);
  inset-inline-start: calc(50% + var(--tooltip-shift-x));
  z-index: 20;
  display: none;
  width: max-content;
  max-width: min(20rem, var(--tooltip-max-width));
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-tooltip-border);
  border-radius: var(--radius-lg);
  color: var(--color-tooltip-text);
  background: var(--color-tooltip-background);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-interface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, var(--space-2xs));
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}

.legal-tooltip__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: clamp(
    0.875rem,
    calc(50% - var(--tooltip-shift-x)),
    calc(100% - 0.875rem)
  );
  width: 0.75rem;
  height: 0.75rem;
  border-inline-end: 1px solid var(--color-tooltip-arrow-border);
  border-block-end: 1px solid var(--color-tooltip-arrow-border);
  background: var(--color-tooltip-arrow-background);
  transform: translate(-50%, -50%) rotate(45deg);
}

.legal-tooltip.is-open .legal-tooltip__bubble {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.legal-tooltip--missing {
  color: var(--color-tooltip-missing);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* N2 - C|BOTÓN VOLVER ARRIBA */
/* Implementado como parte del footer fijo. */

/* ===========================================================================
   N1 - FOOTER
   =========================================================================== */

/* N2 - F|ESTRUCTURA */

.site-footer {
  color: var(--color-footer-text);
  font-family: var(--font-interface);
  background: var(--color-footer-background);
  padding-block-end: calc(
    var(--layout-footer-dock-height) + env(safe-area-inset-bottom)
  );
}

.site-footer__dock {
  position: fixed;
  inset-inline-start: 50%;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nav back";
  align-items: center;
  column-gap: clamp(var(--space-2xs), 1.25vw, var(--space-xs));
  width: min(100%, var(--layout-page-max-width));
  height: calc(var(--layout-footer-dock-height) + env(safe-area-inset-bottom));
  padding-inline: var(--layout-page-padding-x);
  padding-block-end: env(safe-area-inset-bottom);
  background: var(--color-footer-background);
  border-top: 1px solid var(--color-footer-border);
  transform: translateX(-50%);
}

/* N2 - F|COPYRIGHT Y VERSIÓN DE LA APP*/

.site-footer__copy {
  color: var(--color-footer-text-soft);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  white-space: nowrap;
}

.site-footer__copy--dock {
  display: none;
}

.site-footer__copybar {
  padding: var(--space-sm) var(--layout-page-padding-x);
  color: var(--color-footer-text-soft);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-align: center;
  background: var(--color-footer-background);
  border-top: 1px solid var(--color-footer-border);
}

.site-footer__version {
  display: inline-block;
  margin-inline-start: var(--space-xs);
  color: var(--color-footer-version);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* N2 - F|NAVEGACIÓN */

.site-footer__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(0.125rem, 0.8vw, var(--space-2xs));
  min-width: 0;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(1.75rem, calc(1.55rem + 1vw), 2rem);
  padding-block: 0.35rem;
  padding-inline: clamp(0.3rem, calc(0.15rem + 0.8vw), 0.45rem);
  border-radius: var(--radius-md);
  color: var(--color-footer-link);
  font-size: clamp(
    var(--font-size-xs),
    calc(0.7rem + 0.6vw),
    var(--font-size-sm)
  );
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__link:visited {
  color: var(--color-footer-link-visited);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-footer-link-hover);
  background: var(--color-footer-link-background-hover);
}

/* N2 - F|VOLVER ARRIBA */

.site-footer__back-top {
  grid-area: back;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: clamp(1.625rem, calc(1.5rem + 0.65vw), 1.875rem);
  height: clamp(1.625rem, calc(1.5rem + 0.65vw), 1.875rem);
  border: 1px solid var(--color-footer-back-top-border-mobile);
  border-radius: var(--radius-md);
  color: var(--color-footer-back-top);
  background: var(--color-footer-back-top-background-mobile);
  text-decoration: none;
}

.site-footer__back-top:hover,
.site-footer__back-top:focus-visible {
  color: var(--color-footer-back-top-hover);
  background: var(--color-footer-back-top-background-hover);
}

.site-footer__back-icon {
  width: clamp(0.75rem, calc(0.66rem + 0.45vw), 0.9375rem);
  height: clamp(0.75rem, calc(0.66rem + 0.45vw), 0.9375rem);
}

.site-footer__back-label {
  display: none;
}

/* ===========================================================================
   N1 - MEDIA QUERIES
   =========================================================================== */

/* --------------------------------------------------------------------------
   N2 - M|MAX. (TODAS LAS PANTALLAS HASTA CIERTA MEDIDA)
   -------------------------------------------------------------------------- */
/* N3 - M|MAX|20rem - 320px */

@media (max-width: 20rem) {
  /* N4 - M|MAX|20rem - 320px|TOKENS */

  :root {
    --layout-footer-dock-height: clamp(2.5rem, calc(2.1rem + 3.2vw), 2.75rem);
  }

  /* N4 - M|MAX|20rem - 320px|HEADER */

  .sidebar-toggle,
  .btn {
    position: relative;
    min-width: 2rem;
  }

  .sidebar-toggle {
    justify-content: flex-start;
    padding-inline-start: 0;
    padding-inline-end: 0.35rem;
  }

  .btn {
    justify-content: flex-end;
    padding-inline-start: 0.35rem;
    padding-inline-end: 0;
  }

  .sidebar-toggle__label,
  .btn__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* N4 - M|MAX|20rem - 320px|FOOTER */

  .site-footer__dock {
    column-gap: 0.125rem;
    padding-inline: clamp(var(--space-xs), 4vw, var(--space-sm));
  }

  .site-footer__nav {
    gap: 0.125rem;
  }

  .site-footer__link {
    min-height: 1.5rem;
    padding-inline: clamp(0.125rem, 1vw, 0.2rem);
    font-size: clamp(0.6875rem, calc(0.5rem + 1.25vw), 0.75rem);
  }

  .site-footer__back-top {
    width: clamp(1.25rem, calc(0.25rem + 6.25vw), 1.5rem);
    height: clamp(1.25rem, calc(0.25rem + 6.25vw), 1.5rem);
  }

  .site-footer__back-icon {
    width: clamp(0.5625rem, calc(0.3125rem + 1.875vw), 0.6875rem);
    height: clamp(0.5625rem, calc(0.3125rem + 1.875vw), 0.6875rem);
  }
}

/* --------------------------------------------------------------------------
   N2 - M|MIN. (TODAS LAS PANTALLAS A PARTIR DE CIERTA MEDIDA)
   -------------------------------------------------------------------------- */

/* N3 - M|MIN|48rem - 768px */

@media (min-width: 48rem) {
  /* N4 - M|MIN|48rem - 768px|TOKENS */
  :root {
    --layout-footer-dock-height: 3.25rem;
  }

  /* N4 - M|MIN|48rem - 768px|HEADER */

  .site-header__main {
    min-height: var(--layout-header-height);
  }

  /* Layout lateral: no usamos las flechas verticales del índice compacto */
  .sidebar-toggle[aria-expanded="false"] .sidebar-toggle__icon--show-mobile,
  .sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon--hide-mobile {
    display: none;
  }

  /* Layout lateral: sidebar oculta → mostrar */
  .sidebar-toggle[aria-expanded="false"] .sidebar-toggle__icon--show-desktop {
    display: block;
  }

  /* Layout lateral: sidebar visible → ocultar */
  .sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon--hide-desktop {
    display: block;
  }

  .layout {
    grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }

  .content {
    padding-inline: var(--layout-content-padding-x-with-sidebar);
  }
  /* N4 - M|MIN|48rem - 768px|SIDEBAR TOC */

  .sidebar {
    position: sticky;
    top: var(--layout-header-height);
    z-index: 1;
    display: block;
    height: calc(
      100vh - var(--layout-header-height) - var(--layout-footer-dock-height) -
        env(safe-area-inset-bottom)
    );
    height: calc(
      100dvh - var(--layout-header-height) - var(--layout-footer-dock-height) -
        env(safe-area-inset-bottom)
    );
    overflow-y: auto;
    background: var(--color-sidebar-background);
    border-right: 1px solid var(--color-sidebar-border);
    border-bottom: 0;
    padding-block: var(--layout-sidebar-padding-y);
    padding-inline-start: var(--layout-sidebar-padding-x);
    padding-inline-end: var(--layout-sidebar-padding-end);
  }

  .page-shell.is-sidebar-hidden .sidebar {
    display: none;
  }

  /* N4 - M|MIN|48rem - 768px|SIDEBAR OCULTA */

  .page-shell.is-sidebar-hidden .layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .page-shell.is-sidebar-hidden .content {
    padding-inline: var(--layout-content-padding-x);
  }

  .toc-close {
    display: none;
  }

  .sidebar-title {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    margin-block-end: var(--space-md);
    color: var(--color-toc-title);
    font-weight: var(--font-weight-semibold);
    white-space: normal;
  }

  .toc {
    display: grid;
    max-height: none;
    margin-block-start: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .content :is(h2, h3) {
    scroll-margin-top: calc(var(--layout-header-height) + var(--space-lg));
  }

  /* N4 - M|MIN|48rem - 768px|FOOTER */

  .site-footer__dock {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "copy nav back";
    column-gap: var(--space-xl);
  }

  .site-footer__copy--dock {
    grid-area: copy;
    justify-self: start;
    display: block;
  }

  .site-footer__nav {
    justify-content: center;
    gap: var(--space-sm);
  }

  .site-footer__back-top {
    justify-content: flex-end;
    width: auto;
    min-width: 2rem;
    height: 2rem;
    padding-inline-start: 0.65rem;
    padding-inline-end: 0;
    border: 0;
    background: transparent;
  }

  .site-footer__back-icon {
    width: 1rem;
    height: 1rem;
  }

  .site-footer__back-top:hover,
  .site-footer__back-top:focus-visible {
    color: var(--color-footer-back-top-hover);
    background: var(--color-footer-back-top-background-hover);
  }

  .site-footer__back-label {
    display: inline;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

  .site-footer__copybar {
    display: none;
  }
}