/* ════════════════════════════════════════════════════════════════════ FUTURISTICA® · The.Archi.Designers · sitio público _xdiario_2026-09-06.css CAPA 3 · PÁGINA · el diario (índice y artículo) ════════════════════════════════════════════════════════════════════ _xprimitivos_2026-08-18.css → color y familias _xsitio_2026-08-18.css → escala, costura, header, colofón, botones _xdiario_2026-09-06.css → este archivo CERO valores de color propios. CERO hex. Todo por var(--token). Verificado contra las dos capas de arriba el 2026-09-06. ── EL ARGUMENTO ──────────────────────────────────────────────────── El diario es una revista. Una revista alterna dos gestos: MIRAR y LEER. Aquí eso es literal — ÍNDICE void. Es portada. Se hojea, no se lee. ARTÍCULO warm. Son 1.800 palabras. La ley de la casa dice que lectura va en warm, y tiene razón: un texto largo sobre fondo oscuro castiga a quien de verdad lee. LÁMINAS void. Dentro del artículo, la foto vuelve al oscuro. Ese vaivén es lo que hace que se sienta revista. ── QUE NO ESTA AQUI (y por que) ──────────────────────────────────── La prosa del articulo NO se define aqui. Usa .dos de _xestudio: titulo a la izquierda (13ch), prosa a la derecha (1.5fr), y la correccion de N9 del 03-sep que pone la prosa corrida en --f-cuerpo y deja el primer parrafo como bajada en display. Es el mismo bloque de /metodo y /jvf: el diario no habla un idioma propio. Tampoco se define la cita (.cita, _xestudio), la rejilla de datos (.datos--fila, _xsitio) ni el titular (.titular, _xestudio). ── EL HOVER ──────────────────────────────────────────────────────── Es el hover estándar del sitio, el mismo de las puertas de contacto: filete de 1px que crece de izquierda a derecha en 1,1s + la flecha que avanza + el titular que gana luminosidad. Los tres a la vez. Con uno solo no se lee como transición — ese fue el diagnóstico. Color de interacción, por LEY-COLOR: sobre WARM --c-brand (único legal sobre fondo claro) sobre VOID --tad-vida (acción sobre oscuro) El titular NUNCA cambia de color: cambia de luminosidad (--t2→--t1), como manda ver1/diario.html. El verde no refuerza un enlace de lectura; marca el filete, que sí es el gesto de "entrar". ════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 1 · PORTADA DEL DIARIO ═══════════════════════════════════════════════════════════════════ */ .port{position:relative;min-height:76vh;display:flex;align-items:flex-end; overflow:hidden;} .port > .limite{position:relative;z-index:2;width:100%; padding-bottom:var(--s6);} /* La imagen no ilustra: ambienta. Va muy atrás para que el titular respire, y el degradado la ancla al fondo de la sección. */ .port-fondo{position:absolute;inset:0;z-index:0;} .port-fondo img{width:100%;height:100%;object-fit:cover; opacity:.34;filter:grayscale(1);} /* El degradado NO declara color: parte de transparente y llega al fondo de la propia seccion. La imagen ya va al 34% sobre void, asi que el oscurecido superior sale del apilado, no de un rgba escrito a mano. */ .port-fondo::after{content:'';position:absolute;inset:0; background:linear-gradient(to bottom,transparent 0%,transparent 38%,var(--void) 100%);} .port .hero-titulo{max-width:9ch;} .port .sub{max-width:56ch;} /* Fecha de edición: la marca de una revista, arriba a la derecha. */ .port-edicion{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4); margin-top:var(--aire-linea);padding-top:var(--s3); border-top:1px solid var(--linea); font-family:var(--f-mono);font-size:var(--u-micro); letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3);} /* ═══════════════════════════════════════════════════════════════════ 2 · LISTADO DE ENTRADAS La anatomía es la de las puertas de contacto, con una diferencia: la primera entrada lleva imagen. Es la nota de portada. ═══════════════════════════════════════════════════════════════════ */ /* El esqueleto y el filete viven en _xsitio (.filas). .indice queda enganchada al selector base y toma el color POR DEFECTO — marca en los dos mundos — porque entrar a leer no es una accion que genera (LEY-COLOR §2). El verde vida queda para los botones del cierre. Aqui abajo, solo la anatomia propia del diario. */ .pieza{display:block;padding:var(--s6) 0;color:inherit;} /* Meta en mono a cuatro columnas — el gesto más de revista que hay. Viene del diario original y se conserva tal cual. */ .pieza-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4); font-family:var(--f-mono);font-size:var(--u-micro); letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3); margin-bottom:var(--aire-linea);} @media (min-width:900px){ .pieza-meta{grid-template-columns:repeat(4,1fr);gap:var(--s4);} } .pieza-titulo{font-family:var(--f-display);font-weight:300; font-size:var(--t-display);line-height:var(--il-titular); letter-spacing:-.035em;color:var(--t2);max-width:17ch; transition:color .5s var(--ease);} .pieza-titulo em{font-style:italic;} .indice > li:hover .pieza-titulo{color:var(--t1);} .pieza-bajada{font-family:var(--f-cuerpo);font-size:var(--u-link); line-height:1.6;color:var(--t3);max-width:58ch; margin-top:var(--aire-label); transition:color .5s var(--ease);} .indice > li:hover .pieza-bajada{color:var(--t2);} /* "Leer" — filete corto + flecha. La flecha corre más rápido que el filete de la fila: dos velocidades, un solo movimiento. */ .pieza-leer{display:inline-flex;align-items:center;gap:var(--s2); margin-top:var(--aire-linea); font-family:var(--f-mono);font-size:var(--u-label); letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3); transition:color .4s var(--ease);} .pieza-leer::before{content:'';width:32px;height:1px;background:var(--t3); transition:width .5s var(--ease),background .4s var(--ease);} .pieza-leer::after{content:'→';transition:transform .5s var(--ease);} .indice > li:hover .pieza-leer{color:var(--t1);} .indice > li:hover .pieza-leer::before{width:52px;background:var(--t1);} .indice > li:hover .pieza-leer::after{transform:translateX(10px);} /* NOTA DE PORTADA · la primera entrada lleva imagen ancha. En escritorio la imagen va al lado, no arriba: así la fila sigue siendo una fila y el listado conserva su ritmo. */ .pieza--portada{display:grid;grid-template-columns:1fr;gap:var(--s5);} @media (min-width:1000px){ .pieza--portada{grid-template-columns:1.05fr 1fr;gap:var(--s6); align-items:center;} } .pieza-lamina{overflow:hidden;aspect-ratio:4/3;background:var(--void);} @media (min-width:1000px){.pieza-lamina{aspect-ratio:5/4;}} .pieza-lamina img{width:100%;height:100%;object-fit:cover; filter:grayscale(1); transition:transform 1.6s var(--ease),filter .9s var(--ease);} .indice > li:hover .pieza-lamina img{transform:scale(1.03);filter:grayscale(0);} /* EN PREPARACIÓN · apagadas de verdad, como en el original. */ .indice > li.proxima{opacity:.3;pointer-events:none;} .indice > li.proxima::after{display:none;} /* ═══════════════════════════════════════════════════════════════════ 3 · ARTÍCULO · cabecera ═══════════════════════════════════════════════════════════════════ */ /* .titular ya existe en _xestudio (display, --t-display, 16ch). Un titular de articulo lleva mas texto, asi que SOLO se ensancha la medida. Familia, tamano e interlineado NO se redeclaran. */ .art-cab .titular{max-width:19ch;} .art-cab .titular em{font-style:italic;color:var(--t2);} /* Volver al diario — arriba, discreto, no compite con el titular. */ .art-volver{display:inline-flex;align-items:center;gap:var(--s2); font-family:var(--f-mono);font-size:var(--u-micro); letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3); transition:color .35s var(--ease);} .art-volver::before{content:'←';transition:transform .4s var(--ease);} .art-volver:hover{color:var(--t1);} .art-volver:hover::before{transform:translateX(-6px);} /* Los cuatro datos de cabecera. La rejilla es .datos--fila, de _xsitio (1fr 1fr -> 4 columnas, filete superior). Aqui solo la tipografia del par dt/dd, que ese componente no declara. */ .datos--fila dt{font-family:var(--f-mono);font-size:var(--u-micro); letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3); margin-bottom:var(--s1);} .datos--fila dd{font-family:var(--f-cuerpo);font-size:var(--u-link); color:var(--t1);line-height:1.4;} /* ═══════════════════════════════════════════════════════════════════ 5 · ARTÍCULO · citas y láminas Los dos recursos que rompen la columna. Van a sangre y en void: el lector levanta la vista del texto y vuelve. ═══════════════════════════════════════════════════════════════════ */ /* Lámina a sangre. .pie-foto ya está definida en _xestudio: bloque void sólido DENTRO del
, alineado al --marco. No se redefine. */ .lamina-art{position:relative;} .lamina-art img{width:100%;height:auto;display:block;} @media (min-width:900px){ .lamina-art{aspect-ratio:21/9;overflow:hidden;} .lamina-art img{height:100%;object-fit:cover;} } /* ═══════════════════════════════════════════════════════════════════ 6 · ARTÍCULO · ficha del proyecto Aquí el lector deja de leer y empieza a verificar. Sin caja: filete de 1px entre filas, como el resto del sistema. ═══════════════════════════════════════════════════════════════════ */ .ficha{margin-top:var(--aire-linea);border-top:1px solid var(--linea);} .ficha > div{display:grid;grid-template-columns:1fr;gap:var(--s1); padding:var(--s3) 0;border-bottom:1px solid var(--linea);} @media (min-width:768px){ .ficha > div{grid-template-columns:22% 1fr;gap:var(--s4); align-items:baseline;} } .ficha dt{font-family:var(--f-mono);font-size:var(--u-micro); letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3);} .ficha dd{font-family:var(--f-cuerpo);font-size:var(--u-link); color:var(--t1);line-height:1.55;} .ficha-nota{margin-top:var(--s4);max-width:62ch; font-size:var(--u-label);color:var(--t3);line-height:1.6;} /* ═══════════════════════════════════════════════════════════════════ 7 · PIE DEL ARTÍCULO · seguir leyendo Nunca se termina en punto muerto: siempre hay una siguiente puerta. ═══════════════════════════════════════════════════════════════════ */ .seguir{display:grid;grid-template-columns:1fr;gap:var(--s5); margin-top:var(--aire-linea);} @media (min-width:900px){.seguir{grid-template-columns:repeat(2,1fr);gap:var(--s6);}} .seguir-item{position:relative;padding-top:var(--s4); border-top:1px solid var(--linea);} .seguir-item::after{content:'';position:absolute;left:0;top:-1px; width:100%;height:1px;background:var(--c-brand); transform:scaleX(0);transform-origin:left; transition:transform 1.1s var(--ease);} /* Mismo orden que .puertas y que .indice: la BASE es --c-brand (warm) y section.void la sube a --tad-vida. Estaba invertido y por eso esta linea se comportaba distinto que la del indice en la misma pagina. */ /* Igual que el indice: seguir leyendo no genera, lleva a leer. */ .seguir-item:hover::after{transform:scaleX(1);} .seguir-item .et{font-family:var(--f-mono);font-size:var(--u-micro); letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3);} .seguir-item h3{font-family:var(--f-display);font-weight:300; font-size:var(--t-sub);line-height:var(--il-menor);letter-spacing:-.02em; color:var(--t2);max-width:20ch;margin-top:var(--s2); transition:color .5s var(--ease);} .seguir-item h3 em{font-style:italic;} .seguir-item:hover h3{color:var(--t1);} /* ═══════════════════════════════════════════════════════════════════ 8 · MOVIMIENTO REDUCIDO Lo que se mueve, se detiene. Lo que revela, queda revelado. ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .indice > li::after, .seguir-item::after{transform:scaleX(1);} .pieza-lamina img{filter:grayscale(0);} }