/* =============================================================
   QCC · CAPA DE PÁGINA INTERIOR
   Chrome compartido por las páginas que no son la portada:
   Quiénes somos, Blog, Contacto y los tres documentos legales
   (aviso legal, privacidad y cookies).

   POR QUÉ EXISTE. `m3-capitulos.html` lleva su sistema en un
   `<style>` inline de más de dos mil líneas. Copiarlo en cada
   página nueva haría cuatro copias que se separarían a la
   primera corrección. Aquí vive lo que las cuatro comparten
   —nav, pie, gramática de capítulo, enlaces, foco, movimiento,
   formulario— y cada página añade solo lo suyo.

   Carga DESPUÉS de `base.css` y pisa lo que haga falta.

   DEUDA CONOCIDA: la portada sigue con su copia inline. Cuando
   esto sea un tema de WordPress, las dos capas se funden en el
   `style.css` del tema y la portada deja de tener estilo propio.
   Mientras tanto, un cambio de chrome se aplica en los dos
   sitios. Está anotado en memoria/historico/diario-web.md.
   ============================================================= */

/* ---- tipografía: las mismas correcciones que la portada ----
   Fuente de reserva con métricas ajustadas para que el texto no
   salte cuando Manrope termina de cargar, y cuerpo a 16 px
   porque el público son profesionales de 45 años en adelante. */
@font-face {
  font-family: 'Manrope reserva';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 103%;
  ascent-override: 96%;
  descent-override: 27%;
  font-display: swap;
}

:root {
  --f: 'Manrope', 'Manrope reserva', system-ui, -apple-system, sans-serif;
  --t-sm: 1rem;
  /* Papel de nav y pie: un paso MÁS CLARO que el hueso del cuerpo. Se probó
     en marino y el cliente lo descartó. */
  --paper: #FBFAF7;
  /* Aviso de campo inválido. Terracota apagada: 6,40:1 sobre marino, se
     lleva con la tinta cálida y no grita como un rojo puro. */
  --alert: #E9A79B;
  interpolate-size: allow-keywords;
}

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

/* ---- gramática de capítulo ------------------------------------------
   Idéntica a la portada: portadilla con numeral en el raíl izquierdo,
   titular en las columnas 3-10 y entradilla debajo. La cadencia en tres
   movimientos se expresa en fracciones del token de sección, así que se
   mantiene cuando `--sp-section` baja a 64 px en el teléfono. */
.chapter { border-top: 1px solid var(--line) }
.chapter--brand { background: var(--brand); color: var(--on-ink); border-top-color: var(--brand) }
/* Segundo papel. Solo definía el fondo, y con eso no bastaba: el filete de
   `--line` da 1,31:1 sobre el hueso del cuerpo y baja a 1,20:1 sobre este,
   así que las separaciones casi desaparecían justo en el capítulo que las
   usa más. Redefiniendo el token dentro del bloque, todos los filetes de
   dentro pasan a `--line-2` sin tocar un solo componente: 1,50:1, un pelo
   por encima de la referencia. Los textos siguen pasando AA sobre este
   papel; el más justo es `--ink-3`, que da 4,66:1 contra un umbral de 4,5. */
.chapter--bone2 { background: var(--bone-2); --line: var(--line-2) }
.chapter__body { padding-bottom: var(--sp-section) }

.opener { padding-block: var(--sp-section) var(--sp-block) }
.chapter--cont .opener { padding-top: calc(var(--sp-section) * .55) }
.chapter--open .opener { padding-top: calc(var(--sp-section) * 1.4) }
/* `baseline` y no `end`: con `end` el numeral se apoya en el borde INFERIOR
   del titular, así que un titular de dos líneas lo hundía 56 px respecto a
   uno de una sola. Con `baseline` se apoya siempre en la primera línea y da
   +2 px caiga en una línea o en tres. Misma regla en el inline de la portada. */
.opener > .container {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
}
.opener__t { grid-column: 1/span 8; grid-row: 1 }
/* `text-wrap: balance` reparte las dos líneas del titular en vez de dejar un
   rabo corto debajo. Mismo criterio que en el `<style>` de la portada. */
.opener__t h1, .opener__t h2 { font-size: 3.25rem; letter-spacing: -.035em; text-wrap: balance }
.opener__d {
  grid-column: 1/span 7; grid-row: 2;
  font-size: var(--t-base); color: var(--ink-2);
  padding-top: 20px; max-width: 58ch;
}
.chapter--brand .opener__d { color: rgba(244, 242, 238, .72) }

/* ---- cabecera de página ---------------------------------------------
   Las interiores no tienen el hero de dos paneles de la portada. Abren
   con una portadilla sin numeral: el numeral ordena una serie, y aquí no
   hay serie que ordenar. */
.phead { padding-block: 96px var(--sp-block); border-bottom: 1px solid var(--line) }
.phead > .container {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---- cabecera con fotografía de fondo --------------------------------
   Decisión del usuario del 15 sep 2026: la imagen no va DENTRO de la
   cabecera, como un bloque debajo del texto, sino DE FONDO de la sección
   entera, igual que en los dos paneles del hero de la portada. El titular
   se apoya en la foto en lugar de colgar sobre un bloque suelto.

   EL VELO ES COLOR PLANO, NO DEGRADADO: la regla del cliente sigue
   intacta. Al 0,68 la foto conserva un tercio de su contraste y pasa de
   fotografía a superficie, que es el registro Deloitte/Palantir.

   EL AA NO DEPENDE DE LA FOTO, y esa es la lección cara del 15 sep en el
   hero de la portada. Con el velo al 0,68 sobre un píxel NEGRO —el peor
   caso posible— el compuesto queda en rgb(166,165,162): titular y migas en
   marino dan 4,8:1, y entradilla y migas en `--ink`, 7,5:1. Por eso aquí la
   entradilla sube de `--ink-2` a `--ink` y las migas de `--ink-3` a `--ink`:
   con sus colores de sobre hueso daban 3,9:1 y 2,5:1 en ese mismo caso.
   Cualquier foto nueva entra sin volver a medir mientras no se toquen ni
   esos colores ni el 0,68.

   La foto va en un `<img>` y no en `background-image`: así lleva `srcset`
   por ancho de ventana —una sola petición— y sigue en el HTML servido. En
   WordPress es `the_post_thumbnail('full')` dentro de `header.php`. */
.phead--img { position: relative; isolation: isolate; overflow: hidden; padding-block: 140px 96px }
.phead__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.phead--img::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(244, 242, 238, .68) }
.phead--img > .container { position: relative; z-index: 2 }
.phead--img .crumb li, .phead--img .crumb li + li::before, .phead--img .phead__d { color: var(--ink) }
/* MIGAS DE PAN. Sustituyen a la etiqueta `.phead__k`, que era la palabra de
   sección en el raíl izquierdo con un filete de 2 px en marino encima.
   Retirada por decisión del usuario el 29 jul 2026: «no me gusta este dash
   con la palabra del título de la página a la izquierda».

   No es una sustitución a la baja. La palabra sube encima del titular y deja
   de ser un adorno que repetía lo que el `h1` ya decía: el primer nivel
   enlaza al padre, así que quien entra desde un buscador a una página de
   servicio o a un artículo puede subir al listado. Antes no podía, y era un
   hallazgo abierto de la crítica del 28 jul.

   `list-style: none` NO ES OPCIONAL: `base.css` resetea `ul` pero **no** `ol`,
   así que sin él se pintan el marcador nativo y el separador a la vez y la
   lista sale «1. · 2. ·». Ya pasó una vez en el artículo del blog.

   El separador va en `::before` y no en el marcado: es decorativo y la
   semántica de la lista ya dice que son pasos de una ruta. En WordPress esto
   lo emite el plugin de SEO con este mismo `<nav><ol><li>`. */
.crumb { grid-column: 3/span 9; grid-row: 1; margin-bottom: 6px }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px }
.crumb li { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-xs); color: var(--ink-3) }
/* El separador en `--ink-3` y no en `--line-2`: aquel da 1,50:1 sobre hueso,
   que sirve para un filete de separación pero no para un carácter de 13 px,
   que a ese contraste no se ve. Con `--ink-3` da 4,90:1. Visto en captura. */
.crumb li + li::before { content: '\00B7'; color: var(--ink-3) }
/* 12 px de relleno arriba y abajo sobre 13 px de texto dan 44,2 px de alto:
   son enlaces de navegación, no enlaces dentro de una frase, así que el suelo
   táctil del proyecto les aplica entero. */
/* El último nivel se escribe `li[aria-current]` y NO `[aria-current]` a secas.
   Con la forma corta el selector valía (0,2,0) y le ganaba a `.crumb li`
   (0,1,1), así que le imponía `display: inline-block` al propio `<li>` y le
   quitaba el `display: flex`: el `gap` dejaba de aplicarse y el separador
   salía pegado a la palabra, «·Aperturas». Séptima vez que muerde la
   especificidad en este proyecto. Se corrige con la misma forma del selector,
   nunca subiendo el valor. */
.crumb a { display: inline-block; padding-block: 12px }
.crumb li[aria-current] { padding-block: 12px }
.crumb a {
  color: var(--brand); font-weight: var(--w-medium);
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.crumb a:hover, .crumb a:focus-visible { text-decoration-color: currentColor; color: var(--brand-3) }
@media (prefers-reduced-motion: reduce) { .crumb a { transition: none } }

/* ---- PRUEBA (26 sep 2026): cabecera con foto, velo negro y letra blanca ----
   A petición del usuario, para ver cómo queda; el mismo velo que el hero de la
   portada (`hero--oscuro`) y la franja de la red: el negro cálido de la tinta
   (`--ink`, #141210) al 0,62. Quitar este bloque devuelve el velo hueso.
   Con el velo oscuro el peor caso ya no es un píxel negro sino uno BLANCO:
   el compuesto queda en rgb(109,108,107) y el texto en `--on-ink` da 4,6:1. */
.phead--img::after { background: rgba(20, 18, 16, .62) }
.phead--img .phead__t h1, .phead--img .crumb li, .phead--img .crumb li + li::before,
.phead--img .phead__d, .phead--img .crumb a, .phead--img .crumb a:hover,
.phead--img .crumb a:focus-visible { color: var(--on-ink) }

.phead__t { grid-column: 3/span 9; grid-row: 2 }
.phead__t h1 { font-size: 3.75rem; letter-spacing: -.04em }
.phead__d {
  grid-column: 3/span 7; grid-row: 3;
  font-size: var(--t-lg); color: var(--ink-2); padding-top: 24px; max-width: 54ch;
}
/* ---- texto claro sobre marino ---------------------------------------
   Sobre bloque macizo el cuerpo abre un poco la interlínea y el espaciado:
   el negativo cierra la mancha y a estos tamaños emborronaría. */
.chapter--brand p, .cta p, .cta__way span, .cta .frm__out {
  line-height: 1.62; letter-spacing: .006em;
}

/* ---- enlaces y acciones en línea de texto ---------------------------- */
.link { font-size: var(--t-sm) }
/* El cuerpo y el relleno son los del `<style>` de la portada, y no los de
   `base.css`, POR LA MISMA RAZÓN QUE `.ft__l a`: es el mismo componente en
   las 25 páginas y no puede medir distinto según en cuál esté el visitante.
   Medido el 16 sep 2026: aquí salía a 12 px de cuerpo y 38,6 de alto —por
   debajo del suelo de 15 px y del táctil de 44 que se fijó el proyecto— y en
   la portada a 15 y 46,8. Eran los dos suelos fallando en 24 páginas y, de
   paso, el mismo enlace con dos tamaños. Se igualó al de la portada, que es
   el que cumple. Deuda del chrome duplicado: un cambio aquí se aplica también
   en el `<style>` de la portada. */
.link {
  display: inline-block; color: var(--brand);
  font-size: var(--t-sm); font-weight: var(--w-semibold); letter-spacing: .01em;
  border-bottom: 2px solid currentColor; padding: 18px 0 8px;
}
.link:hover, .link:focus-visible { color: var(--brand-3) }
.chapter--brand .link { color: var(--on-ink); border-color: var(--on-ink) }

/* El subrayado nace de la propia letra, no de un borde: se pega a la
   palabra, sigue los descendentes y respeta el salto de línea. */
.cta__k, .frm__cl a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.cta__k:hover, .frm__cl a:hover { text-decoration-color: currentColor }
.cta__k:focus-visible, .frm__cl a:focus-visible { text-decoration-color: currentColor }
@media (prefers-reduced-motion: reduce) {
  .cta__k, .frm__cl a { transition: none }
}

@media (prefers-reduced-motion: no-preference) {

  @starting-style { .navdrop[open] > ul { opacity: 0; translate: 0 -8px } }
  
}

@media (prefers-reduced-motion: no-preference) {

  @starting-style {
    .nav__links .has-sub:hover > .sub-menu,
    .nav__links .has-sub:focus-within > .sub-menu { opacity: 0; translate: 0 -8px }
  }
}

/* ---- sin entradas ligadas al scroll (27 sep 2026) ------------------
   Petición del usuario: el contenido «sube y baja de un tirón» con cada
   movimiento pequeño del scroll. Eran entradas con `animation-timeline:
   view()` (12 px y opacidad en los primeros 70 px), que además se
   deshacían al subir. Retiradas aquí y en la portada. */

/* ---- formulario -------------------------------------------------------
   Mismo componente que el cierre de la portada. Sin JavaScript sigue
   siendo válido y usable: la validación la hace el navegador y el envío
   es un POST normal que en WordPress recoge Contact Form 7. */
.frm__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px var(--gutter);
}
.frm__f { display: flex; flex-direction: column; position: relative }
.frm__f--wide { grid-column: 1/-1 }
.frm__l { font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em; margin-bottom: 10px }
.frm__i, .frm__s {
  font: inherit; font-size: var(--t-sm); color: var(--ink);
  background: var(--bone); border: 1px solid var(--line-2); border-radius: 0;
  padding: 15px 14px; width: 100%;
  transition: border-color .18s ease;
}
.frm__s {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23141210' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
/* Campo de texto libre. Hereda todo de `.frm__i` —fondo, filete, relleno,
   tipo— y solo añade lo que un `textarea` necesita: altura mínima de cuatro
   líneas, porque por debajo de tres se lee como otra caja de una línea, y
   redimensionado solo en vertical, porque en horizontal rompería la columna.
   `display: block` quita el hueco de línea base que deja el `textarea` en
   línea. En Contact Form 7: `[textarea mensaje maxlength:1200]`. */
.frm__t { display: block; min-height: 116px; resize: vertical; line-height: 1.55 }
.frm__i:focus, .frm__s:focus { border-color: var(--brand); outline-offset: 1px }
.frm__e { font-size: var(--t-xs); color: var(--ink-2); margin-top: 8px; padding-left: 16px; position: relative }
.frm__e::before { content: '!'; position: absolute; left: 0; top: 0; font-weight: var(--w-semibold) }
.frm__e:empty { display: none }
.frm__f.is-bad .frm__i, .frm__f.is-bad .frm__s { border-color: var(--ink) }
.frm__f--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px }
.frm__c { width: 26px; height: 26px; accent-color: var(--brand); flex: none; margin-top: 2px }
.frm__cl { font-size: var(--t-xs); color: var(--ink-2); max-width: 60ch; padding-block: 9px; flex: 1 }
/* El aviso de la casilla iba de HERMANO en la misma fila flexible, así que se
   repartía el ancho con la etiqueta: el texto legal se estrangulaba a 180 px y
   cuatro líneas, y el error aparecía a su derecha en vez de debajo del campo
   al que se refiere. Ocupa fila propia y se sangra los 38 px de la casilla
   (26 de control + 12 de hueco) para alinearse con la etiqueta. */
.frm__f--check .frm__e { flex: 1 0 100%; padding-left: 38px; margin-top: 0 }
.frm__f--check .frm__e::before { left: 22px }
.frm__end { display: flex; align-items: center; gap: 24px; flex-wrap: wrap }
.frm__go { padding: 18px 34px }

/* Respuesta del envío. Faltaba entera en esta capa: el acuse de recibo salía
   como un párrafo más, sin filete, sin destacar la primera frase y sin el
   estado de error. La portada sí lo tiene, en su `<style>` inline, desde el
   principio. Es la deuda del chrome duplicado, y esto la salda para el
   formulario. Sin JavaScript no aparece nunca: el POST lo contesta el
   servidor. */
/* VA ARRIBA DEL FORMULARIO, no debajo. Medido: con el acuse al final, el
   resumen «Faltan 5 datos» se pintaba en y=1015 con el scroll a cero, o sea
   115 px por debajo del pliegue en una pantalla de 900 px de alto y 226 px en
   una de 789 —la de un portátil de 13 pulgadas con la barra del navegador—.
   El foco se iba al primer campo inválido, que ya estaba visible, así que
   quien ve la pantalla NUNCA leía la explicación de lo que había pasado.
   Arriba, el mensaje aparece siempre por encima del primer campo. Y en el
   acuse de éxito, que oculta la rejilla, queda donde estaba el formulario en
   vez de flotar al final de un bloque marino vacío. */
.frm__out {
  display: none; margin: 0 0 30px; padding-top: 22px;
  font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch;
  border-top: 2px solid var(--brand);
}
.frm__out.is-shown { display: block; opacity: 1 }
.frm__out.is-bad { border-top-color: var(--ink) }
.frm__out b { display: block; font-size: var(--t-base); font-weight: var(--w-semibold); color: var(--ink); margin-bottom: 6px }
.frm__out a { color: var(--brand); border-bottom: 1px solid currentColor }
/* Sobre marino el filete y la primera frase vuelven al papel, y el error se
   marca con la terracota apagada. El color nunca es el único portador: el
   texto ya dice qué falta. */
.cta .frm__out { color: var(--on-ink-2); border-top-color: var(--on-ink) }
.cta .frm__out.is-bad { border-top-color: var(--alert) }
.cta .frm__out b { color: var(--on-ink) }
.cta .frm__out a { color: var(--on-ink); border-bottom-color: var(--on-ink-3) }
.frm.is-sent .frm__grid { display: none }

@media (prefers-reduced-motion: no-preference) {
  .frm__out { transition: opacity .26s ease, translate .26s cubic-bezier(.16, 1, .3, 1), display .26s allow-discrete }
  .frm__out.is-shown { opacity: 1; translate: 0 0 }
  @starting-style { .frm__out.is-shown { opacity: 0; translate: 0 8px } }
}

/* ---- documento legal --------------------------------------------------
   Aviso legal, privacidad y cookies. Son páginas de LECTURA, no de venta:
   el visitante viene a entender algo concreto y a veces a citarlo. De ahí
   las tres decisiones de esta capa:

   1. Índice fijo en el raíl izquierdo. Un documento de siete apartados que
      se lee a saltos necesita saber dónde está y poder volver. Sin
      JavaScript sigue siendo una lista de anclas que funciona; `legal.js`
      solo añade en qué apartado está.
   2. Medida corta de verdad. La prosa jurídica es densa: 66,7 caracteres
      por línea de media —80 en el percentil 90, 84 la línea más larga— y
      una interlínea de 1,7, por debajo de las columnas del resto del
      sitio. El tope vale a CUALQUIER ancho, también estrecho: ver la nota
      del bloque de 900 px.
   3. Numeración de un solo nivel. Los apartados van numerados 1..N y los
      sub-apartados NO llevan cifra. Se probó con subnumeración (5.1, 5.2)
      argumentando que un documento jurídico necesita poder citarse, y el
      cliente lo rechazó el 26 jul 2026: la regla de «sin subnumeración»
      no admite excepción. Los 9 subnúmeros se retiraron. El numeral de
      apartado va en gris y sin peso para que no compita con el titular.
   ------------------------------------------------------------------------ */
.lgl {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-block: var(--sp-block) var(--sp-section);
}

/* Índice. `top` = altura de la nav pegajosa (80) + aire. */
.idx { grid-column: 1/span 3; position: sticky; top: 104px; align-self: start }
.idx__h {
  font-size: var(--t-2xs); font-weight: var(--w-semibold); letter-spacing: .01em;
  color: var(--ink-3); margin-bottom: 14px;
}
/* 13 px de relleno y no 11: con 11 el enlace de una sola línea medía 40,5 px
   y el suelo táctil del proyecto es de 44. Con 13 da 44,5. Los de dos líneas
   ya pasaban de sobra. Afecta también a los tres documentos legales, que
   comparten el componente, y ahí corrige el mismo hueco. */
.idx a {
  display: flex; gap: 10px; align-items: baseline;
  border-top: 1px solid var(--line); padding: 13px 0;
  font-size: var(--t-xs); color: var(--ink-2); line-height: 1.35;
}
.idx a:hover { color: var(--brand) }
.idx a > b { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; color: var(--ink-3); flex: none }
.idx a[aria-current="location"] { color: var(--brand); font-weight: var(--w-semibold) }
.idx a[aria-current="location"] > b { color: var(--brand) }

/* Cuerpo del documento. */
/* 56ch de Manrope miden 580,7 px. El `ch` mide el ancho del cero, más
   ancho que la media de la minúscula, así que el número de caracteres
   reales sale más alto que el de `ch`: 66,7 de media, 80 en el percentil
   90 y 84 la línea más larga, medidos línea a línea con `Range` en
   navegador sobre la política de privacidad. El `ch` resuelve aquí a
   17 px (el tamaño heredado por `.doc`), no a los 16 px de la prosa. */
.doc { grid-column: 5/span 7; max-width: 56ch }
.doc__u {
  font-size: var(--t-xs); color: var(--ink-3);
  border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px;
}
.doc > section { padding-top: 60px }
.doc > section:first-of-type { padding-top: 0 }
.doc h2 { font-size: 1.625rem; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 22px }
.doc h3 {
  /* 20 px y no 17: contra un cuerpo de 16 px, un escalón de un píxel deja
     que la jerarquía la sostengan solo el color y el peso. La escala del
     apartado queda 26 → 20 → 16. Comparte tamaño con la entradilla, y de
     ella lo separan el peso, el color y el sitio donde aparece. */
  font-size: var(--t-lg); color: var(--ink); letter-spacing: -.02em; line-height: 1.3;
  margin: 36px 0 12px;
}
.doc__n { color: var(--ink-3); font-weight: var(--w-regular); margin-right: 8px; font-variant-numeric: tabular-nums }

/* Entradilla de apartado. La misma figura que `.phead__d`, una escala más
   abajo: es la gramática de capítulo del proyecto aplicada dentro del
   documento, no un componente nuevo.

   Existe porque estas tres páginas se leen en dos registros a la vez. El
   articulado va en tercera persona y con el vocabulario que le exigen la
   LSSICE y el RGPD; «el usuario» es ahí un término definido y no se toca.
   La entradilla dice lo mismo en español llano y tratando de usted, que es
   la regla de marca. Ninguna de las veinte añade un hecho que no esté ya
   debajo: son un resumen, no contenido nuevo, y no tienen efecto jurídico.

   Escala del apartado: titular a 26 px, entradilla a 20, articulado a 16.
   Tres pasos claros, y ninguno de ellos es una caja.

   En WordPress es un campo de texto por apartado del repetidor de ACF,
   junto al titular y al cuerpo. */
.doc__e {
  font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55;
  margin-bottom: 26px; max-width: 46ch;
}
/* `:where()` y no `.doc` a secas. Con `.doc p` la regla vale 0-1-1 y le gana
   a cualquier clase que se le ponga al párrafo, así que `.doc__u`, `.doc__e`
   y `.doc__hint` salieron las tres con el tamaño del cuerpo hasta que se las
   calificó una por una. `:where(.doc) p` vale 0-0-1 y entonces manda la
   clase, que es lo que se espera al escribirla. Se arregla aquí en vez de
   ir calificando cada clase nueva que entre en el documento. */
:where(.doc) p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; margin-bottom: 18px }
.doc ul { margin-bottom: 22px }
:where(.doc) li {
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7;
  position: relative; padding-left: 20px; margin-bottom: 10px;
}
.doc li::before {
  content: ''; position: absolute; left: 0; top: .8em;
  width: 8px; height: 1px; background: var(--line-2);
}
.doc strong { color: var(--ink); font-weight: var(--w-semibold) }
.doc a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.doc a:hover { color: var(--brand-3) }
.doc > section > *:last-child { margin-bottom: 0 }

/* Tabla de cookies. Cinco columnas no caben en un teléfono: en vez de
   romper la tabla en bloques —que se lleva por delante la semántica y la
   navegación por celdas del lector de pantalla— se hace desplazable ella
   sola, con `tabindex` para que también se pueda recorrer con el teclado.
   La página nunca desplaza en horizontal; la tabla sí, dentro de su caja.

   El orden de columnas lo decide el teléfono, no el escritorio. A 390 px
   quedaban 210 px fuera de vista y lo que se iba eran Tipo y Duración,
   que es justo el dato por el que se entra a una tabla de cookies. Van
   ahora en las columnas 2 y 3, y Finalidad —la única celda de prosa, y la
   que se puede leer desplazando sin perder nada— cierra por la derecha.

   `border-collapse: separate` y no `collapse` porque una celda pegajosa
   con bordes colapsados los pierde al desplazar: el borde pertenece a la
   tabla, no a la celda, y se queda atrás. Con `separate` y espaciado cero
   el resultado visual es idéntico y el filete viaja con la columna. */
.ctab-wrap { overflow-x: auto; margin-bottom: 26px }
.ctab-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px }
/* Sin anchura mínima en escritorio: la tabla se ajusta a su columna. Con
   los 640 px de abajo aplicados a todos los anchos, las tres tablas del
   sitio desbordaban 59 px a 1440 y 101 px a 901 —columna de 581 y 539 px—
   y la última columna quedaba cortada sin aviso, porque el aviso solo sale
   en móvil. Ajustadas, las dos de los artículos caben con holgura. La de
   cookies necesitaba 627 px por tres identificadores que no se pueden
   partir; con `<wbr>` en el HTML baja a 516 y cabe desde 901 px. */
.ctab { width: 100%; border-collapse: separate; border-spacing: 0 }
.ctab th {
  text-align: left; font-size: var(--t-2xs); font-weight: var(--w-semibold);
  letter-spacing: .01em; color: var(--ink-3);
  border-bottom: 2px solid var(--brand); padding: 0 18px 12px 0;
}
.ctab td {
  font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55;
  border-top: 1px solid var(--line); padding: 14px 18px 14px 0; vertical-align: top;
}
/* Con `separate`, el filete de la primera fila se sumaría a los 2 px de la
   cabecera. Con `collapse` los fundía el navegador; aquí lo hacemos a mano. */
.ctab tbody tr:first-child td { border-top: 0 }
.ctab td:first-child { color: var(--ink); font-weight: var(--w-semibold) }
.ctab th:last-child, .ctab td:last-child { padding-right: 0 }

/* La pista de desplazamiento solo existe cuando la tabla desplaza. Es CSS,
   no JavaScript: sale en el HTML servido y se oculta por ancho. */
.doc__hint { display: none }

/* Pie del documento: los otros dos, siempre a un clic. */
.lgl-more { border-top: 1px solid var(--line); background: var(--bone-2) }
.lgl-more > .container { padding-block: 64px }
/* `balance` para que la entradilla no deje una palabra sola en la segunda
   línea. Es el mismo recurso que ya usa el titular del hero en el `<style>`
   de la portada, y donde no se soporta simplemente no pasa nada. */
.lgl-more h2 { font-size: 1.375rem; letter-spacing: -.03em; margin-bottom: 8px; text-wrap: balance }
.lgl-more__d { font-size: var(--t-sm); color: var(--ink-2); max-width: 46ch; text-wrap: balance }
.lgl-more ul { display: flex; flex-wrap: wrap; gap: 0 var(--gutter); margin-top: 36px }
.lgl-more li { flex: 1 1 240px; border-top: 2px solid var(--brand) }
.lgl-more li a { display: block; padding: 18px 0 20px }
.lgl-more__t { font-size: var(--t-base); font-weight: var(--w-semibold); color: var(--brand); letter-spacing: -.02em }
.lgl-more__s { display: block; font-size: var(--t-xs); color: var(--ink-2); margin-top: 6px; max-width: 32ch }
.lgl-more li a:hover .lgl-more__t { color: var(--brand-3) }

@media(max-width:900px) {
  .lgl { display: block; padding-block: 36px var(--sp-section) }
  .idx { position: static; margin-bottom: 44px; padding-bottom: 8px; border-bottom: 1px solid var(--line) }
  /* `.doc` NO suelta aquí su `max-width`. Lo hizo hasta el 17 ago 2026 y
     el resultado eran 90,6 caracteres de media por línea a 880 px y 116 en
     el percentil 90: la franja de 744 a 900 px —tableta vertical, ventana
     a media pantalla— y sobre todo el 1440 al 175-200 % de zoom, que el
     navegador entrega como un viewport de 720 px. Quien amplía la letra
     recibía la línea más larga de todo el sitio, justo al revés de lo que
     necesita. El tope de 56ch se mantiene y la columna queda corta contra
     el margen izquierdo, que es lo que hace un documento de lectura. */
  .doc > section { padding-top: 44px }
  .doc h2 { font-size: 1.375rem; margin-bottom: 18px }
  /* 640 y no 560: con 560 la columna Finalidad se quedaba en 164 px, su prosa
     caía a cuatro renglones y la fila más alta medía 170 px de los que casi
     todo era hueco a la izquierda. Con 640 la Finalidad tiene 244 px, baja a
     tres renglones y la tabla pasa de 620 a 459 px de alto a 390 px de ancho:
     161 px menos de hueco a cambio de 80 px más de desplazamiento, que ya va
     anunciado. Con 700 solo se ganan otros 21 px y se pagan 60 de scroll.
     Medido con la tabla de cookies anterior; la de las 13 cookies medidas
     tiene a 390 px 1.255 px de alto. Por debajo de 901 px la columna nunca
     pasa de 581 px, así que la tabla siempre desplaza y el aviso es cierto. */
  .ctab { min-width: 640px }
  /* Columna Nombre congelada. Sin ella se desplaza a la derecha para leer
     la duración y se pierde de qué cookie es la fila. El filete derecho
     dice dónde acaba lo que se queda quieto. */
  .ctab th:first-child, .ctab td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--bone);
    padding-right: 14px; border-right: 1px solid var(--line);
  }
  .doc__hint {
    display: block; font-size: var(--t-xs); color: var(--ink-3);
    line-height: 1.5; margin-bottom: 12px;
  }
  .lgl-more > .container { padding-block: 44px }
  .lgl-more ul { display: block }
  .lgl-more li + li { margin-top: 18px }
}
@media(min-width:901px) and (max-width:1200px) {
  .idx { grid-column: 1/span 3 }
  .doc { grid-column: 5/span 8 }
}

/* ---- artículo del blog ------------------------------------------------
   Plantilla de entrada única. NO inventa una gramática nueva: reutiliza
   entera la del documento legal —índice pegajoso en el raíl izquierdo,
   prosa en medida corta a la derecha, `legal.js` marcando el apartado en
   pantalla— porque el problema es el mismo: un texto largo que se lee a
   saltos y al que hay que poder volver.

   Vive aquí y no en el `<style>` de cada artículo porque son tres páginas
   (y serán ocho) que comparten la composición. Copiarla en cada archivo
   haría copias que se separarían a la primera corrección, que es
   exactamente la deuda que ya arrastra la portada.

   Lo único propio del artículo son las cuatro reglas de abajo. Todo lo
   demás —`.lgl`, `.idx`, `.doc`, `.ctab`, `.lgl-more`— se hereda sin
   tocar, así que un cambio en el documento legal llega también aquí.

   Diferencias deliberadas con el legal:
   · Sin numerales de apartado. En un documento jurídico numeran para
     poder citarlo; en un artículo suenan a articulado. El índice lleva
     solo el texto, y `.idx a` ya funciona con un hijo en vez de dos.
   · Sí lleva cierre marino. El legal no cierra en venta y este sí: el
     artículo es la puerta de entrada de quien todavía no ha llamado.
   · Sin fecha. Igual que en el sumario, inventarla sería fabricar un
     dato. El hueco está previsto: un `<time datetime>` dentro de
     `.doc__u`, alimentado por `the_date()`.

   En WordPress esto es `single.php`. El índice se genera de los `h2` del
   contenido y `.doc` sale de `the_content()`. */

/* El titular de apartado baja al paso `subheading` de DESIGN.md, el mismo
   que usa el titular del sumario: el legal lo lleva a 1,625rem, que en una
   lectura seguida de siete apartados pesa demasiado contra un cuerpo de
   15 px. */
.doc--art h2 { font-size: 1.5rem }

/* Listas ordenadas: el legal solo tiene viñetas, y un artículo que explica
   un cálculo necesita pasos numerados. La viñeta de `.doc li::before` es un
   filete de 8 px, así que aquí se sustituye por el contador. */
/* `list-style:none` es obligatorio aquí: `base.css` resetea `ul` pero NO `ol`,
   así que sin esto se pintan los dos marcadores —el nativo y el contador— y la
   lista sale «1. 1.», «2. 2.». Visto en captura, no en el CSS. */
.doc ol { counter-reset: paso; list-style: none; margin-bottom: 22px }
.doc ol > li { counter-increment: paso; padding-left: 30px }
.doc ol > li::before {
  content: counter(paso) '.';
  width: auto; height: auto; background: none; top: 0;
  color: var(--ink-3); font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

/* Supuestos de un ejemplo trabajado. Los números de los artículos de
   Gestión son ARITMÉTICA, no datos de sector: QCC no ha publicado ni un
   margen medio ni un precio de referencia, así que cada cifra de ejemplo
   va con su supuesto a la vista. El bloque tiene que leerse como una nota
   al pie del cálculo, no como un dato más. Filete a la izquierda en marino,
   cuerpo un grado por debajo. `--ink-3` sobre hueso pasa AA de sobra: el
   caso más justo del sitio es este mismo tono sobre `--bone-2`, 4,66:1. */
.nota { border-left: 2px solid var(--brand); padding-left: 20px; margin-bottom: 26px }
.nota p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.65; margin-bottom: 10px }
.nota > *:last-child { margin-bottom: 0 }

/* Figuras del blog (decisión del usuario del 29 sep 2026): diagramas en SVG
   en línea que explican un proceso, un reparto o una comparación con datos
   verificados. Los genera herramientas/nuevo-articulo.py. El texto del SVG
   es texto real de la página (se lee, se busca y lo revisa revisar-copy.py),
   no una imagen con letras. Se dibujan para el teléfono: viewBox de unos
   400 de ancho y ningún texto por debajo de 12 px a 343 px de columna. En
   escritorio no pasan de 560 px para que las letras no crezcan más que el
   cuerpo. Colores solo por clase, con los tokens: sin degradados ni
   esquinas redondeadas, como el resto del sitio. */
.fig { margin: 32px 0 }
.fig svg { display: block; width: 100%; max-width: 560px; height: auto; font-family: var(--f); overflow: visible }
.fig figcaption { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; margin-top: 12px; max-width: 560px }
.fig .f-marca { fill: var(--brand) }
.fig .f-tinte { fill: var(--brand-tint) }
.fig .f-hueso { fill: var(--bone-2) }
.fig .f-papel { fill: var(--bone) }
.fig .f-texto { fill: var(--ink) }
.fig .f-texto-2 { fill: var(--ink-3) }
.fig .f-claro { fill: var(--on-ink) }
.fig .f-linea { fill: none; stroke: var(--line-2); stroke-width: 1.5 }
.fig .f-linea-marca { fill: none; stroke: var(--brand); stroke-width: 2 }

/* Volver al sumario, arriba del índice. Un artículo se abre desde una
   búsqueda tan a menudo como desde el blog, así que la vuelta no puede
   depender de que exista historial. */
.idx__back {
  display: inline-block; font-size: var(--t-xs); font-weight: var(--w-semibold);
  color: var(--brand); padding-block: 10px; margin-bottom: 6px;
}
.idx__back:hover, .idx__back:focus-visible { color: var(--brand-3) }

@media(max-width:900px) {
  .doc--art h2 { font-size: 1.375rem }
}

/* ---- página de servicio -----------------------------------------------
   Plantilla única de las cinco líneas de trabajo: Aperturas, Gestión,
   Expansión, Marketing y Licencias. Desde el 26 sep 2026 la compone el bloque
   «PÁGINA DE SERVICIO, SEGUNDA VERSIÓN», al final de este archivo; de la
   primera versión solo siguen en uso las preguntas (`.qa`). Las piezas
   retiradas (`.svp`, `.caps`/`.cap`, `.fases`/`.fase`, `.also`/`.next`) están
   en git.

   VIVE AQUÍ Y NO EN EL `<style>` DE CADA ARCHIVO. Son cinco páginas con la
   misma composición; cinco copias se separarían a la primera corrección. */

/* Preguntas. `<details>` nativo y no el acordeón de la portada: aquí no
   hay filtrado por ruta que justifique JavaScript, y sin él el nativo abre y
   cierra igual. Todo el texto está en el HTML servido lo abra o no. */
.qa { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter) }
.qa__i { grid-column: 1/span 10; border-top: 1px solid var(--line) }
.qa__q {
  list-style: none; cursor: pointer; position: relative;
  padding: 28px 60px 28px 0;
  font-size: 1.5rem; font-weight: var(--w-semibold); color: var(--brand);
  letter-spacing: -.03em; line-height: 1.2;
}
.qa__q::-webkit-details-marker { display: none }
.qa__q::after {
  content: '+'; position: absolute; right: 0; top: 26px;
  font-size: 2rem; font-weight: var(--w-regular); line-height: 1; color: var(--brand);
}
.qa__i[open] .qa__q::after { content: '\2212' }   /* signo menos, no guion */
/* Sin relleno derecho. Lo llevaba, copiado del `.faq__a` de la portada, que NO
   tiene `max-width`: allí el relleno ES la medida. Aquí se sumaban los dos, y
   como `base.css` pone `box-sizing: border-box` los 175 px de relleno caían
   DENTRO de los 64ch, así que la respuesta se leía en una columna de 448 px
   —unos 46 caracteres— en vez de los 623 que pedía el `max-width`. Medido a
   1440, 1200, 1024 y 901 px: la caja daba 623,1 px en los cuatro y el texto
   nunca pasaba de 448. La medida la fija el `max-width` y nada más. */
.qa__a { padding: 0 0 32px; font-size: var(--t-base); color: var(--ink-2); max-width: 64ch }

@media(max-width:900px) {
  .qa { grid-template-columns: 1fr }
  .qa__i { grid-column: auto }
  .qa__q { font-size: 1.25rem; padding: 22px 44px 22px 0 }
  .qa__q::after { top: 18px }
}

/* ---- cierre marino, común a las tres páginas ------------------------- */
.cta { background: var(--brand); color: var(--on-ink); padding-block: 110px }
.cta > .container { display: block }
.cta h2 { font-size: 3.25rem; letter-spacing: -.035em; margin-bottom: 20px; max-width: 20ch }
.cta__intro p { font-size: var(--t-base); color: rgba(244, 242, 238, .72); max-width: 52ch }
/* La petición de reunión de las páginas de servicio. Vivía dentro de
   `.cta__ways`, que es la lista de vías ALTERNATIVAS —así lo declara el
   comentario de la portada—, y allí medía 45 × 160 px con el mismo color,
   peso, tamaño y familia que el teléfono. `btn--inv` es el componente que
   `DESIGN.md` define para fondo marino y que la portada ya usa. */
.cta__go { margin-top: 40px }
.cta__ways { display: flex; flex-wrap: wrap; gap: 12px 56px; margin-top: 44px }
.cta__way { display: flex; flex-direction: column }
/* 7 px de relleno y no 4: con 4 el enlace medía 39 px de alto y el suelo
   táctil del proyecto es 44. Con 7 da 45. Son el teléfono, el correo y la
   dirección —las tres salidas de emergencia de quien no quiere rellenar el
   formulario—, así que fallar el objetivo justo ahí es caro. Afecta también
   al cierre marino del blog y de los artículos, que comparten componente. */
.cta__k {
  font-size: var(--t-lg); font-weight: var(--w-semibold); color: var(--on-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  display: inline-block; padding-block: 7px;
}
.cta__way span { font-size: var(--t-xs); color: rgba(244, 242, 238, .66) }
/* `background-color` y NO el atajo `background`. El atajo reinicia también
   `background-repeat` y `background-position`, que el `.frm__s` de arriba deja
   en `no-repeat` y `right 14px center`. Al reiniciarlos volvían a `repeat` y
   `0% 0%`, así que sobre marino el chevrón del desplegable se embaldosaba a lo
   ancho del campo entero y tapaba el texto de la opción. Visible en Contacto,
   en el único `select` del sitio. La copia inline de la portada no lo tenía:
   allí la imagen se declara en una regla POSTERIOR al atajo. */
/* EL BORDE NO PUEDE SER `--line-on-ink`. Ese token está pensado para separar
   dos zonas dentro del marino, y sobre `#14315F` da 1,57:1. Aquí no separa:
   el campo tiene el fondo en `transparent`, así que ESE FILETE DE 1 PX ES LA
   ÚNICA SEÑAL DE QUE HAY UN CAMPO, y WCAG 1.4.11 pide 3:1 para el borde de un
   componente. `rgba(244,242,238,.40)` da 3,13:1 sobre marino. No toca el color
   de marca ni añade fondo. El usuario de esta página tiene 45 años o más y
   rellena esto en un móvil: con 1,57:1 los cuatro recuadros desaparecían. */
.cta .frm__i, .cta .frm__s { background-color: transparent; border-color: rgba(244, 242, 238, .40); color: var(--on-ink) }
.cta .frm__i:focus, .cta .frm__s:focus { border-color: var(--on-ink) }
.cta .frm__l { color: var(--on-ink) }
.cta .frm__e { color: var(--alert) }
.cta .frm__cl { color: var(--on-ink-2) }
/* El enlace legal se subraya SIEMPRE, y es la única excepción a la regla del
   subrayado que aparece al hover. Sin ella «la política de privacidad» tiene
   el mismo color, el mismo peso y el mismo tamaño que el texto que la rodea:
   ninguna señal de que sea un enlace. Se le está pidiendo al visitante que
   firme «he leído» un documento que no puede ver que es un documento. */
.frm__cl a { text-decoration-color: currentColor }
/* La casilla inválida no cambiaba un solo píxel: `.frm__f.is-bad` solo
   reestiliza `.frm__i` y `.frm__s`, y la casilla no es ninguna de las dos.
   Salía el mensaje debajo y nada más. */
.frm__f--check.is-bad .frm__c { outline: 2px solid var(--ink); outline-offset: 3px }
.cta .frm__f--check.is-bad .frm__c { outline-color: var(--alert) }
.cta .frm__s {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F4F2EE' stroke-width='2'/%3E%3C/svg%3E");
}
.cta .frm__f.is-bad .frm__i, .cta .frm__f.is-bad .frm__s { border-color: var(--alert) }

/* ---- responsive ------------------------------------------------------- */
@media(max-width:900px) {

  .phead { padding-block: 56px var(--sp-block) }
  .phead > .container, .opener > .container { display: block }
  .crumb { margin-bottom: 4px }
  .phead__t h1 { font-size: 2.25rem }
  .phead__d { padding-top: 18px }
  /* En el teléfono el texto ocupa el ancho entero, así que la banda se
     queda en 96/64: más alta que la cabecera sin foto, pero sin empujar el
     primer capítulo fuera de la primera pantalla. */
  .phead--img { padding-block: 96px 64px }
  /* El panel pasa a vertical (de 0,79:1 a 0,65:1) y `cover` se queda con el
     46 % del ancho del archivo. Centrado enseñaría el campo vacío de la
     izquierda; al 78 % enseña el tercio derecho, que es donde el brief pone
     el motivo que cuenta la página. Ventana visible: del 56 % al 100 %. */
  .phead__bg { object-position: 78% center }
  .opener__t h1, .opener__t h2 { font-size: 2rem }
  .opener__d { margin-top: 14px }

  .frm__grid { grid-template-columns: 1fr; gap: 24px }
  .frm__end { gap: 18px }
  .frm__go { width: 100%; justify-content: center }
  .cta { padding-block: 64px }
  .cta h2 { font-size: 2rem }
  .cta__ways { gap: 0 28px }

}

/* ---- rango intermedio: portátil pequeño y tableta apaisada ------------
   El punto de ruptura es de contenido, no de dispositivo: 1200 px es donde
   la prosa cruza los 45 caracteres por línea. */
@media(min-width:901px) and (max-width:1200px) {
  .phead__t h1 { font-size: 2.75rem }
  /* JERARQUÍA INVERTIDA, y llevaba invertida desde que existe esta capa. El
     `h1` de la página baja a 2,75rem en este tramo porque el contenedor se
     estrecha, pero los titulares que van POR DEBAJO de él —el de cada capítulo
     y el del cierre— se quedaban en los 3,25rem de arriba. Medido a 901, 1024
     y 1200 px: h1 44 px, h2 de capítulo 52, h2 del cierre 52. El titular de la
     página era el MÁS PEQUEÑO de los tres niveles, con el mismo color y la
     misma columna. Bajarlos a 2,5rem —paso del tramo medio de DESIGN.md—
     devuelve el orden. Afecta a las 20 páginas interiores, no solo a las de
     servicio: el `h2` de capítulo lo tienen 7 y el del cierre, las 20. */
  .opener__t h1, .opener__t h2, .cta h2 { font-size: 2.5rem }

}

/* ---- impresión --------------------------------------------------------
   Solo para las páginas de lectura larga: los tres documentos legales y los
   artículos del blog. El contrato de dirección del aviso legal dice que el
   visitante viene «a veces a citarlo», y hasta el 17 ago 2026 no había una
   sola regla de impresión en el proyecto: el papel salía con la barra
   pegajosa encima, las cinco fotos del mega menú y el pie entero.

   Cuatro decisiones:

   1. Blanco y negro de verdad. El hueso `#F4F2EE` en papel es tinta gastada
      y un gris sucio. En pantalla el fondo es la mitad del sistema; en papel
      no aporta nada.
   2. Fuera todo lo que no es el documento: barra, migas, enlace de salto y
      la franja de cierre, que es navegación. Del pie se queda la barra legal
      porque identifica al titular de lo que se acaba de imprimir.
   3. El índice se imprime. Sin enlaces no navega, pero sigue diciendo de
      cuántos apartados consta el documento y en qué orden van.
   4. Nada se parte donde duele: un titular nunca cierra una página y una
      fila de la tabla no se corta por la mitad.
   --------------------------------------------------------------------- */
@media print {
  @page { margin: 18mm 16mm }

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

  .crumb, .lgl-more, .phead__bg { display: none }
  .phead--img { padding-block: 0 12pt }
  .phead--img::after { display: none }

  main, .container, .lgl { display: block; max-width: none; padding: 0; margin: 0 }

  .phead { padding: 0 0 12pt }
  .phead h1 { font-size: 24pt; color: #000; margin-bottom: 6pt }
  .phead__d { font-size: 11pt; color: #000; max-width: none; padding-top: 0 }

  /* El índice, sin filete de foco ni posición pegajosa. */
  .idx { position: static; margin: 0 0 18pt; padding: 0 0 8pt; border-bottom: 1px solid #000 }
  .idx a { border-top: 0; padding: 2pt 0; color: #000; font-size: 9pt }
  .idx a > b { color: #000 }

  .doc { max-width: none }
  .doc > section { padding-top: 16pt }
  .doc h2 { font-size: 13pt; color: #000 }
  .doc h3 { font-size: 11pt; color: #000 }
  .doc__e, :where(.doc) p, :where(.doc) li, .doc__u { color: #000; font-size: 10pt; line-height: 1.45 }
  /* La medida corta es de pantalla. En papel la columna ya la fija el
     margen de `@page`, y dejar el tope de 46ch hacía que la entradilla
     cortase a dos tercios del ancho mientras el articulado iba entero. */
  .doc__e { font-size: 11pt; max-width: none; margin-bottom: 8pt }
  .doc__u { margin-bottom: 4pt; padding-bottom: 6pt }
  .doc a { color: #000; text-decoration: underline }

  /* La dirección de un enlace que sale del sitio no se puede pulsar en
     papel, así que se escribe. Los internos no: se deducen del documento. */
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all }

  /* La tabla cabe entera: ni caja desplazable, ni ancho mínimo, ni parada
     de teclado que en papel no significa nada. */
  .ctab-wrap { overflow: visible }
  .ctab { min-width: 0; width: 100%; font-size: 9pt }
  .ctab th { color: #000; border-bottom: 1pt solid #000 }
  .ctab td { color: #000; border-top: .5pt solid #999 }
  .ctab thead { display: table-header-group }
  .ctab tr { break-inside: avoid }

  h1, h2, h3 { break-after: avoid }
  .doc__e { break-before: avoid }
  .doc > section { break-inside: auto }
}

/* =======================================================================
   JERARQUÍA EN EL TELÉFONO · 16 sep 2026
   =======================================================================
   Gemelo del bloque que cierra el `<style>` de la portada. Va al final del
   archivo a propósito: corrige por orden de cascada y no subiendo el peso
   del selector, así que cada regla se lee al lado de la que sustituye.

   No cambia ni una palabra, ni una imagen, ni el orden del documento. Solo
   cuánto sitio ocupa cada cosa y qué forma tiene el control que lleva a la
   siguiente. Ninguna sección se reordena con `order`: el orden visual sigue
   siendo el del DOM, que es de donde sale el orden de tabulación de los
   enlaces que van dentro (WCAG 2.4.3).
   ======================================================================= */
@media(max-width:900px) {

  /* ---- 1 · el botón que paga la página, a ancho completo ---------------
     Medido: `.cta__go` salía a 198 × 57 px, alineado a la izquierda, en un
     cierre marino de 390 px de ancho. Es la petición de reunión, y en el
     teléfono competía en peso con el teléfono y el correo que van justo
     debajo. A ancho completo pasa a ser lo único que se puede tocar en esa
     pantalla, con la misma forma que ya tiene el envío del formulario de
     /contacto en este mismo ancho. Está en 23 de las 25 páginas.

     El tope de 420 px es para la tableta: a 390 px el ancho disponible es
     350 y el botón sale entero, pero a 768 sin tope medía 728 × 56 px y a
     esa proporción deja de leerse como botón. */
  .cta__go { width: 100%; max-width: 420px; justify-content: center; min-height: 56px; margin-top: 32px }

  /* ---- 3 · el formulario -----------------------------------------------
     24 px entre campos dejaban tres campos por pantalla; con 18 entran
     cuatro, y un formulario que se ve entrar en una pantalla se percibe
     más corto que el mismo formulario en dos. Las cajas no se tocan: 58 px
     de alto y 17 px de cuerpo, que es lo que evita el zoom de iOS. */
  .frm__grid { gap: 18px }

}

/* =======================================================================
   PÁGINA DE SERVICIO, SEGUNDA VERSIÓN (26 sep 2026)
   Petición del usuario: menos texto, más sobre el problema del visitante
   que sobre Quality Clinic, más llamadas a la reunión y más visual e
   interactiva, como la portada. Orden: cabecera con dos acciones y prueba,
   situación en una franja baja, seis decisiones (problema → lo que hace
   Quality Clinic al pasar el ratón), franja de reunión, un solo equipo con
   diagrama animado, reseña y cifras, método en franja de fotos,
   preguntas, cierre con formulario, otras líneas en franja con foto y
   lecturas del blog. Muestra en Aperturas; las otras cuatro siguen con
   `.svp`, `.caps`, `.fases` y `.also` hasta que se aprueben.
   ======================================================================= */

/* ---- acciones de la cabecera ---- */
.btn i { font-style: normal; transition: translate .25s cubic-bezier(.16,1,.3,1) }
.btn:hover i, .btn:focus-visible i { translate: 4px 0 }
.btn--line-inv { border-color: var(--on-ink); color: var(--on-ink) }
.btn--line-inv:hover, .btn--line-inv:focus-visible { background: var(--on-ink); color: var(--ink) }
.phead__go { grid-column: 3/span 9; grid-row: 4; display: flex; flex-wrap: wrap; gap: 14px; padding-top: 40px }
.phead__proof {
  grid-column: 3/span 9; grid-row: 5; display: flex; flex-wrap: wrap; gap: 10px 32px;
  padding-top: 32px; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--on-ink)
}
.phead__proof li { display: flex; align-items: center; gap: 10px }
.phead__proof li + li { gap: 0 }
.phead__proof li + li::before { content: ''; width: 5px; height: 5px; background: var(--on-ink-2); margin-right: 22px }

/* ---- situación: franja baja ----
   Más estrecha (usuario, 26 sep 2026): rótulo y frase en la misma línea de
   lectura, 20 px de aire arriba y abajo. */
.sit { background: var(--bone-2); border-bottom: 1px solid var(--line) }
.sit__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter) }
.sit__i { padding: 20px 24px 22px; border-left: 1px solid var(--line-2); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2) }
.sit__i:first-child { border-left: 0; padding-left: 0 }
.sit__k { display: block; font-weight: var(--w-semibold); color: var(--brand); margin-bottom: 2px }
.sit + .chapter { border-top: 0 }
.sit + .chapter .opener { padding-top: 48px }
.sit__d a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.sit__d a:hover, .sit__d a:focus-visible { color: var(--brand-3) }

/* ---- seis decisiones: problema → lo que hace Quality Clinic ----
   Sin JavaScript las dos caras van una debajo de otra. Con `servicio.js`
   (`.pains.is-live`) se apilan en la misma celda y el panel marino sube al
   pasar el ratón, al llegar con el teclado o al tocar la ficha. La ficha no
   se mueve (usuario, 26 sep 2026): solo cambia de color. La celda mide lo
   que la más alta de las dos caras. `clip-path` y no `visibility`: el texto
   de la solución sigue en el árbol de accesibilidad. */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter) }
.pain {
  position: relative; display: grid; background: var(--bone); border: 1px solid var(--line-2);
  overflow: hidden; transition: border-color .5s cubic-bezier(.22,1,.36,1)
}
.pain__f, .pain__s { padding: 36px 34px 38px }
.pain__i {
  display: block; width: 34px; height: 34px; fill: none; stroke: var(--brand); stroke-width: 1.15;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 36px
}
.pain__k { font-size: var(--t-sm); font-weight: var(--w-semibold); letter-spacing: .01em; line-height: 1.3; color: var(--ink-3); margin-bottom: 12px }
.pain__p { font-size: 1.3125rem; font-weight: var(--w-semibold); letter-spacing: -.02em; line-height: 1.32; color: var(--brand); text-wrap: pretty }
.pain__s { background: var(--brand); color: var(--on-ink); display: flex; flex-direction: column; justify-content: flex-end }
.pain__sk { font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--on-ink-2); margin-bottom: 14px }
.pain__sd { font-size: 1.25rem; font-weight: var(--w-medium); letter-spacing: -.01em; line-height: 1.45 }
.pains.is-live .pain { cursor: default }
.pains.is-live .pain__f, .pains.is-live .pain__s { grid-area: 1/1 }
.pains.is-live .pain__s {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .7s cubic-bezier(.22,1,.36,1)
}
.pains.is-live .pain__s > * { opacity: 0; translate: 0 14px; transition: opacity .35s ease, translate .6s cubic-bezier(.22,1,.36,1) }
.pains.is-live .pain__f > * { transition: opacity .5s ease }
.pain.is-open { border-color: var(--brand) }
.pain.is-open .pain__s { clip-path: inset(0) }
.pain.is-open .pain__s > * { opacity: 1; translate: none; transition-delay: .12s }
.pain.is-open .pain__s > * + * { transition-delay: .2s }
.pain.is-open .pain__f > :not(.pain__i) { opacity: 0 }
/* El icono no se apaga: queda encima del panel y pasa a blanco (usuario,
   26 sep 2026). El panel deja libre su franja con el relleno superior. */
.pains.is-live .pain__i { position: relative; z-index: 2; transition: stroke .5s cubic-bezier(.22,1,.36,1) }
.pains.is-live .pain__s { padding-top: 106px }
.pain.is-open .pain__i { stroke: var(--on-ink) }
.pain:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px }
/* En pantallas táctiles una marca pequeña avisa de que la ficha se abre. */
@media (hover: none) {
  .pains.is-live .pain::after {
    content: '+'; position: absolute; top: 22px; right: 24px; z-index: 2;
    font-size: 1.5rem; line-height: 1; color: var(--brand); transition: rotate .5s cubic-bezier(.22,1,.36,1), color .3s
  }
  .pains.is-live .pain.is-open::after { rotate: 45deg; color: var(--on-ink) }
}
@media (prefers-reduced-motion: reduce) {
  .pain, .pains.is-live .pain__s, .pains.is-live .pain__s > *, .pains.is-live .pain__f > * { transition: none }
}

/* ---- franja de reunión ---- */
.band { background: var(--brand); color: var(--on-ink) }
.band__in { display: flex; align-items: center; justify-content: space-between; gap: 28px 64px; padding-block: 64px }
.band__t { font-size: 2rem; letter-spacing: -.03em; line-height: 1.15; max-width: 34ch; color: var(--on-ink); text-wrap: balance }
.band__d { margin-top: 14px; color: var(--on-ink-2); font-size: var(--t-base) }
.band .btn { flex: none }

/* ---- un solo equipo ---- */
.one { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 104px; align-items: center; padding-top: calc(var(--sp-section) * .8) }
.one__txt { grid-column: 1/span 5 }
.one__h { font-size: 3.25rem; letter-spacing: -.035em; text-wrap: balance }
.one__d { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.5; padding-top: 24px; margin-bottom: 36px; max-width: 44ch }
/* Árbol en ángulo recto: cada área sale con un tramo horizontal hasta una
   barra vertical, y la barra entra en el equipo. Las áreas miden 56 px y el
   equipo ocupa las tres filas, así que la barra va de centro a centro. Los
   pulsos que recorren las ramas en bucle los crea `servicio.js` con
   `offset-path`, sobre las medidas reales. */
.hub {
  --gap: 48px;
  grid-column: 6/span 7; margin-left: 32px; position: relative;
  display: grid; grid-template-columns: 1fr 1.65fr 1fr; grid-template-rows: repeat(3, 56px);
  gap: 32px var(--gap)
}
.hub__l { display: contents }
.hub__n {
  position: relative; display: flex; align-items: center; background: var(--bone-2); border: 1px solid var(--line-2);
  padding: 0 16px; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--ink); line-height: 1.25;
  transition: border-color .4s ease, color .4s ease, background-color .4s ease
}
.hub__n::after {
  content: ''; position: absolute; top: 50%; width: calc(var(--gap) / 2 + 1px); border-top: 2px solid var(--line-2);
  translate: 0 -1px; transition: border-color .4s ease, scale .5s cubic-bezier(.65,0,.35,1)
}
.hub__n:nth-child(-n+3) { grid-column: 1 }
.hub__n:nth-child(-n+3)::after { left: 100%; transform-origin: left }
.hub__n:nth-child(n+4) { grid-column: 3 }
.hub__n:nth-child(n+4)::after { right: 100%; transform-origin: right }
.hub__n:nth-child(2)::after, .hub__n:nth-child(5)::after { width: calc(var(--gap) + 1px) }
.hub__n:nth-child(1), .hub__n:nth-child(4) { grid-row: 1 }
.hub__n:nth-child(2), .hub__n:nth-child(5) { grid-row: 2 }
.hub__n:nth-child(3), .hub__n:nth-child(6) { grid-row: 3 }
.hub__n:hover, .hub__n.is-hot { border-color: var(--brand); color: var(--brand); background: var(--bone) }
.hub__n:hover::after, .hub__n.is-hot::after { border-color: var(--brand) }
.hub__c {
  grid-column: 2; grid-row: 1/span 3; position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--brand); color: var(--on-ink); padding: 24px 14px; text-align: center
}
.hub__c::before, .hub__c::after {
  content: ''; position: absolute; top: 28px; bottom: 28px; border-left: 2px solid var(--line-2);
  transition: scale .5s cubic-bezier(.65,0,.35,1) .3s
}
.hub__c::before { left: calc(var(--gap) / -2 - 1px) }
.hub__c::after { right: calc(var(--gap) / -2 - 1px) }
.hub__c b { display: block; font-size: 1.1875rem; font-weight: var(--w-semibold); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance }
.hub__c span { display: block; margin-top: 10px; font-size: var(--t-sm); text-wrap: balance; color: var(--on-ink-2); line-height: 1.4 }
/* El pulso: un cuadrado marino de 8 px que viaja por la rama hasta el equipo. */
.hub__pk {
  position: absolute; left: 0; top: 0; z-index: 2; width: 8px; height: 8px; background: var(--brand);
  offset-rotate: 0deg; offset-anchor: center; opacity: 0; pointer-events: none
}
/* La rama activa se ilumina de la área al equipo: un trazado SVG por área,
   sobre las medidas reales, que se dibuja y se borra. */
.hub__hl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible }
.hub__hl path {
  fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: miter;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.65,0,.35,1)
}
.hub__hl path.is-act { stroke-dashoffset: 0; transition-duration: .9s }
.hub__n { cursor: pointer }
.hub__n:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px }
.hub__cd { transition: opacity .3s ease }
.hub__cd.is-swap { opacity: 0 }
/* El equipo «recibe»: un filete que se abre desde su borde y se apaga. */
.hub__c > i { position: absolute; inset: 0; border: 2px solid var(--brand); opacity: 0; pointer-events: none }
@keyframes hub-recibe { 0% { inset: 0; opacity: .6 } 100% { inset: -20px; opacity: 0 } }
@media (prefers-reduced-motion: no-preference) {
  .js .hub .hub__n { opacity: 0; translate: 0 10px }
  .js .hub .hub__n::after { scale: 0 1 }
  .js .hub .hub__c::before, .js .hub .hub__c::after { scale: 1 0 }
  .js .hub.is-in .hub__n { opacity: 1; translate: none; transition: opacity .5s ease, translate .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, color .4s ease, background-color .4s ease }
  .js .hub.is-in .hub__n::after { scale: 1 1; transition-delay: .35s }
  .js .hub.is-in .hub__c::before, .js .hub.is-in .hub__c::after { scale: 1 1; transition-delay: .7s }
}
@media (prefers-reduced-motion: reduce) {
  .hub__pk, .hub__c > i { display: none }
}

/* Reseña: comillas, cinco estrellas encima (usuario, 26 sep 2026). */
.said { grid-column: 1/span 6; margin: 0 }
.said__s { font-size: 1.25rem; letter-spacing: .12em; margin-bottom: 22px }
.said__t p { font-size: 1.625rem; font-weight: var(--w-medium); letter-spacing: -.02em; line-height: 1.4; color: var(--ink); text-wrap: pretty }
.said figcaption { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-sm) }
.said__n { font-style: normal; font-weight: var(--w-semibold); color: var(--brand) }
.said__r { color: var(--ink-3) }
/* Cifras en rejilla de dos por dos, número encima y rótulo debajo. */
.nums { grid-column: 8/span 5; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line) }
.num { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px 0; border-bottom: 1px solid var(--line) }
.num:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--line) }
.num__n { font-size: 3rem; font-weight: var(--w-semibold); letter-spacing: -.045em; line-height: 1; color: var(--brand) }
.num__l { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35 }

/* ---- método: franja de fotos (`.proc`, en `base.css`) ---- */
#metodo .opener { padding-bottom: 48px }
#metodo { border-bottom: 0 }

/* ---- cierre con formulario ---- */
/* Más baja (usuario, 26 sep 2026): el titular sube a la columna izquierda y
   el formulario, más estrecho, arranca a su altura. */
.cta--frm { padding-block: 88px }
.cta--frm .cta__body { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: start }
.cta--frm .cta__intro { grid-column: 1/span 5; grid-row: 1 }
.cta--frm h2 { margin-top: 0 }
.cta--frm .frm { grid-column: 7/span 6; grid-row: 1/span 2 }
.cta--frm .frm__grid { gap: 20px 20px }
/* Una etiqueta de dos líneas ya no descuadra la fila: los campos se apoyan abajo. */
.cta--frm .frm__f:not(.frm__f--check) { justify-content: flex-end }
.cta--frm .cta__ways { grid-column: 1/span 5; grid-row: 2; flex-direction: column; gap: 18px; margin-top: 32px }
.cta--frm .frm__l { font-size: var(--t-sm) }
.cta--frm .frm__i, .cta--frm .frm__s { font-size: var(--t-base); border-color: var(--bone); min-height: 52px }

/* ---- otras líneas: franja partida con foto ----
   Las fotos del menú, el velo negro de las cabeceras (0,62) y letra clara:
   4,6:1 en el peor píxel, medido allí. Al pasar el ratón el velo baja a
   0,48 y la foto se acerca un 5 %, como las fichas de la portada. */
.lines { padding-top: calc(var(--sp-section) * .8) }
.lines__head { padding-bottom: 36px }
.lines__h { font-size: 2.5rem; letter-spacing: -.035em }
.lines__d { margin-top: 12px; color: var(--ink-2); font-size: var(--t-base) }
.lines__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--bone) }
.line { position: relative; isolation: isolate; min-height: 380px; overflow: hidden; display: flex; background: var(--ink) }
.line__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.16,1,.3,1) }
.line::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(20, 18, 16, .62); transition: background-color .4s ease }
.line__a { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 32px 30px 34px; color: var(--on-ink) }
.line__t { font-size: 1.75rem; font-weight: var(--w-semibold); letter-spacing: -.03em; line-height: 1.1 }
.line__t i { font-style: normal; font-size: 1.25rem; display: inline-block; margin-left: 6px; transition: translate .3s cubic-bezier(.16,1,.3,1) }
.line__d { margin-top: 12px; font-size: var(--t-sm); line-height: 1.5; color: var(--on-ink); max-width: 30ch }
.line__a:focus-visible { outline: 2px solid var(--on-ink); outline-offset: -6px }
.line:hover::before, .line:focus-within::before { background: rgba(20, 18, 16, .48) }
.line:hover .line__ph, .line:focus-within .line__ph { transform: scale(1.05) }
.line:hover .line__t i, .line:focus-within .line__t i { translate: 5px 0 }
@media (prefers-reduced-motion: reduce) { .line__ph, .line__t i { transition: none } .line:hover .line__ph { transform: none } }

/* ---- lecturas del blog: sección propia ---- */
.reads { padding-block: calc(var(--sp-section) * .8) var(--sp-section) }
.reads__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 40px }
.reads__h { font-size: 2.5rem; letter-spacing: -.035em }
.reads__all { padding-top: 0 }
.reads__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter) }
.read__a {
  display: flex; flex-direction: column; height: 100%; padding: 28px 28px 30px;
  background: var(--bone); border: 1px solid var(--line-2); border-top: 3px solid var(--brand);
  transition: border-color .4s ease, background-color .4s ease
}
.read__m { font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--ink-3) }
.read__t { margin-top: 14px; font-size: 1.25rem; font-weight: var(--w-semibold); letter-spacing: -.02em; line-height: 1.3; color: var(--brand); text-wrap: pretty }
.read__d { margin-top: 12px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2) }
.read__go { margin-top: auto; padding-top: 24px; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--brand) }
.read__go i { font-style: normal; display: inline-block; transition: translate .3s cubic-bezier(.16,1,.3,1) }
.read__a:hover, .read__a:focus-visible { background: var(--bone-2); border-color: var(--brand) }
.read__a:hover .read__go i, .read__a:focus-visible .read__go i { translate: 5px 0 }


/* ---- tramos ---- */
/* Teléfono: sin el diagrama del equipo (usuario, 27 sep 2026). Su texto de
   al lado ya dice lo mismo; la versión en rejilla no se veía como en el
   ordenador. */
@media (max-width: 739px) {
  .hub { display: none }
}
@media (max-width: 1200px) {
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  /* El diagrama del equipo, en fila propia bajo el texto y con el mismo árbol
     que en escritorio (usuario, 27 sep 2026: en media columna no se veía como
     en el ordenador). En el teléfono se quita (abajo). */
  .one__txt { grid-column: 1/span 9 }
  .hub { grid-column: 1/-1; margin-left: 0; width: 100%; max-width: 760px; --gap: 36px }
  .said { grid-column: 1/span 12 }
  .nums { grid-column: 1/span 12; grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .num, .num:nth-child(even) { padding: 22px 20px 24px; border-left: 1px solid var(--line) }
  .num:first-child { border-left: 0; padding-left: 0 }
  .lines__l { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .line { min-height: 300px }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .one__h { font-size: 2.5rem }
  .band__t { font-size: 1.75rem }
  .cta--frm .cta__intro, .cta--frm .cta__ways { grid-column: 1/span 5 }
  .cta--frm .frm { grid-column: 7/span 6 }
  .cta--frm .frm__grid { grid-template-columns: 1fr }
}
@media (max-width: 900px) {
  .phead__go { padding-top: 28px }
  .phead__go .btn { width: 100%; justify-content: center; min-height: 56px }
  .phead__proof { padding-top: 24px; flex-direction: column; gap: 8px }
  .phead__proof li + li::before { display: none }
  .sit__in { grid-template-columns: 1fr }
  .sit__i, .sit__i:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line-2) }
  .sit__i:first-child { border-top: 0; padding-top: 20px }
  .sit__i:last-child { padding-bottom: 20px }
  .band__in { flex-direction: column; align-items: stretch; padding-block: 48px }
  .band__t { font-size: 1.5rem }
  .band .btn { justify-content: center; min-height: 56px }
  .one { display: block; padding-top: 64px }
  .one__h { font-size: 2rem }
  .one__d { font-size: var(--t-base); padding-top: 16px; margin-bottom: 28px }
  .one__txt .btn { width: 100%; justify-content: center; min-height: 56px }
  .hub { margin-top: 56px }
  .said { margin-top: 56px }
  .said__t p { font-size: 1.25rem }
  .nums { margin-top: 40px; grid-template-columns: 1fr 1fr }
  .num, .num:nth-child(even) { padding: 20px 16px 22px 0; border-left: 0 }
  .num:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line) }
  .num__n { font-size: 2.25rem }
  .cta--frm { padding-block: 64px }
  .cta--frm .cta__body { display: flex; flex-direction: column }
  .sit + .chapter .opener { padding-top: 40px }
  .cta--frm .cta__intro { margin-bottom: 32px }
  .cta--frm .cta__ways { margin-top: 40px }
  .lines { padding-top: 64px }
  .lines__h, .reads__h { font-size: 2rem }
  .lines__head { padding-bottom: 28px }
  .lines__l { grid-template-columns: 1fr }
  .line { min-height: 220px }
  .reads { padding-block: 64px }
  .reads__l { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .pains { grid-template-columns: 1fr }
  .pain__f, .pain__s { padding: 28px 24px 30px }
  .pain__p { font-size: 1.1875rem }
  .pain__i { margin-bottom: 24px }
}