/* trabajos.css - Pagina principal: todos los trabajos juntos. Referente: mendezzapardiel.com - Disposicion tipo "masonry" (columnas), NO cuadricula rigida: cada foto conserva su proporcion real, asi quedan escalonadas y con un aire mas minimalista, sin lineas perfectamente alineadas. - Miniaturas en NEGATIVO BLANCO Y NEGRO (b/n + invertido). A color al dejar el raton encima. - Al pasar el raton aparece, debajo y centrado, el nombre del proyecto (linea 1) y una linea de subtexto (linea 2). */ #trabajos { padding-top: var(--nav); } /* MARCA DE LA PAGINA PRINCIPAL: el nombre, bastante mas abajo del borde, como parte de la pagina (no en la barra fija). Al hacer scroll sube y sale de pantalla igual que las fotos, sin fundidos al llegar al borde. Mismo comportamiento en escritorio y movil (peticion de Alicia); solo cambia el tamano. */ .trabajos-cabecera { display: none; text-align: center; padding: 64px 20px 92px; } body.inicio .trabajos-cabecera { display: block; } /* El nombre lleva a la pagina principal. Ocupa solo lo que ocupa el texto (inline-block) para que no se pueda pulsar en todo el ancho */ .marca-enlace { display: inline-block; color: inherit; text-decoration: none; transition: opacity .2s ease; } /* Solo con raton de verdad (v6.0): en tactil el ":hover" se queda pegado tras tocar y su nombre se quedaba en gris -"a veces incluso mi nombre se queda en gris, y quisiera que siempre se viera en negro, lo cliques o no" (Alicia, 13-08-2026)-. Mismo motivo y misma solucion que en .nav-icon (ver nav.css). */ @media (hover: hover) and (pointer: fine) { .marca-enlace:hover { opacity: .6; } } /* PASO DE A

el 04-09-2026, por posicionamiento: la portada no tenia titular ninguno -el unico h1 del sitio era el titulo del reportaje, vacio mientras no hay uno abierto- y este es, ni mas ni menos, el titular de la pagina. El margen hay que anularlo a mano: un h1 trae el suyo de fabrica (0.67em arriba y abajo) y separaria el nombre del "PHOTOGRAPHY" de debajo. Lo demas ya estaba todo escrito aqui -tamaño, peso, familia, color-, asi que se ve exactamente igual que antes. */ .marca-nombre { display: block; margin: 0; font-family: var(--titulo); font-weight: 700; font-size: 30px; letter-spacing: .01em; color: var(--negro); } .marca-subtitulo { display: block; /* En MAYUSCULAS, un poco mas grande que antes (era 12px en minusculas): Alicia volvio a pedir el cambio, esta vez a proposito y solo para este texto -el menu en si sigue en minuscula-. */ font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-top: 6px; } /* REJILLA "EN CAOS": ya no hay columnas fijas. Los trabajos se agrupan en LINEAS de distinto numero de fotos (3, luego 2, luego 4...) y cada foto se lleva una porcion distinta del ancho, asi que ninguna linea empieza ni acaba donde la anterior (peticion de Alicia: que no se note la columna y sea algo mas desordenado). Toda la colocacion la hace view.js (colocarRejilla), no el CSS. Ahi estan los patrones y la explicacion completa. */ .trabajos-grid { position: relative; /* view.js coloca cada foto dentro */ max-width: 1560px; margin: 0 auto; /* Los 104px laterales son el PASILLO DE LOS ICONOS: los dos iconos de la barra son fijos y estan en las esquinas (llegan hasta los 100px), asi que si las fotos se acercaran mas, al bajar pasarian por debajo de ellos (queja de Alicia en su dia). Es el limite de "expandirse a los laterales" en ventanas de ~1100px; en pantallas mas anchas la rejilla si crece de verdad, hasta los 1560px. */ padding: 40px 104px 90px; /* EL DISENO RESPONSIVE SIGUE MANDANDO DESDE AQUI: view.js lee estas tres variables para colocar los "ladrillos" (ver responsive.css para movil y tablet). */ --columnas: 3; --hueco-x: 26px; --hueco-y: 12px; } /* Cada miniatura la coloca view.js (posicion y ancho) */ .trabajo-item { position: absolute; cursor: pointer; } /* El ANCHO de cada miniatura lo pone view.js (_ANCHOS): un poco menos que su columna y variando en ciclo de 4, para que no todas midan lo mismo. Las mas estrechas se pegan alternativamente a un lado de su columna. El juego de tamanos fuerte lo dan las propias fotos, unas verticales y otras horizontales. */ /* Ya no hace falta escalonar las miniaturas con padding: el caos de la colocacion (lineas de distinto numero de fotos, anchos al azar y encaje por perfil de alturas) lo da de sobra, y ese padding solo sumaba blanco, que es de lo que se quejaba Alicia. */ /* REVELADO AL HACER SCROLL, como la web de referencia: cada miniatura espera invisible (.espera, la pone el JS) y, cuando entra en pantalla, sube 40px con fundido (.aparece). Asi el scroll se siente suave: las fotos van apareciendo conforme bajas. */ .trabajo-item.espera { opacity: 0; } .trabajo-item.aparece { animation: aparecer .9s ease both; } @keyframes aparecer { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* Contenedor de la foto, sin marco y con sombra. Se combinan tres: una muy corta que dibuja el borde, una media, y otra larga y difusa que da la profundidad. LA SOMBRA HA IDO Y VENIDO: empezo floja (0 8px 26px al 16%), Alicia la quiso mas marcada para despegar las miniaturas del blanco, y ahora pidio bajarla otra vez ("vamos a quitar un poco de sombras"). Queda a medio camino: se sigue despegando del fondo, pero sin el peso que tenia. */ .trabajo-media { position: relative; overflow: hidden; background: var(--fondo-foto); box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 5px 12px rgba(0, 0, 0, .12), 0 14px 32px rgba(0, 0, 0, .17); } /* La foto empieza en NEGATIVO BLANCO Y NEGRO. Si el trabajo declara "ratio" en model.js, el contenedor reserva su hueco (.fija) y la imagen lo llena; si no, conserva su altura natural. */ .trabajo-foto { width: 100%; height: auto; display: block; filter: grayscale(1) invert(1) contrast(1.05); transition: filter .45s ease, transform .6s ease, opacity .6s ease; /* Freno al arrastre (llevarla al escritorio) y a la seleccion de la imagen; el clic derecho se bloquea aparte, en controller.js. Disuasorio, no cerrojo: ver el comentario largo junto al "contextmenu" en controller.js. */ -webkit-user-drag: none; user-select: none; } /* Fundido al cargar cada foto (clase "cargada" via JS): aparecen suavemente en vez de a golpes */ .trabajo-foto:not(.cargada) { opacity: 0; } .trabajo-media.fija .trabajo-foto { height: 100%; object-fit: cover; } /* Al dejar el raton encima: se ve a COLOR */ .trabajo-item:hover .trabajo-foto, .trabajo-item:focus-within .trabajo-foto { filter: none; } /* AQUI ESTABA EL MICRO-ZOOM DE LAS MINIATURAS, y se quito entero (26-08-2026). Alicia fue tajante: "quitar efecto ZOOM de todas las versiones en el mosaico. Eso, fijo". Al posarse encima la foto sigue pasando a color, que es lo que de verdad cuenta; lo que desaparece es que ademas se agrandara. Los trabajos en proceso lo tuvieron un dia mas, exagerado, y tambien se quito (27-08): ver ".en-proceso" mas abajo. Ya no queda zoom en ninguna parte del mosaico. */ /* PORTADA CON EL NEGATIVO EDITADO POR ALICIA (.doble): dos fotos superpuestas -> la de color en el flujo (marca la altura) y SU negativo encima, tapandola. Al pasar el raton el negativo se desvanece y aparece la de color: el cambio es entre sus dos fotos, asi que aqui NO se aplica el filtro que se inventa el negativo. */ .trabajo-media.doble .trabajo-foto { filter: none; } .trabajo-media.doble .trabajo-negativo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .trabajo-item:hover .trabajo-media.doble .trabajo-negativo, .trabajo-item:focus-within .trabajo-media.doble .trabajo-negativo { opacity: 0; } /* YA VISTOS (.visto, la pone view.js): los trabajos en los que el visitante ya ha entrado se quedan a COLOR y con su texto puesto al volver a la portada, sin tener que pasar el raton. Asi se ve de un vistazo lo que queda por mirar (peticion de Alicia). */ .trabajo-item.visto .trabajo-foto { filter: none; } .trabajo-item.visto .trabajo-media.doble .trabajo-negativo { opacity: 0; } .trabajo-item.visto .trabajo-info { opacity: 1; } /* AUN EN PROCESO (.en-proceso): los trabajos sin terminar solo enseñan su negativo. Ni pasan a color al posarse encima, ni se puede entrar a verlos (en view.js ni siquiera se pintan como enlace), porque todavia no hay reportaje que enseñar. */ .trabajo-item.en-proceso { cursor: default; } .trabajo-item.en-proceso .trabajo-media.doble .trabajo-negativo { opacity: 1; } .trabajo-item.en-proceso .trabajo-media:not(.doble) .trabajo-foto { filter: grayscale(1) invert(1) contrast(1.05); } /* AQUI ESTABA EL ZOOM DE LOS TRABAJOS EN PROCESO. Alicia lo pidio exagerado el 26-08-2026 -"que se quede descontextualizado casi"- y al dia siguiente pidio quitarlo: "quitamos ZOOM de A NEST, ROOTS y EPISTREFO". Con esto ya no queda zoom en ninguna parte del mosaico. Estos trabajos siguen distinguiendose igual: solo enseñan su negativo y no se puede entrar en ellos. */ /* Texto debajo de la imagen, centrado: aparece al dejar el raton. */ .trabajo-info { padding-top: 12px; text-align: center; opacity: 0; transition: opacity .3s ease; } .trabajo-item:hover .trabajo-info, .trabajo-item:focus-within .trabajo-info { opacity: 1; } .trabajo-titulo { font-family: var(--titulo); font-weight: 700; font-size: 12.5px; color: var(--negro); line-height: 1.4; } .trabajo-sub { font-size: 11px; letter-spacing: .03em; color: var(--gris); margin-top: 2px; } /* Placeholder si falta una foto (sin proporcion natural, damos una) */ .trabajo-media.vacio { aspect-ratio: 4/3; } /* EL REVELADO (moviles y tablets): las miniaturas se ven en negativo b/n igual que en escritorio (no hay regla que lo quite). Al tocar una, el JS le pone la clase .revelada y la foto se "revela" como un negativo en el cuarto oscuro: pasa lentamente a color y su texto aparece en cadencia; tras unos segundos se abre el proyecto (un segundo toque entra directamente). Ver controller.js y view.js. */ /* EL REVELADO, AL DOBLE DE VELOCIDAD (22-08-2026): iba en 0,9 s y, con la espera de apertura tambien acortada a la mitad (ver View.revelarTrabajo), el conjunto dejo de dar la sensacion de que el proyecto no se iba a abrir -"parece que no se van a abrir y da la sensacion de que entonces son encargos/proyectos inacabados"-. Se sigue viendo el paso de negativo a color, que es de lo que iba el efecto, solo que sin la pausa larga de despues. */ .trabajo-item.revelada .trabajo-foto { filter: none; transition: filter .35s ease; } /* Con el negativo de Alicia el revelado va igual, pero lo que se desvanece es su negativo, dejando ver la foto de color */ .trabajo-item.revelada .trabajo-media.doble .trabajo-negativo { opacity: 0; transition: opacity .35s ease; } .trabajo-item.revelada .trabajo-info { opacity: 1; transition: opacity .3s ease .12s; }