/* =========================================================================
   SSE Grade Loader — estilos del sitio público

   Identidad: la hoja de cálculo. Blanco de hoja, rejilla gris verdosa,
   verde de captura y un solo ornamento: el rectángulo de selección (borde
   verde con su cuadrito de llenado). Siempre significa "esto es lo actual
   o lo elegido": la página abierta en el menú, el paquete recomendado, la
   clave recién creada, la fila que se está capturando.

   Tipografía: Atkinson Hyperlegible Next (todo) y su versión Mono (solo
   datos reales: números de control, claves, CLABE). Distinguen 0/O y 1/l/I,
   que en un número de control importa.

   Capas: reset → tokens → base → layout → components → pages → utilities.
   ========================================================================= */

@layer reset, tokens, base, layout, components, pages, utilities;

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100vh; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* Color */
    --hoja: #ffffff;
    --rejilla: #d3ddd6;
    --rejilla-fuerte: #788a7f;      /* bordes de campos: contraste 3.6:1 */
    --encabezado: #eef3ef;
    --encabezado-2: #e3ebe5;        /* números de fila y letras de columna */
    --verde: #0f7a4b;
    --verde-oscuro: #0b5e3a;
    --verde-claro: #e3f1e8;
    --verde-tenue: #f1f8f3;
    --tinta: #17231c;
    --tinta-suave: #4f5d54;
    --resaltador: #ffe15a;
    --resaltador-tenue: #fff3b8;
    --pluma: #c2372b;
    --pluma-oscura: #8f2a21;
    --pluma-claro: #fbeceb;
    --aviso-tinta: #8a6a00;
    --aviso-fondo: #fff8d6;

    --sombra-ventana: 0 1px 2px rgb(23 35 28 / .06), 0 18px 40px -18px rgb(23 35 28 / .28);

    /* Tipo: escala 1.25 sobre 18px */
    --font: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
    --mono: "Atkinson Hyperlegible Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --t-small: .875rem;     /* 14 */
    --t-meta: .9375rem;     /* 15 */
    --t-body: 1.125rem;     /* 18 */
    --t-lead: 1.25rem;      /* 20 */
    --t-h3: 1.40625rem;     /* 22.5 */
    --t-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.2rem);
    --t-h1: clamp(2.25rem, 1.45rem + 3.2vw, 3.45rem);

    /* Espacio */
    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

    --ancho: 1180px;
    --margen: clamp(1rem, 4vw, 2rem);
    --radio: 6px;
    --radio-ventana: 8px;
    --header-alto: 72px;

    interpolate-size: allow-keywords;
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  html { scroll-padding-top: calc(var(--header-alto) + var(--s-4)); }

  body {
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--tinta);
    background: var(--hoja);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-h1); letter-spacing: -.025em; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); }

  p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
  p { text-align: justify; }
  a[href^="mailto:"] { overflow-wrap: anywhere; }

  a {
    color: var(--verde-oscuro);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
  }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
    border-radius: 2px;
  }

  strong, b { font-weight: 750; }
  code, kbd, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  abbr[title] { text-decoration: none; }

  mark.highlight {
    background: var(--resaltador);
    color: var(--tinta);
    padding: .02em .25em;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    display: inline-block;
    vertical-align: -.22em;
  }
  .icon--sm { width: 1.05em; height: 1.05em; }
  .icon--lg { width: 2rem; height: 2rem; }

  main:focus { outline: none; }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .wrap {
    width: min(100% - 2 * var(--margen), var(--ancho));
    margin-inline: auto;
  }

  .section { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
  .section--tight { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
  .section--flush-top { padding-top: var(--s-7); }
  .section--band {
    background: var(--encabezado);
    border-block: 1px solid var(--rejilla);
  }
  .section--rule { border-top: 1px solid var(--rejilla); }

  .section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
    margin-bottom: var(--s-6);
  }
  .section > .wrap > h2 { margin-bottom: var(--s-4); }
  .section__intro {
    max-width: 62ch;
    color: var(--tinta-suave);
    margin-bottom: var(--s-6);
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-7) clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .split--narrow-text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split__text > * + * { margin-top: var(--s-4); }
  .split__text h2 + p { margin-top: var(--s-4); }
  .split__text .btn { margin-top: var(--s-5); }

  @media (max-width: 900px) {
    .split, .split--narrow-text { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* Rectángulo de selección: el único ornamento del sitio. */
  .is-recommended,
  .key,
  .nav__link[aria-current="page"] {
    position: relative;
    box-shadow: inset 0 0 0 2px var(--verde);
  }
  .is-recommended::after,
  .key::after,
  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: var(--verde);
    border: 2px solid var(--hoja);
    pointer-events: none;
  }

  /* Accesibilidad */
  .skip-link {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--tinta);
    color: var(--hoja);
    font-weight: 700;
    border-radius: var(--radio);
  }
  .skip-link:focus { top: var(--s-3); }

  /* ---------- Botones ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-height: 48px;
    padding: .5rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radio);
    font-size: 1.0625rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
  }
  .btn:active { translate: 0 1px; }
  .btn--primary { background: var(--verde); color: var(--hoja); }
  .btn--primary:hover { background: var(--verde-oscuro); }
  .btn--secondary { background: var(--hoja); color: var(--tinta); border-color: var(--rejilla-fuerte); }
  .btn--secondary:hover { border-color: var(--verde); color: var(--verde-oscuro); }
  .btn--light { background: var(--hoja); color: var(--verde-oscuro); }
  .btn--light:hover { background: var(--verde-claro); }
  .btn--small { min-height: 42px; padding: .4rem 1rem; font-size: 1rem; }
  .btn--large { min-height: 56px; padding: .6rem 1.75rem; font-size: 1.125rem; }
  .btn--block { width: 100%; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }

  .link-more { font-weight: 750; white-space: nowrap; }

  .badge {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    background: var(--verde);
    color: var(--hoja);
    font-size: .8125rem;
    font-weight: 750;
    line-height: 1.5;
    white-space: nowrap;
  }

  /* ---------- Encabezado ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgb(255 255 255 / .96);
    border-bottom: 1px solid var(--rejilla);
    backdrop-filter: saturate(1.4) blur(8px);
  }
  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: var(--header-alto);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--tinta);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
  }
  .brand__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio);
    background: var(--verde);
    color: var(--hoja);
  }
  .brand__mark .icon { width: 22px; height: 22px; }

  .nav { margin-left: auto; }
  .nav__list { display: flex; gap: var(--s-1); }
  .nav__link {
    display: block;
    padding: .45rem .8rem;
    border-radius: 3px;
    color: var(--tinta);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav__link:hover { background: var(--encabezado); }
  .nav__link[aria-current="page"] { color: var(--verde-oscuro); background: var(--verde-tenue); }

  @media (max-width: 880px) {
    .site-header { position: static; backdrop-filter: none; background: var(--hoja); }
    .site-header__bar { flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding-top: var(--s-3); min-height: 0; }
    .brand { flex: 1; }
    .nav {
      order: 3;
      flex-basis: calc(100% + 2 * var(--margen));
      margin: 0 calc(-1 * var(--margen));
      padding: var(--s-2) var(--margen);
      border-top: 1px solid var(--rejilla);
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .nav__list { gap: var(--s-2); }
    .nav__link { padding: .4rem .7rem; font-size: 1rem; }
    html { scroll-padding-top: var(--s-4); }
  }
  @media (max-width: 520px) {
    .site-header__cta-extra { display: none; }
    .nav__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
    .nav__link {
      display: grid;
      place-items: center;
      min-height: 44px;
      padding: .3rem .2rem;
      font-size: .9375rem;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
    }
    .nav { overflow: visible; }
  }
  @media (max-width: 360px) {
    .brand__name { font-size: 1rem; }
    .nav__link { font-size: .875rem; }
  }

  /* ---------- Encabezado de página interior ---------- */
  .page-head {
    background: var(--encabezado);
    border-bottom: 1px solid var(--rejilla);
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .page-head__lead {
    max-width: 60ch;
    margin-top: var(--s-4);
    color: var(--tinta-suave);
    font-size: var(--t-lead);
  }

  /* ---------- Fórmula (barra fx de la hoja) ---------- */
  .formula {
    display: flex;
    align-items: stretch;
    min-height: 32px;
    border-bottom: 1px solid var(--rejilla);
    font-size: var(--t-small);
    background: var(--hoja);
  }
  .formula > span { display: flex; align-items: center; padding-inline: .6rem; }
  .formula__ref {
    justify-content: center;
    min-width: 3.6rem;
    border-right: 1px solid var(--rejilla);
    font-family: var(--mono);
    color: var(--tinta-suave);
  }
  .formula__fx {
    border-right: 1px solid var(--rejilla);
    color: var(--tinta-suave);
    font-family: var(--mono);
    font-style: italic;
  }
  .formula__value { flex: 1; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
  .formula__result { border-left: 1px solid var(--rejilla); gap: .4rem; white-space: nowrap; }

  .formula--large {
    min-height: 0;
    border: 1px solid var(--rejilla-fuerte);
    border-radius: var(--radio);
    font-size: var(--t-body);
    overflow: hidden;
  }
  .formula--large > span { padding: .9rem 1rem; }
  .formula--large .formula__fx { background: var(--encabezado); }
  .formula--large .formula__value { white-space: normal; }
  .formula--large .formula__result { background: var(--verde-tenue); }
  .formula--large .formula__result strong { font-family: var(--mono); font-size: 1.75rem; line-height: 1; color: var(--verde-oscuro); }
  .formula-note { margin-top: var(--s-2); color: var(--tinta-suave); }

  @media (max-width: 560px) {
    .formula--large { flex-wrap: wrap; font-size: 1rem; }
    .formula--large .formula__fx { flex: none; }
    .formula--large .formula__value { flex: 1 1 10rem; min-width: 0; }
    .formula--large .formula__result { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--rejilla); }
  }

  /* ---------- Comparación de tiempos ---------- */
  .compare { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
  .compare__row {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr) 5.5rem;
    gap: var(--s-4);
    align-items: center;
  }
  .compare__label { font-weight: 700; }
  .compare__track { height: 30px; border-radius: 3px; background: var(--encabezado); overflow: hidden; }
  .compare__bar { display: block; height: 100%; }
  .compare__bar--manual {
    width: 100%;
    background: repeating-linear-gradient(135deg, var(--encabezado-2) 0 8px, #cbd7cf 8px 16px);
  }
  .compare__bar--auto { width: calc(100% * 4 / 15); background: var(--verde); }
  .compare__value { font-family: var(--mono); font-weight: 700; text-align: right; white-space: nowrap; }
  .compare__note { margin-top: var(--s-4); color: var(--tinta-suave); font-size: var(--t-meta); }

  @media (max-width: 560px) {
    .compare__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); }
    .compare__label { grid-column: 1 / -1; }
  }

  /* ---------- Pasos ---------- */
  .steps__num {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border: 1px solid var(--rejilla-fuerte);
    border-radius: 3px;
    background: var(--hoja);
    color: var(--verde-oscuro);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.0625rem;
  }

  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
  .steps__item { position: relative; display: grid; gap: var(--s-4); align-content: start; }
  .steps__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 3.25rem;
    right: calc(-1 * var(--s-6) + .75rem);
    border-top: 1px dashed var(--rejilla-fuerte);
  }
  .steps__title { font-size: 1.25rem; }
  .steps__body > p { margin-top: var(--s-2); color: var(--tinta-suave); }

  @media (max-width: 960px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps__item:nth-child(2n)::before { display: none; }
  }
  @media (max-width: 560px) {
    .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .steps__item { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
    .steps__item::before { display: none; }
  }

  .steps--detailed { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps--detailed .steps__item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-5);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--rejilla);
  }
  .steps--detailed .steps__item:first-child { padding-top: 0; }
  .steps--detailed .steps__item::before { display: none; }
  .steps--detailed .steps__num { width: 3rem; height: 3rem; font-size: 1.25rem; }
  .steps--detailed .steps__title { font-size: var(--t-h3); }
  .steps__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) var(--s-6);
    margin-top: var(--s-4);
  }
  .steps__split dt { display: flex; align-items: center; gap: .4rem; color: var(--verde-oscuro); font-weight: 750; font-size: 1rem; }
  .steps__split dd { margin-top: var(--s-1); }
  @media (max-width: 720px) { .steps__split { grid-template-columns: minmax(0, 1fr); } }

  .mini-steps { display: grid; gap: var(--s-3); }
  .mini-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  .mini-steps .steps__num { width: 2rem; height: 2rem; font-size: .9375rem; }

  /* ---------- Listas con palomita ---------- */
  .check-list { display: grid; gap: var(--s-3); }
  .check-list li { display: flex; gap: .6rem; align-items: flex-start; }
  .check-list .icon { color: var(--verde); margin-top: .18em; }
  .check-list--inline { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
  .check-list--inline + p { margin-top: var(--s-5); }

  /* ---------- Libro de dos columnas (sí / no) ---------- */
  .ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--hoja);
    border: 1px solid var(--rejilla);
    border-radius: var(--radio);
  }
  .ledger__col { padding: var(--s-5) var(--s-6); }
  .ledger__col + .ledger__col { border-left: 1px solid var(--rejilla); }
  .ledger__title { display: flex; align-items: center; gap: .5rem; font-size: 1.1875rem; margin-bottom: var(--s-3); }
  .ledger__col:first-child .ledger__title .icon { color: var(--verde); }
  .ledger__col:last-child .ledger__title .icon { color: var(--tinta-suave); }
  .ledger li { padding-block: .6rem; border-top: 1px dashed var(--rejilla); }
  .ledger li:first-child { border-top: 0; }
  .ledger + .muted { margin-top: var(--s-4); }
  @media (max-width: 720px) {
    .ledger { grid-template-columns: minmax(0, 1fr); }
    .ledger__col + .ledger__col { border-left: 0; border-top: 1px solid var(--rejilla); }
  }

  /* ---------- Tablas ---------- */
  .data-table {
    width: 100%;
    background: var(--hoja);
    border: 1px solid var(--rejilla);
    font-size: 1rem;
  }
  .data-table th, .data-table td { padding: .6rem .8rem; border: 1px solid var(--rejilla); text-align: left; }
  .data-table thead th { background: var(--encabezado); font-weight: 750; }
  .data-table tbody th { font-weight: 700; }
  .data-table .num { text-align: right; }
  .data-table tr.is-recommended { box-shadow: none; outline: 2px solid var(--verde); outline-offset: -2px; background: var(--verde-tenue); }
  .data-table tr.is-recommended::after { display: none; }

  .data-table--sheet { font-size: .9375rem; }
  .data-table--sheet .data-table__letters td,
  .data-table--sheet .data-table__num {
    background: var(--encabezado-2);
    color: var(--tinta-suave);
    font-size: .8125rem;
    text-align: center;
    padding: .3rem .5rem;
  }
  .data-table--sheet thead th { font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
  .data-table--sheet tr.is-skipped td:nth-child(4) {
    background: repeating-linear-gradient(135deg, var(--hoja) 0 6px, var(--encabezado-2) 6px 12px);
  }
  .sheet-sample { position: relative; overflow-x: auto; border-radius: var(--radio); }
  .table-scroll { position: relative; overflow-x: auto; }
  .sheet-sample__note { display: flex; align-items: center; gap: .5rem; margin-top: var(--s-3); color: var(--tinta-suave); font-size: var(--t-meta); }
  .swatch { width: 1.1rem; height: 1.1rem; border: 1px solid var(--rejilla-fuerte); flex: none; }
  .swatch--skipped { background: repeating-linear-gradient(135deg, var(--hoja) 0 4px, var(--encabezado-2) 4px 8px); }

  /* ---------- Avisos ---------- */
  .notice {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4) var(--s-5);
    background: var(--hoja);
    border: 1px solid var(--rejilla);
    border-left: 4px solid var(--verde);
    border-radius: var(--radio);
  }
  .notice > div, .notice > p { min-width: 0; }
  .notice > div > * + *, .notice > p + p { margin-top: var(--s-2); }
  .notice__icon { color: var(--verde); margin-top: .15em; }
  .notice--warning { background: var(--aviso-fondo); border-color: #ecd98a; border-left-color: var(--aviso-tinta); }
  .notice--warning .notice__icon { color: var(--aviso-tinta); }
  .notice--quiet { background: var(--encabezado); border-left-color: var(--rejilla-fuerte); }
  .notice--quiet .notice__icon { color: var(--tinta-suave); }

  .definition {
    display: inline-flex;
    gap: var(--s-3);
    align-items: flex-start;
    margin-bottom: var(--s-6);
    padding: var(--s-3) var(--s-5) var(--s-3) var(--s-4);
    background: var(--encabezado);
    border-left: 4px solid var(--verde);
    border-radius: 0 var(--radio) var(--radio) 0;
  }
  .definition__icon { color: var(--verde); margin-top: .2em; }

  /* ---------- Formularios ---------- */
  .form { display: grid; gap: var(--s-5); }
  .field__label { display: block; margin-bottom: .4rem; font-weight: 750; font-size: 1rem; }
  .field__input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: .7rem .9rem;
    border: 1.5px solid var(--rejilla-fuerte);
    border-radius: var(--radio);
    background: var(--hoja);
    color: var(--tinta);
    font-size: var(--t-body);
  }
  .field__input::placeholder { color: #6b7a71; }
  .field__input:focus-visible { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
  .field__input[aria-invalid="true"] { border-color: var(--pluma); background: var(--pluma-claro); }
  .field__hint { margin-top: .4rem; color: var(--tinta-suave); font-size: var(--t-meta); }
  .field__error { margin-top: .4rem; color: var(--pluma-oscura); font-weight: 700; font-size: var(--t-meta); }
  .field__error:empty { display: none; }

  .form__error {
    padding: var(--s-4) var(--s-5);
    background: var(--pluma-claro);
    border-left: 4px solid var(--pluma);
    border-radius: var(--radio);
    color: var(--pluma-oscura);
    font-weight: 650;
  }
  .form__error a { color: inherit; }
  .form__note { color: var(--tinta-suave); font-size: var(--t-meta); }
  .js-fallback { display: none; margin-top: var(--s-6); }
  .js-fallback:target { display: flex; }

  /* ---------- Copiar ---------- */
  .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .3rem .9rem;
    border: 1.5px solid var(--rejilla-fuerte);
    border-radius: var(--radio);
    background: var(--hoja);
    color: var(--tinta);
    font-size: var(--t-meta);
    font-weight: 750;
    white-space: nowrap;
  }
  .copy-btn:hover { border-color: var(--verde); color: var(--verde-oscuro); }
  .copy-btn--solid { background: var(--verde); border-color: var(--verde); color: var(--hoja); }
  .copy-btn--solid:hover { background: var(--verde-oscuro); color: var(--hoja); }
  .copy-btn.is-copied { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-oscuro); }

  /* ---------- Preguntas ---------- */
  .faq { border-top: 1px solid var(--rejilla); }
  .faq__item { border-bottom: 1px solid var(--rejilla); }
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-2);
    font-weight: 750;
    font-size: var(--t-body);
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--verde-oscuro); }
  .faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
  .faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    background: var(--verde);
    border-radius: 1px;
    transition: rotate .2s;
  }
  .faq__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
  .faq__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
  .faq__item[open] > .faq__q { color: var(--verde-oscuro); }
  .faq__item[open] .faq__icon::after { rotate: 90deg; }
  .faq__item:target > .faq__q { box-shadow: inset 0 0 0 2px var(--verde); }
  .faq__a { max-width: 70ch; padding: 0 var(--s-2) var(--s-5); }
  .faq__a > * + * { margin-top: var(--s-3); }
  .faq__a ul { padding-left: 1.25em; }
  .faq__a li + li { margin-top: .3rem; }

  .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .25s ease, content-visibility .25s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }

  /* ---------- Ventanas del demo y otras "pantallas" ---------- */
  .window {
    background: var(--hoja);
    border: 1px solid var(--rejilla);
    border-radius: var(--radio-ventana);
    box-shadow: var(--sombra-ventana);
    overflow: hidden;
  }
  .window__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .35rem .75rem;
    background: #f6f8f6;
    border-bottom: 1px solid var(--rejilla);
    font-size: var(--t-small);
    font-weight: 700;
    color: var(--tinta-suave);
  }
  .window__icon { width: 18px; height: 18px; color: var(--verde); }
  .window__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .window__dots { display: flex; gap: 5px; }
  .window__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #c6d0ca; }
  .window__url {
    flex: 1;
    min-width: 0;
    margin-left: .25rem;
    padding: .1rem .75rem;
    background: var(--hoja);
    border: 1px solid var(--rejilla);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------------------ pages */
@layer pages {

  /* ================= Inicio ================= */
  .hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
  .hero__intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-6) clamp(2rem, 5vw, 4.5rem);
    align-items: end;
  }
  .hero__title { max-width: 16ch; }
  .hero__lead { font-size: var(--t-lead); color: var(--tinta-suave); max-width: 44ch; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
  .hero__micro { margin-top: var(--s-4); color: var(--tinta-suave); font-size: 1rem; }

  .hero__canvas {
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
    background-color: var(--encabezado);
    background-image:
      linear-gradient(to bottom, rgb(255 255 255 / .55) 1px, transparent 1px),
      linear-gradient(to right, rgb(255 255 255 / .55) 1px, transparent 1px);
    background-size: 112px 32px;
    border-block: 1px solid var(--rejilla);
  }

  .proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4) var(--s-6);
    padding-block: var(--s-6);
    color: var(--tinta-suave);
    font-size: 1rem;
  }
  .proof li { display: flex; gap: .6rem; align-items: flex-start; }
  .proof .icon { color: var(--verde); margin-top: .1em; }

  @media (max-width: 520px) {
    .hero__actions .btn { flex: 1 1 100%; }
  }
  @media (max-width: 960px) {
    .hero__intro { grid-template-columns: minmax(0, 1fr); }
    .hero__title { max-width: 18ch; }
    .proof { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  }

  /* ---------- Demo: hoja → portal ---------- */
  .demo { margin: 0; }
  .demo__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--s-4);
    align-items: center;
  }
  .demo__flow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rejilla);
    border-radius: 50%;
    background: var(--hoja);
    color: var(--verde);
  }
  .demo__flow-icon { width: 22px; height: 22px; }
  .demo__caption { margin-top: var(--s-5); color: var(--tinta-suave); font-size: 1rem; }
  .demo__caption strong { color: var(--tinta); }

  .sheet { position: relative; font-size: var(--t-small); }
  .sheet__row {
    display: grid;
    grid-template-columns: 2rem 5.6rem minmax(0, 1fr) 6.6rem 6.6rem;
    height: 32px;
    border-bottom: 1px solid #e4ebe6;
  }
  .sheet__row > span {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-inline: .5rem;
    border-right: 1px solid #e4ebe6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sheet__row > span:last-child { border-right: 0; }
  .sheet__row--letters > span, .sheet__num {
    justify-content: center;
    background: var(--encabezado-2);
    color: var(--tinta-suave);
    font-size: .75rem;
  }
  .sheet__row--letters { height: 24px; }
  .sheet__row--head > span:not(.sheet__num) { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .01em; }
  .sheet__short { display: none; }
  .sheet__ctrl, .sheet__val { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .sheet__val { justify-content: flex-end; }
  .sheet__row.is-active .sheet__num { background: #cfe3d6; color: var(--verde-oscuro); font-weight: 700; }
  .sheet__row.is-read .sheet__val { color: var(--tinta-suave); }

  .sheet__selection {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 32px;
    border: 2px solid var(--verde);
    background: rgb(15 122 75 / .07);
    pointer-events: none;
    opacity: 0;
    transition: translate .3s ease, width .3s ease, opacity .2s;
  }
  .sheet__selection.is-visible { opacity: 1; }
  .sheet__selection::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 8px;
    height: 8px;
    background: var(--verde);
    border: 2px solid var(--hoja);
  }

  .portal { font-size: .9375rem; }
  .portal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--rejilla);
  }
  .portal__group { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .portal__chip {
    flex: none;
    padding: .05rem .6rem;
    border-radius: 999px;
    background: var(--verde-claro);
    color: var(--verde-oscuro);
    font-size: .8125rem;
    font-weight: 750;
  }
  .portal__grid { padding: .35rem .5rem; }
  .portal__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.25rem 5.25rem;
    gap: .5rem;
    align-items: center;
    padding: .2rem .4rem;
    border-radius: 3px;
    transition: background-color .25s;
  }
  .portal__row--head { color: var(--tinta-suave); font-size: .8125rem; font-weight: 700; }
  .portal__row--head > span:not(:first-child) { text-align: center; }
  .portal__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .portal__input {
    display: block;
    height: 28px;
    border: 1px solid #b9c7be;
    border-radius: 3px;
    background: var(--hoja);
    font-family: var(--mono);
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .portal__row.is-active { background: var(--resaltador-tenue); }
  .portal__row.is-done .portal__input { color: var(--verde-oscuro); border-color: #9fc9b0; }
  .portal__input.is-filled { animation: celda-llena .7s ease-out; }
  @keyframes celda-llena {
    from { background: var(--resaltador); }
    to { background: var(--hoja); }
  }

  .portal__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem .8rem;
    align-items: center;
    padding: .65rem .9rem .75rem;
    background: #f6f8f6;
    border-top: 1px solid var(--rejilla);
  }
  .portal__progress {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 999px;
    background: var(--encabezado-2);
    overflow: hidden;
  }
  .portal__progress > span { display: block; width: 0; height: 100%; background: var(--verde); transition: width .3s ease; }
  .portal__progress.is-complete > span { width: 100%; }
  .portal__status { color: var(--tinta-suave); font-size: var(--t-small); font-weight: 650; }
  .portal__save {
    position: relative;
    padding: .2rem .9rem;
    border: 2px solid var(--verde);
    border-radius: 3px;
    background: var(--hoja);
    color: var(--verde-oscuro);
    font-size: var(--t-small);
    font-weight: 800;
  }
  .portal__save.is-waiting::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 8px;
    height: 8px;
    background: var(--verde);
    border: 2px solid var(--hoja);
  }

  .demo__chip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: .1rem .5rem;
    border-radius: 3px;
    background: var(--resaltador);
    box-shadow: 0 6px 16px -6px rgb(23 35 28 / .45);
    color: var(--tinta);
    font-family: var(--mono);
    font-size: .9375rem;
    font-weight: 800;
    pointer-events: none;
  }

  @media (max-width: 960px) {
    .demo__stage { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
    .demo__flow { justify-self: center; rotate: 90deg; width: 38px; height: 38px; }
  }
  @media (max-width: 520px) {
    .sheet__row { grid-template-columns: 1.75rem minmax(0, 1fr) 3.6rem 3.6rem; }
    .sheet__row > span:nth-child(2) { display: none; }
    .sheet__full { display: none; }
    .sheet__short { display: inline; }
    .portal__row { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; }
    .portal__row--head { font-size: .75rem; }
    .portal__row--head > span:not(:first-child) { font-size: 0; }
    .portal__row--head > span:nth-child(2)::after { content: "Cal."; font-size: .75rem; }
    .portal__row--head > span:nth-child(3)::after { content: "Asist."; font-size: .75rem; }
  }

  /* Pilares */
  .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars__item { padding: var(--s-2) var(--s-6); }
  .pillars__item:first-child { padding-left: 0; }
  .pillars__item + .pillars__item { border-left: 1px solid var(--rejilla); }
  .pillars__item .icon { color: var(--verde); }
  .pillars__item h3 { margin-top: var(--s-4); font-size: 1.25rem; }
  .pillars__item p { margin-top: var(--s-2); color: var(--tinta-suave); }
  @media (max-width: 900px) {
    .pillars { grid-template-columns: minmax(0, 1fr); }
    .pillars__item { padding: var(--s-5) 0; }
    .pillars__item + .pillars__item { border-left: 0; border-top: 1px solid var(--rejilla); }
  }

  /* Tira de precios */
  .price-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--hoja);
    border: 1px solid var(--rejilla-fuerte);
    border-radius: var(--radio);
  }
  .price-strip__cell { display: grid; gap: .1rem; align-content: start; padding: var(--s-5) var(--s-4) var(--s-4); }
  .price-strip__cell + .price-strip__cell { border-left: 1px solid var(--rejilla); }
  .price-strip__name { font-weight: 750; }
  .price-strip__credits { color: var(--tinta-suave); font-size: var(--t-meta); }
  .price-strip__price { margin-top: var(--s-2); font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .price-strip__price .highlight { font-size: 1.375rem; }
  .price-strip .badge { position: absolute; top: -.8rem; left: var(--s-4); }
  .price-strip__cell.is-recommended { background: var(--verde-tenue); }
  @media (max-width: 640px) {
    .price-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .price-strip__cell:nth-child(3) { border-left: 0; }
    .price-strip__cell:nth-child(n + 3) { border-top: 1px solid var(--rejilla); }
  }

  /* Banda final */
  .cta-band { background: var(--verde); color: var(--hoja); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
  .cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
  .cta-band__title { max-width: 22ch; }
  .cta-band__text { margin-top: var(--s-3); max-width: 52ch; color: #e6f2ea; }
  .cta-band__micro { margin-top: var(--s-3); color: #e6f2ea; font-size: var(--t-meta); }
  .cta-band :focus-visible { outline-color: var(--hoja); }

  /* ================= Cómo funciona ================= */
  .needs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--s-5);
    background: var(--hoja);
    border: 1px solid var(--rejilla);
    border-radius: var(--radio);
  }
  .needs li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); }
  .needs li + li { border-left: 1px solid var(--rejilla); }
  .needs .icon { color: var(--verde); }
  @media (max-width: 900px) {
    .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .needs li:nth-child(3) { border-left: 0; }
    .needs li:nth-child(n + 3) { border-top: 1px solid var(--rejilla); }
  }
  @media (max-width: 480px) {
    .needs { grid-template-columns: minmax(0, 1fr); }
    .needs li + li { border-left: 0; border-top: 1px solid var(--rejilla); }
  }

  .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }
  .gallery img { width: 100%; border: 1px solid var(--rejilla); border-radius: var(--radio); }
  .gallery figcaption { margin-top: var(--s-2); color: var(--tinta-suave); font-size: var(--t-meta); }

  /* ================= Funciones ================= */
  .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-6) var(--s-7); }
  .features__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .features__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid var(--rejilla-fuerte);
    border-radius: var(--radio);
    background: var(--hoja);
    color: var(--verde);
  }
  .features__icon .icon { width: 1.6rem; height: 1.6rem; }
  .features__title { font-size: 1.25rem; }
  .features__item p { margin-top: var(--s-2); color: var(--tinta-suave); }

  /* ================= Planes ================= */
  .plans-table-wrap { border: 1px solid var(--rejilla-fuerte); border-radius: var(--radio-ventana); background: var(--hoja); }
  .plans-table { width: 100%; font-size: 1.0625rem; }
  .plans-table th, .plans-table td { padding: 1.1rem 1rem; text-align: left; border-bottom: 1px solid var(--rejilla); vertical-align: middle; }
  .plans-table thead th { padding-block: .8rem; background: var(--encabezado); color: var(--tinta-suave); font-size: var(--t-meta); font-weight: 750; border-bottom: 1px solid var(--rejilla-fuerte); }
  .plans-table thead th:first-child { border-top-left-radius: var(--radio-ventana); }
  .plans-table thead td:last-child { background: var(--encabezado); border-bottom: 1px solid var(--rejilla-fuerte); border-top-right-radius: var(--radio-ventana); }
  .plans-table tbody tr:last-child > * { border-bottom: 0; }
  .plans-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .plans-table__name { font-size: 1.25rem; font-weight: 800; }
  .plans-table__name .badge { margin-left: .5rem; vertical-align: .15em; }
  .plans-table__price { font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
  .plans-table__price abbr { color: var(--tinta-suave); font-size: .8125rem; font-weight: 700; }
  .plans-table__action { text-align: right; }
  .plans-table__action .btn { min-width: 9.5rem; }
  .plans-table tr.is-recommended { box-shadow: none; outline: 2px solid var(--verde); outline-offset: -2px; background: var(--verde-tenue); }
  .plans-table tr.is-recommended::after { display: none; }
  .plans-table tr.is-recommended > td:last-child { position: relative; }
  .plans-table tr.is-recommended > td:last-child::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: var(--verde);
    border: 2px solid var(--hoja);
  }

  @media (max-width: 820px) {
    .plans-table-wrap { border: 0; background: transparent; }
    .plans-table, .plans-table tbody, .plans-table tr, .plans-table th, .plans-table td { display: block; }
    .plans-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .plans-table tbody { display: grid; gap: var(--s-5); }
    .plans-table tr {
      padding: var(--s-4) var(--s-5) var(--s-5);
      background: var(--hoja);
      border: 1px solid var(--rejilla-fuerte);
      border-radius: var(--radio-ventana);
    }
    .plans-table th, .plans-table td { padding: .4rem 0; border: 0; }
    .plans-table tbody tr:last-child > * { border-bottom: 0; }
    .plans-table__name { padding-bottom: .6rem; }
    .plans-table td[data-label] {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-4);
      border-top: 1px dashed var(--rejilla);
    }
    .plans-table td[data-label]::before {
      content: attr(data-label);
      color: var(--tinta-suave);
      font-size: var(--t-meta);
      font-weight: 650;
    }
    .plans-table__action { padding-top: var(--s-4); text-align: left; }
    .plans-table__action .btn { width: 100%; }
    .plans-table tr.is-recommended > td:last-child { position: static; }
    .plans-table tr.is-recommended > td:last-child::after { display: none; }
    .plans-table tr.is-recommended::after { display: block; }
  }

  /* ================= Cómo pagar ================= */
  .pay-steps { display: grid; }
  .pay-steps__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-5);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--rejilla);
  }
  .pay-steps__item:first-child { padding-top: 0; }
  .pay-steps .steps__num { width: 3rem; height: 3rem; font-size: 1.25rem; }
  .pay-steps__title { font-size: var(--t-h3); }
  .pay-steps__body { max-width: 760px; }
  .pay-steps__body > * + * { margin-top: var(--s-4); }
  .pay-steps + .notice { margin-top: var(--s-6); max-width: 760px; }
  .mail-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  @media (max-width: 400px) {
    .pay-steps__item { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  }
  @media (max-width: 560px) {
    .steps--detailed .steps__item, .pay-steps__item { gap: var(--s-4); }
    .steps--detailed .steps__num, .pay-steps .steps__num { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
    .mail-buttons .btn { width: 100%; justify-content: flex-start; }
  }

  .bank { max-width: 640px; background: var(--hoja); border: 1px solid var(--rejilla-fuerte); border-radius: var(--radio); }
  .bank__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); }
  .bank__row + .bank__row { border-top: 1px solid var(--rejilla); }
  .bank dt { color: var(--tinta-suave); font-weight: 650; }
  .bank dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
  .bank__value { font-weight: 750; font-size: 1.1875rem; overflow-wrap: anywhere; }
  @media (max-width: 560px) { .bank__row { grid-template-columns: minmax(0, 1fr); } }

  /* ================= Preguntas ================= */
  .faq-page > * { max-width: 860px; }
  .faq-search { max-width: 560px; margin-bottom: var(--s-7); }
  .faq-search__box { position: relative; }
  .faq-search__icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; color: var(--tinta-suave); pointer-events: none; }
  .faq-search .field__input { padding-left: 2.9rem; }
  .faq-search__count { margin-top: var(--s-2); color: var(--tinta-suave); font-size: var(--t-meta); }
  .faq-group + .faq-group { margin-top: var(--s-7); }
  .faq-group__title { margin-bottom: var(--s-3); font-size: 1.5rem; }
  .faq-page > .notice { margin-top: var(--s-6); }

  /* ================= Registro ================= */
  .register { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
  .register__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .register__lead { max-width: 54ch; margin-top: var(--s-4); color: var(--tinta-suave); font-size: var(--t-lead); }
  .register__panel {
    margin-top: var(--s-6);
    padding: clamp(1.25rem, .75rem + 2vw, 2.25rem);
    background: var(--hoja);
    border: 1px solid var(--rejilla-fuerte);
    border-radius: var(--radio-ventana);
    box-shadow: var(--sombra-ventana);
  }
  .register__aside { padding-top: var(--s-4); }
  .register__aside-title { font-size: 1.375rem; margin-bottom: var(--s-4); }
  .register__aside .check-list { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rejilla); }
  @media (max-width: 900px) {
    .register__grid { grid-template-columns: minmax(0, 1fr); }
    .register__aside { padding-top: 0; }
  }

  .success { display: grid; gap: var(--s-4); }
  .success:focus { outline: none; }
  .success__title { display: flex; align-items: center; gap: .6rem; color: var(--verde-oscuro); font-size: 1.625rem; }
  .success__title .icon { color: var(--verde); }
  .success .btn { justify-self: start; }
  .success .mini-steps { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--rejilla); }
  .key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: var(--verde-tenue);
    border-radius: 2px;
  }
  .key__value { font-size: 1.1875rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }

  /* ================= 404 y 500 ================= */
  .link-list { display: grid; gap: var(--s-3); font-size: var(--t-lead); font-weight: 750; }
  .error-page { padding-block: var(--s-9); }
  .error-page p { margin-top: var(--s-4); max-width: 56ch; }
  .error-page__detail { margin-top: var(--s-6); padding: var(--s-4); background: var(--encabezado); overflow: auto; font-size: var(--t-small); }

  /* ================= Pie ================= */
  .site-footer { background: var(--encabezado); border-top: 1px solid var(--rejilla); padding-top: var(--s-8); }
  .site-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr); gap: var(--s-6) var(--s-7); }
  .site-footer__about p { max-width: 38ch; margin-top: var(--s-4); color: var(--tinta-suave); font-size: var(--t-meta); }
  .site-footer__heading { margin-bottom: var(--s-3); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
  .site-footer__col li + li { margin-top: var(--s-2); }
  .site-footer__col a { color: var(--tinta); text-decoration: none; }
  .site-footer__col a:hover, .site-footer__col a[aria-current="page"] { color: var(--verde-oscuro); text-decoration: underline; }
  .site-footer__col p { font-size: var(--t-meta); }
  .site-footer__col p a { color: var(--verde-oscuro); text-decoration: underline; overflow-wrap: anywhere; }
  .site-footer__small { margin-top: var(--s-2); color: var(--tinta-suave); }
  .site-footer__base { margin-top: var(--s-7); padding-block: var(--s-5) var(--s-6); border-top: 1px solid var(--rejilla); color: var(--tinta-suave); font-size: var(--t-meta); }
  @media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__about { grid-column: 1 / -1; } }
  @media (max-width: 480px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .muted { color: var(--tinta-suave); }
  .num { font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header .nav, .site-header__cta, .cta-band, .skip-link, .copy-btn, .mail-buttons { display: none !important; }
  .site-header { position: static; }
  .section--band, .page-head, .site-footer { background: none; }
  a { color: inherit; }
}