/* LA PORTADA.
*
* Se carga SIEMPRE DESPUES de hub.css, y eso no es un detalle de orden: los
* tokens -los grises, el rojo, los radios, la sombra- y las piezas comunes
* -.page, .card, .kpi, .chip, .lista-sucesos- salen de alli. Aqui solo esta lo
* que unicamente tiene esta pagina: la cabecera grande, los pilares, los pasos
* del metodo, la rejilla de herramientas y el pie.
*
* POR QUE NO HAY NI UN GRAFICO NI UN LEAFLET
* Esta pagina nace de un reproche concreto: que la web "es demasiado
* herramienta" y "empieza practicamente como una aplicacion". Meterle aqui un
* mapa interactivo reducido, aunque fuera bonito, seria volver a lo mismo con
* menos pixeles. El mapa esta a un clic y tiene su propia pagina; esta explica
* que es lo que se esta mirando cuando se abre.
*
* LO QUE SI HAY ES UN MAPA QUIETO, Y NO ESTA DE FONDO
* Es `static/home-mapa.png`, y tiene su propia seccion a media pagina. Estuvo
* primero detras del titular y no funcionaba: ver el comentario de
* `.mapa-teaser`, mas abajo, que es donde esta contado el porque.
*
* Las cifras, en cambio, se traen de la base en cada visita, con dos minutos
* de cache (ver app/core/home.py). */
/* ==========================================================================
CABECERA
========================================================================== */
/* Banda a todo el ancho con el contenido acotado dentro: el degradado tiene
que llegar a los bordes de la pantalla, pero el texto no puede pasar de la
misma anchura que el resto del sitio o la portada se lee como otra web. */
.hero {
border-bottom: 1px solid var(--line-soft);
background:
radial-gradient(900px 400px at 15% 0%, rgba(255, 59, 70, .10), transparent 65%),
linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 70%);
}
/* TRES ZONAS Y NO DOS COLUMNAS, Y AQUI ESTA EL PORQUE.
La primera version eran dos columnas -texto a la izquierda, pulso a la
derecha- que por debajo de 980 px pasaban a una sola. Y ahi salia un hueco
feo: en una columna, el parrafo se para en su `max-width`, la cautela en el
suyo y el pulso en el suyo, asi que los tres terminan a la misma altura por
la izquierda y el tercio derecho de la pantalla se queda vacio de arriba
abajo. No era un fallo de ninguna regla: era que nada ocupaba ese lado.
Con `grid-template-areas` las tres piezas se recolocan en vez de apilarse, y
en la franja intermedia la cautela y el pulso van EN FILA, que es lo que
llena ese lado. El orden del HTML no cambia nunca: texto, cautela, pulso. */
.hero-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 58px 22px 46px;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
grid-template-areas:
"texto pulso"
"aviso pulso";
gap: 22px 40px;
align-items: start;
}
.hero-text { grid-area: texto; }
.caveat { grid-area: aviso; }
/* El pulso ocupa las dos filas de su columna, centrado.
SE PROBO ESTIRARLO (`align-self: stretch` con las cuatro lineas repartidas
por dentro) para no dejar aire a su lado, y sale peor: la tarjeta pasa a
medir medio metro con cuatro renglones dentro, y el hueco no desaparece, se
mete DENTRO del recuadro, que es donde mas se nota. El aire de fuera no
molesta porque no tiene borde; el de dentro si. */
.pulse { grid-area: pulso; align-self: center; }
.hero h1 {
margin: 0;
/* El 4.6vw es lo que hace que la primera frase quepa SIEMPRE en una linea
cuando el titular comparte fila con el pulso. Con 6.2vw, entre 900 y
1160 px la caja de texto se queda mas estrecha que la frase y esta se
parte en «Es un caso / aislado»., que es el peor sitio posible: el
entrecomillado deja de leerse como una cita. El tope de 62 px no cambia,
asi que en pantalla grande el titular pega igual. */
font-size: clamp(34px, 4.6vw, 62px);
font-weight: 900;
letter-spacing: -.042em;
line-height: 1.02;
}
/* La segunda linea del titular, la que contesta. Va en rojo porque es la
unica frase de la pagina que es una afirmacion del sitio y no una
descripcion de lo que hace. */
.hero h1 em {
font-style: normal;
color: var(--accent);
}
/* ---- El lema ----
El escalon intermedio de la cabecera: titular a 62, lema a 26, entradilla a
17. Tres tamanyos bien separados es lo que hace que se lea en ese orden sin
que nadie tenga que decidirlo.
SIN BARRA NI COLOR DE ACENTO EN LA PRIMERA MITAD, aunque apetezca: justo
encima hay una linea entera en rojo -la del titular- y justo debajo, la
cautela con su barra ambar. Una tercera marca aqui convierte tres avisos en
ninguno. Lo unico que se destaca es la segunda mitad, que es la que dice
como se hace lo que promete la primera. */
.claim {
margin: 20px 0 0;
/* Sin `max-width`: la frase mide 38 caracteres y nunca pasa de media
columna, asi que un tope solo serviria para partirla en dos donde no
toca. */
font-size: clamp(20px, 2.4vw, 29px);
font-weight: 800;
letter-spacing: -.028em;
line-height: 1.28;
color: #e2e3e9;
}
.claim em {
display: block;
margin-top: 4px;
font-style: normal;
font-weight: 600;
font-size: .72em;
letter-spacing: -.02em;
color: var(--dim);
}
.lead {
margin: 18px 0 0;
max-width: 62ch;
font-size: clamp(15px, 1.6vw, 17.5px);
line-height: 1.62;
color: #c8c9d1;
}
.lead b { color: var(--txt); font-weight: 700; }
/* ---- La cautela, y va arriba ----
No es una nota al pie ni letra pequenya: es la frase que decide si lo que se
lee despues se entiende bien o mal. Un recuento de prensa leido como si
fuera el registro del Ministerio del Interior es justo la mala lectura que
este sitio no se puede permitir, asi que la advertencia va donde no se puede
saltar. */
.caveat {
/* Sin margen propio: la separacion la pone el `gap` de `.hero-inner`. Con
los dos, en la franja en la que la cautela va al lado del pulso, uno
empezaria mas abajo que el otro sin ninguna razon visible. */
margin: 0;
padding: 14px 16px 14px 18px;
max-width: 70ch;
border: 1px solid rgba(245, 165, 36, .3);
border-left: 3px solid var(--warm);
border-radius: var(--r-sm);
background: rgba(245, 165, 36, .075);
color: #f0dcb4;
font-size: 13.5px;
line-height: 1.55;
}
.caveat b { color: #ffd99a; }
.caveat a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* ---- Botones ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: rgba(255, 255, 255, .035);
color: var(--txt);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.btn:hover { border-color: var(--accent-line); background: var(--accent-dim); }
.btn:active { transform: translateY(1px); }
.btn.is-primary {
border-color: transparent;
background: var(--accent);
color: #fff;
}
.btn.is-primary:hover { background: #ff535d; border-color: transparent; }
/* ==========================================================================
EL PULSO: la columna derecha de la cabecera
========================================================================== */
/* Lo que hace esta columna es demostrar la frase de al lado. "Recogemos
sucesos" es una promesa; "el ultimo entro hace once minutos y es este" es
una prueba, y ademas es la unica parte de la portada que cambia sola. */
.pulse {
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--r);
padding: 20px;
box-shadow: var(--shadow);
}
.pulse-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dim);
}
/* El punto que late. Es el mismo de la portada vieja -"en vivo"-, que era de
las pocas cosas que a todo el mundo le gustaban. */
.pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cool);
box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); }
70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
/* Quien tenga puesto "menos animacion" en el sistema no quiere un punto
latiendo en la esquina. Se queda el punto, se va el latido. */
@media (prefers-reduced-motion: reduce) {
.pulse-dot { animation: none; }
}
.pulse-big {
display: block;
margin: 14px 0 0;
font-size: clamp(38px, 7vw, 52px);
font-weight: 900;
letter-spacing: -.045em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pulse-big small {
display: block;
margin-top: 6px;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0;
color: var(--dim);
}
.pulse-delta {
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
font-size: 13px;
color: var(--dim);
}
.pulse-delta b { color: var(--cool); font-variant-numeric: tabular-nums; }
.pulse-last { margin: 14px 0 0; font-size: 12.5px; color: var(--dimmer); }
.pulse-last a {
display: block;
margin-top: 4px;
color: var(--txt);
font-weight: 600;
font-size: 13.5px;
line-height: 1.4;
text-decoration: none;
}
.pulse-last a:hover { color: var(--accent); }
/* ---- La banda de cifras ----
`.kpis` y `.kpi` son los de hub.css; lo unico que cambia aqui es como se
reparten las columnas. Alli van con `auto-fit` y un ancho minimo, que es lo
correcto para una rejilla de cuantos elementos sea; aqui son CUATRO SIEMPRE,
y con `auto-fit` hay anchos intermedios en los que caben tres y la cuarta se
queda sola en su fila, que es la forma mas facil de que una rejilla parezca
rota. Cuatro arriba y dos abajo, dicho a mano: no hay ancho en el que pueda
quedar una huerfana. */
.kpis-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ==========================================================================
LO QUE NO SE CUENTA
==========================================================================
Cuatro tarjetas de omision y, debajo, el detalle por medio.
CADA TARJETA LLEVA SU FRACCION ESCRITA, y no es redundancia con la barra:
la barra se lee de un vistazo y la fraccion es la que se puede comprobar.
En un sitio cuyo reproche a los medios es publicar porcentajes sin
denominador, un 62% suelto aqui seria el mismo vicio con el rotulo cambiado.
EL COLOR NO ES DECORATIVO ni se elige en esta hoja: lo calcula
`opacity.scale_color` en Python y entra como atributo `style`, que es la
unica forma de que la misma cifra salga del mismo color aqui, en el ranking
de /transparency y en el borrador de la cuenta de X. */
.omisiones {
display: grid;
/* `--cols` lo pone la plantilla con el numero de campos publicados. Con un
`auto-fit` habria anchos en los que la ultima tarjeta se queda sola en su
fila, que es justo lo que se arreglo en la banda de cifras. */
grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
gap: 14px;
}
.omision {
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--r);
padding: 18px 20px 20px;
}
.omision > b {
display: block;
font-size: clamp(30px, 3.4vw, 40px);
font-weight: 900;
letter-spacing: -.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.omision .que {
display: block;
margin-top: 7px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
color: var(--txt);
}
.omision .barra {
display: block;
height: 5px;
margin-top: 14px;
border-radius: 3px;
background: rgba(255, 255, 255, .06);
overflow: hidden;
}
.omision .barra i { display: block; height: 100%; border-radius: 3px; }
.omision small {
display: block;
margin-top: 9px;
font-size: 11.5px;
color: var(--dimmer);
font-variant-numeric: tabular-nums;
}
/* La cautela y la nota del arma. Van en gris y con la medida corta: son
parrafos para leer, no rotulos. */
.nota {
margin: 16px 0 0;
max-width: 82ch;
font-size: 13px;
line-height: 1.6;
color: var(--dim);
}
.nota b { color: var(--txt); }
/* ---- Medio a medio ---- */
.callan { list-style: none; margin: 16px 0 0; padding: 0; }
.callan li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 4px 12px;
padding: 13px 0;
border-top: 1px solid var(--line-soft);
}
.callan li:first-child { border-top: 0; }
.callan .medio {
font-size: 14px;
font-weight: 700;
text-decoration: none;
color: var(--txt);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.callan .medio:hover { color: var(--accent); }
/* El denominador, a la derecha del nombre y en tono de nota: tiene que estar,
pero no compite con el dato. */
.callan .n {
font-size: 11.5px;
color: var(--dimmer);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.callan .datos {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 2px;
}
.callan .dato {
font-size: 12.5px;
color: var(--dim);
white-space: nowrap;
}
.callan .dato b {
margin-right: 5px;
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
SECCIONES
========================================================================== */
.seccion { margin-bottom: 44px; }
.seccion-head { margin-bottom: 18px; }
.seccion-head h2 {
margin: 0;
font-size: clamp(21px, 2.6vw, 27px);
font-weight: 900;
letter-spacing: -.03em;
}
.seccion-head p {
margin: 8px 0 0;
max-width: 72ch;
font-size: 14px;
color: var(--dim);
line-height: 1.6;
}
.seccion-head a { color: var(--blue); }
/* ---- Los tres pilares ---- */
.pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
gap: 16px;
}
.pillar {
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--r);
padding: 20px 22px 22px;
}
.pillar h3 {
margin: 0 0 8px;
font-size: 15.5px;
font-weight: 800;
letter-spacing: -.02em;
}
.pillar p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #b7b8c2; }
.pillar p + p { margin-top: 9px; }
.pillar a { color: var(--blue); text-decoration: none; }
.pillar a:hover { text-decoration: underline; }
/* El numero romano de cada pilar. Decorativo, y por eso `aria-hidden` en el
HTML: un lector de pantalla leyendo "uno" antes de cada titulo no anyade
nada que el orden de la lista no diga ya. */
.pillar .n {
display: block;
margin-bottom: 12px;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
color: var(--accent);
}
/* ---- El bloque del nombre ----
La unica parte de la pagina que se permite ser un texto largo seguido. Es
el argumento del sitio; si no cabe aqui, no cabe en ningun sitio. */
.manifiesto {
border: 1px solid var(--accent-line);
background:
radial-gradient(700px 240px at 100% 0%, rgba(255, 59, 70, .1), transparent 70%),
var(--surface);
border-radius: var(--r);
padding: 30px 32px;
box-shadow: var(--shadow);
}
.manifiesto h2 {
margin: 0 0 14px;
font-size: clamp(20px, 2.6vw, 26px);
font-weight: 900;
letter-spacing: -.03em;
}
.manifiesto p {
margin: 0 0 12px;
max-width: 78ch;
font-size: 14.8px;
line-height: 1.68;
color: #c8c9d1;
}
.manifiesto p:last-child { margin-bottom: 0; }
.manifiesto b { color: var(--txt); }
.manifiesto em { color: var(--accent); font-style: normal; font-weight: 700; }
/* ---- Lo ultimo + la columna de al lado ---- */
.split {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
/* Las lineas de la lista de ultimos sucesos anyaden un dato que la lista de
las fichas no tiene: cuantos medios lo publicaron. No es decoracion. Un
suceso con cinco fuentes no es mas grave, es mas comprobable, y esa es la
unica jerarquia que este sitio reconoce. */
.lista-sucesos .fuentes {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 6px;
padding: 1px 7px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
font-size: 10.5px;
color: var(--dim);
white-space: nowrap;
}
/* ---- El mapa, quieto ----
ESTUVO PRIMERO DE FONDO EN LA CABECERA Y ERA UN ERROR. Al 55% de opacidad,
recortado y con una mascara encima, la silueta de Espanya no se reconocia:
quedaba una mancha roja bonita detras del titular, o sea ruido con el coste
de una imagen. Una foto que no se puede ver no decora, estorba.
Asi que el mapa es una seccion y se ve entero, con su texto alternativo
escrito -aqui SI informa, no es adorno- y siendo lo que de verdad es: el
enlace grande a /mapa. */
.mapa-teaser {
position: relative;
display: block;
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
background: var(--ink);
text-decoration: none;
box-shadow: var(--shadow);
transition: border-color .18s ease;
}
.mapa-teaser:hover { border-color: var(--accent-line); }
.mapa-teaser img {
display: block;
width: 100%;
height: auto;
/* El PNG se dibuja sobre el mismo negro del sitio, asi que no hace falta
ningun recorte para que no se le vean los bordes: se funde solo. */
}
/* El rotulo, encima del mapa y abajo a la izquierda, que es la zona vacia del
dibujo: la peninsula va centrada y Canarias arriba a la izquierda. Encima y
no debajo porque asi el bloque entero se lee como UNA cosa -un mapa que se
abre- y no como una imagen con un pie de foto. */
.mapa-cta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 46px 26px 22px;
background: linear-gradient(180deg, transparent, rgba(6, 6, 9, .88) 62%);
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
}
.mapa-cta div { flex: 1 1 260px; }
.mapa-cta b {
display: block;
font-size: clamp(17px, 2.2vw, 22px);
font-weight: 900;
letter-spacing: -.03em;
}
.mapa-cta span { display: block; margin-top: 4px; font-size: 13px; color: var(--dim); }
/* No es un dentro de otro -eso no es HTML valido- sino un trozo con
pinta de boton dentro del enlace que envuelve al mapa entero. */
.mapa-cta .falso-btn {
display: inline-flex;
align-items: center;
margin: 0;
padding: 10px 18px;
border-radius: var(--r-pill);
background: var(--accent);
color: #fff;
font-size: 13.5px;
font-weight: 700;
}
/* ---- Los pasos del metodo ---- */
.pasos {
list-style: none;
counter-reset: paso;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: 16px;
}
.pasos li {
counter-increment: paso;
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--r);
padding: 18px 20px 20px;
}
.pasos li::before {
content: counter(paso);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-bottom: 12px;
border-radius: 50%;
border: 1px solid var(--accent-line);
background: var(--accent-dim);
color: #ffc9cc;
font-size: 12px;
font-weight: 800;
}
.pasos h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; }
.pasos p { margin: 0; font-size: 13px; line-height: 1.58; color: #b7b8c2; }
.pasos a { color: var(--blue); text-decoration: none; }
.pasos a:hover { text-decoration: underline; }
/* ---- Lo que esto no es ---- */
.limites { list-style: none; margin: 0; padding: 0; }
.limites li {
padding: 14px 0;
border-top: 1px solid var(--line-soft);
font-size: 13.8px;
line-height: 1.6;
color: #b7b8c2;
}
.limites li:first-child { border-top: 0; }
.limites b { color: var(--txt); }
.limites a { color: var(--blue); text-decoration: none; }
.limites a:hover { text-decoration: underline; }
/* ---- La rejilla de herramientas ---- */
.tools {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
gap: 14px;
}
.tool {
display: block;
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--r);
padding: 18px 20px;
text-decoration: none;
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.tool:hover {
border-color: var(--accent-line);
background: rgba(255, 59, 70, .06);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.tool:hover { transform: none; }
}
.tool b {
display: block;
font-size: 14.5px;
font-weight: 800;
letter-spacing: -.02em;
}
.tool span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
/* ==========================================================================
AVISOS DE SESION
==========================================================================
Los `flash()` que redirigen a la portada -sesion cerrada, CSRF caducado,
fichero demasiado grande, usuario expulsado- hasta ahora no se pintaban en
ninguna parte: el mapa no los leia y se perdian en silencio. */
.avisos { max-width: var(--maxw); margin: 16px auto 0; padding: 0 22px; }
.aviso {
padding: 12px 16px;
margin-bottom: 8px;
border: 1px solid var(--accent-line);
background: var(--accent-dim);
border-radius: var(--r-sm);
font-size: 13.5px;
color: #ffc9cc;
}
/* ==========================================================================
PIE
========================================================================== */
.pie {
border-top: 1px solid var(--line-soft);
background: rgba(0, 0, 0, .3);
margin-top: 20px;
}
.pie-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 34px 22px 40px;
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: 26px;
}
/* h3 y no h4: el ultimo encabezado de la pagina antes del pie es un h2, y
saltarse un nivel es de las pocas cosas de accesibilidad que un comprobador
automatico canta sin discusion. No cambia como se ve. */
.pie h3 {
margin: 0 0 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dimmer);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 7px; }
.pie a { color: var(--dim); text-decoration: none; font-size: 13px; }
.pie a:hover { color: var(--accent); }
.pie .marca { font-size: 15px; font-weight: 900; letter-spacing: -.03em; color: var(--txt); }
.pie .marca span { color: var(--accent); }
.pie .sobre { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--dimmer); max-width: 40ch; }
.pie-legal {
max-width: var(--maxw);
margin: 0 auto;
padding: 14px 22px 30px;
border-top: 1px solid var(--line-soft);
font-size: 11.5px;
color: var(--dimmer);
}
.pie-legal a { color: var(--dim); }
/* ==========================================================================
PANTALLAS ESTRECHAS
==========================================================================
Los cortes van de mayor a menor, que es como se leen y como manda la
cascada: dos consultas que coinciden en una propiedad las resuelve el orden
del fichero, no el ancho, y escritas al reves la ancha ganaria a la
estrecha. Hoy ninguna se pisa con otra, pero eso es exactamente el tipo de
cosa que deja de ser verdad al anyadir una regla. */
/* 1160 · TODO LO QUE NO SEA UNA VENTANA ANCHA DE ESCRITORIO.
El titular se lleva el ancho entero y debajo van la cautela y el pulso uno
al lado del otro.
Es la franja en la que salia el hueco que se ve en la captura del
2026-09-24, y el corte esta en 1160 px -el mismo `--maxw` del sitio- por una
razon medible y no por gusto: por debajo de ahi el contenido de la cabecera
ya no cabe holgado en dos columnas, el bloque de texto se hace mas alto al
partirse los parrafos y el pulso, que mide siempre lo mismo, deja cada vez
MAS aire a su lado. O sea que el hueco no se va encogiendo segun se
estrecha la pantalla: crece. Por encima de 1160 la caja esta topada y las
dos columnas van a su mejor ancho, que es el unico sitio donde repartir en
dos merece la pena. */
@media (max-width: 1160px) {
.hero-inner {
padding: 38px 22px 34px;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
grid-template-areas:
"texto texto"
"aviso pulso";
gap: 24px 18px;
}
/* El parrafo de entrada deja de estar capado: con el titular a todo lo
ancho, 62ch es justo el hueco que se venia a arreglar. El limite sigue
existiendo en pantalla grande, que es donde una linea de cien caracteres
se hace ilegible. */
.lead { max-width: none; }
}
/* 980 · las dos rejillas de dos columnas que quedan. */
@media (max-width: 980px) {
.split { grid-template-columns: 1fr; }
.pie-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 760 · las dos rejillas de cuatro columnas: las cifras y las omisiones. Cuatro tarjetas en 700 px son cuatro columnas de
150, y ahi la etiqueta de cada una cae en tres renglones. Dos y dos. */
@media (max-width: 760px) {
.kpis-home,
.omisiones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 620 · movil: en fila no cabe nada, y cada pieza se lleva el ancho entero. */
@media (max-width: 620px) {
.hero-inner {
grid-template-columns: 1fr;
grid-template-areas:
"texto"
"aviso"
"pulso";
}
}
@media (max-width: 560px) {
.manifiesto { padding: 22px 20px; }
.pie-inner { grid-template-columns: 1fr; gap: 20px; }
.btn { flex: 1 1 auto; justify-content: center; }
/* El rotulo del mapa BAJA y deja de ir encima. A 360 px de ancho la
imagen mide 120 de alto: un rotulo superpuesto ahi no cabe, tapa el
dibujo entero y el degradado se come el unico trozo de mapa que se veia. */
.mapa-cta {
position: static;
padding: 16px 18px 18px;
background: rgba(255, 255, 255, .03);
border-top: 1px solid var(--line);
}
}