/* Página de medidas. Reutiliza las variables de estilo.css y solo añade lo suyo. Es una página de lectura, así que aquí sí se desplaza el documento entero. De las cinco creatividades que sirvieron de referencia, esta página es la que más se parece a la de la cronología sobre papel de periódico: fondo claro con grano, titular de dos pesos, pestaña de color que sangra, filete rojo vertical a la izquierda de la lista y barra verde de cierre abajo. */ body.pagina-medidas { display: block; overflow: auto; height: auto; min-height: 100%; background: var(--fondo) var(--grano); } /* Estas páginas usan la MISMA `.cabecera` del mapa, definida en estilo.css. Aquí solo se fija al alto de la ventana, porque en el mapa es una fila de la rejilla y aquí el documento se desplaza entero. */ .pagina-medidas .cabecera { position: sticky; top: 0; } .med-main { max-width: 780px; margin: 0 auto; padding: 30px 16px 60px; } /* ------------------------------------------------------------------ portada */ .med-portada { margin-bottom: 34px; } .med-sobre { margin: 0 0 10px; font-family: var(--titular); font-size: 13px; font-weight: 700; color: var(--vox-rojo); text-transform: uppercase; letter-spacing: .05em; } /* El interlineado va holgado a propósito: el titular lleva un bloque rojo y con Anton apretado el bloque se monta sobre la línea de arriba. Ver la nota de `.marca`. */ .med-portada h1 { font-family: var(--display); font-size: clamp(28px, 5.8vw, 46px); line-height: 1.18; text-transform: uppercase; letter-spacing: -.01em; } /* El bloque rojo de estos titulares va tan ceñido como el de «LA LEY DE NIETOS» de la cabecera. Con el padding general —pensado para cuerpos de 26 px— a 46 px el recuadro crecía proporcionalmente y quedaba mucho más alto que la letra. Aquí se aprieta. */ .med-portada h1 .marca { padding: .04em .16em .09em; } .med-entrada { margin: 22px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--tinta-2); max-width: 62ch; } /* --------------------------------------------------------------- cronología */ /* Filete rojo continuo a la izquierda, como la lista de la creatividad de prensa */ .cronologia { list-style: none; margin: 0; padding: 0; position: relative; } .cronologia::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; background: var(--vox-rojo); } .medida { position: relative; padding: 0 0 22px 34px; } /* Marca cuadrada, no un círculo: el sistema es rectangular */ .med-punto { position: absolute; left: 0; top: 20px; width: 15px; height: 15px; background: var(--vox-rojo); border: 3px solid var(--fondo); } .medida article { background: var(--papel); border-radius: var(--r-chico); padding: 18px; box-shadow: var(--sombra); } .med-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; } .med-meta time { font-family: var(--titular); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-2); } /* Pestaña de ámbito: bloque macizo, sin redondear */ .med-ambito { font-family: var(--titular); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1; padding: 4px 8px; border-radius: var(--r-chico); background: var(--tinta); color: #fff; } .medida h2 { font-family: var(--titular); font-size: 22px; font-weight: 700; line-height: 1.08; text-transform: uppercase; letter-spacing: .005em; } .med-resumen { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta); } /* Lo que AFIRMA el partido va en amarillo y etiquetado: en las creatividades el amarillo es siempre el «ojo a esto», y aquí sirve para separar el hecho de la afirmación. */ .med-afirma { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--r-chico); background: #fff8d6; font-size: 13.5px; color: #5c4a05; } .etq { display: block; font-family: var(--titular); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; color: #7a6208; } .med-estado { margin: 13px 0 0; font-size: 13.5px; color: var(--tinta-2); } .etq-estado { display: inline-block; font-family: var(--titular); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vox-rojo); margin-right: 6px; } .recorte { margin: 15px 0 0; } .recorte img { width: 100%; height: auto; display: block; border-radius: var(--r-chico); } .recorte figcaption { margin-top: 6px; font-size: 12px; color: var(--tinta-3); } .med-fuentes { list-style: none; margin: 15px 0 0; padding: 14px 0 0; border-top: 2px solid var(--linea-2); display: grid; gap: 8px; } .med-fuentes a { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--tinta-2); font-size: 13.5px; line-height: 1.4; } .med-fuentes a:hover .fu-titulo { color: var(--vox-rojo); text-decoration: underline; } .fu-medio { flex: none; font-family: var(--titular); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: var(--r-chico); background: var(--tinta); color: #fff; } /* La fuente oficial se distingue en verde: es la que sostiene el dato */ .fu-medio.oficial { background: var(--vox-verde); color: #fff; } .fu-titulo { flex: 1; } /* ------------------------------------------------------------------- avisos */ .med-aviso { margin-top: 34px; padding: 20px; border-radius: var(--r-chico); background: var(--papel); border-top: 4px solid var(--tinta); box-shadow: var(--sombra); } .med-aviso h2 { font-family: var(--display); font-size: 22px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: -.005em; } .med-aviso p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); } .med-aviso p:last-child { margin-bottom: 0; } .med-actualizado { margin: 20px 0 0; font-family: var(--titular); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); text-align: center; } /* Barra verde de cierre con la marca en blanco: el remate de todas las piezas del partido */ .med-pie { padding: 26px 16px; text-align: center; background: var(--vox-verde); border-top: 0; margin-top: 34px; } .med-pie a { display: inline-block; text-decoration: none; border-radius: var(--r-chico); } .med-pie a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .pie-logo { display: block; height: 34px; width: auto; opacity: .95; transition: opacity .16s; } .med-pie a:hover .pie-logo { opacity: 1; } /* ------------------------------------------------- metodología y datos */ /* La página de metodología reutiliza la cabecera, la portada y el pie de las medidas, y añade lo suyo: bloques de texto largo y dos tablas anchas. */ /* Sin filete de color arriba: lo pidió el usuario. Las fichas se separan por su propia caja y por el aire entre ellas, que a esta escala basta. */ .met-bloque { margin-top: 34px; padding: 22px; background: var(--papel); border-radius: var(--r-chico); box-shadow: var(--sombra); } .met-bloque h2 { font-family: var(--display); font-size: clamp(22px, 3.6vw, 30px); text-transform: uppercase; letter-spacing: -.005em; margin-bottom: 14px; } .met-bloque p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--tinta); } .met-bloque p:last-child { margin-bottom: 0; } /* El apunte secundario, en gris: no es la explicación principal. Sin filete lateral (cajas sin bordes: norma del usuario, 11-oct-2026). */ .met-aparte { margin-top: 16px !important; padding: 11px 13px; background: var(--fondo-2); border-radius: var(--r-chico); font-size: 13.5px !important; color: var(--tinta-2) !important; } /* Las notas de lectura van marcadas en verde: son la garantía, no un aviso legal */ .met-notas { border-top-color: var(--vox-verde); } .met-notas .notas-cuerpo section:last-child { border-bottom: 0; } .met-notas h3 { font-family: var(--titular); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 4px; } .met-notas p { font-size: 13.5px; color: var(--tinta-2); margin: 0; } .met-factores { margin: 0 0 16px; padding: 0 0 0 22px; } .met-factores li { margin-bottom: 12px; } .met-factores h3 { font-family: var(--titular); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 2px; } .met-factores p { font-size: 13.5px; color: var(--tinta-2); margin: 0; } /* Las tablas son anchas: se desplazan dentro de su caja y NO ensanchan la página */ /* ------------------------------------------------- apartado de cada mapa (metodología) Cada mapa abre con su imagen solo con color: se ve de qué va antes de leer nada. La imagen la genera pipeline/mapas_metodologia.py con los colores de datos.json, los mismos que pinta el mapa interactivo. */ .met-mapa { scroll-margin-top: calc(var(--cab) + 12px); } /* El mapa llenaba la caja de borde a borde y se comía el apartado entero. Se le baja el tamaño y se le da aire: es una miniatura para situar el mapa, no la ilustración principal —esa es el mapa interactivo—. */ .met-mapa-img { display: block; width: 100%; height: auto; max-width: 430px; margin: 4px auto 18px; } .met-ingrediente { font-family: var(--titular); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vox-rojo); margin: 0 0 14px; } .met-mapa h3 { font-family: var(--titular); font-size: 17px; text-transform: uppercase; letter-spacing: .01em; margin: 22px 0 8px; } /* TEXTO JUSTIFICADO en las páginas de lectura, a petición del usuario. Va con guionado activado: sin él, el justificado en español abre calles blancas enormes en las líneas con palabras largas, que es peor que no justificar. Se deja SIN justificar lo que no es prosa —tablas, listas de datos y pies—, donde el justificado solo separa cifras. */ .med-main p, .med-main li, .met-aparte, .med-entrada { text-align: justify; hyphens: auto; } /* Lo que NO es prosa vuelve a su alineación: en una tabla o en una lista de tramos, el justificado solo abre huecos entre cifras. Los selectores van con el contenedor delante para ganar en especificidad a las reglas de arriba, que ya llevan `.med-main`. */ .med-main td, .med-main th, .med-main .met-tramos li, .med-main .cifras li, .med-main .prov-seo-otras li, .med-main .med-actualizado { text-align: initial; hyphens: manual; } /* El mosaico entero se queda fuera del justificado. Un titular de tres palabras justificado a 285 px de ancho abre calles enormes entre ellas, y el guionado parte los apellidos. */ .med-main .mosaico li, .med-main .mosaico p, .med-main .mosaico h2, .med-main .mosaico-seo li { text-align: initial; hyphens: manual; } /* Las cifras, a la derecha: así se comparan de un vistazo entre filas. La primera columna es el nombre de la provincia y se queda a la izquierda (va como `th`). */ .med-main .met-anexo tbody td { text-align: right; } /* Los cuatro tramos de color, con su rango. Los umbrales salen de datos.json: no se escriben aquí ni en el JS, que es lo que impide que la leyenda mienta sobre el color. */ .met-tramos { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; } .met-tramos li { display: flex; align-items: center; gap: 10px; font-size: 14px; } .met-muestra { width: 16px; height: 16px; flex: none; border: 1px solid rgba(0, 0, 0, .25); border-radius: 2px; } .met-tramos strong { font-family: var(--titular); font-weight: 700; min-width: 108px; } .met-rango { color: var(--tinta-2); } /* La tabla del anexo: 52 filas, así que va compacta y con la cabecera pegada arriba. La cabecera va CENTRADA y las columnas se distinguen entre sí con dos tonos de gris alternos: con 5 o 6 columnas de cifras, seguir una fila hasta el final sin perderse era difícil. El rayado por columnas funciona mejor que el de filas para eso, porque lo que se compara aquí es una columna entera. */ .met-anexo { font-size: 13.5px; } /* LA CABECERA DE LA TABLA NO SE QUEDA PEGADA. Lo estuvo —`position: sticky`— y se quitó el 5-ago-2026 por decisión del usuario: con la cabecera del sitio ya pegada arriba, una segunda franja que también se queda es demasiada cosa fija en una pantalla de teléfono. La fila de títulos sube y desaparece con el resto de la tabla, como cualquier otra fila. Los títulos van CENTRADOS, y las columnas se distinguen entre sí por el rayado alterno. */ .met-anexo thead th { text-align: center !important; vertical-align: middle; } /* Cada columna lleva su título largo y su abreviatura; el CSS enseña uno u otro según el ancho. En escritorio, el largo. */ .met-th-corto { display: none; } .met-th-largo { display: inline; } /* El tramado alterno va SOLO en el cuerpo. La cabecera lleva su propio fondo oscuro y pintarle encima un color semitransparente lo borraba: los títulos de las columnas pares se quedaban en blanco sobre blanco y no se leían. */ .met-anexo tbody td:nth-child(even) { background: rgba(0, 0, 0, .05); } .met-anexo th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 500; } .met-anexo th[scope="row"] a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea); } .met-anexo th[scope="row"] a:hover { color: var(--vox-rojo); border-bottom-color: var(--vox-rojo); } .met-punto { display: inline-block; width: 10px; height: 10px; margin-left: 7px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .28); border-radius: 2px; } /* LA FLECHA QUE ABRE EL DESGLOSE, a la derecha del punto de color. Pequeña y sin fondo: es una señal, no un botón que compita con el nombre de la provincia, que es lo que se lee primero. Gira 180° al abrirse, y lo hace leyendo el `aria-expanded` del propio botón: el estado no se guarda en ningún sitio más, así que no puede descuadrarse con lo que se ve. `[hidden]` en una fila de tabla necesita ayuda: el `display: table-row` que el navegador le da a un `` gana al `display: none` de su propia hoja. */ /* LOS DESPLEGABLES DE MUNICIPIOS (mapas de municipios, 12-oct-2026): una fila por provincia que se abre para enseñar sus municipios. Sin bordes ni filetes (norma del usuario): la fila se marca con un fondo suave y una flecha dibujada que gira al abrirse. */ .met-plegables { display: grid; gap: 4px; margin: 6px 0 18px; } .met-plegable summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-chico, 4px); background: rgba(0, 0, 0, .045); font-family: var(--titular); font-size: 15.5px; font-weight: 700; color: var(--tinta); } .met-plegable summary::-webkit-details-marker { display: none; } .met-plegable summary::after { content: ''; margin-left: auto; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%234c4c4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; } .met-plegable summary:hover { background: rgba(0, 0, 0, .08); } .met-plegable[open] summary { background: var(--tinta); color: #fff; } .met-plegable[open] summary::after { transform: rotate(180deg); filter: invert(1); } .met-plegable summary:focus-visible { outline: 2px solid var(--vox-rojo); outline-offset: 1px; } .met-plegable-cuerpo { padding: 6px 0 14px; } .met-cargando { color: var(--tinta-3); font-size: 14px; margin: 8px 2px; } .met-detalle[hidden] { display: none; } .met-abre { position: relative; display: inline-grid; place-items: center; vertical-align: middle; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 0; background: transparent; color: var(--tinta-3); cursor: pointer; transition: color .14s, transform .18s ease; } /* El dibujo mide 20 px, pero se pulsa en 40: la zona sensible se estira con un pseudoelemento colocado por encima, que no ocupa sitio en la maquetación. Sin esto, en un teléfono habría que apuntar a una flecha de 20 px justo al lado del enlace de la provincia, y se abriría la ficha sin querer la mitad de las veces. */ .met-abre::after { content: ''; position: absolute; inset: -10px; } .met-abre svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .met-abre:hover { color: var(--vox-rojo); } .met-abre:focus-visible { outline: 2px solid var(--vox-rojo); outline-offset: 1px; } .met-abre[aria-expanded="true"] { transform: rotate(180deg); color: var(--vox-rojo); } /* El mapa 5 lleva DEBAJO de cada provincia el desglose de sus elecciones: el número del mapa es la suma de todas ellas, así que sin el detalle no se puede comprobar de dónde sale. Va en una fila propia, con el rayado apagado para que se lea como una nota de la fila de arriba y no como otra provincia. */ /* Las filas de desglose van con fondo propio, claramente distinto del de los datos de la fila de arriba: son otra cosa —el detalle de cada elección— y confundirlas con una provincia más era fácil. */ .met-detalle td { padding: 8px 6px 12px !important; background: var(--papel); border-bottom: 2px solid var(--linea); } /* CADA ELECCIÓN, SU BANDA, Y LA JERARQUÍA POR TONO. Antes iban separadas por un filete fino a la izquierda y tres píxeles de aire, y con tres o cuatro escrutinios seguidos —cada uno con su nombre, su fracción, su porcentaje y su enlace— costaba ver dónde acababa uno y empezaba el siguiente. Ahora se alternan dos tonos que se tocan, sin hueco: el mismo recurso de las bandas de la cronología y con los MISMOS colores del sistema, no unos nuevos. Y el tono dice de qué es cada fila: la provincia va en el más oscuro y su desglose en los dos más suaves, así que se ve de un vistazo qué manda y qué cuelga de qué. Sin filete a la izquierda: con las bandas, el filete solo añadía ruido y partía el bloque en dos lecturas. */ .met-elecciones-prov { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .met-elecciones-prov li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; color: var(--tinta-2); padding: 7px 9px; border-left: 0; background: var(--fondo-2); } .met-elecciones-prov li:nth-child(even) { background: var(--papel); } .met-el-nombre { flex: 1; min-width: 180px; } .met-el-dato { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Cada elección con SU enlace a la fuente, aunque se repita entre provincias: quien mira una provincia tiene ahí el acceso a los tres o cuatro escrutinios que la afectan. */ .met-el-fuente { white-space: nowrap; font-size: 12px; } .met-el-fuente a { color: var(--tinta-3); } .met-el-fuente a:hover { color: var(--vox-rojo); } .met-detalle abbr { color: var(--vox-rojo); text-decoration: none; font-weight: 700; cursor: help; } /* La lista de las 20 elecciones del apartado de fuentes */ .met-fuentes-elecciones li { margin-bottom: 9px; line-height: 1.45; } .met-enlaces { margin-left: 4px; } .met-el-total { display: block; font-size: 12.5px; color: var(--tinta-3); } .met-anexo tbody tr:nth-child(even) { background: var(--fondo-2); } /* El rayado cuenta filas, y con el desglose intercalado el par/impar se descoloca: se apaga en el mapa 5 y se distingue por el filete del desglose. */ /* Y en esa tabla la fila de la PROVINCIA lleva el tono más oscuro de los tres que se usan aquí —`--fondo` contra el `--fondo-2` y el `--papel` de su desglose—, que es lo que la marca como la que manda. El rayado par/impar de las demás tablas no vale aquí: con el desglose intercalado, la cuenta de filas se descoloca y pinta a medias. */ .met-anexo:has(.met-detalle) tbody tr:nth-child(even) { background: none; } .met-anexo:has(.met-detalle) tbody tr:not(.met-detalle) { background: var(--fondo); } .met-fuente-mapa { margin: 14px 0 0; font-size: 13px; color: var(--tinta-2); } .met-fuente-mapa a { margin-left: 6px; } /* Los mapas 3 y 4 enlazan la página del INE Y cada fichero por separado, así que los enlaces bajan a su propia línea y se separan con « · » en vez de con margen. */ .met-fuente-mapa .met-enlaces a { margin-left: 0; } /* SIN `overflow` AQUÍ, y esto no es un descuido. Tenía `overflow-x: auto` como red por si la tabla no cabía, y esa red rompía la cabecera pegajosa: en cuanto una caja recorta en un eje, el navegador la convierte en contenedor de scroll —el otro eje pasa de `visible` a `auto` solo— y la cabecera de la tabla se pegaba a ESA caja, que no se desplaza en vertical. O sea que se iba con la página y nunca se quedaba arriba. No se veía porque los títulos cabían en una línea; al estrechar la tabla para el móvil quedó a la vista. La red ya no hace falta: la tabla cabe a cualquier ancho —620 px por encima del punto de ruptura, donde el contenedor mide 628 o más, y sin mínimo por debajo—. */ .met-tabla-envoltorio { margin-top: 6px; } .met-tabla { width: 100%; min-width: 620px; border-collapse: collapse; font-family: var(--titular); font-size: 14px; } .met-tabla caption { text-align: left; font-family: var(--texto); font-size: 13px; color: var(--tinta-3); padding-bottom: 8px; } .met-tabla thead th { background: var(--tinta); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 7px 8px; vertical-align: bottom; } .met-tabla th, .met-tabla td { padding: 9px 8px; border-bottom: 1px solid var(--linea-2); vertical-align: top; text-align: left; } .met-tabla tbody th { font-weight: 700; } .met-tabla td { font-weight: 500; color: var(--tinta-2); } .met-tabla td.num-fuerte { font-weight: 700; color: var(--tinta); } .met-tabla tfoot th, .met-tabla tfoot td { border-bottom: 0; border-top: 3px solid var(--tinta); font-weight: 700; color: var(--tinta); } .met-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; background: var(--vox-rojo); color: #fff; font-family: var(--display); font-size: 13px; line-height: 1; vertical-align: -3px; } .met-fuente-celda { font-size: 12.5px; line-height: 1.35; min-width: 210px; } /* ---------------------------------------------- las tablas ENTERAS en el teléfono */ /* Estas tablas se salían de la pantalla en un móvil y había que arrastrarlas de lado para leer las últimas columnas. Un dato que hay que arrastrar para ver es un dato que no se ve. VA AQUÍ, AL FINAL, Y NO JUNTO A `.met-tabla`: las reglas base de la tabla vienen después de ese punto y, con la misma especificidad, gana la última. Puesto arriba, el `font-size: 12px` de la cabecera pisaba al de este bloque y los títulos seguían partiéndose. NO se convierte cada fila en una tarjeta, que es el otro remedio típico: son 52 provincias por cuatro tablas, y apiladas serían 208 bloques en los que ya no se puede recorrer una columna de un vistazo, que es justo para lo que están estas tablas. El punto de ruptura son 660 px y no un número redondo: es donde el contenedor de lectura deja de tener los 620 px que pide la tabla. */ @media (max-width: 660px) { /* REPARTO FIJO. Con el reparto automático el ancho de cada columna lo marca su contenido más ancho —y ahí mandaba el TÍTULO: «CANDIDATURA» pedía 81 px él solo—, así que la tabla se plantaba en 373 px y sacaba la página 21 fuera de la pantalla. Con `fixed` los anchos los decide la tabla y el contenido se acomoda: no puede desbordar, por largo que sea un dato. La primera columna se lleva algo más porque es la que identifica la fila; las demás se reparten lo que queda a partes iguales. */ .met-tabla { min-width: 0; font-size: 11px; table-layout: fixed; } .met-tabla thead th:first-child { width: 27%; } /* AQUÍ MANDAN LOS TÍTULOS CORTOS. Se probó antes a partir los largos por sílabas con guion («CANDI-DATURA»), y no vale: en 46 px salían tres trozos por título y la fila de encabezados se comía media pantalla sin que se leyera bien ninguno. Una abreviatura de cinco letras en una sola línea se lee mejor que una palabra entera despedazada. */ .met-th-largo { display: none; } .met-th-corto { display: inline; } .met-tabla thead th { font-size: 10px; padding: 7px 3px; letter-spacing: .01em; word-break: normal; overflow-wrap: break-word; } .met-tabla th, .met-tabla td { padding: 7px 3px; } .met-anexo { font-size: 11px; } /* El nombre de la provincia deja de ir en una sola línea: «Santa Cruz de Tenerife» se llevaba él solo un tercio del ancho de la pantalla. */ .met-anexo th[scope="row"] { white-space: normal; } /* Y EN LAS CELDAS sí se puede cortar por donde sea. En los títulos no —ahí se lee de un vistazo qué es cada columna—, pero en el cuerpo hay cosas como «PSE-EE (PSOE)» o «JxCAT - JUNTS» que, sin poder partirse, marcaban un ancho mínimo de columna que dejaba la tabla en 378 px y sacaba la página 27 px fuera de la pantalla. */ .met-tabla td, .met-anexo th[scope="row"] { overflow-wrap: anywhere; } .met-fuente-celda { min-width: 0; } .met-n { width: 17px; height: 17px; font-size: 11px; margin-right: 4px; } /* El punto de color y la flecha, más apretados: en 85 px de columna, «Barcelona» con los dos a tamaño de escritorio no cabía y la flecha se caía a un segundo renglón. La zona sensible no se toca —la pone el pseudoelemento, que no ocupa sitio—, así que sigue pulsándose bien con el dedo aunque el dibujo sea más pequeño. */ .met-punto { margin-left: 4px; } .met-abre { width: 16px; height: 16px; margin-left: 2px; } .met-abre svg { width: 11px; height: 11px; } } .met-enlaces { display: block; margin-top: 3px; } .met-enlaces a { color: var(--vox-rojo); font-weight: 700; } .met-fuentes-lista { margin: 0; padding: 0 0 0 20px; } .met-fuentes-lista li { margin-bottom: 11px; font-family: var(--texto); font-size: 14px; line-height: 1.5; color: var(--tinta-2); } .met-fuentes-lista strong { color: var(--tinta); } .met-pie-fuentes { font-size: 12.5px !important; color: var(--tinta-3) !important; } /* ========================================================================== MOSAICO DE RECORTES DE PRENSA (página «Cómo lo paramos») ========================================================================== Cada noticia es un recorte de periódico pegado sobre la página. Los cuatro recursos que lo dicen sin dibujar unas tijeras: 1. TIPOGRAFÍA. Titular en condensada ultranegra, caja alta, interlineado apretado y filete fino encima. Es lo que hace que algo se lea como un titular de prensa; el resto son adornos. 2. PAPEL. Fondo blanco con el mismo grano del sitio y esquinas duras. 3. GIRO. Un giro mínimo y alterno, como una pegatina pegada a mano. No es un capricho: «pegatinas blancas giradas» es uno de los seis recursos de las creatividades del partido, así que el recorte y la marca piden lo mismo. 4. LÍNEA DE CORTE. El discontinuo que separa el recorte de los enlaces a otros medios es el «recórtese por la línea de puntos» de toda la vida. El giro va en un envoltorio (`.rec`) y NO en la tarjeta: al pasar el ratón la tarjeta se endereza y sube, y si el giro y la elevación vivieran en el mismo elemento habría que recomponer la transformación entera en cada estado. */ /* La página del mosaico necesita más ancho que las de lectura: con 780 px no caben tres columnas legibles. Es una clase aparte para no ensanchar metodología ni las páginas legales, que comparten esta hoja. */ .med-main.med-ancho { max-width: 1240px; } /* Y su entradilla va a TODO el ancho, no a la medida de lectura de 62 caracteres que usan metodología y las páginas legales: aquí es el texto de cabecera de la página, no un párrafo de un artículo largo. */ .med-ancho .med-entrada { max-width: none; } /* La entradilla salió de `.med-portada` para poder ir en su propia banda (ver la plantilla), así que los huecos que antes ponían la portada y el propio párrafo los pone ahora su envoltorio. Las cuentas son las mismas de siempre: 22 px por encima y 34 por debajo. */ .med-ancho .med-portada { margin-bottom: 0; } .med-ancho .med-banda { margin: 22px 0 34px; } .med-ancho .med-banda .med-entrada { margin: 0; } /* La entradilla puede ir en varios párrafos: el segundo y siguientes necesitan su hueco, que el `margin: 0` de arriba les había quitado. */ .med-ancho .med-banda .med-entrada + .med-entrada { margin-top: 14px; } /* --------------------------------- «Qué es la Ley de Nietos»: las bandas a todo el ancho */ /* La página se lee como una SUCESIÓN DE BANDAS que llegan a los dos bordes y alternan dos tonos, igual que los hitos de la cronología de «Cómo lo paramos». Rediseño del 6-ago-2026, pedido por el usuario: fuera la caja blanca que envolvía cada sección. Un elemento no puede llevar el fondo hasta los bordes y a la vez respetar el ancho de lectura, así que el main SUELTA su contenedor de 1240 px y cada banda se lo devuelve por dentro, en `.expl-caja`. Todas las columnas de la página —la entradilla de la banda blanca, el texto de cada sección y el mosaico— usan LA MISMA anchura, así que arrancan y terminan en la misma vertical, que es lo que se pidió. El hueco lateral se da con `width` y no con `padding`: así no se toca el relleno interior de nadie. Y NO se usa `100vw` en ninguna parte: incluye la barra de scroll y deja la página desplazándose de lado. */ .pagina-explica .med-main.med-ancho { max-width: none; padding-inline: 0; padding-bottom: 0; /* la última banda llega hasta el pie; el aire de abajo lo pone ella */ } .pagina-explica .med-portada, .pagina-explica .mosaico-seo, .pagina-explica .expl-caja, .pagina-explica .med-banda .med-entrada { width: min(1240px, 100% - 32px); margin-inline: auto; } .pagina-explica .med-ancho .med-banda { background: var(--papel); margin: 34px 0 0; /* pegada a la primera banda de color: la serie empieza en ella */ padding-block: 24px; /* Los mismos filetes que separan las bandas de la cronología: la entradilla se lee como una pieza del mismo sistema y no como un parche. */ box-shadow: inset 0 1px 0 var(--linea), inset 0 -1px 0 var(--linea); } .pagina-explica .expl { padding: 44px 0; } .pagina-explica .expl--a { background: var(--fondo); } .pagina-explica .expl--b { background: var(--fondo-2); } /* Un filete fino entre bandas: los dos tonos se parecen a propósito —el salto de color no debe gritar— y esta línea es la que deja claro dónde empieza otra sección. Mismo recurso que en la cronología. */ .pagina-explica .expl + .expl { box-shadow: inset 0 1px 0 var(--linea); } .pagina-explica .expl--prensa { padding-bottom: 70px; } /* Los títulos y la prosa conservan el aspecto que tenían dentro de la caja blanca: lo que se ha quitado es la caja, no la tipografía. HIJOS DIRECTOS, y esto NO es un detalle de estilo. Dentro de esta misma banda va el mosaico, y el titular de cada recorte TAMBIÉN es un `

`: con `.expl h2` a secas, los 115 titulares de las tarjetas se pintaban con la tipografía de display a 30 px en vez de la condensada a 20 px que usan en «Cómo lo paramos», y la entradilla de cada tarjeta se llevaba por delante su tamaño por especificidad. El usuario lo vio el 6-ago-2026. */ .pagina-explica .expl-caja > h2 { font-family: var(--display); font-size: clamp(22px, 3.6vw, 30px); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 14px; } .pagina-explica .expl-caja > p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--tinta); } .pagina-explica .expl-caja > p:last-child { margin-bottom: 0; } /* LOS PASOS DEL PLAN. Es una lista numerada de verdad —lo que se cuenta es la secuencia—, pero el número lo pinta un contador CSS en vez de la viñeta del navegador: así puede ir en la tipografía de display y en rojo, como los números grandes de las creatividades del partido, sin que se descuadre con el texto. */ .pagina-explica .expl-pasos { list-style: none; counter-reset: paso; margin: 16px 0 0; padding: 0; } /* El sangrado es el ancho del número más un hueco corto: con más aire, el número se despegaba de su frase y los cuatro pasos se leían como cuatro columnas sueltas. */ .pagina-explica .expl-pasos li { counter-increment: paso; position: relative; padding-left: 31px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.55; color: var(--tinta); } .pagina-explica .expl-pasos li:last-child { margin-bottom: 0; } /* El párrafo que sigue a la lista necesita más aire que el hueco entre pasos: sin él se lee como si fuera la continuación del último punto y no un remate aparte. */ .pagina-explica .expl-pasos + p { margin-top: 20px; } .pagina-explica .expl-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; font-family: var(--display); font-size: 27px; line-height: 1; color: var(--vox-rojo); } /* ------------------------------------------------------------------- las cifras destacadas */ /* Tres o cuatro datos de la sección, sacados del propio texto y contados de cero a su valor por js/contadores.js. Sirven para partir un bloque largo: el ojo se agarra a ellas y el párrafo siguiente ya no arranca en frío. SIN CAJA, con un filete rojo arriba. Es el mismo recurso que el filete de las listas en las creatividades del partido, y meterlas en tarjetas blancas devolvería a la página justo lo que se acaba de quitar. */ /* En FLEX y no en rejilla de cuatro columnas: hay secciones con cuatro cifras y otras con tres, y una rejilla fija dejaría un hueco vacío en las de tres. Así se reparten el ancho entre las que haya, y el `flex-basis` de 140 px es lo que mantiene dos por fila en móvil. */ .cifras { list-style: none; margin: 26px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 24px; } /* Cada cifra en su propio recuadro flotante, SIN bordes: lo que la separa de la banda es el tono —un peldaño más claro— y la sombra, no una línea. */ .cifras li { flex: 1 1 140px; padding: 15px 16px 14px; background: var(--realce); border-radius: var(--r-chico); box-shadow: var(--sombra); } .cifra-n { display: block; color: var(--vox-rojo); font-family: var(--display); font-size: clamp(29px, 5vw, 42px); line-height: 1.05; /* Dígitos de ancho fijo: sin esto el número cambia de anchura al contar y da un tirón en cada fotograma. */ font-variant-numeric: tabular-nums; /* NACE INVISIBLE. El número está escrito en el HTML desde el servidor —tiene que estar, para los buscadores y para quien llegue sin JavaScript—, pero enseñarlo antes de tiempo deja ver el valor final durante un instante al cargar la página, que es justo lo que la cuenta pretende evitar. Lo revela js/contadores.js en el momento de arrancar la cuenta, con el fundido de abajo. Sin JavaScript lo revela css/sin-js.css, que va en el `