/* Mini-sitios de divulgación (/sitios/{slug}) — hoja propia, sin Tailwind. El color principal (--acento) lo inyecta la plantilla; el fondo y la tipografía salen de data-tema / data-fuente en . */ :root { --acento: #5a67d8; --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --titulo: "Space Grotesk", var(--sans); --fondo: #f7f6f2; --superficie: #ffffff; --superficie-2: #efede7; --tinta: #15150f; --tinta-2: #55544e; --tinta-3: #8a887f; --linea: rgba(20, 20, 15, 0.1); --sombra: 0 1px 2px rgba(20, 20, 15, 0.05), 0 8px 24px -12px rgba(20, 20, 15, 0.18); --col: 44rem; /* columna de lectura */ --ancho: 72rem; /* ancho de las secciones y los bloques anchos */ --radio: 10px; color-scheme: light; } html[data-fuente="editorial"] { --titulo: "Lora", Georgia, "Times New Roman", serif; } html[data-tema="oscuro"] { --fondo: #131314; --superficie: #1c1c1e; --superficie-2: #232326; --tinta: #f2f1ea; --tinta-2: #b6b5ac; --tinta-3: #7f7e77; --linea: rgba(255, 255, 255, 0.12); --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.sitio { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { margin: 0; font-family: var(--titulo); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; } html[data-fuente="editorial"] h1, html[data-fuente="editorial"] h2, html[data-fuente="editorial"] h3 { letter-spacing: 0; font-weight: 500; } .ancho { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; } .saltar { position: absolute; left: -999px; top: 0; background: var(--acento); color: #fff; padding: .5rem 1rem; z-index: 100; } .saltar:focus { left: 1rem; top: 1rem; } .sobretitulo { display: block; margin: 0 0 .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); font-weight: 500; } .sobretitulo a { color: inherit; } /* ── Cabecera ─────────────────────────────────────────── */ .cabecera { background: var(--superficie); border-bottom: 1px solid var(--linea); } .cabecera__velo { padding: 3rem 0 2.25rem; } .cabecera__titulo { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); max-width: 22ch; } .cabecera__titulo a { color: inherit; } .cabecera__titulo a:hover { text-decoration: none; } .cabecera__bajada { margin: 1.1rem 0 0; max-width: 62ch; font-size: 1.15rem; line-height: 1.5; color: var(--tinta-2); } .cabecera__autor { margin: 1.25rem 0 0; font-size: .92rem; color: var(--tinta-3); } .cabecera__autor strong { color: var(--tinta-2); font-weight: 600; } .cabecera--foto { background-size: cover; background-position: center; color: #fff; border-bottom: 0; } .cabecera--foto .cabecera__velo { padding: clamp(5rem, 14vw, 10rem) 0 3rem; background: linear-gradient(180deg, rgba(10, 10, 12, .35) 0%, rgba(10, 10, 12, .55) 55%, rgba(10, 10, 12, .85) 100%); } .cabecera--foto .cabecera__titulo, .cabecera--foto .cabecera__bajada, .cabecera--foto .cabecera__autor, .cabecera--foto .cabecera__autor strong { color: #fff; } .cabecera--foto .cabecera__bajada { color: rgba(255, 255, 255, .88); } .cabecera--foto .cabecera__autor { color: rgba(255, 255, 255, .72); } .cabecera--foto .sobretitulo { color: #fff; opacity: .85; } .cabecera--foto .cabecera__titulo { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } /* ── Navegación ───────────────────────────────────────── */ .navsitio { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); } .navsitio__lista { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .navsitio__lista::-webkit-scrollbar { display: none; } .navsitio__lista a { flex: 0 0 auto; padding: .85rem .8rem; color: var(--tinta-2); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .navsitio__lista a:hover { color: var(--tinta); text-decoration: none; } .navsitio__lista a.activo { color: var(--acento); border-bottom-color: var(--acento); } .portada { margin: 2rem auto 0; } .portada img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); } /* ── Portada: capítulos, grillas ──────────────────────── */ .contenido { padding: 1rem 0 4rem; } .seccion { padding-top: 3.5rem; } .seccion__titulo { font-size: 1.6rem; margin-bottom: 1.5rem; } .capitulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .capitulo a { display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem; height: 100%; padding: 1.5rem 1.5rem 1.25rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: inherit; transition: transform .15s ease, box-shadow .15s ease; } .capitulo a:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra); } .capitulo__num { font-family: var(--mono); font-size: .75rem; color: var(--acento); letter-spacing: .1em; } .capitulo__titulo { font-family: var(--titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.25; } .capitulo__extracto { color: var(--tinta-2); font-size: .95rem; line-height: 1.5; } .capitulo__ir { margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--acento); } .grilla-graficos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); } .galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .galeria__item { margin: 0; } .galeria__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); } .galeria__item figcaption { margin-top: .5rem; font-size: .88rem; color: var(--tinta-2); } /* ── Páginas: artículo y bloques ──────────────────────── */ .articulo { padding-top: 2.5rem; } .articulo__cabecera { width: min(var(--col), 100% - 2.5rem); margin: 0 auto 2rem; } .articulo__titulo { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); } .bloque { margin: 0 auto 1.6rem; } .bloque--normal { width: min(var(--col), 100% - 2.5rem); } .bloque--ancho { width: min(var(--ancho), 100% - 2.5rem); margin-top: 2.25rem; margin-bottom: 2.25rem; } .bloque--completo { width: 100%; margin-top: 2.25rem; margin-bottom: 2.25rem; } .bloque--completo img, .bloque--completo .mapa, .bloque--completo .grafico__lienzo { border-radius: 0; } .bloque--completo figcaption { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; } .bloque-titulo { font-size: 1.45rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); } .bloque-titulo:first-child, .articulo__cabecera + .bloque-titulo { margin-top: 0; padding-top: 0; border-top: 0; } .prosa { line-height: 1.7; } .prosa > :first-child { margin-top: 0; } .prosa p { margin: 0 0 1.1em; } .prosa ul, .prosa ol { margin: 0 0 1.1em; padding-left: 1.4em; } .prosa li { margin: .4em 0; } .prosa li::marker { color: var(--acento); } .prosa strong { font-weight: 600; } .prosa a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--acento) 45%, transparent); } .prosa img { border-radius: var(--radio); } .bloque-imagen img, .bloque-video .video { border-radius: var(--radio); box-shadow: var(--sombra); } .bloque-imagen img { max-height: 640px; width: auto; max-width: 100%; } .bloque--ancho.bloque-imagen img, .bloque--completo.bloque-imagen img { width: 100%; max-height: none; object-fit: cover; } figcaption { margin-top: .6rem; font-size: .88rem; line-height: 1.45; color: var(--tinta-2); } .video { position: relative; padding-top: 56.25%; overflow: hidden; background: #000; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .cita { margin-top: 2rem; margin-bottom: 2rem; padding: .25rem 0 .25rem 1.4rem; border-left: 3px solid var(--acento); font-family: var(--titulo); font-size: 1.25rem; line-height: 1.45; color: var(--tinta); } html[data-fuente="editorial"] .cita { font-style: italic; } .cita p { margin: 0 0 .5em; } .cita cite { display: block; margin-top: .6rem; font-family: var(--sans); font-style: normal; font-size: .88rem; color: var(--tinta-2); } .grafico { margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem 1rem; } .grafico__titulo { margin: 0 0 .75rem; font-family: var(--titulo); font-weight: 600; font-size: 1rem; color: var(--tinta); } .grafico__lienzo { position: relative; height: 300px; } .bloque--ancho .grafico__lienzo, .bloque--completo .grafico__lienzo { height: 380px; } .grafico__aviso { margin: 1rem 0 0; font-size: .85rem; color: var(--tinta-3); } .grafico figcaption + .grafico__lienzo + figcaption { margin-top: .75rem; } .mapa { height: 420px; border-radius: var(--radio); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--linea); z-index: 0; } .bloque--ancho .mapa, .bloque--completo .mapa { height: 520px; } .leaflet-container { font-family: var(--sans); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); } .leaflet-popup-content { font-size: .9rem; line-height: 1.45; } .leaflet-container a.leaflet-popup-close-button { color: var(--tinta-3); } .cifras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-inline: auto; padding: 0; } .cifra { margin: 0; padding: 1.25rem 1.4rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); border-top: 3px solid var(--acento); } .cifra dd { margin: 0; font-family: var(--titulo); font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; } .cifra dt { margin-top: .4rem; font-size: .9rem; color: var(--tinta-2); } .separador { border: 0; height: 1px; background: var(--linea); margin-top: 2.5rem; margin-bottom: 2.5rem; } .capitulos-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); } .capitulos-nav a { color: var(--tinta); font-family: var(--titulo); font-weight: 600; font-size: 1.05rem; max-width: 45%; } .capitulos-nav a:hover { color: var(--acento); text-decoration: none; } .capitulos-nav__sig { text-align: right; margin-left: auto; } /* ── Pie ──────────────────────────────────────────────── */ .pie { border-top: 1px solid var(--linea); background: var(--superficie); padding: 2.5rem 0 3rem; font-size: .9rem; color: var(--tinta-2); } .pie__cols { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; } .pie__titulo { margin: 0 0 .3rem; font-family: var(--titulo); font-weight: 600; color: var(--tinta); } .pie p { margin: 0; } .pie__nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .pie__nav a { color: var(--tinta-2); } .pie__hlab { color: var(--tinta-3); } .pie__hlab a { color: var(--tinta-2); font-weight: 600; } @media (min-width: 720px) { .pie__cols { grid-template-columns: 1.2fr 1fr; } .pie__hlab { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--linea); } } @media (max-width: 640px) { body.sitio { font-size: 1rem; } .cabecera__velo { padding: 2.25rem 0 1.75rem; } .cabecera--foto .cabecera__velo { padding-top: 6rem; } .grafico__lienzo, .bloque--ancho .grafico__lienzo { height: 260px; } .mapa, .bloque--ancho .mapa { height: 340px; } .capitulos-nav { flex-direction: column; } .capitulos-nav a { max-width: none; } .capitulos-nav__sig { text-align: left; margin-left: 0; } } @media print { .navsitio, .capitulos-nav, .saltar { display: none; } } /* ── Fila doble (dos bloques de media columna) ─────────── */ .fila-doble { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fila-doble > .bloque { width: auto; margin: 0; } .fila-doble .grafico__lienzo { height: 300px; } .fila-doble .mapa { height: 380px; } .fila-doble .bloque-imagen img { width: 100%; max-height: 420px; object-fit: cover; } @media (max-width: 720px) { .fila-doble { grid-template-columns: 1fr; } } .bloque--ancho.bloque-imagen img { max-height: 640px; } /* ── Cabecera compacta en las páginas internas ─────────── */ .cabecera--interior .cabecera__velo { padding-top: 2rem; padding-bottom: 1.5rem; } .cabecera--interior .cabecera__titulo { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); max-width: none; } .cabecera--interior.cabecera--foto .cabecera__velo { padding-top: clamp(3rem, 8vw, 5rem); padding-bottom: 1.75rem; } .cabecera--interior .cabecera__autor { display: none; } /* --------------------------------------------------------------------------- Bloque de HTML propio: lo que escribe el investigador a mano o le pide a un modelo. No se le impone nada de estilo salvo que no se desborde de la columna: la gracia es justamente que se vea lo que escribió. --------------------------------------------------------------------------- */ .bloque-html { overflow-x: auto; } .bloque-html img { max-width: 100%; height: auto; } .bloque-html table { width: 100%; border-collapse: collapse; } .bloque-html th, .bloque-html td { padding: .45rem .65rem; border-bottom: 1px solid var(--linea, rgba(125,125,125,.25)); text-align: left; } .bloque-html pre { overflow-x: auto; } /* El distintivo del que ya publicó una investigación (se gana publicando). */ .pie__distintivo { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: .18rem .6rem; opacity: .7; } /* --------------------------------------------------------------------------- Línea de tiempo publicada: la que se armó arrastrando notas en el lienzo. Acá no se arrastra nada — se lee, de arriba a abajo, en el orden que el investigador encadenó. --------------------------------------------------------------------------- */ .lineatiempo__titulo { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: .9rem; } .lineatiempo ol { list-style: none; margin: 0; padding: 0; position: relative; } .lineatiempo ol::before { content: ''; position: absolute; left: 6.5rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--linea, rgba(125,125,125,.3)); } .lineatiempo li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.4rem; padding-bottom: 1.6rem; position: relative; } .lineatiempo li::before { content: ''; position: absolute; left: calc(6.5rem - 4px); top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--acento, #5a67d8); } .lineatiempo__fecha { font-size: .78rem; opacity: .6; text-align: right; padding-top: .1rem; } .lineatiempo__caja h4 { font-size: 1.02rem; line-height: 1.35; margin: 0 0 .3rem; } .lineatiempo__caja p { font-size: .92rem; line-height: 1.6; margin: 0; } .lineatiempo__pie { margin-top: .35rem !important; font-size: .78rem !important; opacity: .6; display: flex; gap: 1rem; flex-wrap: wrap; } @media (max-width: 640px) { .lineatiempo ol::before { left: 4px; } .lineatiempo li { grid-template-columns: 1fr; gap: .2rem; padding-left: 1.4rem; } .lineatiempo li::before { left: 0; } .lineatiempo__fecha { text-align: left; } }