/* ══════════════════════════════════════════════════════════════════════════ CAPA 18 · CONSISTENCIA DE PRODUCTO · 5 sep 2026 ───────────────────────────────────────────────────────────────────────── Hoja autocontenida, cargada en ultimo lugar en las cuatro paginas del sitio. Retirar este unico revierte la pasada entera y deja intacto todo lo anterior. No toca datos, formulas, umbrales, rankings ni ninguna figura: solo cromo, color de lamina y tipografia de una lista. Cuatro correcciones pedidas: §1 la lamina de entrada de los proyectos deja de ser casi negra; §2 las siglas TMD/HAR/FAI/UPI dejan de leerse como subtitulos y el guion que hacia de vineta pasa a ser un punto; §3 la miga del header no se trunca en ningun punto de ruptura; §4 el selector ES/EN queda centrado en la altura del header en movil, por reparto de la rejilla y no por un desplazamiento a medida. ══════════════════════════════════════════════════════════════════════════ */ /* ══ §1 · LAMINA DE ENTRADA DE LOS PROYECTOS ══════════════════════════════ En modo oscuro y en modo noche la cabecera del case no tenia fondo propio: se apoyaba sobre el suelo de la pagina, #0f1c26 y #0a1119. El segundo es practicamente negro y ademas queda por DEBAJO del pie (#131f29), asi que la entrada del proyecto era la zona mas oscura de toda la pagina. La lamina toma ahora el azul oscuro secundario de la casa: un paso del 25 % desde --accent-900 hacia --accent-700 en cada modo. Es el mismo valor que usa el bloque introductorio de las paginas satelite (satellite-shell-2026-09-05.css §3), de modo que abrir una figura en una pestana nueva y volver al proyecto no cambia de material. modo header pie lamina oscuro #132029 #1a2b36 #24394a noche #050a10 #131f29 #1e3040 En modo claro no se toca nada: alli no hay ningun fondo negro que corregir y la cabecera del case es tinta oscura sobre papel. */ :root{ --rl-hero-plate:transparent; } html[data-theme="dark"]{ --rl-hero-plate:#24394a; } html[data-theme="night"]{ --rl-hero-plate:#1e3040; } html[data-theme="dark"] #project-1 .proj-head, html[data-theme="dark"] #project-2 .proj-head, html[data-theme="night"] #project-1 .proj-head, html[data-theme="night"] #project-2 .proj-head{ background:var(--rl-hero-plate); border-radius:4px; padding:26px 24px; margin-bottom:32px; border-bottom:0; } /* La lamina ya separa por si misma, asi que el filete que hacia de division deja de hacer falta y se retira solo en esos dos modos. */ html[data-theme="dark"] #project-1 .proj-head, html[data-theme="dark"] #project-2 .proj-head, html[data-theme="night"] #project-1 .proj-head, html[data-theme="night"] #project-2 .proj-head{ box-shadow:none; } /* Tinta sobre la lamina. El acento de cada modo ya despeja 4.5:1 sobre estos dos azules; el cuerpo va en blanco puro y la meta al 80 %. */ html[data-theme="dark"] #project-1 .proj-head .proj-title, html[data-theme="dark"] #project-2 .proj-head .proj-title, html[data-theme="night"] #project-1 .proj-head .proj-title, html[data-theme="night"] #project-2 .proj-head .proj-title{ color:#fff; } html[data-theme="dark"] #project-1 .proj-head .proj-meta, html[data-theme="dark"] #project-2 .proj-head .proj-meta, html[data-theme="night"] #project-1 .proj-head .proj-meta, html[data-theme="night"] #project-2 .proj-head .proj-meta, html[data-theme="dark"] #project-1 .proj-head .proj-sub, html[data-theme="dark"] #project-2 .proj-head .proj-sub, html[data-theme="night"] #project-1 .proj-head .proj-sub, html[data-theme="night"] #project-2 .proj-head .proj-sub{ color:rgba(255,255,255,0.80); } @media (max-width:620px){ html[data-theme="dark"] #project-1 .proj-head, html[data-theme="dark"] #project-2 .proj-head, html[data-theme="night"] #project-1 .proj-head, html[data-theme="night"] #project-2 .proj-head{ padding:20px 16px; } } /* ══ §2 · LOS CUATRO MODULOS COMO TEXTO, NO COMO TITULARES ════════════════ Medido antes de esta pasada, en .rl-narr-list: cuerpo y sigla comparten familia (IBM Plex Serif), cuerpo (18.5px) y interlinea (32.375px). Lo que las hacia leer como subtitulos era el salto de peso 300 -> 600 sobre cuatro versales seguidas: en una serif, a ese cuerpo, ese salto se lee como un cambio de nivel, no como enfasis. Se conserva el resalte -sirve para barrer la lista- pero en el paso intermedio de la familia. La sigla sigue midiendo exactamente lo mismo que la frase que la sigue: misma familia, mismo font-size, misma interlinea, misma altura de caja. */ .proj-narrative .rl-narr-list b{ font:inherit; font-weight:500; font-size:1em; line-height:inherit; letter-spacing:inherit; color:inherit; } /* La vineta era un filete de 6x1 px: un guion. Pasa a punto redondo, discreto, alineado opticamente con la primera linea de cada entrada. Toma currentColor, no blanco fijo: en modo claro la lista se lee sobre papel y un punto blanco alli seria un punto invisible. */ .proj-narrative .rl-narr-list li{ padding-left:18px; } .proj-narrative .rl-narr-list li::before{ content:"\2022"; position:absolute; left:2px; top:0; width:auto; height:auto; background:none; opacity:0.78; color:currentColor; font-family:inherit; font-size:0.85em; line-height:inherit; font-weight:400; } /* ══ §3 · LA MIGA NO SE TRUNCA ════════════════════════════════════════════ El rotulo del Proyecto 02 decia "Presion habitacional y dinamicas urbanas en Israel" y no cabia: se cortaba en "...en Isr". El texto pasa a "Presion habitacional y dinamicas urbanas (IL)" en el marcado, mas corto y con el pais entre parentesis. Aqui solo se garantiza que ninguna banda lo vuelva a estrechar por debajo de su propio texto. */ .rlx-hdr .rlx-hdr-row .rlx-hdr-ctx{ min-width:0; max-width:none; text-overflow:clip; } @media (min-width:621px){ .rlx-hdr .rlx-hdr-row .rlx-hdr-ctx{ flex:0 1 auto; white-space:nowrap; } } @media (max-width:620px){ /* En dos renglones el rotulo dispone de la fila entera, asi que puede envolver en lugar de recortarse. */ .rlx-hdr .rlx-hdr-row .rlx-hdr-ctx{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; } } /* ══ §4 · EL SELECTOR ES/EN, CENTRADO EN LA ALTURA DEL HEADER ═════════════ Por debajo de 620px la fila es un grid de areas "mark end" / "ctx end". Sin align-content el conjunto de pistas se empaqueta arriba dentro del min-height de la cabecera, asi que los controles quedaban por encima del eje optico. Y en la home, que no lleva rotulo de orientacion, el area "ctx" seguia existiendo como pista vacia de 2px y desplazaba el bloque. Se corrige donde estaba el problema -en el reparto de la rejilla- y no con un desplazamiento atado a una resolucion: align-content centra el conjunto de pistas, y la home vuelve a una sola pista. El resultado se mantiene en 390, 430 y tablet porque no hay ninguna medida fija. */ @media (max-width:620px){ .rlx-hdr .rlx-hdr-row{ align-content:center; } /* Los tres controles comparten eje por align-self, no por margenes. */ .rlx-hdr .rlx-hdr-row .rlx-end{ align-self:center; align-items:center; } .rlx-hdr .rlx-hdr-row .rlx-end > .rlx-lang, .rlx-hdr .rlx-hdr-row .rlx-end > .rlx-burger{ align-self:center; } /* Rutas sin miga: una sola pista, para que el bloque no cuelgue de una fila vacia. */ .rlx-hdr .rlx-hdr-row:not(:has(> .rlx-hdr-ctx)){ grid-template-areas:"mark end"; row-gap:0; } .rlx-hdr .rlx-hdr-row:not(:has(> .rlx-hdr-ctx)) .rlx-wordmark{ align-self:center; } } /* Respaldo para motores sin :has(): la home es la unica ruta sin miga. */ @supports not selector(:has(*)){ @media (max-width:620px){ body[data-page="home"] .rlx-hdr .rlx-hdr-row{ grid-template-areas:"mark end"; row-gap:0; } body[data-page="home"] .rlx-hdr .rlx-hdr-row .rlx-wordmark{ align-self:center; } } } /* Estado calculado por assets/js/product-consistency-2026-09-05.js: el rotulo se retira solo cuando su texto no entra completo en la pista que le queda. Nunca se imprime cortado. */ @media (min-width:621px){ .rlx-hdr[data-ctx-fit="0"] .rlx-hdr-row > .rlx-hdr-ctx{ display:none !important; } }