/* portada.css — la portada (rebranding del 6-oct): una portada de periódico de datos. Solo se carga en «/».
 *
 * 1 héroe (cabecera de periódico, titular, buscador, «Prueba con» y el sumario de tres piezas) · 2 secciones · 3 cifras ·
 * 4 cobertura (mapa, leyenda y capas) · 5 por dónde empezar · 6 móvil.
 * La identidad no cambia: azul marino, franja tricolor (bajo la cabecera), Instrument Serif en los titulares, Inter en el
 * texto y JetBrains Mono en las cifras. Nada de transiciones que tapen un clic (N1): la ficha del mapa no recibe el ratón.
 */

/* ════════ 1. La banda azul marino: qué es, el buscador y las cifras ════════════════════════════════════════ */
/* Elegida por el propietario (maqueta A con la banda de la C, 6-oct). Contrastes sobre #1f4068 (WCAG 2.1): blanco 10,5:1;
   #dfe7f1 (la entradilla) 8,5:1; #c9d5e4 (cejas y notas) 7,1:1; el oro claro #f0cf74 («por cuánto» y el foco) 7,0:1; el
   botón oro #d4a72c con texto casi negro 7,8:1 y su borde frente al azul 4,7:1. El foco de todo lo que hay en la banda,
   en oro claro (el azul de la casa no se vería) */
.portada-heroe {
    --banda-texto: #ffffff;
    --banda-texto-2: #dfe7f1;
    --banda-texto-3: #c9d5e4;
    --banda-oro: #f0cf74;
    --banda-filete: rgba(255, 255, 255, 0.2);
    --foco-color: var(--banda-oro);
    position: relative;
    background: var(--color-acento);
    color: var(--banda-texto);
    padding: var(--sp-10) 0 var(--sp-8);
    overflow: hidden;
}
/* Una retícula muy suave, de papel milimetrado, que se desvanece hacia abajo; y la franja tricolor al pie de la banda */
.portada-heroe::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.portada-heroe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--franja); }
.portada-heroe > .contenedor { position: relative; }
/* Un filo claro arriba: el tercio azul de la franja de la cabecera no se funde con la banda */
.portada-heroe { border-top: 2px solid var(--color-fondo-calido); }
.portada-cabecera {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-1) var(--sp-6);
    margin: 0 0 var(--sp-6); padding: 7px 0;
    border-top: 1px solid var(--banda-filete); border-bottom: 1px solid var(--banda-filete);
    font-size: var(--fs-12); font-weight: var(--peso-fuerte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--banda-texto-3);
}
.portada-cabecera-fecha { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--peso-medio); }
.portada-cabecera-fecha .icono { width: 1.1em; height: 1.1em; }
.portada-titulo { font-size: clamp(2.5rem, 1.1rem + 4vw, 4.75rem); line-height: 1; letter-spacing: -0.01em; margin: 0 0 var(--sp-5); color: var(--banda-texto); text-wrap: balance; max-width: 16ch; }
.portada-titulo em { font-style: italic; color: var(--banda-oro); }
.portada-entradilla { font-size: clamp(var(--fs-18), 1rem + 0.35vw, 1.3125rem); line-height: 1.45; color: var(--banda-texto-2); max-width: 50ch; margin: 0 0 var(--sp-6); }
.portada-entradilla strong { color: var(--banda-texto); font-weight: var(--peso-fuerte); }

/* El buscador: la caja blanca sobre el azul, el botón en el oro del cursor del logo y el cursor de la caja, dorado
   oscuro (#9a7716: 4,2:1 sobre el blanco; el oro de la casa daría 2,2:1) */
.portada-heroe .caja-busqueda { max-width: 820px; }
.portada-heroe .caja-fila { border-color: transparent; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); }
.portada-heroe .caja-fila:focus-within { border-color: var(--banda-oro); box-shadow: 0 0 0 3px var(--banda-oro), 0 18px 50px rgba(0, 0, 0, 0.28); }
.portada-heroe .caja-texto, .portada-heroe .caja-tipo, .portada-heroe .caja-enviar { min-height: 60px; }
/* La caja, el selector y las sugerencias son blancos: su texto, el de siempre, no el blanco de la banda (heredado, se
   escribía blanco sobre blanco; visto por el propietario el 12-oct) */
.portada-heroe .caja-fila { color: var(--color-texto); }
.portada-heroe .caja-texto { font-size: var(--fs-18); caret-color: #9a7716; }
.portada-heroe .caja-tipo:focus { box-shadow: inset 0 0 0 2px var(--color-acento); }
.portada-heroe .caja-enviar { background: var(--color-aviso-adorno); color: var(--color-texto); }
.portada-heroe .caja-enviar:hover { background: #e3b947; }
.portada-heroe .caja-enviar:focus-visible { outline: 2px solid var(--banda-texto); outline-offset: 2px; }

.portada-prueba { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; font-size: var(--fs-14); color: var(--banda-texto-3); }
.portada-prueba-rotulo { margin-right: var(--sp-1); }
.portada-ejemplo {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--sp-3);
    border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--radio-pildora); background: rgba(255, 255, 255, 0.04);
    font-weight: var(--peso-medio); color: var(--banda-texto); text-decoration: none;
}
.portada-ejemplo .icono { width: 0.95em; height: 0.95em; opacity: 0.8; }
.portada-ejemplo:hover { border-color: var(--banda-oro); background: rgba(255, 255, 255, 0.1); color: var(--banda-texto); text-decoration: none; }

/* Las cifras, en la banda: cuatro en una fila con filetes, en la monoespaciada, y el conmutador */
.portada-cifras { margin-top: var(--sp-8); border-top: 1px solid var(--banda-filete); }
.portada-cifras-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-4); }
.portada-cifras-cabeza .portada-ceja { margin: 0; color: var(--banda-texto-3); font-family: var(--fuente-sans); }
.portada-heroe .cuenta { border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.portada-heroe .cuenta-opcion { color: var(--banda-texto-2); }
.portada-heroe .cuenta-opcion + .cuenta-opcion { border-left-color: rgba(255, 255, 255, 0.45); }
.portada-heroe .cuenta-opcion:hover { color: var(--banda-texto); background: rgba(255, 255, 255, 0.1); }
.portada-heroe .cuenta-opcion[aria-current] { background: var(--banda-texto); color: var(--color-acento); }
.portada-heroe .cuenta-opcion:focus-visible { outline: 2px solid var(--banda-oro); outline-offset: 2px; }
.portada-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; border-radius: 0; background: none; overflow: visible; }
.portada-kpis .kpi { padding: var(--sp-4) var(--sp-6) var(--sp-5); box-shadow: none; background: none; justify-content: flex-start; }
.portada-kpis .kpi:first-child { padding-left: 0; }
.portada-kpis .kpi + .kpi { border-left: 1px solid var(--banda-filete); }
.portada-kpis .kpi-rotulo { color: var(--banda-texto-3); }
.portada-kpis .kpi-cabeza .pista-boton { color: var(--banda-texto-3); }
.portada-kpis .kpi-valor, .portada-kpis a.kpi-valor, .portada-kpis a.kpi-valor:hover { color: var(--banda-texto); }
.portada-kpis .kpi-valor { font-family: var(--fuente-mono); font-weight: var(--peso-medio); font-size: clamp(1.75rem, 0.9rem + 1.5vw, 2.625rem); letter-spacing: -0.04em; line-height: 1.1; }
.portada-kpis .cifra-unidad { font-family: var(--fuente-sans); font-size: 0.5em; font-weight: var(--peso-medio); letter-spacing: 0; }
.portada-kpis a.kpi-valor .icono { opacity: 0.75; }
.portada-kpis .kpi-nota { color: var(--banda-texto-3); }
.portada-cifras .nota-cuenta { margin: var(--sp-1) 0 0; color: var(--banda-texto-3); }
.portada-cifras .nota-cuenta strong { color: var(--banda-texto); }
.portada-cifras .nota-cuenta a { color: var(--banda-texto); }
.portada-cifras .franja-bruto { margin: var(--sp-2) 0 0; }

/* ════════ 2. Las tres piezas y las secciones ══════════════════════════════════════════════════════════════ */
.portada-piezas { margin-top: var(--sp-10); }
.portada-sumario { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
/* El filete de cada pieza, en su color de la franja (identidad: no codifica nada) */
.pieza { border-top: 3px solid var(--color-acento); padding-top: var(--sp-3); }
.pieza:nth-child(2) { border-top-color: var(--color-aviso-adorno); }
.pieza:nth-child(3) { border-top-color: var(--color-exito); }
.pieza-ceja { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-1); font-family: var(--fuente-sans); font-size: var(--fs-12); font-weight: var(--peso-fuerte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-texto-2); line-height: 1.4; }
.pieza-num { font-family: var(--fuente-mono); font-weight: var(--peso-medio); color: var(--color-aviso); letter-spacing: 0; }
.pieza-cifra { margin: 0 0 var(--sp-1); }
.pieza-cifra a { display: inline-flex; align-items: baseline; gap: var(--sp-2); min-height: var(--tactil-min); color: var(--color-texto-2); text-decoration: none; font-size: var(--fs-14); }
.pieza-cifra strong { font-family: var(--fuente-mono); font-size: 1.75rem; font-weight: var(--peso-medio); letter-spacing: -0.03em; color: var(--color-acento); line-height: 1.1; }
.pieza-cifra a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.pieza-texto { margin: 0; font-size: var(--fs-14); line-height: 1.55; color: var(--color-texto); }
.pieza-texto strong { font-family: var(--fuente-mono); font-weight: var(--peso-fuerte); font-size: 0.95em; }

.portada-seccion { margin-top: var(--sp-12); }
.portada-seccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-3) var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-texto); }
.portada-ceja, .portada-rotulo { margin: 0 0 var(--sp-1); font-size: var(--fs-12); font-weight: var(--peso-fuerte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-texto-2); }
.portada-rotulo-sub { font-weight: var(--peso-medio); letter-spacing: 0.02em; text-transform: none; }
.portada-h2 { margin: 0; font-size: clamp(var(--fs-28), 1.2rem + 1.2vw, 2.375rem); line-height: 1.05; }
.portada-mas { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tactil-min); font-size: var(--fs-14); font-weight: var(--peso-fuerte); text-decoration: none; white-space: nowrap; }
.portada-mas .icono { width: 0.9em; height: 0.9em; transition: transform var(--mov-rapido); }
.portada-mas:hover .icono { transform: translateX(2px); }

/* ════════ 4. Cobertura: el mapa, la frase, la leyenda y lo que no es de una comunidad ═══════════════════════ */
.portada-cob-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-10); align-items: start; margin-top: var(--sp-6); }
.mapa { margin: 0; max-width: 660px; }
.mapa-lienzo { position: relative; }
.mapa-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* El trazo va en el enlace y la forma lo hereda: así el realce (un <use> de la forma) lleva el suyo y no el blanco */
.mapa-region { stroke: #ffffff; stroke-width: 0.8; stroke-linejoin: round; cursor: pointer; text-decoration: none; }
.mapa-ciudad { stroke: var(--color-acento); stroke-width: 1; }
.mapa-zona, .mapa-rotulo { stroke: none; }
.mapa-trama, .mapa-realce { pointer-events: none; }
/* La costa y las fronteras: una sombra fina del conjunto (las fronteras entre comunidades siguen blancas). Con ella, las
   comunidades de la clase más clara se distinguen del fondo */
.mapa-tierra { filter: drop-shadow(0 0 0.7px rgba(31, 64, 104, 0.75)); }
.mapa-zona { pointer-events: all; }
.mapa-region:focus { outline: none; }
/* Al pasar o con el foco, la comunidad en el oro del cursor; el contorno oscuro va encima de las vecinas (mapa.js) */
.mapa-region:hover .mapa-forma, .mapa-region:focus-visible .mapa-forma { fill: var(--color-aviso-adorno); }
.mapa-region:focus-visible .mapa-forma { stroke: var(--color-texto); stroke-width: 2; }
.mapa-realce { fill: none; stroke: var(--color-texto); stroke-width: 1.8; stroke-linejoin: round; }
/* Los rótulos del SVG, en unidades del viewBox (600 de ancho): unos 12 px en escritorio y unos 10 en el móvil */
.mapa-rotulo { font-family: var(--fuente-sans); font-size: 12px; font-weight: var(--peso-fuerte); fill: var(--color-texto); }
.mapa-rotulo-recuadro { font-weight: var(--peso-medio); fill: var(--color-texto-2); letter-spacing: 0.02em; }
.mapa-recuadro { fill: none; stroke: var(--color-borde-fuerte); stroke-width: 1; }
.mapa-atribucion { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--color-texto-3); }
.mapa-atribucion a { color: inherit; }

/* La ficha: aparece junto al cursor o sobre la comunidad con el foco; nunca recibe el ratón */
.mapa-ficha {
    position: absolute; top: 0; left: 0; z-index: var(--z-popover); width: 17rem; pointer-events: none;
    padding: var(--sp-3) var(--sp-4); background: var(--color-superficie); border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-m); box-shadow: var(--sombra-3); font-size: var(--fs-13); line-height: 1.4;
}
.mapa-ficha[hidden] { display: none; }
.mapa-ficha-nombre { margin: 0 0 var(--sp-1); font-family: var(--fuente-serif); font-size: 1.3rem; line-height: 1.15; color: var(--color-texto-fuerte); }
.mapa-ficha .etiqueta { margin-bottom: var(--sp-1); }
.mapa-ficha-cifra { margin: 0 0 var(--sp-2); color: var(--color-texto-2); }
.mapa-ficha-cifra strong { font-family: var(--fuente-mono); font-size: 1.35rem; font-weight: var(--peso-fuerte); letter-spacing: -0.02em; color: var(--color-texto-fuerte); }
.mapa-ficha-barra { display: block; width: 100%; height: 6px; margin-bottom: var(--sp-2); border-radius: 3px; overflow: hidden; }
.mapa-ficha-fuentes { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 3px; }
.mapa-ficha-fuentes li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; }
.mapa-ficha-fuentes svg { width: 10px; height: 10px; }
.mapa-ficha-pct { font-family: var(--fuente-mono); font-size: var(--fs-12); color: var(--color-texto-2); }
.mapa-ficha-ir { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-weight: var(--peso-fuerte); color: var(--color-acento); }
.mapa-ficha-ir .icono { width: 0.9em; height: 0.9em; }
/* En pantallas táctiles el toque navega: sin ficha */
@media (hover: none) and (pointer: coarse) { .mapa-ficha { display: none; } }
/* Zonas táctiles de las comunidades pequeñas y las ciudades (web-movil): solo con el dedo; transparentes, encima de todo */
.mapa-tactil { display: none; }
.mapa-tactil circle { fill: transparent; stroke: none; pointer-events: all; }
@media (hover: none) and (pointer: coarse) { .mapa-tactil { display: inline; } }

.portada-frase { margin: 0 0 var(--sp-6); font-size: var(--fs-18); line-height: 1.55; }
.portada-frase .portada-mas { display: inline-flex; margin-left: var(--sp-1); }
.mapa-leyenda { margin-bottom: var(--sp-6); }
.mapa-leyenda-nota { margin: var(--sp-3) 0 0; font-size: var(--fs-13); color: var(--color-texto-2); line-height: 1.45; }
.mapa-escala { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-13); color: var(--color-texto-2); }
.mapa-escala li { display: flex; align-items: center; gap: var(--sp-3); }
.mapa-muestra { flex: none; width: 22px; height: 14px; }
.mapa-muestra rect:first-child { stroke: rgba(31, 64, 104, 0.18); stroke-width: 1; }
.mapa-escala-trama { margin-top: 4px; }

.portada-falta { margin-bottom: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--color-borde); }
.falta-lista { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
.falta-lista a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); min-height: var(--tactil-min); padding: 4px 0; border-bottom: 1px dotted var(--color-borde-fuerte); text-decoration: none; }
.falta-nombre { font-weight: var(--peso-medio); }
.falta-n { font-family: var(--fuente-mono); font-size: var(--fs-14); color: var(--color-texto); white-space: nowrap; }
.falta-lista a:hover .falta-nombre { text-decoration: underline; text-underline-offset: 0.15em; }
.portada-capas { padding-top: var(--sp-4); border-top: 1px solid var(--color-borde); }
.capas { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.capa-enlace { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); min-height: var(--tactil-min); text-decoration: none; border-bottom: 1px dotted var(--color-borde-fuerte); }
.capa-nombre { font-weight: var(--peso-fuerte); }
.capa-n { font-family: var(--fuente-mono); font-weight: var(--peso-medio); font-size: var(--fs-16); color: var(--color-acento); white-space: nowrap; }
.capa-unidad { font-family: var(--fuente-sans); font-size: var(--fs-13); }
.capa-enlace:hover .capa-nombre { text-decoration: underline; text-underline-offset: 0.15em; }
.capa-nota { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--color-texto-2); line-height: 1.45; }
.capa-pie { margin: var(--sp-3) 0 0; font-size: var(--fs-13); color: var(--color-texto-2); }
/* El segundo grupo («Además»: el BORME, que no tiene contratos), separado de las capas que están en el mapa (B2 del QA 4) */
.portada-capas .capas + .portada-rotulo, .portada-capas .capa-pie + .portada-rotulo { margin-top: var(--sp-5); }
.capa-pie a { font-family: var(--fuente-mono); font-weight: var(--peso-medio); text-underline-offset: 0.15em; }

.portada-cob-lista { margin-top: var(--sp-6); border-top: 1px solid var(--color-borde); }
.portada-cob-lista summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tactil); cursor: pointer; font-size: var(--fs-14); font-weight: var(--peso-fuerte); color: var(--color-acento); list-style: none; }
.portada-cob-lista summary::-webkit-details-marker { display: none; }
.portada-cob-lista[open] summary { margin-bottom: var(--sp-3); }
.portada-cob-tabla td.num a { font-family: var(--fuente-mono); }

/* ════════ 5. Por dónde empezar ═══════════════════════════════════════════════════════════════════════════ */
.empezar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.empezar-col { padding: var(--sp-5) var(--sp-6) 0; }
.empezar-col:first-child { padding-left: 0; }
.empezar-col + .empezar-col { border-left: 1px solid var(--color-borde); }
.empezar-titulo { margin: 0; font-family: var(--fuente-serif); font-weight: var(--peso-normal); font-size: var(--fs-28); line-height: 1.1; color: var(--color-texto-fuerte); }
.empezar-sub { margin: 2px 0 var(--sp-3); font-size: var(--fs-13); color: var(--color-texto-3); }
.empezar-lista { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: var(--sp-3); }
.empezar-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); align-items: baseline; }
/* El nombre en una línea, con puntos suspensivos (un enlace en bloque: en flex, text-overflow no recorta) */
.empezar-lista a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 2px; line-height: 1.4; font-weight: var(--peso-medio); text-decoration: none; }
.empezar-lista a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.empezar-imp { font-family: var(--fuente-mono); font-size: var(--fs-14); font-weight: var(--peso-medio); white-space: nowrap; }
.empezar-lista .barra { grid-column: 1 / -1; height: 4px; }

/* ════════ 6. Pantallas medianas y móvil ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .portada-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portada-kpis .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
    .portada-kpis .kpi:nth-child(n+3) { border-top: 1px solid var(--banda-filete); }
    .portada-sumario { gap: var(--sp-6); }
}
@media (max-width: 900px) {
    .portada-sumario, .portada-cob-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .mapa { max-width: 600px; }
    .empezar { grid-template-columns: minmax(0, 1fr); }
    .empezar-col, .empezar-col:first-child { padding: var(--sp-4) 0; }
    .empezar-col + .empezar-col { border-left: 0; border-top: 1px solid var(--color-borde); }
}
@media (max-width: 640px) {
    /* La banda no se come la pantalla: a 390 × 844, el buscador se ve sin desplazar */
    .portada-heroe { padding: var(--sp-4) 0 var(--sp-6); }
    .portada-heroe::before { background-size: 28px 28px; }
    .portada-cabecera { margin-bottom: var(--sp-4); font-size: 11px; letter-spacing: 0.06em; }
    .portada-cabecera-fecha { display: none; }
    .portada-titulo { margin-bottom: var(--sp-3); }
    .portada-entradilla { margin-bottom: var(--sp-4); font-size: var(--fs-16); }
    .portada-heroe .caja-texto { font-size: var(--fs-16); min-height: 52px; }
    .portada-heroe .caja-enviar { min-height: 52px; }
    .portada-heroe .caja-tipo { min-height: var(--tactil); }
    /* «Prueba con» en una fila que se desliza con el dedo */
    .portada-prueba { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--margen-lateral) * -1); padding-right: var(--margen-lateral); scrollbar-width: none; }
    .portada-prueba::-webkit-scrollbar { display: none; }
    /* B7 del QA de clics 5: con las sugerencias abiertas, la fila que se desliza (llega al borde de la pantalla y la lista no)
       asomaba a la derecha de la lista con un trozo del chip «Medtronic Iberica». Mientras están abiertas, la fila no se ve */
    .portada-heroe:has(#sugerencias:not([hidden]):not(:empty)) .portada-prueba { visibility: hidden; }
    /* …ni ocupa sitio a lo ancho (los ejemplos, sin ancho: la fila guarda su alto y no mueve lo de debajo) */
    .portada-heroe:has(#sugerencias:not([hidden]):not(:empty)) .portada-ejemplo { max-width: 0; margin: 0; padding-inline: 0; border-inline-width: 0; overflow: hidden; }
    /* La lista, del ancho entero del contenido: con 1 px menos a cada lado asomaban los bordes redondeados del conmutador
       de la vista y del rótulo de las cifras */
    .portada-heroe .combobox-lista { left: -1px; right: -1px; }
    .portada-ejemplo, .portada-prueba-rotulo { flex: none; white-space: nowrap; }
    .portada-cifras { margin-top: var(--sp-5); }
    .portada-kpis .kpi { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
    .portada-kpis .kpi:nth-child(odd) { padding-left: 0; }
    .portada-kpis .kpi-valor { font-size: 1.5rem; }
    /* «bruto» y la flecha (la vista de todas las fuentes) bajan juntos a su línea si no caben: components.css, .kpi-cola */
    .portada-piezas { margin-top: var(--sp-6); }
    .portada-seccion { margin-top: var(--sp-10); }
    .portada-frase { font-size: var(--fs-16); }
    .mapa-rotulo { font-size: 17px; }
    .falta-lista { gap: 0 var(--sp-4); }
    .capa-nota { font-size: var(--fs-12); }
    .empezar-col, .empezar-col:first-child { padding: var(--sp-3) 0; }
    .empezar-titulo { font-size: var(--fs-22); }
    .empezar-lista { gap: var(--sp-2); }
    /* «IMPORTE ADJUDICADO» en una línea (web-movil): a 360-390 px no cabían el rótulo, su «i» y el relleno. La columna de
       la derecha, sin relleno a la derecha (ya está el margen de la página); el rótulo, sin partir y con menos espaciado; la
       «i» ocupa su icono (su zona táctil sigue siendo de 44 px: components.css, .kpi-cabeza .pista-boton::after) */
    .portada-kpis .kpi:nth-child(even) { padding-right: 0; }
    .portada-kpis .kpi-cabeza { flex-wrap: nowrap; min-width: 0; }
    .portada-kpis .kpi-rotulo { white-space: nowrap; letter-spacing: 0.02em; }
    .portada-kpis .kpi-cabeza .pista-boton { min-width: 0; width: 16px; flex: none; }
}
/* En el móvil, el mapa a todo el ancho de la pantalla (B6 del QA 4): con las zonas táctiles debajo de las regiones, La
   Rioja, que no tiene costa, se pulsa solo en su forma, y a 360 px, con los márgenes de la página, medía 22 px de alto. A
   todo el ancho mide 24,6 (WCAG 2.5.8). El mapa ya deja 6 unidades de margen en cada lado (unos 4 px) */
@media (max-width: 480px) {
    .mapa-lienzo { margin-left: calc(var(--margen-izq) * -1); margin-right: calc(var(--margen-der) * -1); }
}
@media (max-width: 380px) {
    .portada-kpis .kpi-rotulo { font-size: 11px; }
    /* A 360 px, «20.721.058» y su flecha no cabían en media banda y la flecha bajaba sola a otra línea (también en main) */
    .portada-kpis .kpi-valor { font-size: 1.375rem; }
}