/* portalecm · base común: fichas de color, documento, cabecera y pie.
   Estilo «Apple sobrio» desde el 2026-10-04 (ver ~/ECMs/99_archivados/08_web/propuesta-portada-sobria.md).
   Colores: vuelve el papel crema anterior (0.1.x) el 2026-10-09, a petición de Miguel; el azul se queda.
   --papel es el fondo y --hoja la banda y las cajas, más claras que el fondo. */
:root{
  --papel:#F3EBDD; --hoja:#FCF8F0; --tinta:#26221C; --suave:#5E564A; --enlace:#0066CC;
  --frio:#D5E3EE; --luz:#FFD84D; --luz-tinta:#2B2200;
  /* Banda de «La luz» en las historias: el crema normal de la página (--papel), sin color propio (Miguel, 0.3.29) */
  --luz-banda:var(--papel); --luz-banda-tinta:#26221C; --luz-banda-suave:#5E564A;
  --cuadricula:#DCCBAE; --noche:#1C1A16; --dia:#FCF8F0;
  --filete:color-mix(in srgb,var(--tinta) 16%,transparent);
  --fuente:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,"Segoe UI",system-ui,sans-serif;
  --radio:.75rem; --radio-grande:1.75rem; --canal:20px;
  /* Escala de letra del texto (2026-10-15, petición de Miguel: un estándar para toda la web). Tabla y reglas en
     ~/ECMs/08_web/DISENO.md, «Tipografía». Ningún texto del relato se sale de estos tamaños. */
  --t-texto:1.25rem;      /* cuerpo, 400; la negrita dentro del texto va al mismo tamaño, en 700 */
  --t-destacado:1.5rem;   /* frase clave y citas, 700 (1,35 rem en el móvil) */
  --t-lista:1.125rem;     /* listas, columnas, tablas y avisos */
  --t-nota:1rem;          /* «cuándo», pies, fuentes de una cita, leyendas: el mínimo de la web */
}
/* Modo oscuro: sigue al del dispositivo, sin botón para cambiarlo (decisión de Miguel, 2026-10-10). */
@media (prefers-color-scheme:dark){
  :root{--papel:#1C1A16;--hoja:#26231D;--tinta:#F1E9DB;--suave:#B5AB9A;--enlace:#2997FF; --frio:#13283A;--luz-banda:var(--papel);--luz-banda-tinta:#F1E9DB;--luz-banda-suave:#B5AB9A; --luz:#E9C13C;--luz-tinta:#241C00;--cuadricula:#453E31; color-scheme:dark;}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5.5rem); scrollbar-color:var(--suave) var(--papel); -webkit-text-size-adjust:100%;}
body{margin:0;background:var(--papel);color:var(--tinta); font-family:var(--fuente);font-size:1.25rem;line-height:1.6; padding-inline:var(--canal);padding-block:0; -webkit-tap-highlight-color:color-mix(in srgb,var(--enlace) 25%,transparent); overflow-wrap:break-word;}
::selection{background:var(--luz);color:var(--luz-tinta)}
p{margin:0}
a{color:var(--enlace);text-decoration-thickness:.09em;text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration-thickness:.16em}
}
:focus-visible{outline:3px solid var(--enlace);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-weight:800;text-wrap:balance;margin:0}
strong,b{font-weight:700}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:var(--canal);top:-6rem;background:var(--tinta);color:var(--papel);padding:.6rem 1rem;border-radius:var(--radio);z-index:10}
.saltar:focus{top:calc(env(safe-area-inset-top,0px) + .5rem)}
.ancho{max-width:66rem;margin-inline:auto}
.col{max-width:36rem}
/* Las bolas de las cinco preguntas: comunes a la portada, el listado y las historias */
.bola{display:inline-block;flex:none;width:1.25rem;height:1.25rem;border-radius:50%;border:2.5px solid var(--tinta);background:transparent;vertical-align:-.2em}
.bola.si{background:var(--tinta)}
.bola.parte{background:linear-gradient(90deg,var(--tinta) 50%,transparent 50%)}
/* Pregunta que no se aplica a un caso (p. ej. un dato soñado días después): bola discontinua */
.bola.no-aplica{border-style:dashed;opacity:.7}
/* La respuesta es no (Miguel, 2026-11-03): bola vacía tachada con una raya en diagonal, para no confundirla con «Sin datos» */
.bola.no{background:linear-gradient(135deg,transparent calc(50% - 1.5px),var(--tinta) calc(50% - 1.5px),var(--tinta) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.leyenda li{display:flex;align-items:center;gap:.5rem}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* Cabecera del sitio (0.5.0): fija arriba, a todo lo ancho; dentro, la marca a la izquierda y las secciones a la
   derecha. Al bajar (clase «con-filete», menu.js) gana un filete y una sombra mínima. En móvil, el botón «Menú» abre las secciones a pantalla completa. */
.cabecera{position:sticky;top:0;z-index:30;margin-inline:calc(-1 * var(--canal));padding-inline:var(--canal);background:var(--papel);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
/* Con la barra de WordPress (solo quien administra), la cabecera se pega debajo de ella y no detrás */
.admin-bar .cabecera{top:32px}
@media (max-width:782px){ .admin-bar .cabecera{top:46px} }
@media (max-width:600px){ .admin-bar .cabecera{top:0} }
.cabecera.con-filete{border-bottom-color:var(--filete);box-shadow:0 6px 18px -14px color-mix(in srgb,var(--tinta) 45%,transparent)}
.sitio{display:flex;align-items:center;gap:1rem 2rem;min-height:4.25rem;transition:min-height .2s}
.con-filete .sitio{min-height:3.5rem}
.marca{display:inline-flex;align-items:center;gap:.6rem;padding-block:.5rem;margin-inline-end:auto;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--tinta);text-decoration:none}
.marca .logo{width:1.75rem;height:1.75rem;flex:none}
.menu ul{display:flex;gap:0 .25rem;margin:0;padding:0;list-style:none}
.menu a{position:relative;display:block;padding:.65rem .8rem;font-size:1.0625rem;font-weight:700;color:var(--tinta);text-decoration:none;border-radius:999px}
.menu a[aria-current="page"]{color:var(--enlace)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;border-radius:2px;background:currentColor}
@media (hover:hover) and (pointer:fine){
  .menu a:hover{background:var(--hoja)}
}
.menu-extra{display:none}
/* Selector de idioma (2026-10-10): el nombre de cada idioma en su idioma, sin banderas; solo sale si la página está traducida. */
.idiomas ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none}
.idiomas a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.25rem .8rem .25rem .6rem;font-size:.9375rem;font-weight:700;color:var(--enlace);text-decoration:none;border:1px solid var(--filete);border-radius:999px}
@media (hover:hover) and (pointer:fine){ .idiomas a:hover{background:var(--hoja)} }
.bandera{flex:none;width:1.3em;height:auto;aspect-ratio:4/3;border-radius:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--tinta) 18%,transparent)}
.idiomas--varios details{position:relative}
.idiomas--varios summary{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.25rem .75rem .25rem .6rem;font-size:.9375rem;font-weight:700;color:var(--enlace);border:1px solid var(--filete);border-radius:999px;cursor:pointer;list-style:none}
.idiomas--varios summary::-webkit-details-marker{display:none}
.idiomas--varios summary::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.idiomas--varios ul{position:absolute;right:0;top:calc(100% + .35rem);z-index:31;flex-direction:column;gap:0;min-width:10rem;padding:.35rem;background:var(--papel);border:1px solid var(--filete);border-radius:.75rem;box-shadow:0 10px 24px -16px color-mix(in srgb,var(--tinta) 55%,transparent)}
.idiomas--varios ul a{width:100%;border:0;border-radius:.5rem;padding-inline:.6rem}
@media (max-width:40rem){
  .idiomas--varios summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .idiomas--varios summary{padding-inline:.6rem}
  .sitio:has(.idiomas){gap:.5rem} .idiomas a{padding-inline:.6rem;font-size:.875rem} .sitio:has(.idiomas) .menu-boton{padding-inline-start:.25rem}
}
/* Idiomas con secciones largas (2026-10-24): cada sección en una sola línea («Geteilter Tod» se partía en dos). En
   alemán, letra y huecos algo menores; en alemán y portugués, entre el menú de móvil y 1024 px, el selector se queda en
   su bandera, como en el móvil. Español, inglés, francés e italiano no cambian. */
.menu a{white-space:nowrap}
@media (min-width:54.01rem){ html[lang="de"] .sitio{column-gap:1.1rem} html[lang="de"] .menu a{padding-inline:.55rem;font-size:1rem} }
@media (min-width:54.01rem) and (max-width:64rem){
  html:is([lang="de"],[lang="pt-BR"]) .idiomas--varios summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html:is([lang="de"],[lang="pt-BR"]) .idiomas--varios summary{padding-inline:.6rem}
}
.menu-boton{display:none;align-items:center;gap:.55rem;font:inherit;font-size:1.0625rem;font-weight:700;color:var(--tinta);background:transparent;border:0;min-height:2.75rem;padding:.5rem 0 .5rem .75rem;cursor:pointer}
.menu-icono{position:relative;width:1.15rem;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.menu-icono::before,.menu-icono::after{content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .2s}
.menu-icono::before{transform:translateY(-6px)} .menu-icono::after{transform:translateY(6px)}
[aria-expanded="true"] .menu-icono{background:transparent}
[aria-expanded="true"] .menu-icono::before{transform:rotate(45deg)} [aria-expanded="true"] .menu-icono::after{transform:rotate(-45deg)}
.menu-abierto{overflow:hidden}
/* Páginas sin plantilla propia: listados, texto y error */
.pagina{padding-block:3rem 2rem;margin-inline:auto;max-width:40rem}
.pagina h1{font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.05;letter-spacing:-.02em}
.pagina-texto{margin-top:1.25rem;font-size:1.125rem;line-height:1.65}
.pagina-texto p,.pagina-texto ul,.pagina-texto ol{margin:0 0 1rem}
.pagina-texto ul,.pagina-texto ol{padding-left:1.4rem}
.pagina-texto li{margin-bottom:.4rem}
.pagina-texto h2{font-size:1.5rem;line-height:1.25;margin:2.75rem 0 .75rem}
.pagina-texto h3{font-size:1.1875rem;line-height:1.3;margin:1.75rem 0 .5rem}
.pagina-texto .actualizado{color:var(--suave);font-size:1rem}
.pagina-texto .esencial{background:var(--hoja);border-radius:var(--radio);padding:1.1rem 1.25rem;margin:1.5rem 0 .5rem}
.pagina-texto .esencial p{margin:0}
.pagina-texto ol.preguntas-metodo{padding-left:0;list-style:none;counter-reset:p}
.pagina-texto ol.preguntas-metodo>li{counter-increment:p;position:relative;padding:1.1rem 0 1.1rem 3rem;border-top:1px solid var(--filete);margin:0}
.pagina-texto ol.preguntas-metodo>li::before{content:counter(p);position:absolute;left:0;top:1.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--tinta);color:var(--papel);font-weight:800;font-size:1rem;display:grid;place-items:center}
.pagina-texto ol.preguntas-metodo b{display:block;font-size:1.1875rem;line-height:1.35;margin-bottom:.35rem}
.pagina-texto .ejemplo{display:block;background:var(--hoja);border-radius:var(--radio);padding:1.1rem 1.25rem;text-decoration:none;color:var(--tinta);font-weight:700}
.pagina-texto .ejemplo span{color:var(--enlace)}
/* «Cómo comprobamos»: lo que vale cada bolita y un ejemplo de suma (Miguel, 2026-11-04) */
.pagina-texto ul.valor-bolas{list-style:none;padding:0;margin:1.25rem 0 1.25rem;background:var(--hoja);border-radius:var(--radio)}
.pagina-texto ul.valor-bolas>li{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;column-gap:1rem;align-items:center;padding:.9rem 1.25rem;margin:0;border-top:1px solid var(--filete)}
.pagina-texto ul.valor-bolas>li:first-child{border-top:0}
.valor-bolas .bola{grid-column:1;grid-row:1/span 2;width:1.6rem;height:1.6rem;border-width:3px}
.valor-bolas b{grid-column:2;grid-row:1;font-size:1.1875rem;line-height:1.3}
.valor-bolas .que{grid-column:2;grid-row:2;font-size:var(--t-nota);line-height:1.45;color:var(--suave)}
.valor-bolas .puntos{grid-column:3;grid-row:1/span 2;font-weight:800;font-size:1.1875rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.valor-bolas .puntos.cero{color:var(--suave);font-weight:700}
.pagina-texto figure.suma-bolas{margin:1.25rem 0 1.5rem;padding:1.25rem;border:2px solid var(--filete);border-radius:var(--radio)}
.suma-bolas figcaption{font-weight:700;margin-bottom:1rem}
.suma-bolas .suma{display:flex;align-items:flex-start;justify-content:center;gap:.35rem}
.suma-bolas .sumando{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:2.25rem}
.suma-bolas .sumando small{font-size:.875rem;color:var(--suave);font-weight:700}
.suma-bolas .sumando .bola{width:2rem;height:2rem;border-width:3px}
.suma-bolas .sumando .v{font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.suma-bolas .mas{align-self:center;margin-top:.1rem;color:var(--suave);font-weight:700}
.suma-bolas .total{margin:1rem 0 0;text-align:center;font-weight:800;font-size:1.75rem;line-height:1.2}
.suma-bolas .total span{font-size:1.125rem;color:var(--suave);font-weight:700}
/* Páginas de «Para entender»: entradilla, ficha de datos, tablas, citas y «sigue leyendo» */
.pagina-texto .entradilla-pagina{font-size:1.3125rem;line-height:1.5;margin-bottom:1.25rem}
.pagina-texto dl.ficha-ejes{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.6rem 1.25rem;margin:0 0 1.5rem;padding:1.25rem;background:var(--hoja);border-radius:var(--radio)}
.pagina-texto dl.ficha-ejes dt{font-weight:800}
.pagina-texto dl.ficha-ejes dd{margin:0}
@media (max-width:40rem){ .pagina-texto dl.ficha-ejes{grid-template-columns:minmax(0,1fr);gap:.15rem} .pagina-texto dl.ficha-ejes dd{margin-bottom:.6rem} }
.pagina-texto .tabla{width:100%;overflow-x:auto;margin:0 0 1rem}
.pagina-texto table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4}
.pagina-texto th,.pagina-texto td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--filete);vertical-align:top}
.pagina-texto th{font-weight:800}
.pagina-texto td.num,.pagina-texto th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pagina-texto .nota-tabla{font-size:.9375rem;color:var(--suave)}
.pagina-texto blockquote{margin:1.25rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--enlace);font-size:1.1875rem}
.pagina-texto blockquote cite{display:block;margin-top:.4rem;font-style:normal;font-size:1rem;color:var(--suave)}
.pagina-texto .sigue{list-style:none;padding:0;display:grid;gap:.75rem}
.pagina-texto .sigue a{display:block;padding:1rem 1.25rem;background:var(--hoja);border-radius:var(--radio);text-decoration:none;color:var(--tinta)}
.pagina-texto .sigue b{display:block;color:var(--enlace)}
:is(.pagina-texto,.faq-bloque) details.faq{border-top:1px solid var(--filete);padding:.25rem 0}
:is(.pagina-texto,.faq-bloque) details.faq:last-of-type{border-bottom:1px solid var(--filete)}
:is(.pagina-texto,.faq-bloque) details.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.85rem 0;font-size:1.1875rem;font-weight:800;line-height:1.35;cursor:pointer;list-style:none}
:is(.pagina-texto,.faq-bloque) details.faq summary::-webkit-details-marker{display:none}
:is(.pagina-texto,.faq-bloque) details.faq summary::after{content:"";flex:none;width:.6em;height:.6em;margin-top:.3em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
:is(.pagina-texto,.faq-bloque) details.faq[open] summary::after{transform:translateY(.25em) rotate(-135deg)}
:is(.pagina-texto,.faq-bloque) details.faq p{margin:0 0 1rem}
:is(.pagina-texto,.faq-bloque) details.faq + p{margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){ :is(.pagina-texto,.faq-bloque) details.faq summary::after{transition:none} }
/* Bloque «Preguntas frecuentes» al final de historias y estudios (2026-10-14, SEO): plegadas, el texto entero en el HTML */
.faq-bloque{padding-block:3rem 0}
.faq-bloque h2{font-size:1.6rem;line-height:1.15;margin-bottom:1rem}
.faq-lista{max-width:46rem}
.hub-texto{max-width:46rem;margin-inline:auto}
.seccion.hub-preguntas{padding-top:0} /* Pegadas a las tarjetas: antes quedaban 224 px vacíos entre las dos secciones. */ /* El texto de debajo de las tarjetas de una sección, centrado (2026-11-09). */
.faq-lista a{color:var(--enlace)}
.pagina-texto .sigue span{color:var(--suave);font-size:1rem}
/* Migas de pan de las páginas interiores */
/* Etiqueta con el recuento de cada sección, bajo el título (2026-10-24). */
.recuento{display:inline-flex;align-items:baseline;gap:.35rem;margin-top:1rem;padding:.3rem .95rem;border:1px solid var(--filete);border-radius:999px;background:var(--hoja);font-size:1rem;font-weight:700;color:var(--suave)}
.recuento strong{color:var(--tinta)}
.recuento + .entradilla-seccion{margin-top:1rem}
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-bottom:1.25rem;font-size:1rem;color:var(--suave)}
.migas a{color:var(--suave)}
.pagina-lista{margin-top:1.5rem}
.pagina-lista li{padding-block:.5rem}
/* Pie del sitio (0.5.0; cuatro columnas y «Síguenos» desde 0.13.0): banda de hoja a todo lo ancho; arriba la marca con
   sus redes; debajo, cuatro columnas de enlaces (dos en el móvil) y la barra legal.
   (.pie es un pie de figura en las historias.) */
.pie-web{margin-inline:calc(-1 * var(--canal));padding:3.5rem var(--canal) 2.5rem;background:var(--hoja);border-top:1px solid var(--filete);font-size:1rem;line-height:1.5}
.pie-columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
.pie-marca{margin-bottom:2.5rem} /* Arriba, a todo lo ancho: con la marca al lado, las preguntas se partían en dos líneas a 1440 px. */
.pie-marca p{margin-top:.75rem;max-width:22rem;color:var(--suave)}
.pie-marca .pie-lema{color:var(--tinta);font-weight:700}
.pie-grupo h2,.pie-redes h2{font-size:.875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin-bottom:.5rem}
.pie-grupo ul{margin:0;padding:0;list-style:none}
.pie-grupo a{display:inline-block;padding-block:.4rem;color:var(--tinta);text-decoration:none}
/* Síguenos: cada red con su icono y su nombre escrito (lectura fácil: nunca un icono suelto). */
.pie-redes{margin-top:2rem}
.pie-redes ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
/* Compactos desde 0.13.2 (Miguel: «ocupan mucho»): sin el @usuario, letra y relleno menores; el alto sigue en 44 px. */
.pie-redes .red{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 .85rem 0 .7rem;border:1px solid var(--filete);border-radius:999px;background:var(--papel);color:var(--tinta);font-size:.9375rem;text-decoration:none}
.pie-redes .red-icono{flex:none;width:1.125rem;height:1.125rem}
.pie-redes .red-nombre{font-weight:700}
@media (min-width:54rem){ /* En pantalla ancha, «Síguenos» a la derecha de la marca: el pie no crece hacia abajo. */
  .pie-marca{display:grid;grid-template-columns:minmax(0,26rem) auto;column-gap:2rem;align-content:start}
  .pie-marca > *{grid-column:1}
  .pie-marca .pie-redes{grid-column:2;grid-row:1 / span 3;align-self:end;justify-self:end;margin-top:0}
}
@media (hover:hover) and (pointer:fine){
  .pie-grupo a:hover,.pie-barra a:hover{color:var(--enlace);text-decoration:underline}
  .pie-redes .red:hover{border-color:var(--enlace);color:var(--enlace)}
}
.pie-legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--filete);color:var(--suave);font-size:.9375rem}
.pie-legal p+p{margin-top:.4rem}
.pie-barra{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem;margin-top:1rem!important} /* center: en el móvil los enlaces miden 44 px y el © quedaba más alto (0.13.1). */
.pie-barra a{color:var(--suave);text-decoration:none;padding-block:.35rem}
.pie-barra span{padding-block:.35rem}
@media (max-width:40rem){
  .pie-columnas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 1.5rem}
}
@media (max-width:54rem){
  .js .menu-boton{display:inline-flex}
  .js .menu{display:none}
  .js .menu.abierto{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;top:var(--alto-cabecera,4.25rem);z-index:29;padding:1rem var(--canal) calc(2rem + env(safe-area-inset-bottom,0px));background:var(--papel);overflow-y:auto;border-top:1px solid var(--filete)}
  .js .menu ul{flex-direction:column;gap:0}
  .js .menu a{padding:1rem 0;font-size:1.5rem;border-radius:0;border-bottom:1px solid var(--filete)}
  .js .menu a[aria-current="page"]::after{display:none}
  .js .menu-extra{display:block;margin-top:1.5rem}
  .js .menu-extra a{font-size:1.125rem;border:0;color:var(--enlace)}
  .js .idiomas{order:1} .js .menu-boton{order:2} .js .menu{order:3} /* En el móvil, el idioma a la vista, antes de «Menú». */
}
@media (max-width:40rem){
  :root{--canal:18px} body{font-size:1.1875rem}
}
/* Página no encontrada */
.destinos{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.75rem}
.destinos a{display:grid;gap:.15rem;padding:1rem 1.25rem;background:var(--hoja);border-radius:var(--radio);color:var(--tinta);text-decoration:none}
.destinos b{font-size:1.1875rem;color:var(--enlace)}
.destinos span{color:var(--suave);font-size:1rem}
@media (hover:hover) and (pointer:fine){
  .destinos a:hover{box-shadow:0 0 0 2px var(--enlace)}
}
.error-nota{margin-top:1.5rem;color:var(--suave);font-size:1rem}
.pagina-texto figure.ilustracion{margin:1.5rem 0 1.75rem}
.pagina-texto figure.ilustracion img{display:block;width:100%;height:auto;border-radius:var(--radio-grande)}
@media (max-width:40rem){ .pagina-texto .ancho-solo{display:none} }
/* Cien puntos sin JavaScript (páginas de Entender) */
.pagina-texto .cien-estatico{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.45rem;max-width:22rem;margin:1rem 0}
.pagina-texto .cien-estatico i{aspect-ratio:1;border-radius:50%;border:2px solid var(--suave)}
.pagina-texto .cien-estatico i.lleno{background:var(--tinta);border-color:var(--tinta)}
.pagina-texto .solo-movil{display:none;color:var(--suave)}
@media (max-width:40rem){ .pagina-texto .solo-movil{display:inline} }

/* Zonas táctiles de 44 px en móvil (auditoría 2026-10-09) */
@media (max-width:40rem){
  .pie-grupo a,.pie-barra a{display:inline-flex;align-items:center;min-height:2.75rem;padding-block:0}
  .pie-grupo a{padding-block:.5rem;line-height:1.3} /* Una pregunta en dos líneas respira igual que las de una. */
  .migas a{display:inline-flex;align-items:center;min-height:2.75rem}
}
/* Fuentes de las páginas de Entender: cada enlace, fácil de pulsar en el móvil */
.pagina-texto .fuentes-pagina{font-size:1rem}
@media (max-width:40rem){ .pagina-texto .fuentes-pagina a{display:inline-flex;align-items:center;min-height:2.75rem} }
.pagina-texto .esencial ul{margin:.6rem 0 0}
.pagina-texto .esencial li:last-child{margin-bottom:0}

/* Símbolos que nuestra letra no tiene (inc/simbolos.php, 2026-10-25): la flecha, dibujada con el color y el grosor del
   texto; el 2 de CO₂ y la «e» de «XIXᵉ», con nuestra letra en pequeño, sin mover el alto de la línea. */
.flecha{display:inline-block;width:1.05em;height:.84em;margin-left:.2em;vertical-align:-.06em;flex:none;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
sub.ind,sup.ind{font-size:.7em;line-height:0;position:relative;vertical-align:baseline}
sub.ind{bottom:-.25em}
sup.ind{bottom:.55em}
.sin-corte{white-space:nowrap}
.pagina-texto .ejemplo .sin-corte{color:inherit} /* La caja de ejemplo pinta de azul su span (la flecha), no la palabra de delante. */