/* Vuelve · páginas de plantillas, guías y funciones (26/10/2026).
   Estilo de la maqueta 4, «Lo de siempre, muy bien hecho»: blanco y grises fríos, el azul
   del mono en bandas enteras y el naranja solo para la acción, el punto de «Vuelve.» y lo
   que está activo. Es distinto de la portada (papel crema) a propósito, con la misma marca.
   Una sola curva (ease-out exponencial) y tres duraciones.
   Radios: 10 px botones, 16 px paneles, 4 px el papel (hojas e imágenes de documentos). */

@font-face { font-family: "Barlow"; src: url("/fuentes/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fuentes/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fuentes/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fuentes/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fuentes/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fuentes/barlow-semi-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* Letra de reserva AJUSTADA a la medida de Barlow (29/10/2026): mientras llega Barlow se
   ve Arial redimensionada para ocupar lo mismo, y al cambiar no se mueve nada. Sin esto,
   en Android el titular cambiaba de alto y la portada «saltaba» (CLS 0,121 en
   PageSpeed). Medidas sacadas comparando Barlow con Arial en el navegador. */
@font-face { font-family: "Barlow respaldo"; src: local("Arial"), local("Liberation Sans"), local("Roboto"); size-adjust: 94.9%; ascent-override: 105.4%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Semi Condensed respaldo"; src: local("Arial"), local("Liberation Sans"), local("Roboto"); size-adjust: 90.7%; ascent-override: 110.3%; descent-override: 22.1%; line-gap-override: 0%; }

:root {
  /* marca */
  --mono: #0E3346;
  --mono-hondo: #0A2836;
  --naranja: #EC8613;
  --naranja-claro: #F29A35;

  /* blancos y grises fríos */
  --blanco: #FFFFFF;
  --hielo: #F3F6F8;
  --hielo-2: #E9EFF3;
  --linea: #DFE6EB;
  --linea-fuerte: #C5D0D8;
  --tinta: #0E3346;
  --tinta-2: #46596A;   /* 7,1:1 sobre blanco */
  --tinta-3: #5B6B78;   /* 5,4:1 sobre blanco */

  /* sobre el azul */
  --sobre-mono: #FFFFFF;
  --sobre-mono-2: #A9BDCA; /* 6,6:1 sobre #0E3346 */
  --linea-mono: rgba(255, 255, 255, .14);

  /* letra */
  --titulo: "Barlow Semi Condensed", "Barlow Semi Condensed respaldo", "Barlow", system-ui, sans-serif;
  --texto: "Barlow", "Barlow respaldo", system-ui, sans-serif;

  /* escala fluida (360 → 1440) */
  --t-display: clamp(2.375rem, 1.62rem + 3.1vw, 4.25rem);
  --t-h2: clamp(1.75rem, 1.42rem + 1.35vw, 2.5rem);
  --t-h3: clamp(1.3125rem, 1.2rem + .45vw, 1.5rem);
  --t-entradilla: clamp(1.1875rem, 1.08rem + .45vw, 1.4375rem);
  --t-cuerpo: 1.0625rem;
  --t-peque: .9375rem;

  /* movimiento: una familia */
  --curva: cubic-bezier(.23, 1, .32, 1);
  --d-1: 160ms;
  --d-2: 280ms;

  /* forma */
  /* los tres redondeos de toda la web, los mismos que web/index.html (27/10/2026) */
  --radio-s: 6px;   /* lo pequeño: el anillo del teclado, enlaces del menú */
  --radio-m: 12px;  /* botones, campos y avisos */
  --radio-l: 20px;  /* tarjetas y marcos */
  --r-papel: 4px;
  --ancho: 1240px;
  --margen: clamp(20px, 4.4vw, 56px);
  --seccion: clamp(80px, 9.5vw, 152px);

  --sombra-papel: 0 1px 1px rgba(14, 51, 70, .05), 0 6px 14px -4px rgba(14, 51, 70, .10), 0 28px 56px -18px rgba(14, 51, 70, .26);
  --foco: var(--mono);

  color-scheme: light;
  scroll-padding-top: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--naranja);
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* partes del navegador, tematizadas */
::selection { background: var(--naranja); color: var(--mono); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--radio-s); }
html { scrollbar-color: var(--linea-fuerte) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 10px; border: 3px solid var(--blanco); }
::-webkit-scrollbar-track { background: transparent; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ancho { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }
.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.saltar {
  position: absolute; left: 12px; top: -100px; z-index: 50;
  background: var(--mono); color: #fff; padding: 12px 16px; border-radius: var(--radio-m);
  text-decoration: none; font-weight: 500;
}
.saltar:focus-visible { top: 12px; outline-color: var(--naranja); }
main:focus { outline: none; }

/* ---------- marca ---------- */
.marca {
  font-family: var(--titulo); font-weight: 800; font-size: 1.625rem; letter-spacing: -.02em; line-height: 1;
  color: var(--mono); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.marca__punto {
  width: .2em; height: .2em; border-radius: 50%; background: var(--naranja);
  margin-left: .06em; align-self: flex-end; margin-bottom: .62em;
}
.marca--clara { color: #fff; }

/* ---------- botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: var(--radio-m);
  font-family: var(--titulo); font-weight: 700; font-size: 1.1875rem; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  transition: transform var(--d-1) var(--curva), background-color var(--d-1) var(--curva), box-shadow var(--d-2) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.97); }
.boton--principal {
  background: var(--naranja); color: var(--mono);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 2px rgba(14, 51, 70, .14), 0 10px 22px -12px rgba(14, 51, 70, .5);
}
.boton--principal:focus-visible { outline-color: var(--mono); border-radius: var(--radio-m); }
.boton--borde {
  min-height: 44px; padding: 0 18px; font-size: 1.0625rem; color: var(--mono); background: var(--blanco);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
@media (hover: hover) {
  .boton--principal:hover { background: var(--naranja-claro); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 4px rgba(14, 51, 70, .14), 0 16px 28px -14px rgba(14, 51, 70, .55); }
  .boton--borde:hover { box-shadow: inset 0 0 0 1px var(--mono); }
}

.texto a, .migas a, .nota a, .vacio a, .ficha p a {
  color: var(--mono); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: var(--linea-fuerte);
  transition: text-decoration-color var(--d-1) var(--curva);
}
.texto a:hover, .migas a:hover, .nota a:hover, .vacio a:hover { text-decoration-color: var(--mono); }

/* ---------- cabecera ---------- */
.vigia { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--blanco);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-2) var(--curva);
}
.cabecera.con-borde { border-bottom-color: var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.menu { margin-left: auto; position: relative; }
.menu__boton { display: none; }
.menu__lista { display: flex; align-items: center; gap: 4px; }
.menu__lista a:not(.boton) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radio-s);
  color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: 1rem;
  transition: color var(--d-1) var(--curva), background-color var(--d-1) var(--curva);
}
.menu__lista a[aria-current] { color: var(--mono); }
.menu__lista a[aria-current]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--naranja);
}
@media (hover: hover) { .menu__lista a:not(.boton):hover { color: var(--mono); background: var(--hielo); } }
.menu__entrar { margin-left: 12px; }

/* ---------- migas de pan ---------- */
.migas { padding-top: 18px; }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: var(--t-peque); color: var(--tinta-2); }
.migas li { display: inline-flex; align-items: center; }
.migas a { font-weight: 400; display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: transparent; }
.migas svg { width: 16px; height: 16px; margin: 0 6px; fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.migas [aria-current] { color: var(--mono); }

/* ---------- cabeza de la página ---------- */
.cabeza {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: var(--seccion);
}
.cabeza__texto { grid-column: 1 / 8; }
.titular {
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-display);
  line-height: 1; letter-spacing: -.026em; color: var(--mono);
  max-width: 15em; text-wrap: balance;
}
.entradilla {
  margin-top: clamp(20px, 2.2vw, 30px);
  font-size: var(--t-entradilla); line-height: 1.45; color: var(--tinta-2);
  max-width: 46ch; letter-spacing: -.003em; text-wrap: pretty;
}
.nota { margin-top: 18px; font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.5; max-width: 60ch; }

/* la lista de descargas */
.descargas { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--mono); }
.descarga {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto accion";
  column-gap: 24px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
}
.descarga--principal { padding: 22px 0; }
.descarga__texto { grid-area: texto; }
.descarga__nombre { font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.008em; }
.descarga__para { margin-top: 3px; color: var(--tinta-2); font-size: 1rem; line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.descarga .boton, .descarga__enlace { grid-area: accion; justify-self: end; }
.descarga__peso { margin-left: 8px; font-family: var(--texto); font-weight: 400; font-size: .9375rem; letter-spacing: 0; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.descarga__enlace {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-right: -14px; border-radius: var(--radio-s);
  color: var(--mono); font-weight: 500; font-size: 1rem; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; text-decoration-color: var(--linea-fuerte);
  transition: text-decoration-color var(--d-1) var(--curva), background-color var(--d-1) var(--curva);
}
.descarga__enlace .icono { width: 18px; height: 18px; color: var(--tinta-2); }
@media (hover: hover) { .descarga__enlace:hover { background: var(--hielo); text-decoration-color: var(--mono); } }
.descarga .boton .icono { stroke-width: 2; }

/* la hoja de ejemplo */
.cabeza__muestra { grid-column: 8 / -1; justify-self: end; width: min(100%, 440px); padding-top: 6px; }
.hoja {
  display: block; border-radius: var(--r-papel); background: #fff; box-shadow: var(--sombra-papel);
  transition: transform var(--d-2) var(--curva), box-shadow var(--d-2) var(--curva);
}
.hoja img { border-radius: var(--r-papel); width: 100%; }
@media (hover: hover) {
  .hoja:hover { transform: translateY(-3px); box-shadow: 0 1px 1px rgba(14, 51, 70, .05), 0 10px 20px -6px rgba(14, 51, 70, .12), 0 40px 70px -22px rgba(14, 51, 70, .32); }
}
.hoja:active { transform: scale(.99); }
.hoja:focus-visible { outline-offset: 6px; border-radius: var(--r-papel); }
.cabeza__muestra figcaption { margin-top: 18px; font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.45; max-width: 40ch; }

/* ---------- lectura: índice + texto ---------- */
.lectura {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  border-top: 1px solid var(--linea); padding-top: clamp(48px, 6vw, 88px);
}
.indice { grid-column: 1 / 4; align-self: start; position: sticky; top: 104px; }
.indice__titulo {
  font-family: var(--titulo); font-weight: 600; font-size: 1.0625rem; color: var(--tinta-2); letter-spacing: .005em;
  padding-bottom: 12px; border-bottom: 1px solid var(--mono);
}
.indice ol { margin-top: 8px; }
.indice a {
  display: block; padding: 8px 12px; margin-left: -12px; border-radius: var(--radio-s);
  color: var(--tinta-2); text-decoration: none; font-size: 1rem; line-height: 1.35;
  transition: color var(--d-1) var(--curva), background-color var(--d-1) var(--curva);
}
@media (hover: hover) { .indice a:hover { color: var(--mono); background: var(--hielo); } }
.indice a[aria-current="true"] { color: var(--mono); background: var(--hielo); font-weight: 500; }

.texto { grid-column: 5 / 12; min-width: 0; }
.texto > section + section, .texto > .fuentes { margin-top: clamp(64px, 7vw, 104px); }
.texto h2 {
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-h2);
  line-height: 1.05; letter-spacing: -.02em; color: var(--mono); text-wrap: balance;
}
.texto h3 {
  font-family: var(--titulo); font-weight: 700; font-size: var(--t-h3);
  line-height: 1.2; letter-spacing: -.01em; margin-top: 48px; text-wrap: balance;
}
.texto p { margin-top: 18px; max-width: 66ch; text-wrap: pretty; }
.texto h2 + p { margin-top: 22px; }

/* tabla de los datos mínimos */
.tabla { margin-top: 28px; overflow-x: auto; }
.tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla thead th {
  text-align: left; font-weight: 500; font-size: var(--t-peque); color: var(--tinta-2);
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--mono);
}
.tabla tbody th {
  width: 2.5rem; text-align: left; vertical-align: baseline;
  font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; line-height: 1; color: var(--mono);
}
.tabla td, .tabla tbody th { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
.tabla td:last-child { padding-right: 0; color: var(--tinta-2); width: 32%; }

/* lo que puede pedir la comunidad: dos columnas */
.lista-doble { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--linea); }
.lista-doble li { padding: 14px 0; border-bottom: 1px solid var(--linea); line-height: 1.45; }

/* pasos: es una secuencia de verdad, por eso lleva números */
.pasos { margin-top: 24px; counter-reset: paso; border-top: 1px solid var(--linea); }
.pasos li {
  counter-increment: paso; position: relative; padding: 16px 0 16px 3rem; border-bottom: 1px solid var(--linea);
  line-height: 1.5; text-wrap: pretty;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 13px;
  font-family: var(--titulo); font-weight: 700; font-size: 1.375rem; color: var(--mono); font-variant-numeric: tabular-nums;
}

/* el recuadro de la renuncia, como sale en el papel */
.recuadro {
  margin-top: 28px; padding: clamp(20px, 2.4vw, 28px); border: 2px solid var(--mono); border-radius: var(--r-papel);
  background: var(--blanco); box-shadow: var(--sombra-papel); max-width: 66ch;
}
.texto .recuadro p { margin-top: 0; }
.recuadro__titulo {
  font-family: var(--titulo); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.005em; color: var(--mono);
}
.texto .recuadro .recuadro__texto { margin-top: 12px; font-weight: 700; font-size: 1rem; line-height: 1.5; }
.texto .recuadro .recuadro__mano {
  margin-top: 22px; display: grid; grid-template-columns: 3fr 2fr; gap: 16px;
  font-size: .9375rem; color: var(--tinta-2);
}
.recuadro__mano span { padding-top: 34px; border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 6px; display: flex; align-items: flex-end; line-height: 1.3; }

/* reglas que el resguardo explica al cliente */
.reglas { margin-top: 20px; }
.reglas li { position: relative; padding-left: 1.5rem; margin-top: 12px; line-height: 1.5; max-width: 66ch; text-wrap: pretty; }
.reglas li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 10px; height: 1.5px; background: var(--tinta-3); }

/* preguntas: HTML normal, a la vista */
.preguntas h3 { margin-top: 36px; }
.preguntas h3:first-child { margin-top: 28px; }
.preguntas p { margin-top: 8px; color: var(--tinta-2); }

/* fuentes */
.fuentes { padding: clamp(22px, 2.6vw, 32px); background: var(--hielo); border-radius: var(--radio-l); }
.texto .fuentes h2 { font-size: 1.25rem; letter-spacing: -.005em; }
.fuentes ul { margin-top: 12px; }
.fuentes li { margin-top: 8px; line-height: 1.5; }
.texto .fuentes p { margin-top: 12px; font-size: var(--t-peque); color: var(--tinta-2); }

/* ---------- la banda azul del final ---------- */
.cierre { --foco: var(--naranja); margin-top: var(--seccion); background: var(--mono); color: var(--sobre-mono); padding-block: var(--seccion) clamp(64px, 7vw, 104px); }
.cierre ::selection { background: var(--naranja); color: var(--mono); }
.cierre__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.cierre__titulo {
  grid-column: 1 / 6; font-family: var(--titulo); font-weight: 700; font-size: clamp(2rem, 1.42rem + 2.38vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.024em; text-wrap: balance;
}
.cierre__texto { grid-column: 7 / -1; }
.cierre__texto p { font-size: 1.1875rem; line-height: 1.55; color: var(--sobre-mono-2); max-width: 52ch; text-wrap: pretty; }
.cierre__texto p + p { margin-top: 16px; }
.cierre__texto .cierre__accion { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; color: #fff; }
.cierre .boton--principal, .cierre .boton--principal:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.cierre .boton--principal:focus-visible { outline-color: #fff; }
.cierre__mas {
  display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 500; font-size: 1.0625rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgba(255, 255, 255, .4);
  transition: text-decoration-color var(--d-1) var(--curva);
}
.cierre__mas:hover { text-decoration-color: #fff; }
/* Si la página acaba en la banda azul, el pie sigue en el mismo azul, sin hueco. */
main:has(> .cierre:last-child) + .pie { padding-top: 0; }

/* ---------- índices de sección ---------- */
.cabeza--indice { display: block; padding-bottom: clamp(40px, 5vw, 72px); }
.ficha__titulo { font-family: var(--titulo); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); line-height: 1.05; letter-spacing: -.018em; }
.ficha__titulo a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: transparent; transition: text-decoration-color var(--d-1) var(--curva); }
.ficha__titulo a:hover { text-decoration-color: var(--naranja); }
.ficha p { margin-top: 12px; color: var(--tinta-2); max-width: 56ch; text-wrap: pretty; }
.ficha .ficha__datos { font-size: var(--t-peque); color: var(--tinta-3); }
.vacio { padding: clamp(24px, 3vw, 36px); background: var(--hielo); border-radius: var(--radio-l); max-width: 760px; }
.separa { height: var(--seccion); }
.separa--corta { height: clamp(48px, 6vw, 96px); }

/* ---------- pie ---------- */
.pie { --foco: var(--naranja); background: var(--mono); color: #fff; padding-top: clamp(64px, 7vw, 104px); margin-top: -1px; }
.pie ::selection { background: var(--naranja); color: var(--mono); }
.pie__columnas {
  display: grid; grid-template-columns: minmax(0, 1.6fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px;
  padding-top: 40px; border-top: 1px solid var(--linea-mono);
}
.pie__marca p { margin-top: 10px; color: var(--sobre-mono-2); font-size: var(--t-peque); max-width: 30ch; line-height: 1.5; }
.pie__titulo { font-family: var(--titulo); font-weight: 600; font-size: 1rem; color: var(--sobre-mono-2); letter-spacing: .01em; margin-bottom: 6px; }
.pie nav a {
  display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: var(--t-peque);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--d-1) var(--curva);
}
.pie nav a:hover { text-decoration-color: rgba(255, 255, 255, .6); }
.pie__base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 48px; padding-block: 24px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea-mono); font-size: .875rem; color: var(--sobre-mono-2);
}

/* ---------- tableta ---------- */
@media (max-width: 1080px) {
  .cabeza__texto { grid-column: 1 / -1; }
  .cabeza__muestra { grid-column: 1 / -1; justify-self: start; margin-top: 56px; width: min(100%, 520px); }
  .indice { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .indice ol { columns: 2; column-gap: 32px; }
  .indice li { break-inside: avoid; }
  .texto { grid-column: 1 / -1; }
  .cierre__titulo, .cierre__texto { grid-column: 1 / -1; }
  .cierre__texto { margin-top: 28px; }
  .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .pie__marca { grid-column: 1 / -1; }
}

/* ---------- móvil ---------- */
@media (max-width: 760px) {
  :root { --t-peque: 1rem; scroll-padding-top: 80px; }
  .cabecera__fila { min-height: 64px; gap: 12px; flex-wrap: wrap; }
  .menu__lista { flex-wrap: wrap; }
  .menu__entrar { margin-left: 0; }

  .descarga { grid-template-columns: 1fr; grid-template-areas: "texto" "accion"; }
  .descarga .boton { justify-self: stretch; margin-top: 16px; }
  .descarga__enlace { justify-self: start; margin: 6px 0 0 -14px; }

  .indice ol { columns: 1; }
  .lista-doble { grid-template-columns: 1fr; }
  .descarga__peso { font-size: 1rem; }
  .texto .recuadro .recuadro__mano { font-size: 1rem; }
  /* la tabla, en dos columnas: «En la plantilla» pasa debajo de cada dato */
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tbody { display: block; border-top: 1px solid var(--mono); }
  .tabla tr { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); border-bottom: 1px solid var(--linea); padding: 14px 0; }
  .tabla td, .tabla tbody th { border-bottom: 0; padding: 0; }
  .tabla td:last-child { grid-column: 2; width: auto; margin-top: 4px; }
  .tabla td:last-child::before { content: "En la plantilla: "; }
  .texto .recuadro .recuadro__mano { grid-template-columns: 1fr; gap: 0; }
  .cierre .boton { width: 100%; }
  .pie__columnas { gap: 28px 20px; }
  .pie__base { font-size: 1rem; }
}

/* En el móvil, con JavaScript, el menú se recoge tras un botón. Sin JavaScript se ve
   la lista entera (los enlaces están siempre escritos en el HTML). */
@media (max-width: 760px) and (scripting: enabled) {
  .cabecera__fila { flex-wrap: nowrap; }
  .menu__boton {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-right: -14px;
    background: none; border: 0; border-radius: var(--radio-s); cursor: pointer; font-weight: 500; font-size: 1.0625rem; color: var(--mono);
    -webkit-tap-highlight-color: transparent;
  }
  .menu__boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--d-2) var(--curva); }
  /* Abierto, las dos rayas se cruzan en una X (28/10/2026: antes giraba y parecía «pausa»). */
  .menu__boton path { transform-box: fill-box; transform-origin: center; transition: transform var(--d-2) var(--curva); }
  .menu__boton[aria-expanded="true"] .raya-1 { transform: translateY(4px) rotate(45deg); }
  .menu__boton[aria-expanded="true"] .raya-2 { transform: translateY(-4px) rotate(-45deg); }
  .menu__lista {
    position: absolute; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 0;
    min-width: 232px; padding: 8px; border-radius: var(--radio-m); background: #fff;
    box-shadow: 0 1px 2px rgba(14, 51, 70, .08), 0 18px 40px -12px rgba(14, 51, 70, .28);
    opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; visibility: hidden;
    transition: opacity var(--d-2) var(--curva), transform var(--d-2) var(--curva), visibility 0s linear var(--d-2);
  }
  .menu__lista.abierta { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .menu__lista a:not(.boton) { width: 100%; min-height: 48px; color: var(--mono); font-size: 1.0625rem; }
  .menu__lista a[aria-current]::after { left: 14px; right: auto; width: 24px; bottom: 8px; }
  .menu__entrar { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--linea); }
  .menu__entrar .boton { width: 100%; min-height: 48px; }
}

/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .hoja:hover { transform: none; }
}

/* ---------- al imprimir la página ---------- */
@media print {
  .cabecera, .indice, .cierre, .pie, .migas, .descarga .boton, .descarga__enlace { display: none !important; }
  .lectura, .cabeza { display: block; }
  .texto a { text-decoration: none; }
}

/* =====================================================================
   Plantillas de mensajes y guía de reseñas (26/10/2026). AÑADIDO al final, sin tocar
   nada de arriba: la columna «aparte» de la cabeza, el bloque de cada mensaje con su
   botón «Copiar» (lo enciende paginas.js; sin JavaScript no se ve) y la comparación
   en dos columnas. Mismos colores, radios, curva y duraciones que el resto.
   ===================================================================== */

/* la columna de la derecha de la cabeza: «Cómo se leen» o «Lo importante» */
.cabeza__aparte { grid-column: 9 / -1; align-self: start; padding-top: 10px; }
.aparte__titulo {
  font-family: var(--titulo); font-weight: 600; font-size: 1.0625rem; color: var(--tinta-2); letter-spacing: .005em;
  padding-bottom: 12px; border-bottom: 1px solid var(--mono);
}
.aparte li { padding: 16px 0; border-bottom: 1px solid var(--linea); line-height: 1.45; }
.aparte__clave { display: block; font-family: var(--titulo); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.005em; color: var(--mono); }
.aparte__dice { display: block; margin-top: 4px; color: var(--tinta-2); font-size: 1rem; text-wrap: pretty; }

/* cada mensaje: nombre, cuándo, el texto en su caja y el botón */
.mensaje { margin-top: 52px; max-width: 66ch; }
.texto .mensaje .mensaje__titulo { margin-top: 0; }
.texto .mensaje__cuando { margin-top: 6px; color: var(--tinta-2); }
.mensaje__caja { margin: 14px 0 0; padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 26px) 12px; background: var(--hielo); border-radius: var(--radio-l); }
.texto .mensaje__texto { margin-top: 0; max-width: none; font-size: 1.125rem; line-height: 1.6; color: var(--tinta); text-wrap: pretty; }
.hueco {
  color: var(--mono); font-weight: 500; background: var(--blanco); border-radius: 5px; padding: .02em .14em;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mensaje__baja { color: var(--tinta-2); }
.mensaje__pie {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--linea);
}
.mensaje__tipo { font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.3; }
.texto .mensaje__nota, .texto .mensaje__solo { margin-top: 12px; font-size: var(--t-peque); color: var(--tinta-2); line-height: 1.5; }

/* el botón «Copiar»: blanco con filo; al copiar, azul con la marca de hecho */
.copiar {
  margin: 0 -8px 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--radio-m); background: var(--blanco); color: var(--mono); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  font-family: var(--titulo); font-weight: 700; font-size: 1.0625rem; letter-spacing: .005em; white-space: nowrap;
  transition: transform var(--d-1) var(--curva), box-shadow var(--d-1) var(--curva), background-color var(--d-1) var(--curva), color var(--d-1) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.copiar[hidden] { display: none; }
.copiar:active { transform: scale(.97); }
.copiar:focus-visible { border-radius: var(--radio-m); }
@media (hover: hover) { .copiar:hover { box-shadow: inset 0 0 0 1px var(--mono); } }
.copiar .icono { width: 18px; height: 18px; }
.copiar__icono--hecho { display: none; }
.copiar.copiado { background: var(--mono); color: var(--blanco); box-shadow: none; }
.copiar.copiado .copiar__icono--copiar { display: none; }
.copiar.copiado .copiar__icono--hecho { display: block; stroke-width: 2.2; animation: copiar-hecho var(--d-2) var(--curva); }
@keyframes copiar-hecho { from { opacity: 0; transform: scale(.8); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* dos columnas para comparar (la app y la API; lo que puedes y lo que no) */
.comparar { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.comparar > div { border-top: 1px solid var(--mono); }
.texto .comparar h3 { margin-top: 16px; font-size: 1.3125rem; }
.comparar .reglas { margin-top: 8px; }

@media (max-width: 1080px) {
  .cabeza__aparte { grid-column: 1 / -1; margin-top: 56px; max-width: 560px; }
}
@media (max-width: 760px) {
  .comparar { grid-template-columns: 1fr; }
  .mensaje { margin-top: 44px; }
  .mensaje__caja { margin-inline: -4px; }
  .texto .mensaje__texto { font-size: 1.0625rem; }
}
@media print {
  .copiar { display: none !important; }
  .mensaje__caja { background: none; border: 1px solid var(--linea-fuerte); }
}

/* ---------- tonos: un color propio por página (27/10/2026) ----------
   Alfonso pidió más color, además del azul mono y el naranja. Cada página lleva su tono
   (campo `tono` de paginas.py): la cabeza se tiñe de su color suave, los títulos llevan
   una raya de su color y, en los índices, cada ficha el suyo. El naranja sigue siendo
   solo para la acción. --acento es decoración (rayas); para letra, --acento-hondo
   (5,4:1 o más sobre el suave). */
.tono-verde    { --acento: #22A86A; --acento-suave: #E2F5EA; --acento-hondo: #0F6B41; }
.tono-amarillo { --acento: #F5B800; --acento-suave: #FFF3CC; --acento-hondo: #7A5600; }
.tono-cielo    { --acento: #2F8FE5; --acento-suave: #E1EEFB; --acento-hondo: #1A5A99; }
.tono-turquesa { --acento: #14A3A8; --acento-suave: #DAF2F2; --acento-hondo: #0A6A6E; }
.tono-violeta  { --acento: #8160EA; --acento-suave: #EDE8FD; --acento-hondo: #5233B5; }
.tono-indigo   { --acento: #5562E0; --acento-suave: #E6E8FB; --acento-hondo: #3540A8; }
.tono-coral    { --acento: #EE5D50; --acento-suave: #FDE6E2; --acento-hondo: #A3322A; }

/* La cabeza teñida de lado a lado (la sombra de 100vmax recortada no deja barra horizontal). */
.tono .migas, .tono .cabeza, .tono .fn-cabeza, .tono .herr-portada {
  background: var(--acento-suave); box-shadow: 0 0 0 100vmax var(--acento-suave); clip-path: inset(0 -100vmax);
}
.tono .cabeza { padding-bottom: clamp(48px, 6vw, 96px); margin-bottom: clamp(48px, 6vw, 96px); }
.tono .migas [aria-current] { color: var(--acento-hondo); }
.tono :is(.titular, .herr-portada h1)::before, .tono .fn-tramo__titulo::before {
  content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--acento); margin-bottom: 18px;
}
.tono .fn-tramo__titulo::before { width: 40px; height: 5px; margin-bottom: 14px; }

/* Índice de funciones: cada función con la raya y, al pasar el ratón, el fondo de su color. */
.fn-funcion[class*="tono-"] { position: relative; padding-left: 26px; border-radius: var(--radio-m); transition: background-color var(--d-1) var(--curva); }
.fn-funcion[class*="tono-"]::before {
  content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 6px; border-radius: 3px; background: var(--acento);
}
.fn-funcion[class*="tono-"] .fn-funcion__titulo a:hover { text-decoration-color: var(--acento); }
@media (hover: hover) { .fn-funcion[class*="tono-"]:hover { background: var(--acento-suave); } }

/* Índices de herramientas, plantillas y guías: tarjetas con el color de cada página
   arriba, dos por fila en el ordenador (28/10/2026: antes, una lista a todo lo ancho que
   dejaba media pantalla vacía). Toda la tarjeta lleva a la página. */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 24px; border-top: 0; }
.ficha {
  position: relative; display: flex; flex-direction: column; gap: 0; padding: 28px 28px 26px; border: 1px solid var(--linea);
  border-top: 6px solid var(--acento, var(--mono)); border-radius: var(--radio-l); background: var(--blanco);
  transition: background-color var(--d-1) var(--curva), transform var(--d-2) var(--curva);
}
.ficha__texto { grid-column: auto; }
.ficha__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ficha__titulo a:hover { text-decoration-color: var(--acento, var(--naranja)); }
.ficha__imagen { order: -1; display: block; width: 100%; margin-bottom: 20px; border-radius: var(--r-papel); border: 1px solid var(--linea); overflow: hidden; }
.ficha__imagen img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
@media (hover: hover) { .ficha:hover { background: var(--acento-suave, var(--hielo)); } }