/* articulo.css — Maquetación de las páginas de lectura (guías y reportajes). Se activa con y consume los tokens de tokens.css. Tres reglas del sistema «Organic» que aquí hacen el trabajo de fondo: · Retícula de 28 px: todo margen es múltiplo de --ritmo o --medio-ritmo. · Medida acotada: el texto no pasa de --medida (62 caracteres). · Sin divisores: las secciones se separan con aire, no con recuadros. Donde antes había una caja con borde, ahora hay un fondo teñido o simplemente espacio. */ body.articulo { background: var(--fondo); color: var(--tinta); font-family: var(--fuente-texto); margin: 0; text-wrap: pretty; /* evita palabras huérfanas al final de párrafo */ padding-top: var(--barra-sup, 3.5rem); /* la barra de navegacion.js es fija */ } /* ---------- Anchos ---------- */ .art-ancho { max-width: 760px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); } /* ---------- Portada del artículo ---------- El cabecero era un degradado oscuro centrado. «Organic» compone a la izquierda y sobre el propio fondo: sin caja oscura, el titular arranca la página y la entradilla queda en la misma medida que el texto que sigue. */ .art-portada { padding-top: calc(3 * var(--ritmo)); padding-bottom: calc(2 * var(--ritmo)); } .art-antetitulo { font-size: 13px; line-height: var(--medio-ritmo); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--enlace); margin: 0 0 var(--medio-ritmo); } .art-titulo { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.08; /* los titulares grandes van más cerrados que la retícula: es la excepción del bloque display */ letter-spacing: 0; margin: 0 0 var(--ritmo); margin-left: -.028em; /* alineación óptica: compensa el hueco lateral de la mayúscula inicial */ text-box: trim-both cap alphabetic; text-wrap: balance; } .art-entradilla { font-size: 19px; line-height: calc(1.25 * var(--ritmo)); color: var(--tinta-suave); max-width: var(--medida); margin: 0 0 var(--ritmo); } .art-acciones { display: flex; flex-wrap: wrap; gap: var(--medio-ritmo); align-items: center; margin: 0; } /* ---------- Cuerpo ---------- */ .art-cuerpo { padding-bottom: calc(3 * var(--ritmo)); } .art-seccion { margin-bottom: calc(2.5 * var(--ritmo)); } .art-h2 { display: flex; align-items: center; gap: var(--medio-ritmo); font-family: var(--fuente-texto); /* Caprasimo se reserva al h1: a 24 px, y en una guía de servicio público, pesa demasiado */ font-weight: 700; font-size: 24px; line-height: var(--ritmo); letter-spacing: -.01em; margin: 0 0 var(--ritmo); text-box: trim-both cap alphabetic; } .art-icono { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--acento-tinte); color: var(--acento-hondo); } .art-icono svg { width: 18px; height: 18px; } .art-icono-aviso { background: var(--enlace-tinte); color: var(--enlace); } /* El :where() del ancestro deja estas reglas en especificidad 0,0,1: lo justo para ganar al preflight de Tailwind (p { margin: 0 }, que va antes en el orden de carga) y perder ante cualquier clase de componente. Con :where(p) la regla caia a 0,0,0 y los parrafos se quedaban sin margen. */ :where(body.articulo) p { font-size: 17px; line-height: var(--ritmo); max-width: var(--medida); margin: 0 0 var(--ritmo); } :where(body.articulo) p:last-child { margin-bottom: 0; } :where(body.articulo) strong { font-weight: 700; } :where(body.articulo) a { color: var(--enlace); text-underline-offset: 3px; } .art-enlace-fuerte { font-weight: 600; text-decoration: none; } .art-enlace-fuerte:hover { text-decoration: underline; } /* ---------- Bloques teñidos (sustituyen a las cajas con borde) ---------- */ .art-patio { background: var(--acento-tinte); border-radius: var(--radio-grande); padding: calc(1.25 * var(--ritmo)) clamp(20px, 4vw, 36px); margin-bottom: var(--ritmo); } .art-patio-calido { background: var(--enlace-tinte); } /* El dato destacado: cifra grande a la izquierda, explicación a la derecha */ .art-dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--medio-ritmo) var(--ritmo); } .art-dato-cifra { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(38px, 4.4vw, 52px); line-height: calc(1.5 * var(--ritmo)); color: var(--acento-hondo); margin: 0; flex: none; } .art-dato p:not(.art-dato-cifra) { margin: 0; flex: 1 1 26ch; max-width: 44ch; } /* Pareja de conceptos enfrentados (IGP / situación operativa) */ .art-pareja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--medio-ritmo); } .art-pareja .art-patio { margin-bottom: 0; } .art-rotulo { font-weight: 700; font-size: 17px; line-height: var(--ritmo); margin: 0 0 var(--medio-ritmo) !important; } /* ---------- Acordeones del glosario ---------- Sin borde: el fondo teñido ya los separa del papel. */ .art-glosario { display: grid; gap: var(--medio-ritmo); } /* dentro de la rejilla manda el gap, no el margen de cada bloque */ .art-glosario > .art-patio { margin-bottom: 0; } details.acordeon { background: var(--superficie); border: 0; border-radius: var(--radio-grande); overflow: hidden; } details.acordeon > summary { list-style: none; cursor: pointer; padding: var(--medio-ritmo) clamp(18px, 3vw, 26px); font-weight: 700; font-size: 16px; line-height: var(--ritmo); color: var(--tinta); display: flex; justify-content: space-between; align-items: center; gap: 10px; } details.acordeon > summary::-webkit-details-marker { display: none; } details.acordeon > summary .flecha { transition: transform .25s; color: var(--tinta-tenue); flex-shrink: 0; } details.acordeon[open] > summary .flecha { transform: rotate(180deg); } details.acordeon > .cuerpo { padding: 0 clamp(18px, 3vw, 26px) var(--ritmo); } details.acordeon > .cuerpo p { font-size: 16px; color: var(--tinta-suave); } details.acordeon > .cuerpo p:last-child { margin-bottom: 0; } /* ---------- Botones ---------- */ .art-boton { display: inline-flex; align-items: center; gap: 8px; background: var(--acento-hondo); /* blanco sobre #56633f: 6,5:1. Sobre la salvia base solo daba 3,73:1 y AA pide 4,5 */ color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; padding: 10px 22px; border-radius: 999px; } .art-boton:hover { background: #3d472b; } .art-boton-secundario { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--tinta-suave); border: 1px solid var(--borde); padding: 6px 16px; border-radius: 999px; } .art-boton-secundario:hover { border-color: var(--tinta-tenue); } /* Llamada final: bloque teñido, no degradado oscuro */ .art-cierre { text-align: left; } .art-cierre .art-rotulo { font-size: 22px; } .art-cierre p { color: var(--tinta-suave); } /* ---------- Barra de navegación inyectada por navegacion.js ---------- Sigue trayendo clases de Tailwind con el color dentro del nombre; hasta que se tokenice, se reconcilia aquí. */ body.articulo #nav-container header { background: color-mix(in srgb, var(--fondo) 92%, #fff) !important; border-color: var(--borde) !important; } body.articulo #nav-container .text-green-700 { color: var(--acento-hondo) !important; } body.articulo #footer-container .bg-slate-950 { background: #2e2b25 !important; } /* el neutro hondo del sistema, en vez del azul marino de Tailwind */ @media (max-width: 600px) { .art-portada { padding-top: calc(2 * var(--ritmo)); } } /* ══════════════════════════════════════════════════════════════════════════ Piezas de reportaje — las usa por-que-arden-mas-los-montes.html ══════════════════════════════════════════════════════════════════════════ */ /* ---------- Figuras (graficos y esquemas) ---------- Sin borde ni caja blanca: el esquema se apoya en la superficie clara y el pie de figura queda debajo, en tinta suave. */ .art-figura { background: var(--superficie); border-radius: var(--radio-grande); padding: var(--ritmo) clamp(18px, 3vw, 28px); margin: 0 0 var(--ritmo); } .art-figura > svg, .art-figura > div { width: 100%; height: auto; display: block; } .art-pie { font-size: 14px; line-height: var(--ritmo); color: var(--tinta-suave); margin: var(--medio-ritmo) 0 0 !important; max-width: none !important; } .art-pie a { text-decoration: underline; } /* Figura sin fondo, para la fotografia a sangre */ .art-figura-desnuda { margin: 0 0 var(--ritmo); } /* ---------- Rejilla de cifras ---------- */ .art-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--medio-ritmo); margin-bottom: var(--ritmo); } .art-cifra { background: var(--acento-tinte); border-radius: var(--radio-grande); padding: var(--ritmo) clamp(16px, 2.5vw, 24px); } .art-cifra-calida { background: var(--enlace-tinte); } .art-cifra-neutra { background: var(--superficie); } .art-cifra > p:first-child { font-family: var(--fuente-titulo); font-weight: 400; font-size: 32px; line-height: var(--ritmo); color: var(--acento-hondo); margin: 0 0 var(--medio-ritmo) !important; } .art-cifra-calida > p:first-child { color: var(--enlace); } .art-cifra-neutra > p:first-child { color: var(--tinta); } .art-cifra > p + p { font-size: 15px; line-height: calc(var(--ritmo) - 4px); color: var(--tinta-suave); margin: 0 !important; max-width: none !important; } .art-fuente { color: var(--tinta-tenue); } /* ---------- Indice de las cuatro causas ---------- */ .art-indice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--medio-ritmo); margin-bottom: var(--medio-ritmo); } .art-indice a { display: flex; gap: var(--medio-ritmo); align-items: flex-start; background: var(--fondo); border-radius: var(--radio); padding: var(--medio-ritmo) clamp(14px, 2vw, 18px); text-decoration: none; color: var(--tinta); } .art-indice a:hover { background: var(--superficie-honda); } .art-indice .emoji { font-size: 22px; line-height: var(--ritmo); flex: none; } .art-indice strong { display: block; font-size: 16px; line-height: var(--ritmo); } .art-indice span span { font-size: 15px; color: var(--tinta-suave); } /* ---------- Lista de fuentes ---------- */ .art-lista { margin: 0 0 var(--medio-ritmo); padding-left: 20px; max-width: var(--medida); } .art-lista li { font-size: 15px; line-height: calc(var(--ritmo) - 2px); color: var(--tinta-suave); margin-bottom: var(--medio-ritmo); } .art-lista a { text-decoration: underline; } /* ---------- Comparador de fotos aereas ---------- Mismo mecanismo de siempre; solo cambian los colores del cromo. */ .comparador { position: relative; overflow: hidden; touch-action: pan-y; aspect-ratio: 4 / 3; border-radius: var(--radio-grande); background: var(--superficie-honda); } .comparador img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .comparador .encima { position: absolute; inset: 0; } .comparador .encima img { width: 100%; height: 100%; object-fit: cover; } .comparador .tirador { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; } .comparador .tirador::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .comparador input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .comparador input[type=range]:focus-visible ~ .tirador { box-shadow: 0 0 0 3px var(--acento); } .comparador .etiqueta { position: absolute; bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(32, 30, 29, .78); padding: 4px 11px; border-radius: 999px; pointer-events: none; } .comparador .etiqueta-izq { left: 10px; } .comparador .etiqueta-der { right: 10px; } /* ---------- Nota destacada dentro del texto ---------- */ .art-nota { margin-bottom: var(--ritmo); } .art-nota p { margin: 0 !important; } /* Los anclajes (#calor, #sequia...) deben quedar por debajo de la barra fija: sustituye al scroll-mt-20 que llevaban las secciones en el HTML. */ .art-seccion[id] { scroll-margin-top: calc(var(--barra-sup, 3.5rem) + var(--ritmo)); }