@layer reset, tokens, base, layout, components, sections, motion;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, svg { display: block; max-width: 100%; }
  input, button { font: inherit; color: inherit; }
  ul, ol { list-style: none; padding: 0; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  :target { scroll-margin-block-start: 4rem; }
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* papel y tinta */
    --paper:      #FAF8F5;
    --paper-deep: #F1EDE6;
    --ink:        #17150F;
    --ink-2:      #55503F;   /* 7.2:1 sobre papel */
    --ink-3:      #8A8375;   /* 3.3:1 — solo display grande y grafismo */
    --rule:       #DCD6CB;

    /* escala de ruido — nunca decorativa */
    --n1: #59A678;   /* < 60 dB */
    --n2: #E8A87C;   /* 60–70 dB */
    --n3: #D4756A;   /* > 70 dB */
    --green-ink: #2C6446;  /* verde legible para texto pequeño */

    --serif:  "Instrument Serif", Georgia, "Times New Roman", serif;
    --sans:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* retícula */
    --cols: 12;
    --gutter: clamp(0.75rem, 1.6vw, 1.5rem);
    --margin: clamp(1.125rem, 5vw, 5.5rem);
    --measure: 34ch;

    --t: 200ms;
    --ease: cubic-bezier(.2, .7, .3, 1);
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: 1.55;
    font-synthesis-weight: none;
    overflow-x: hidden;
  }

  /* grano fino, fijo, casi imperceptible */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.015em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.5rem, 1rem + 6.2vw, 6rem); }
  h2 { font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); }
  h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.1; }

  /* Saltos de línea compuestos a mano: solo cuando hay ancho que los sostenga.
     Por debajo manda text-wrap: balance. */
  .brk { display: none; }
  @media (min-width: 48em) { .brk { display: inline; } }

  p { text-wrap: pretty; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  a:hover { text-decoration-color: var(--n1); }

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

  ::selection { background: color-mix(in oklab, var(--n1) 32%, transparent); }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-inline: var(--margin);
    max-width: 96rem;
    margin-inline: auto;
  }

  /* En estrecho todo ocupa el ancho; el desktop reasigna abajo. */
  .grid > * { grid-column: 1 / -1; }

  .vh {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .skip {
    position: absolute; left: var(--margin); top: 0;
    transform: translateY(-120%);
    background: var(--ink); color: var(--paper);
    padding: .6rem 1rem; z-index: 20;
    font-family: var(--mono); font-size: .8125rem;
  }
  .skip:focus { transform: translateY(0); }

  section { position: relative; }

  /* Filete de sección: 1px. Solo donde no hay cambio de fondo que ya separe. */
  .problema::before,
  .datos::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: var(--margin);
    height: 1px;
    background: var(--rule);
  }
  @media (min-width: 96rem) {
    .problema::before,
    .datos::before {
      inset-inline: max(var(--margin), calc((100vw - 96rem) / 2 + var(--margin)));
    }
  }
}

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

  /* Numeración de sección al margen */
  .sec-num {
    font-family: var(--mono);
    font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
    line-height: 1;
    color: var(--ink-3);
    letter-spacing: -.04em;
    margin-block-end: .75rem;
  }
  .sec-num--light { color: color-mix(in oklab, var(--paper) 55%, var(--ink-2)); }

  /* --- Llamada a la acción --- */
  .cta-block { display: grid; gap: .875rem; max-width: 30rem; }
  .btn {
    display: inline-flex;
    align-items: baseline;
    gap: .6rem;
    width: max-content;
    max-width: 100%;
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    padding: .75rem 1.25rem;
    border-radius: 0;
    font-size: .9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t) var(--ease), color var(--t) var(--ease),
                border-color var(--t) var(--ease);
  }
  /* La flecha vive en la mono: lee como puntero de instrumento. */
  .btn::after { content: "→"; font-family: var(--mono); }
  .btn:hover {
    background: var(--n1);
    border-color: var(--n1);
    color: var(--ink);
  }
  .cta-block__note {
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--ink-2);
  }

  /* --- Mapas SVG --- */
  .map { width: 100%; height: auto; }
  .map .block { fill: none; stroke: var(--rule); stroke-width: 1; }
  .route {
    fill: none;
    stroke-linecap: square;
    stroke-linejoin: miter;
    transition: stroke var(--t) var(--ease), stroke-width var(--t) var(--ease),
                opacity var(--t) var(--ease);
  }
  .route--fast  { stroke: var(--ink-3); stroke-width: 5; }
  .route--quiet { stroke: var(--n1);    stroke-width: 5; }
  /* Ambos nodos caen en cruces, donde los xamfrans dejan hueco de sobra. */
  .node { fill: var(--ink); }
  .node--end { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
}

/* ------------------------------------------------------------- sections -- */
@layer sections {

  /* ---- cabecera ---- */
  .site-head { padding-block: 1.125rem .875rem; border-bottom: 1px solid var(--rule); }
  .site-head .grid { align-items: center; row-gap: .5rem; }
  /* Logotipo: manda el isotipo; el nombre va en la grotesca neutra y se
     aparta. El carácter lo pone el símbolo, no la tipografía del texto.
     El isotipo trae padding dentro del viewBox, así que se escala con un
     margen negativo para que el glifo case ópticamente con el texto. */
  .wordmark a {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    text-decoration: none;
    color: var(--ink);
    width: max-content;
  }
  .wordmark__mark {
    inline-size: var(--wm-mark, 3rem);
    block-size: var(--wm-mark, 3rem);
    margin-inline-start: calc(var(--wm-mark, 3rem) * -.14);
    flex: none;
  }
  .wordmark__text {
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--wm-size, 1.3125rem);
    letter-spacing: -.005em;
    line-height: 1;
  }
  .wordmark a:hover .wordmark__text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
  }
  .wordmark a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
  }

  /* Masthead: marca a la izquierda, todo lo demás alineado a la derecha. */
  .head-nav ul {
    display: flex;
    gap: clamp(1.25rem, 2.8vw, 2.75rem);
    flex-wrap: wrap;
    justify-content: end;
  }
  .head-nav a {
    position: relative;
    display: inline-block;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding-block: .3rem;
  }
  /* Filete verde que se despliega bajo el enlace: el único gesto animado
     aquí, y lo desactiva prefers-reduced-motion desde la capa motion. */
  .head-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1px;
    background: var(--n1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t) var(--ease);
  }
  .head-nav a:hover::after,
  .head-nav a:focus-visible::after { transform: scaleX(1); }

  .head-meta {
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .04em;
  }
  /* Sello de estado: 1px y nada más. Ni color, ni radio, ni relleno. */
  .head-meta .stamp {
    border: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
    padding: .22em .55em;
    font-size: .9167em;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Móvil: la marca sola. Nav y meta caben mal en 360px, así que fuera:
     el índice completo ya está más abajo y el contenido es una sola columna. */
  .site-head .wordmark { grid-column: 1 / -1; }
  .head-nav, .head-meta { display: none; }

  @media (min-width: 40em) {
    .site-head .wordmark { grid-column: 1 / 4; }
    .head-nav { grid-column: 4 / -1; display: block; align-self: center; }
  }
  /* El meta solo entra cuando de verdad sobra ancho para él. */
  @media (min-width: 64em) {
    .head-nav { grid-column: 4 / 9; }
    .head-meta {
      grid-column: 9 / -1;
      display: flex;
      justify-content: end;
      white-space: nowrap;
    }
  }

  /* ---- 01 hero ---- */
  .hero { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 8vw, 7.5rem); }
  .hero-grid { row-gap: 1.5rem; position: relative; }

  /* Hairlines verticales: la retícula, visible pero muda. Se ocultan en
     móvil porque ahí no hay 12 columnas que enseñar; dibujarlas sería
     decorar con una estructura que no se está usando. */
  .rule-cols {
    display: none;
    position: absolute;
    inset-block: -1rem 0;
    inset-inline: 0;
    grid-column: 1 / -1;
    pointer-events: none;
    background:
      repeating-linear-gradient(to right,
        color-mix(in oklab, var(--rule) 60%, transparent) 0 1px,
        transparent 1px calc((100% + var(--gutter)) / 12));
    background-size: calc(100% + var(--gutter)) 100%;
    opacity: .8;
  }
  @media (min-width: 56em) { .rule-cols { display: block; } }

  .hero .sec-num { grid-column: 1 / 3; margin-block-end: 0; }
  .hero h1 { grid-column: 1 / -1; margin-block: .25rem 0; }
  .hero-sub {
    grid-column: 1 / -1;
    font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
    line-height: 1.45;
    max-width: 30ch;
    color: var(--ink-2);
  }
  .hero-cta { grid-column: 1 / -1; }

  .hero-map { grid-column: 1 / -1; margin-block-start: 1rem; }
  .hero-map figcaption {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-block-start: .75rem;
    font-family: var(--mono); font-size: .75rem; color: var(--ink-2);
  }
  .key { display: inline-flex; align-items: center; gap: .5rem; }
  .key::before { content: ""; width: 1.5rem; height: 3px; background: currentColor; }
  .key--fast::before  { background: var(--ink-3); }
  .key--quiet::before { background: var(--n1); }

  @media (min-width: 56em) {
    /* 9 columnas: la línea larga cabe a 6rem sin partirse y quedan 3 de aire. */
    .hero h1 { grid-column: 1 / 10; }
    .hero-sub { grid-column: 1 / 6; grid-row: 3; }
    .hero-cta { grid-column: 1 / 7; grid-row: 4; align-self: start; }
    .hero-map {
      grid-column: 7 / -1;
      grid-row: 3 / span 2;
      margin-block-start: .5rem;
      /* se sale del margen derecho: sangre editorial */
      margin-inline-end: calc(var(--margin) * -1);
    }
    .hero-grid { row-gap: 2.25rem; }
  }

  /* ---- 02 problema ---- */
  .problema { padding-block: clamp(3.5rem, 9vw, 8.5rem) clamp(3rem, 8vw, 7rem); }
  .problema .sec-num { grid-column: 1 / 3; }
  .prose-big {
    grid-column: 1 / -1;
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
    font-family: var(--serif);
    font-size: clamp(1.3125rem, 1.05rem + 1.05vw, 1.9375rem);
    line-height: 1.3;
    text-wrap: pretty;
    max-width: 58ch;
  }
  /* El clímax: sale de la medida del resto y se queda solo. */
  .prose-big__peak {
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
    max-width: 15ch;
    margin-block: clamp(.5rem, 1.5vw, 1.25rem);
  }
  .prose-big__turn { color: var(--green-ink); font-style: italic; }
  @media (min-width: 56em) {
    .problema .grid { row-gap: 0; }
    .problema .sec-num { grid-row: 1; }
    .prose-big { grid-column: 4 / 12; grid-row: 1; }
  }

  /* ---- 03 comparativa ---- */
  .comparativa {
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 9vw, 8rem);
    background: var(--paper-deep);
  }
  .comparativa .sec-num { grid-column: 1 / 3; }
  .comparativa h2 { grid-column: 1 / -1; }
  .comparativa .lede {
    grid-column: 1 / -1;
    max-width: 42ch; color: var(--ink-2);
    margin-block-start: .875rem;
  }
  .compare {
    grid-column: 1 / -1;
    margin-block-start: clamp(1.75rem, 4vw, 3rem);
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  /* Rótulo del control, con la misma voz que los labels del formulario:
     ahí es donde el usuario ya ha aprendido que algo se manipula. */
  .toggle legend {
    display: block;   /* explícito: el legend no se maqueta igual por defecto */
    padding: 0;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-block-end: .5rem;
  }
  .toggle__track {
    position: relative;   /* contiene los radios ocultos */
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    border: 1.5px solid var(--ink);
    /* Papel sobre el fondo hundido de la sección: el control se despega y
       deja de leerse como un sello impreso. */
    background: var(--paper);
    width: max-content;
    max-width: 100%;
  }
  .toggle input { position: absolute; opacity: 0; pointer-events: none; }
  .toggle label {
    padding: .625rem clamp(.9rem, 3vw, 1.75rem);
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
  }
  .toggle label + input + label { border-inline-start: 1.5px solid var(--ink); }
  /* La opción no elegida responde al puntero: sin esto el control parece
     un rótulo muerto. */
  .toggle label:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); }
  .toggle input:checked + label {
    background: var(--ink);
    color: var(--paper);
  }
  .toggle input:checked + label:hover { background: var(--ink); }
  .toggle input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 3px; }

  .compare-map {
    border: 1px solid var(--rule);
    background: var(--paper);
    align-self: start;    /* no lo estira la fila del grid */
  }

  /* Estado dirigido por :has(): funciona aunque el JS no cargue */
  .compare:has(#r-quiet:checked) .route--fast  { stroke-width: 3; opacity: .45; }
  .compare:has(#r-fast:checked)  .route--quiet { stroke-width: 3; opacity: .3; }
  .compare:has(#r-fast:checked)  .route--fast  { stroke: var(--ink); stroke-width: 6; }

  /* El contenedor es .readout, no .panel: así la query sí puede recomponer
     el panel entero. */
  .readout { display: grid; container-type: inline-size; }
  .panel {
    grid-area: 1 / 1;               /* superpuestos: cero salto de layout */
    transition: opacity var(--t) var(--ease);
  }
  .compare:has(#r-quiet:checked) .panel--fast,
  .compare:has(#r-fast:checked)  .panel--quiet {
    opacity: 0; visibility: hidden;
  }
  .panel__name {
    font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-2);
    padding-block-end: .5rem; border-bottom: 1px solid var(--rule);
  }
  .stat {
    display: flex; align-items: baseline; gap: .5rem;
    padding-block: .625rem; border-bottom: 1px solid var(--rule);
  }
  .stat__n {
    font-family: var(--mono); font-weight: 500;
    font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
    line-height: .9; letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
  }
  .stat__u { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); }

  .detail { margin-block-start: .875rem; display: grid; gap: .25rem; }
  .detail > div {
    display: flex; justify-content: space-between; gap: 1rem;
    font-family: var(--mono); font-size: .8125rem;
  }
  .detail dt { color: var(--ink-2); }
  .detail dd { font-variant-numeric: tabular-nums; }

  .profile-label {
    margin-block-start: 1.25rem;
    font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-2);
  }
  .profile {
    margin-block-start: .5rem;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  }
  .profile li { height: 1.75rem; }
  [data-l="1"] { --lvl: var(--n1); }
  [data-l="2"] { --lvl: var(--n2); }
  [data-l="3"] { --lvl: var(--n3); }
  .profile li { background: var(--lvl); }

  .scale { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
  .scale__k {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--mono); font-size: .75rem; color: var(--ink-2);
  }
  .scale__k::before {
    content: ""; width: .75rem; height: .75rem; background: var(--lvl);
  }

  @container (min-width: 24rem) {
    .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1rem, 4cqi, 2rem); }
    .panel__name { grid-column: 1 / -1; }
    .detail { grid-column: 2; grid-row: 2 / span 2; margin-block-start: 0; align-content: start; }
    .profile-label, .profile { grid-column: 1 / -1; }
  }

  @media (min-width: 56em) {
    .comparativa h2 { grid-column: 3 / 10; }
    .comparativa .lede { grid-column: 3 / 8; }
    .comparativa .sec-num { grid-row: 1; }
    .compare {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      column-gap: var(--gutter);
    }
    .toggle       { grid-column: 1 / 4; grid-row: 1; }
    .compare-map  { grid-column: 4 / 9; grid-row: 1 / span 3; }
    .readout      { grid-column: 9 / -1; grid-row: 1 / span 2; }
    .scale        { grid-column: 1 / 4; grid-row: 2; align-self: start; }
  }

  /* ---- 04 pasos ---- */
  .pasos { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem); }
  .pasos .sec-num { grid-column: 1 / 3; }
  .pasos h2 { grid-column: 1 / -1; margin-block-end: clamp(1.5rem, 4vw, 3rem); }
  .steps {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .step {
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--rule);
    display: grid;
    gap: .375rem;
  }
  .step__n {
    font-family: var(--mono); font-size: .75rem; letter-spacing: .12em;
    color: var(--ink-2);
  }
  .step p:last-child { color: var(--ink-2); max-width: 38ch; }

  @media (min-width: 48em) {
    .steps {
      grid-template-columns: repeat(3, 1fr);
      column-gap: var(--gutter);
      border-bottom: 1px solid var(--rule);
    }
    .step { border-bottom: 0; padding-block: 1.75rem 2.5rem; padding-inline-end: 1rem; }
    .step + .step { border-inline-start: 1px solid var(--rule); padding-inline-start: 1.25rem; }
  }
  @media (min-width: 56em) {
    .pasos h2 { grid-column: 1 / 7; }
  }

  /* ---- 05 datos ---- */
  .datos {
    padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
  }
  .datos .sec-num { grid-column: 1 / 3; }
  .datos h2 { grid-column: 1 / -1; margin-block-end: clamp(1.5rem, 4vw, 2.75rem); }
  .figures {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
  }
  .figures li {
    display: grid;
    gap: .5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .figures li:last-child { border-bottom: 1px solid var(--rule); }
  .fig span {
    font-family: var(--mono); font-weight: 500;
    font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem);
    line-height: .85; letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
  }
  .fig__d { color: var(--ink-2); max-width: 34ch; }

  .note {
    grid-column: 1 / -1;
    margin-block-start: 1.75rem;
    font-size: .875rem; color: var(--ink-2); max-width: 52ch;
    padding-inline-start: 1rem;
    /* Neutro a propósito: el ámbar pertenece a la escala de ruido y solo
       significa algo allí. */
    border-inline-start: 1px solid color-mix(in oklab, var(--ink) 35%, transparent);
  }

  @media (min-width: 48em) {
    .figures li {
      grid-template-columns: minmax(9rem, 5fr) 7fr;
      align-items: start;
      gap: var(--gutter);
      padding-block: 2rem;
    }
    .fig__d { padding-block-start: .5rem; }
  }
  @media (min-width: 56em) {
    .datos h2 { grid-column: 1 / 7; }
    .figures { grid-column: 3 / -1; }
    .datos .note { grid-column: 3 / 9; }
  }

  /* ---- 06 para quién ---- */
  .para-quien {
    padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
    background: var(--paper-deep);
  }
  .para-quien .sec-num { grid-column: 1 / 3; }
  .para-quien h2 { grid-column: 1 / -1; margin-block-end: clamp(1.25rem, 3vw, 2rem); }
  .who {
    grid-column: 1 / -1;
    display: grid;
    font-size: clamp(1rem, .95rem + .5vw, 1.25rem);
  }
  .who li {
    padding-block: 1rem;
    border-top: 1px solid var(--rule);
    max-width: 46ch;
  }
  .who li:last-child { border-bottom: 1px solid var(--rule); }
  @media (min-width: 56em) {
    .para-quien .sec-num { grid-column: 1 / 3; grid-row: 1; }
    .para-quien h2 { grid-column: 1 / 5; grid-row: 2; align-self: start; }
    .who { grid-column: 5 / -1; grid-row: 2; }
    .para-quien .note { grid-column: 5 / 11; grid-row: 3; }
  }

  /* ---- 07 faq ---- */
  .faq { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 7rem); }
  .faq .sec-num { grid-column: 1 / 3; }
  .faq h2 { grid-column: 1 / -1; margin-block-end: clamp(1.25rem, 3vw, 2.25rem); }
  .qa { grid-column: 1 / -1; border-top: 1px solid var(--rule); }

  .qa details { border-bottom: 1px solid var(--rule); }
  .qa summary {
    display: flex; align-items: baseline; gap: 1rem;
    padding-block: 1.0625rem;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1rem, .95rem + .35vw, 1.125rem);
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: "+";
    margin-inline-start: auto;
    font-family: var(--mono);
    color: var(--ink-2);
    transition: transform var(--t) var(--ease);
  }
  .qa details[open] summary::after { content: "−"; }
  .qa details[open] summary { color: var(--green-ink); }
  .qa details p {
    padding-block: 0 1.25rem;
    max-width: 58ch;
    color: var(--ink-2);
  }
  @media (min-width: 56em) {
    .faq .sec-num { grid-column: 1 / 3; grid-row: 1; }
    .faq h2 { grid-column: 1 / 6; grid-row: 2; align-self: start; }
    .qa { grid-column: 6 / -1; grid-row: 1 / span 2; }
  }

  /* ---- 08 cta ---- */
  .cta {
    padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 8vw, 7rem);
    background: var(--ink);
    color: var(--paper);
  }
  .cta h2 { grid-column: 1 / -1; }
  .cta .lede {
    grid-column: 1 / -1;
    margin-block: 1rem 2rem;
    max-width: 38ch;
    color: color-mix(in oklab, var(--paper) 74%, var(--ink));
  }
  .cta .cta-block { grid-column: 1 / -1; }
  /* Sobre fondo tinta, el botón se invierte: papel con texto tinta. */
  .cta .btn {
    background: var(--paper); color: var(--ink); border-color: var(--paper);
  }
  .cta .btn:hover { background: var(--n1); border-color: var(--n1); color: var(--ink); }
  .cta .cta-block__note { color: color-mix(in oklab, var(--paper) 70%, var(--ink)); }
  .cta :focus-visible { outline-color: var(--paper); }

  @media (min-width: 56em) {
    .cta .sec-num { grid-column: 1 / 3; grid-row: 1; }
    .cta h2 { grid-column: 1 / 8; grid-row: 2; }
    .cta .lede { grid-column: 1 / 5; grid-row: 3; }
    .cta .cta-block { grid-column: 8 / 12; grid-row: 2 / span 2; align-self: start; }
  }

  /* ---- footer ---- */
  .site-foot { padding-block: 2rem 2.5rem; }
  .site-foot .grid { row-gap: .75rem; align-items: baseline; }
  .foot-mark { grid-column: 1 / -1; --wm-size: 1.125rem; --wm-mark: 2.3rem; }
  .foot-line, .foot-links a, .foot-meta {
    font-family: var(--mono); font-size: .75rem; color: var(--ink-2);
  }
  .foot-line { grid-column: 1 / -1; max-width: 40ch; }
  .foot-links { grid-column: 1 / -1; display: flex; gap: 1.25rem; flex-wrap: wrap; }
  .foot-meta { grid-column: 1 / -1; }
  @media (min-width: 48em) {
    .foot-mark  { grid-column: 1 / 4; }
    .foot-line  { grid-column: 4 / 8; }
    .foot-links { grid-column: 8 / 11; }
    .foot-meta  { grid-column: 11 / -1; text-align: right; }
  }
}

/* --------------------------------------------------------------- motion -- */
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
    .figures { scroll-snap-type: none; }
  }
}