/* ========================================================================== estratos.css — los dos estratos de tono. MODELO, corregido el 23 sep 2026 por decisión del propietario: la luz la pinta LA ESCENA, no el CSS. La escena tiene dos configuraciones, clara y oscura, y adopta la que le toca; al entrar en un tramo claro se ilumina hasta aclarar la pantalla, y la raíz se sigue intuyendo detrás. La versión anterior tapaba la escena con una cortina de hueso, y eso no era lo pedido. Aquí queda, por tanto, solo lo que es del documento: el tono del contenido, el aire de los bloques claros, la atmósfera, y el fondo de reserva para cuando no hay WebGL y nadie pinta la escena. Hoja aparte, y a propósito: `tokens.css`, `base.css`, `components.css` y `motion.css` están espejadas entre `web/public/css/` y `sitio/css/` y las compara `scripts/css-gemelos.mjs`. Todo lo del tono vive aquí para no tocarlas. Al consolidar el frente, esto se reparte entre ellas y se regenera la copia. Se carga DESPUÉS de las cuatro, porque redefine. ========================================================================== */ /* ── orden de capas ─────────────────────────────────────── 0 lienzo · 1 estratos (solo sin WebGL) · 2 subsuelo · 3 viñeta · 4 grano · 10 contenido. La capa de estratos ya NO cubre la escena: con WebGL es transparente y no pinta nada. */ .estratos{ position:fixed; inset:0; z-index:1; pointer-events:none; background:transparent; } .subsuelo{ z-index:2; } .vineta{ z-index:3; } .grano{ z-index:4; } /* ── el tono del documento sigue la MISMA curva que la escena ── --claridad la publica estratos.js: 0 en oscuro, 1 en claro pleno, y todo el recorrido intermedio. El texto no puede cambiar de golpe en el borde de la sección mientras la pantalla se aclara poco a poco: iría medio tiempo por delante. Por eso los tokens se interpolan con el mismo número, y no con un interruptor. Ni un valor nuevo en la paleta: --hueso pasa de texto a superficie y --tierra-sombra de superficie a texto. El acento cálido lo toma --barro y el frío --encina, porque --espiga #C9A961 sobre --hueso #F1EADC no llega a 4,5:1 y no puede ser color de texto en claro. */ :root{ --c: var(--claridad, 0); --hueso: color-mix(in srgb, #12100A calc(var(--c) * 100%), #F1EADC); --hueso-70: color-mix(in srgb, rgba(18,16,10,.78) calc(var(--c) * 100%), rgba(241,234,220,.70)); --hueso-52: color-mix(in srgb, rgba(18,16,10,.68) calc(var(--c) * 100%), rgba(241,234,220,.52)); --hueso-30: color-mix(in srgb, rgba(18,16,10,.45) calc(var(--c) * 100%), rgba(241,234,220,.30)); --espiga: color-mix(in srgb, #4A3524 calc(var(--c) * 100%), #C9A961); /* El destacado del titular: en oscuro #E8D098 sobre casi negro da 12,6:1 y es lo que engancha la vista; el #6E4E1C que tenía en claro daba 6,3:1 y, peor, es marrón y no oro. #7A5A12 mide 5,3:1 sobre hueso —de sobra para un titular, que exige 3:1— y sí se lee dorado. Medido el 24 sep 2026. */ --espiga-alta: color-mix(in srgb, #7A5A12 calc(var(--c) * 100%), #E8D098); --encina-clara: color-mix(in srgb, #6E7A58 calc(var(--c) * 100%), #8B9670); --linea: color-mix(in srgb, rgba(74,53,36,.20) calc(var(--c) * 100%), rgba(201,169,97,.16)); --linea-alta: color-mix(in srgb, rgba(74,53,36,.42) calc(var(--c) * 100%), rgba(201,169,97,.42)); /* Material de las piezas. En oscuro es corcho sobre la escena; en claro es papel sobre papel, con la misma función: dar cama al texto para que la escena no se lea a través de él. Sube de alfa respecto al oscuro porque en claro la escena SIGUE AHÍ detrás, no está tapada por ninguna cortina. La diferencia de solidez entre piezas es intencionada y se conserva: a más peso de la pieza, más sólido el material. */ --corcho-banda: color-mix(in srgb, rgba(246,241,231,.82) calc(var(--c) * 100%), rgba(36,28,19,.58)); --corcho-tarjeta: color-mix(in srgb, rgba(246,241,231,.74) calc(var(--c) * 100%), rgba(36,28,19,.50)); --corcho-foto: color-mix(in srgb, rgba(246,241,231,.88) calc(var(--c) * 100%), rgba(36,28,19,.60)); } /* El cuerpo acompaña al lienzo. Con WebGL apenas se ve —la escena cubre la ventana— pero es lo que evita un destello oscuro mientras carga y lo que pinta el fondo cuando no hay escena. */ body{ background:color-mix(in srgb, #F1EADC calc(var(--c) * 100%), #12100A); } .respaldo{ opacity:calc(1 - var(--c)); } .banda{ background:var(--corcho-banda); } .tarjeta, .resena{ background:var(--corcho-tarjeta); } .foto{ background:var(--corcho-foto); } .panel, .info-marco{ background:var(--corcho-tarjeta); } /* La barra lateral, por el MISMO motivo que la cabecera y el panel del desplegable, y por la misma vía: su fondo era el color literal de `.banda`, así que no seguía al tema y sobre el estrato claro del artículo se abría un rectángulo marrón oscuro en mitad de la página. Todo lo demás de la barra —títulos, enlaces, recuentos, filetes— ya iba con tokens y se resuelve solo. Es la tercera vez que un color literal se queda fuera del tema; queda anotado como tal. */ .barra{ background:var(--corcho-banda); } /* ── atmósfera ─────────────────────────────────────────── Sobre hueso, el grano ensucia el papel y la viñeta cierra la ventana en un halo gris. Se retiran con la misma curva. Es la única excepción declarada a «grano y viñeta en todas las páginas», y por eso está escrita y no omitida. */ .grano{ opacity:calc(.055 * (1 - var(--c))); } .vineta{ opacity:calc(1 - (.92 * var(--c))); } /* La sombra negra del texto sobre la escena es del tema oscuro: sobre hueso no integra el texto, lo ensucia. Se apaga con la misma curva. */ /* El halo no desaparece en claro: CAMBIA DE SIGNO. En oscuro es negro y despega el texto de la escena. En claro, un halo negro ensucia —y el propietario lo hizo quitar el 23 sep 2026, con razón—, pero dejar el texto sin nada lo apoya directamente sobre una escena con luces y aristas y lo deja sin filo. Un halo del color del papel no se ve como sombra: limpia el fondo alrededor de la letra. Las dos capas se cruzan con la misma curva, así que a mitad de la transición ninguna pesa. */ :root{ --sombra-sobre-escena: 0 2px 30px rgba(0,0,0,calc(.85 * (1 - var(--c)))), 0 0 60px rgba(0,0,0,calc(.55 * (1 - var(--c)))), 0 0 18px rgba(246,241,231,calc(.95 * var(--c))), 0 0 38px rgba(246,241,231,calc(.75 * var(--c))); } /* La sombra se declara en los CONTENEDORES —`.caja` y `.pagina.con-escena`— y se hereda, que es donde la puso base.css. Apuntar a los elementos no la quitaba: seguía viéndose el halo difuminado detrás del texto en claro, comprobado en pantalla el 23 sep 2026. */ .caja, .pagina.con-escena{ text-shadow:var(--sombra-sobre-escena); } /* ── el aire de los bloques claros ─────────────────────── Esto sí es por bloque, porque es geometría y no color: el relleno vertical tiene que ser al menos el doble de la franja de mezcla, o el texto arranca dentro de la transición. Con 30vh de franja, 60vh de aire. */ /* SOLO DE TABLET HACIA ARRIBA, corregido el 24 sep 2026. En un móvil, 30vh por arriba y otros 30 por abajo son dos pantallas de nada entre bloque y bloque: lo que en escritorio se lee como aire, ahí se lee como que la página se ha acabado. El motivo original —que el texto no arranque dentro de la franja de transición— sigue valiendo en pantallas anchas, donde la franja ocupa una parte pequeña del scroll; en vertical, el propio alto del bloque ya la cubre. */ @media (min-width:760px){ [data-tono="claro"]{ padding-block:max(30vh, 12rem); } /* El aire es de la FRANJA, no del bloque: hace falta donde el tramo claro empieza y donde acaba, no entre dos claros seguidos. Desde que el bloque 4 se abrió en tres, un tramo claro son cuatro secciones, y repetir 30vh en cada una metía dos pantallas de vacío en mitad de la zona de decisión. Los de dentro del tramo vuelven al relleno normal de bloque. */ [data-tono="claro"] + [data-tono="claro"]{ padding-top:7rem; } [data-tono="claro"]:has(+ [data-tono="claro"]){ padding-bottom:6rem; } } /* ── la cabecera SÍ cambia de tono ─────────────────────── REVOCA la decisión del 23 de septiembre de 2026, que la dejaba anclada en oscuro sobre los dos estratos. El propietario lo mira construido al día siguiente y lo corrige: sobre el estrato claro el menú no se leía. Una barra oscura flotando sobre una página clara no ancla nada, se despega; y la navegación principal no puede ser el único elemento del sitio que no responde al tema en el que está. Al no fijar --c, la cabecera hereda el valor del documento y todos sus tokens —texto, línea, hamburguesa— se resuelven solos en el tono que toca. Lo único que hay que declarar es el fondo, porque era un color literal y no un token. El velo del panel móvil se queda oscuro a propósito y no es una excepción al tono: su trabajo es oscurecer lo que hay detrás. */ .cabecera{ background:color-mix(in srgb, rgba(246,241,231,.86) calc(var(--c) * 100%), rgba(18,16,10,.58)); } .nav-movil{ background:color-mix(in srgb, rgba(248,244,236,.97) calc(var(--c) * 100%), rgba(20,16,10,.96)); } /* Mismo criterio de contraste que el menú de escritorio: la navegación no es metadato. */ .nav-movil a{ color:var(--hueso-70); } .desplegable-panel a{ color:var(--hueso-70); } /* El panel del desplegable, por el mismo motivo que la cabecera y por la misma vía: su fondo era un color literal, así que no seguía al tema y sobre un bloque claro se abría un rectángulo negro. Todo lo demás del panel —texto, filete, el enlace del hub— ya iba con tokens y se resuelve solo. */ .desplegable-panel{ background:color-mix(in srgb, rgba(248,244,236,.97) calc(var(--c) * 100%), rgba(20,16,10,.96)); } /* ── el peso tipográfico en el estrato claro ────────────── El propietario lo señala el 24 sep 2026: en fondo oscuro estos bloques se ven muy bien y en claro apenas llaman la atención. NO ES CONTRASTE: el titular mide 15,89:1 en los dos temas, comprobado. Es IRRADIACIÓN, el efecto por el que una letra clara sobre fondo oscuro parece más gruesa de lo que es, y la misma letra oscura sobre fondo claro parece más fina. Con una display a peso 300 la diferencia es justo la que se ve. Se corrige donde está el problema, que es el peso: los titulares suben un escalón mientras el estrato es claro. El atributo lo publica estratos.js al cruzar la mitad de la transición; no se puede hacer con --claridad porque el peso de una fuente no variable no se interpola. */ [data-estrato="claro"] h1, [data-estrato="claro"] h2, [data-estrato="claro"] h3{ font-weight:400; } [data-estrato="claro"] .marca-n{ font-weight:600; }