/* ===================================================================
NICO MEGA — Páginas de trabajo individual
Se apoya en los tokens y clases de css/style.css (:root, .nav, .mono,
.reveal, .mark, .redline, .contact, etc). Este archivo solo agrega
los componentes propios de una ficha de proyecto, para poder
reutilizarlo en todos los trabajos (work/nombre-del-trabajo.html).
=================================================================== */
/* -------------------------------------------------- portada del proyecto
Las fotos de portada no siempre tienen la proporción del cabezal, así
que en vez de un solo ![]()
con object-fit:cover (que recorta y a
veces "come" lo importante de la imagen) usamos dos capas:
1) __bg -> la misma imagen, cover + blur, de fondo/relleno
2) __img -> la imagen entera, object-fit:contain, siempre completa
Así la imagen nunca se ve cortada, sea cual sea su relación de
aspecto — funciona igual para una foto horizontal o vertical.
Si una imagen puntual necesita otro encuadre, se puede ajustar con
--hero-pos en línea: style="--hero-pos:30% center" en .project-hero. */
/* La altura estaba atada a svh (alto de pantalla). En pantallas
angostas eso arma un cuadro muy alto y flaco (≈1:2), y cualquier
foto normal (3:2, 4:3) queda muy recortada para llenarlo. Atando la
altura al ancho (vw) en vez de al alto de viewport, el recorte es
mucho más suave y consistente en cualquier tamaño de pantalla — no
solo en mobile, también en desktop — y de paso no ocupa una
pantalla entera de scroll en mobile. max-height sigue evitando que
se vuelva gigante en pantallas muy anchas y bajas (landscape). */
.project-hero{
position: relative;
height: clamp(340px, 52vw, 640px);
min-height: 320px;
max-height: 78svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: calc(var(--nav-h) + 20px) clamp(20px, 4vw, 56px) clamp(28px, 5vh, 64px);
overflow: hidden;
background: #101012;
color: var(--hero-fg);
}
.project-hero__media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Capa 1: la misma foto, recortada y con blur, de relleno detrás */
.project-hero__bg{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: var(--hero-pos, center);
filter: blur(34px) saturate(1.15) brightness(.6);
transform: scale(1.15); /* evita ver el borde difuminado del blur */
}
/* Capa 2: la foto, ocupando todo el ancho/alto de la portada.
OJO: esto es un cambio a pedido — se vuelve a "cover" (como en el
CSS original, antes de la técnica de dos capas) para que la foto
llegue de punta a punta de la pantalla. La diferencia con antes es
que la capa __bg de abajo (con blur) queda ahí por si en algún
momento se quiere volver a "contain" (imagen completa, sin recortar)
nada más cambiando esta línea a object-fit:contain. */
.project-hero__img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: var(--hero-pos, center);
}
/* Por si alguna página vieja todavía tuviera un único ![]()
sin las
clases __bg/__img: que al menos no se vea roto. */
.project-hero__media > img:only-child{
object-fit: cover;
object-position: var(--hero-pos, center);
}
.project-hero__scrim{
position: absolute; inset: 0;
background:
linear-gradient(0deg, rgba(10,10,11,.88) 0%, rgba(10,10,11,.15) 45%, rgba(10,10,11,.1) 70%, rgba(10,10,11,.55) 100%);
}
.project-hero__content{ position: relative; z-index: 1; }
.project-back{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-weight: 600;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--hero-mute);
margin: 0 0 clamp(18px, 4vh, 40px);
}
.project-back .mark--arrow{ transform: scaleX(-1); color: var(--accent); }
.project-back:hover{ color: var(--hero-fg); }
.project-back:hover .mark--arrow{ transform: scaleX(-1) translateX(6px); }
.project-eyebrow{
font-family: var(--f-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 14px;
}
.project-title{
margin: 0;
max-width: 20ch;
font-family: var(--f-display);
font-weight: 800;
letter-spacing: -.01em;
text-transform: uppercase;
font-size: clamp(32px, 6vw, 76px);
line-height: 1.05;
}
/* -------------------------------------------------- barra de datos */
.project-meta{
background: var(--paper-2);
padding: clamp(22px, 3.5vh, 34px) clamp(20px, 4vw, 56px);
display: flex;
flex-wrap: wrap;
gap: clamp(24px, 5vw, 64px);
}
.project-meta__item{ min-width: 0; }
.project-meta__item span{
display: block;
font-family: var(--f-mono);
font-weight: 600;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 6px;
}
.project-meta__item p{
margin: 0;
font-family: var(--f-display);
font-weight: 700;
font-size: 15px;
color: var(--ink);
}
/* -------------------------------------------------- cuerpo / intro */
.project-body{
background: var(--paper);
padding: clamp(70px, 5vh, 130px) clamp(20px, 4vw, 56px) clamp(40px, 6vh, 80px);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(30px, 6vw, 90px);
max-width: 1180px;
margin: 0 auto;
}
.project-block__label{
font-family: var(--f-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent-deep);
margin: 0 0 16px;
}
.project-block p{
margin: 0;
font-size: 17px;
line-height: 1.7;
color: var(--mute-dark);
max-width: 46ch;
}
.project-block strong{ color: var(--ink); }
@media (max-width: 780px){
.project-back{ margin-bottom: 14px; }
.project-eyebrow{ margin-bottom: 8px; font-size: 10px; }
.project-title{ font-size: clamp(26px, 8.5vw, 44px); line-height: 1.06; max-width: 17ch; }
.project-body{ grid-template-columns: 1fr; }
}
@media (max-width: 380px){
.project-title{ font-size: 23px; }
}
/* -------------------------------------------------- video embebido */
.project-video{
padding: 0 clamp(20px, 4vw, 56px) clamp(30px, 5vh, 120px);
max-width: 1180px;
margin: 0 auto;
}
.project-video__tag{
display: inline-block;
margin: 0 0 14px;
font-family: var(--f-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent-deep);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: 999px;
padding: 6px 14px;
}
.project-video__frame{
position: relative;
width: 100%;
padding-top: 56.25%;
background: var(--ink);
border-radius: 3px;
overflow: hidden;
}
.project-video__frame iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* Modificador opcional: video en proporción 1:1 en vez del 16:9 por
defecto. Se agrega la clase junto a .project-video__frame en el
HTML de la página que lo necesite (por ahora, Wilson). */
.project-video--square{ padding-top: 100%; }
/* -------------------------------------------------- galería */
.project-gallery-head{
padding: 0 clamp(20px, 4vw, 56px);
max-width: 1180px;
margin: 0 auto clamp(30px, 2vh, 50px);
}
.project-gallery-head p{
margin: 10px 0 0;
font-size: 16px;
line-height: 1.65;
color: var(--mute-dark);
max-width: 56ch;
}
.project-gallery{
padding: 0 clamp(20px, 4vw, 56px) clamp(30px, 5vh, 120px);
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(6px, 1vw, 10px);
}
.project-gallery__item{
position: relative;
aspect-ratio: 1 / 1;
border-radius: 2px;
overflow: hidden;
background:
radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--tint) 55%, transparent) 0%, transparent 55%),
repeating-linear-gradient(135deg, color-mix(in srgb, var(--tint) 75%, #000) 0 2px, color-mix(in srgb, var(--tint) 45%, #000) 2px 4px),
var(--tint);
background-size: cover;
background-position: center;
}
.project-gallery__item img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* Por si algún trabajo lleva el video adentro de la grilla en vez de
en su propia sección (como pidió Villa Memoria, para que un video
vertical no ocupe media pantalla): el iframe se comporta como una
foto más, ocupando el mismo cuadro que las demás. */
.project-gallery__item iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.project-gallery--xsolidaria .project-gallery__item{ aspect-ratio: 4 / 5; }
.project-gallery--xsolidaria .project-gallery__item:nth-child(n+4){ aspect-ratio: 3 / 4; }
.project-gallery--xsolidaria .project-gallery__item img{ object-position: center; }
/* Villa Memoria: mismo mecanismo que x-solidaria de arriba, pero con
la proporción real de sus fotos y su video (3:4, vertical). */
.project-gallery--villamemoria .project-gallery__item{ aspect-ratio: 3 / 4; }
/* Trabajo puntual (Tu casa necesita Montecuir): en vez del cuadrado
1:1 que fuerza a recortar (o a dejar espacio vacío con "contain"),
cada item toma la proporción real de su foto — ni recorte ni
marco, la imagen se ve entera y el cuadro se ajusta a ella. */
.project-gallery--montecuir{ align-items: start; }
.project-gallery--montecuir .project-gallery__item{ aspect-ratio: auto; }
.project-gallery--montecuir .project-gallery__item img{
position: static;
width: 100%;
height: auto;
object-fit: initial;
}
/* Para secciones con pocas fotos (2), como "Repercusiones": en vez de
dejar un tercio de la fila vacío en la grilla de 3 columnas, se
acomodan en 2 columnas más anchas. */
.project-gallery--repercusiones{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-gallery__item span{
position: absolute;
left: 12px; bottom: 12px;
font-family: var(--f-mono);
font-weight: 600;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
@media (max-width: 720px){
.project-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Montecuir: en mobile va en una sola columna, una foto abajo de
la otra, en vez de la grilla de a dos. */
.project-gallery--montecuir{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
.project-gallery{ grid-template-columns: 1fr 1fr; }
.project-gallery--montecuir{ grid-template-columns: 1fr; }
}
/* -------------------------------------------------- crédito */
.project-credit{
padding: 0 clamp(20px, 4vw, 56px) clamp(80px, 12vh, 140px);
max-width: 1180px;
margin: 0 auto;
text-align: center;
}
.project-credit p{
margin: 0;
font-family: var(--f-mono);
font-style: italic;
font-weight: 100;
font-size: 13px;
letter-spacing: .02em;
color: var(--mute);
}
/* -------------------------------------------------- publicaciones y audio */
.project-embed-section{
background: var(--ink);
color: var(--hero-fg);
padding: clamp(64px, 10vh, 120px) clamp(20px, 4vw, 56px);
}
.project-embed-section__head,
.project-tweets,
.project-audio{
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.project-embed-section__head{ margin-bottom: clamp(26px, 4vh, 46px); }
.project-eyebrow-dark{ margin: 0; }
.project-embed-section .project-eyebrow-dark{ color: var(--accent); }
.project-embed-section h2{
margin: 10px 0 0;
max-width: 16ch;
font-size: clamp(30px, 4vw, 52px);
line-height: 1.04;
letter-spacing: -.03em;
text-transform: uppercase;
}
.project-tweets{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 2vw, 24px);
align-items: start;
}
/* Cada columna del grid manda: sea cual sea el embed que caiga adentro
(blockquote crudo o el iframe que X/Instagram inyectan después de
correr su script, cada uno con su propio ancho fijo en px), lo
achicamos/estiramos a ocupar el 100% de su columna. Así las 3
tarjetas quedan siempre parejas en ancho, en vez de que cada
servicio imponga su propia medida. */
.project-tweets > *{
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* Antes de que cargue el script de X (o si no llega a cargar), el