/* ============================================================
PAOLA HARO — PORTFOLIO
Sistema: Helvetica Neue · escala grises · dos tintas
============================================================ */
:root{
--ink:#101010;
--paper:#F7F7F7;
--dark:#1C1C1C; /* loading */
--g-70:rgba(16,16,16,.70);
--g-48:rgba(16,16,16,.48);
--g-30:rgba(16,16,16,.30);
--line:rgba(16,16,16,.20);
--line-soft:rgba(16,16,16,.10);
--p-70:rgba(247,247,247,.70);
--p-48:rgba(247,247,247,.48);
--p-line:rgba(247,247,247,.22);
--p-line-soft:rgba(247,247,247,.12);
--sans:"Helvetica Neue",Helvetica,"Arial Nova",Arial,sans-serif;
--pad:clamp(20px,3.4vw,56px);
--ease:cubic-bezier(.22,1,.36,1);
--nav-h:74px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
/* las flechas del sitio son tipografía, no emoji de color (iOS) */
font-variant-emoji:text;
background:var(--paper); color:var(--ink);
font-family:var(--sans); font-weight:400;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
body{padding-top:env(safe-area-inset-top, 0px)} /* la franja del reloj en iPhone */
body.is-loading{overflow:hidden}
::selection{background:var(--ink); color:var(--paper)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
ul{list-style:none}
/* grain */
body::after{
content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.028;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- ESCALA TIPOGRÁFICA ---------- */
.t-display-xl{font-size:clamp(40px,6.4vw,92px); line-height:.98; letter-spacing:-.02em; font-weight:700; text-transform:uppercase}
.t-display{font-size:clamp(32px,5vw,68px); line-height:1.02; letter-spacing:-.015em; font-weight:700}
.t-h1{font-size:clamp(27px,3.7vw,50px); line-height:1.1; letter-spacing:-.01em; font-weight:600}
.t-h2{font-size:clamp(28px,3.2vw,40px); line-height:1.15; letter-spacing:-.005em; font-weight:600}
.t-h3{font-size:clamp(18px,1.7vw,24px); line-height:1.3; font-weight:600}
.t-body-l{font-size:clamp(18px,1.6vw,22px); line-height:1.45}
.t-body{font-size:clamp(16px,1.2vw,17px); line-height:1.6}
.t-body-s{font-size:clamp(13px,1vw,14px); line-height:1.55}
.t-label{font-size:11px; line-height:1.4; letter-spacing:.24em; text-transform:uppercase}
.t-nav{font-size:11px; line-height:1; letter-spacing:.24em; text-transform:uppercase}
.g{color:var(--g-48)}
/* ---------- LOADER ---------- */
#loader{
position:fixed; inset:0; z-index:9999; background:var(--dark); color:var(--paper);
display:flex; flex-direction:column; align-items:center; justify-content:center;
transition:transform 1s var(--ease);
}
#loader.done{transform:translateY(-101%)}
#loader .l-name{
font-size:clamp(38px,7.6vw,104px); font-weight:700; letter-spacing:-.02em; line-height:1;
display:flex; overflow:hidden;
}
#loader .l-name span{
display:inline-block; transform:translateY(105%);
animation:lIn .95s var(--ease) forwards;
}
#loader .l-sub{
font-size:11px; letter-spacing:.42em; text-transform:uppercase; font-weight:300;
color:var(--p-48); margin-top:20px; opacity:0;
animation:lFade .8s var(--ease) .55s forwards;
}
@keyframes lIn{to{transform:translateY(0)}}
@keyframes lFade{to{opacity:1}}
/* clon que viaja del loader al nav */
#logo-fly{
position:fixed; z-index:10000; pointer-events:none; font-weight:700;
letter-spacing:-.02em; line-height:1; color:var(--paper);
transition:transform 1s var(--ease), color .6s var(--ease), font-size 1s var(--ease), letter-spacing 1s var(--ease);
}
/* ---------- NAV ----------
Barra sólida en color papel: antes iba en `mix-blend-mode:difference` y al
pasar sobre imágenes con mucho contraste el menú se perdía. */
.nav{
position:fixed; top:env(safe-area-inset-top, 0px); left:0; right:0; z-index:900; height:var(--nav-h);
display:flex; align-items:flex-start; justify-content:space-between;
padding:22px var(--pad) 0; color:var(--ink);
background:var(--paper); border-bottom:1px solid var(--line-soft);
}
/* tapa la franja del reloj y la señal: env() no siempre se aplica y ahí se
colaba la imagen de la página por detrás del menú */
.nav::before{
content:""; position:absolute; left:0; right:0; bottom:100%; height:200px;
background:var(--paper); pointer-events:none;
}
.nav a,.nav button{color:var(--ink)}
.nav-logo{font-size:12px; font-weight:700; letter-spacing:.1em; line-height:1; text-transform:uppercase; white-space:nowrap}
.nav-logo.hidden{opacity:0}
.nav-right{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav-right a,.nav-right button{
font-size:11px; letter-spacing:.24em; text-transform:uppercase; position:relative; padding-bottom:3px;
}
.nav-right a::after{
content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.nav-right a:hover::after,.nav-right a.active::after{transform:scaleX(1); transform-origin:left}
.nav-tool{border:1px solid rgba(16,16,16,.30); padding:5px 9px !important; transition:background .35s,color .35s}
.nav-tool:hover{background:var(--ink); color:var(--paper)}
.nav-burger{display:none}
/* Flechas del sitio. Son SVG y no caracteres: iOS dibujaba ↗ ↓ ← → como emoji
de color, incluso forzando la variante de texto. */
.fl{
width:1em; height:1em; display:inline-block; vertical-align:-.13em;
fill:none; stroke:currentColor; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round;
}
.rail-nav .fl,.pv .fl,.nx .fl{width:1.1em; height:1.1em; vertical-align:-.2em}
.scroll .fl{width:.9em; height:.9em}
/* descarga en marcha: el botón no cambia de tamaño, sólo avisa */
a.bajando{position:relative; opacity:.45; cursor:progress}
a.bajando::before{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
background:currentColor; transform-origin:left;
animation:cargando 1.1s var(--ease) infinite;
}
@keyframes cargando{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1); opacity:0}}
/* ---------- CURSOR ---------- */
#cursor{
position:fixed; top:0; left:0; width:9px; height:9px; z-index:9997; pointer-events:none;
border-radius:50%; background:#fff; border:1px solid transparent;
mix-blend-mode:difference; transform:translate(-50%,-50%); opacity:0;
transition:width .45s var(--ease), height .45s var(--ease),
background .45s var(--ease), border-color .45s var(--ease), opacity .3s;
}
#cursor.on{opacity:1}
#cursor.big{width:46px; height:46px; background:transparent; border-color:#fff}
@media(hover:none){#cursor{display:none}}
/* ---------- ESTRUCTURA ---------- */
.sec{padding:0 var(--pad)}
.sec-head{
display:flex; justify-content:space-between; align-items:baseline;
border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:clamp(32px,5vw,72px);
}
.sec-head .b{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48)}
.sec-head .n{font-size:11px; letter-spacing:.24em; color:var(--g-30)}
/* reveal genérico */
[data-rev]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
[data-rev].in{opacity:1; transform:none}
/* reveal por palabra — párrafos y títulos grandes usan el mismo gesto */
.words .wd, .anim-title .wd{
display:inline-block; opacity:.28;
transition:opacity .55s var(--ease);
}
.anim-title .wd{white-space:nowrap}
.words .wd.lit, .anim-title .wd.lit{opacity:1}
/* línea que se dibuja */
.rule{height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease)}
.rule.in{transform:scaleX(1)}
/* ---------- 01 · HERO ----------
Tres capas, como en la referencia:
· línea 2 detrás del retrato (z 0)
· retrato (z 1)
· líneas 1 y 3 encima en mix-blend-mode:difference (z 2) — sobre el papel
se leen negras y al cruzar la foto se invierten: el efecto de rayos X. */
.hero{height:100svh; display:flex; flex-direction:column; position:relative; overflow:hidden}
.hero-type{flex:1; display:flex; flex-direction:column; justify-content:center; gap:.5vw; position:relative}
.hero-line{
white-space:nowrap; overflow:hidden; font-weight:700;
font-size:clamp(44px,15.5vw,260px); line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
position:relative;
padding:.14em 0; margin:-.14em 0; /* deja respirar acentos y Ñ sin alterar el ritmo */
}
.hero-line .track{display:inline-block; will-change:transform}
.hero-line.xray{z-index:2; mix-blend-mode:difference; color:#fff}
.hero-line.mid{z-index:0; color:var(--g-30)}
/* la foto va completa, sin recortar. Su altura se mide en em de la misma
escala que las líneas: 1.65em la deja justo por debajo del centro de la
primera línea y por encima del centro de la tercera */
.hero-portrait{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
font-size:clamp(44px,15.5vw,260px);
height:1.65em; z-index:1;
filter:grayscale(1) contrast(1.05);
}
.hero-portrait img{height:100%; width:auto; max-width:none; display:block}
.hero-bar{
display:flex; justify-content:space-between; align-items:center; gap:16px;
padding:0 var(--pad) 22px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48);
}
.hero-bar .mark{width:26px; height:1px; background:var(--g-30)}
.tabnum{font-variant-numeric:tabular-nums}
/* ---------- 02 · ABOUT ---------- */
.about-home{padding-top:clamp(80px,12vw,180px); padding-bottom:0}
.about-home .big{
margin-bottom:clamp(22px,3vw,40px);
font-size:clamp(36px,4.2vw,60px); line-height:1.02;
}
.about-home p{max-width:40ch; font-weight:400}
.about-foot{
display:flex; justify-content:flex-end; align-items:center;
margin-top:clamp(34px,5vw,66px);
}
.disc{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48)}
.btn{
display:inline-flex; align-items:center; gap:14px; border:1px solid var(--ink);
padding:13px 22px; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
position:relative; overflow:hidden; transition:color .45s var(--ease);
}
.btn span{position:relative; z-index:2}
.btn::before{
content:""; position:absolute; inset:0; background:var(--ink);
transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
/* ---------- 03 · FEATURED ---------- */
.featured{
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; position:relative;
padding:clamp(180px,24vw,345px) var(--pad);
}
.featured .title{
font-size:clamp(32px,5.2vw,74px); font-weight:700; letter-spacing:-.02em; line-height:1;
text-transform:uppercase; white-space:nowrap;
}
.featured .title .w{display:inline-block; overflow:hidden; vertical-align:bottom}
.featured .title .w i{display:inline-block; font-style:normal; transform:translateY(105%); transition:transform 1s var(--ease)}
.featured .title.in .w i{transform:none}
/* el indicador queda justo debajo del título, a la misma distancia
a la que estaba el rango de años por encima */
.featured .scroll{
margin-top:clamp(20px,3vw,40px);
font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48);
display:flex; align-items:center; gap:10px;
}
.featured .scroll em{font-style:normal; animation:bob 2.2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* ---------- 04 · CATEGORIES ---------- */
.cats{border-top:1px solid var(--line)}
.cat{
display:grid; grid-template-columns:26% 1fr 13%; align-items:stretch;
border-bottom:1px solid var(--line); height:clamp(120px,15vw,190px);
transition:height .7s var(--ease); position:relative; overflow:hidden;
}
.cats:hover .cat{height:clamp(104px,12.5vw,158px)}
.cats .cat:hover{height:clamp(150px,20vw,270px)}
.cat-name{padding:22px var(--pad); display:flex; flex-direction:column; justify-content:center; gap:5px}
.cat-name b{font-weight:600; font-size:clamp(19px,2.2vw,31px); letter-spacing:-.005em; line-height:1.1}
.cat-name em{font-style:normal; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48)}
.cat-media{position:relative; overflow:hidden; background:rgba(16,16,16,.05)}
/* la imagen de categoría va siempre a color */
.cat-media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform 1.2s var(--ease);
}
.cat:hover .cat-media img{transform:scale(1.04)}
/* encuadre por categoría: cada foto tiene su punto de interés */
#cats .cat:nth-child(1) .cat-media img{object-position:center 42%}
#cats .cat:nth-child(2) .cat-media img{object-position:center 90%}
#cats .cat:nth-child(3) .cat-media img{object-position:center 50%}
#cats .cat:nth-child(4) .cat-media img{object-position:center 45%}
.cat-meta{
display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad) 0 20px;
font-size:11px; letter-spacing:.24em; color:var(--g-48);
}
.cat-meta .arw{transition:transform .5s var(--ease)}
.cat:hover .cat-meta .arw{transform:translate(5px,-5px)}
/* ---------- 05 · CAPABILITIES ---------- */
.caps{padding-top:clamp(70px,10vw,140px); padding-bottom:clamp(70px,10vw,140px)}
.caps-grid{display:grid; grid-template-columns:1fr; gap:0}
.cap{
display:grid; grid-template-columns:44px 1fr 1.1fr; gap:20px; align-items:start;
border-top:1px solid var(--line-soft); padding:20px 0; transition:padding .5s var(--ease);
}
.cap:last-child{border-bottom:1px solid var(--line-soft)}
.cap:hover{padding:28px 0}
.cap .i{font-size:11px; letter-spacing:.24em; color:var(--g-30); padding-top:6px}
.cap h4{font-size:clamp(18px,2vw,26px); font-weight:600; letter-spacing:-.005em}
.cap p{color:var(--g-48); max-width:46ch}
/* ---------- FOOTER ---------- */
.footer{
background:transparent; color:var(--paper); padding:clamp(70px,10vw,130px) var(--pad) 22px;
display:flex; flex-direction:column; min-height:88svh; justify-content:space-between;
position:relative; isolation:isolate;
}
/* cortina: el negro sube conforme el footer entra en pantalla */
.footer::before{
content:""; position:absolute; inset:0; background:var(--ink); z-index:-1;
transform:scaleY(var(--curtain,0)); transform-origin:bottom;
}
.footer > *{position:relative}
.footer .big{
margin-bottom:clamp(30px,5vw,60px);
font-size:clamp(34px,5.6vw,82px); line-height:1; letter-spacing:-.02em; white-space:nowrap;
}
.footer .big .sq{display:inline-block; width:.11em; height:.11em; background:currentColor; vertical-align:baseline; margin-left:.06em}
.footer .lines{border-top:1px solid var(--p-line); padding-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer .lines a,.footer .lines span{font-size:clamp(15px,2.1vw,30px); font-weight:300; letter-spacing:-.01em}
.footer .lines .r{color:var(--p-48)}
.footer .lines a{position:relative}
.footer .lines a::after{content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.footer .lines a:hover::after{transform:scaleX(1); transform-origin:left}
.footer-bot{
display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
border-top:1px solid var(--p-line-soft); margin-top:clamp(40px,7vw,90px); padding-top:20px;
font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--p-48);
}
.footer-bot .soc{display:flex; gap:22px}
.footer-bot a:hover{color:var(--paper)}
.copied{opacity:0; transition:opacity .3s}
.copied.on{opacity:1}
/* ---------- PORTFOLIO ---------- */
.work-hero{
padding:calc(var(--nav-h) + clamp(50px,9vw,110px)) var(--pad) clamp(30px,5vw,60px);
display:flex; flex-direction:column; justify-content:flex-end;
}
.catblock{min-height:100svh; display:flex; flex-direction:column; border-top:1px solid var(--line); padding-bottom:clamp(24px,4vw,44px)}
.rail-wrap{flex:1; display:flex; align-items:center; overflow:hidden; cursor:grab; padding:clamp(24px,4vw,52px) 0}
.rail-wrap.grabbing{cursor:grabbing}
.rail{display:flex; gap:clamp(12px,1.6vw,26px); will-change:transform}
.rail .card{flex:0 0 auto; position:relative; overflow:hidden; background:rgba(16,16,16,.05)}
.rail .card img,.rail .card .ph{width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .6s var(--ease), transform 1s var(--ease)}
.rail .card:hover img,.rail .card:hover .ph{filter:grayscale(0); transform:scale(1.03)}
.card-cap{
position:absolute; left:0; right:0; bottom:0; padding:12px 14px; color:#fff;
background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease),transform .45s var(--ease);
font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
}
.card:hover .card-cap{opacity:1; transform:none}
.catblock-foot{
display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
padding:0 var(--pad);
}
.catblock-foot .t{font-size:clamp(25px,3.6vw,52px); font-weight:700; letter-spacing:-.02em; text-transform:uppercase; line-height:.95}
.catblock-foot .r{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48); text-align:right; line-height:2}
/* placeholder */
.ph{
background:
linear-gradient(to top right,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)),
linear-gradient(to bottom right,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)),
rgba(16,16,16,.045);
width:100%; height:100%;
}
/* ---------- PROYECTO ---------- */
.pj-hero{height:74svh; position:relative; overflow:hidden; margin-top:0}
/* el encuadre de cada portada lo calcula assets/js/focos.py */
.pj-hero img[style*='object-position']{object-position:var(--foco)}
.pj-hero img,.pj-hero .ph{width:100%; height:100%; object-fit:cover; filter:grayscale(1)}
/* la portada del manual va a color: es parte del trabajo, no una foto de apoyo */
.pj-hero.color img{filter:none}
.pj-head{padding:clamp(34px,5vw,64px) var(--pad) 0; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:end}
.pj-head .pj-cat{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48); margin-bottom:14px}
.pj-facts{
display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 clamp(20px,4vw,60px);
padding:clamp(34px,5vw,60px) var(--pad) 0;
}
.pj-facts div{border-top:1px solid var(--line); padding:14px 0}
.pj-facts dt{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48); margin-bottom:7px}
.pj-facts dd{font-size:clamp(15px,1.3vw,17px)}
.pj-intro{padding:clamp(40px,6vw,90px) var(--pad); max-width:60ch}
.pj-body{padding:0 var(--pad) clamp(50px,8vw,110px)}
/* en social no hay ficha técnica entre el título y las piezas:
el aire lo pone el propio cuerpo */
.pj-body.suelto{padding-top:clamp(52px,8vw,120px)}
.feed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(4px,.6vw,10px); max-width:920px; margin:0 auto}
.feed-grid .cell{aspect-ratio:4/5; overflow:hidden; background:rgba(16,16,16,.05); cursor:pointer}
.feed-grid img,.feed-grid .ph{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.feed-grid .cell:hover img{transform:scale(1.04)}
.reels{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:clamp(10px,1.4vw,20px); margin-top:clamp(34px,5vw,64px)}
.reels .cell{aspect-ratio:9/16; overflow:hidden; background:rgba(16,16,16,.05)}
.reels video,.reels img,.reels .ph{width:100%; height:100%; object-fit:cover}
.bb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(10px,1.4vw,22px)}
.bb-grid .cell{aspect-ratio:var(--pr,16/9); overflow:hidden; background:rgba(16,16,16,.05); cursor:pointer; border:1px solid var(--line-soft)}
.bb-grid img,.bb-grid .ph{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.bb-grid .cell:hover img{transform:scale(1.03)}
.swatches{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line)}
.swatches div{flex:1 1 100px; min-height:96px; display:flex; align-items:flex-end; padding:10px}
.swatches span{font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.print-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1.2vw,18px); grid-auto-rows:minmax(120px,15vw)}
.print-grid .cell{overflow:hidden; background:rgba(16,16,16,.05); cursor:pointer}
.print-grid img,.print-grid .ph{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.print-grid .cell:hover img{transform:scale(1.04)}
.browser{border:1px solid var(--line); overflow:hidden}
.browser .bar{display:flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:1px solid var(--line-soft)}
.browser .bar i{width:7px; height:7px; border-radius:50%; background:var(--line); display:block}
.browser .bar span{font-size:11px; letter-spacing:.18em; color:var(--g-48); margin-left:10px}
/* el sitio recorre su altura completa, sin depender de cuánto mida */
.browser .view{
aspect-ratio:16/10; overflow:hidden; position:relative;
background-size:100% auto; background-repeat:no-repeat; background-position:center top;
animation:scrollsite 34s linear infinite alternate;
}
@keyframes scrollsite{from{background-position:center top}to{background-position:center bottom}}
.browser .view .ph{width:100%; height:100%}
.pj-next{
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
border-top:1px solid var(--line); padding:clamp(30px,5vw,60px) var(--pad);
}
.pj-next .l{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48); margin-bottom:10px}
.pj-next .n{font-size:clamp(23px,3.3vw,46px); font-weight:700; letter-spacing:-.02em; text-transform:uppercase; line-height:1}
/* lightbox */
#lb{
position:fixed; inset:0; z-index:9500; background:rgba(16,16,16,.96);
display:none; align-items:center; justify-content:center; padding:clamp(20px,5vw,70px);
}
#lb.on{display:flex}
#lb img{max-width:100%; max-height:86svh; object-fit:contain}
#lb .ph{width:min(80vw,900px); aspect-ratio:16/9}
#lb .cl{position:absolute; top:22px; right:calc(var(--pad)); color:var(--paper); font-size:11px; letter-spacing:.24em; text-transform:uppercase}
#lb .ct{position:absolute; bottom:22px; left:var(--pad); color:var(--p-48); font-size:11px; letter-spacing:.24em; text-transform:uppercase}
#lb .nx,#lb .pv{position:absolute; top:50%; transform:translateY(-50%); color:var(--paper); font-size:22px; padding:20px; opacity:.6}
#lb .nx:hover,#lb .pv:hover{opacity:1}
#lb .pv{left:6px} #lb .nx{right:6px}
/* ---------- ABOUT ---------- */
/* La imagen sangra a todo lo ancho y el texto se monta sobre su tercio blanco */
.ab-hero{position:relative; padding:calc(var(--nav-h) + clamp(20px,3vw,44px)) 0 clamp(40px,6vw,80px)}
/* la proporción va aquí para que el hueco de la imagen exista desde el primer
pintado: sin esto la página entra con el hero colapsado y salta al cargar */
.ab-foto img{width:100%; height:auto; display:block; aspect-ratio:1800/1013}
.ab-texto{
position:absolute; left:var(--pad); top:50%; transform:translateY(-46%);
/* la zona blanca de la imagen llega al 32%: el texto tiene que terminar antes */
width:min(calc(30% - var(--pad)), 430px); z-index:2;
}
.ab-texto h1{font-size:clamp(24px,3.1vw,46px); font-weight:700; line-height:1.02;
letter-spacing:-.01em; text-transform:uppercase}
.ab-texto p{margin-top:clamp(16px,1.8vw,26px)}
.ab-statement{padding:clamp(50px,8vw,110px) var(--pad); border-top:1px solid var(--line)}
.ab-statement p{max-width:38ch; font-weight:600; margin-bottom:1em}
.ab-approach{padding:0 var(--pad) clamp(60px,9vw,120px); display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(24px,3vw,50px)}
.ab-approach .i{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48); border-top:1px solid var(--line); padding-top:14px; margin-bottom:12px}
.ab-approach h4{font-size:clamp(19px,2vw,26px); font-weight:600; margin-bottom:10px}
.ab-approach p{color:var(--g-48)}
.ab-cols{padding:0 var(--pad) clamp(60px,9vw,120px); display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(24px,3vw,50px)}
.ab-cols h5{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--g-48); margin-bottom:14px}
.ab-cols li{border-top:1px solid var(--line-soft); padding:11px 0; font-size:clamp(15px,1.3vw,17px)}
.ab-cols ul.dos{columns:2; column-gap:clamp(16px,2vw,30px)}
.ab-cols ul.dos li{break-inside:avoid}
.ab-cv{
padding:clamp(50px,8vw,100px) var(--pad); border-top:1px solid var(--line);
display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
/* ---------- LÍNEA DE TIEMPO (About) ---------- */
/* Rail al centro con una punta que avanza con el scroll y va encendiendo los años.
El movimiento va ligado al scroll, no a un temporizador. */
.tl{position:relative; margin-top:clamp(60px,10vw,140px); padding-bottom:8vh}
.tl-rail,.tl-prog{position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; pointer-events:none}
.tl-rail{height:100%; background:var(--line)}
.tl-prog{height:0; background:var(--ink); z-index:2}
.tl-tip{position:absolute; bottom:0; left:50%; width:5px; height:5px; margin-bottom:-2.5px;
background:var(--ink); transform:translateX(-50%) rotate(45deg)}
/* 20 columnas con el canal 10-11 libre: por ahí pasan el rail y los años */
.tl-grid{display:grid; grid-template-columns:repeat(20,1fr); align-items:center}
.tl-item{grid-row:var(--row); grid-column:var(--col) / span 9; justify-self:var(--js,start);
width:min(100%,44ch); margin-bottom:clamp(70px,12vh,150px); will-change:opacity,transform}
.tl-item .tl-name{font-size:clamp(20px,2.1vw,28px); font-weight:600; line-height:1.1;
border-top:1px solid var(--line); padding-top:16px}
.tl-item .tl-role{font-size:11px; letter-spacing:.24em; line-height:1.7; text-transform:uppercase; color:var(--g-48); margin-top:10px}
.tl-item .tl-desc{color:var(--g-48); margin-top:14px}
.tl-year{grid-row:var(--row); grid-column:1 / -1; justify-self:center; align-self:center;
margin-bottom:clamp(70px,12vh,150px); position:relative; z-index:3;
background:var(--paper); padding:8px 0; line-height:1;
font-size:clamp(17px,2vw,26px); font-weight:600; color:var(--g-30);
opacity:.35; transition:opacity .25s ease}
.tl-year.on{opacity:1; color:var(--ink)}
/* ---------- CONTACT ---------- */
.ct-page{background:var(--ink); color:var(--paper); min-height:100svh; display:flex; flex-direction:column}
/* la barra se mantiene clara también sobre la página negra de contacto */
.ct-main{
flex:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,90px);
padding:calc(var(--nav-h) + clamp(40px,6vw,80px)) var(--pad) clamp(30px,4vw,60px); align-items:center;
}
.ct-left .big{
margin-bottom:clamp(26px,4vw,50px);
font-size:clamp(27px,4.2vw,58px); line-height:1.04; letter-spacing:-.02em;
/* sin text-wrap:balance — el JS parte el título en palabras y el balance deja
de aplicar, así que lo único que hacía era recolocarlo en el primer pintado */
}
.ct-left .lines{border-top:1px solid var(--p-line); padding-top:20px}
.ct-left .lines a{display:block; font-size:clamp(16px,2vw,28px); font-weight:300; margin-bottom:8px}
.ct-left .lines a.r{color:var(--p-48)}
.ct-form label{display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--p-48); margin-bottom:8px}
.ct-form .f{margin-bottom:clamp(18px,2.4vw,30px)}
.ct-form input,.ct-form textarea,.ct-form select{
width:100%; background:none; border:none; border-bottom:1px solid var(--p-line);
color:var(--paper); font-family:var(--sans); font-size:16px; padding:6px 0 10px; outline:none;
transition:border-color .4s var(--ease);
}
.ct-form select option{background:var(--ink)}
/* el desplegable se veía con el relieve del sistema: se quita esa apariencia
y la flecha se dibuja aparte, para que iguale a los demás campos */
.ct-form select{
-webkit-appearance:none; appearance:none; border-radius:0;
padding-right:26px; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 2px center;
}
.ct-form select:focus{
background-image:url("data:image/svg+xml;utf8,");
}
.ct-form textarea{resize:vertical; min-height:70px}
.ct-form input:focus,.ct-form textarea:focus,.ct-form select:focus{border-color:var(--paper)}
.ct-form button{
width:100%; border:1px solid var(--paper); padding:15px; font-size:11px; letter-spacing:.24em;
text-transform:uppercase; position:relative; overflow:hidden; transition:color .45s var(--ease);
}
.ct-form button::before{content:""; position:absolute; inset:0; background:var(--paper); transform:translateY(101%); transition:transform .5s var(--ease)}
.ct-form button:hover{color:var(--ink)} .ct-form button:hover::before{transform:translateY(0)}
.ct-form button span{position:relative; z-index:2}
.ct-page .footer-bot{padding:20px var(--pad); margin:0; border-top:1px solid var(--p-line-soft)}
/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
.cat{grid-template-columns:1fr; height:auto}
.cats:hover .cat,.cats .cat:hover{height:auto}
.cat-media{aspect-ratio:16/9}
.cat-meta{padding:14px var(--pad)}
.cap{grid-template-columns:34px 1fr; gap:14px}
.cap p{grid-column:2}
/* en pantalla chica no hay sitio para montar el texto: va debajo de la imagen.
La pieza se agranda y sangra a los lados para que se lea "detrás de cada
diseño" sin que parezca una estampita en medio de la hoja. */
.ab-hero{padding-left:0; padding-right:0}
/* la pieza ya ocupa todo el ancho: sangrarla más sacaba la página de cuadro */
.ab-texto{position:static; width:auto; transform:none; padding:clamp(26px,5vw,40px) var(--pad) 0}
/* el hero de proyecto se queda en la proporción de la foto, sin recortar de lado */
.pj-hero{height:auto; aspect-ratio:4/3}
/* Portafolio: cada banda ocupaba una pantalla entera y las piezas quedaban
flotando en medio de un hueco enorme. En el teléfono la banda mide lo que
miden sus piezas. */
/* en el teléfono sobraba media pantalla de aire alrededor del titular */
.featured{padding:clamp(90px,22vw,150px) var(--pad)}
.about-home{padding-top:clamp(60px,14vw,110px)}
.catblock{min-height:0}
.rail-wrap{padding:16px 0}
.catblock-foot{padding-top:14px}
/* en pantalla táctil no hay hover: el nombre del proyecto se ve siempre */
.card-cap{opacity:1; transform:none}
.cats .cat-name em{opacity:1}
.ct-main{grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 40px)}
.pj-head{grid-template-columns:1fr}
.print-grid{grid-template-columns:repeat(2,1fr)}
.print-grid .cell{grid-column:auto !important; grid-row:auto !important}
.featured .title{white-space:normal}
.ab-cv{grid-template-columns:1fr}
}
@media(max-width:640px){
/* en pantalla chica el hero sube de escala para que el bloque de texto
y el retrato guarden la misma relación que en desktop */
.hero-line, .hero-portrait{font-size:22vw}
.nav-right .lnk{display:none}
.nav-burger{display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase}
.nav.open .lnk{display:block}
.nav.open{flex-direction:column; height:auto; background:var(--paper); color:var(--ink); padding-bottom:22px; gap:18px}
.nav.open .nav-right{flex-direction:column; align-items:flex-start; gap:14px}
.feed-grid{max-width:100%}
.footer{min-height:auto; padding-bottom:26px}
.footer .lines{flex-direction:column; gap:6px}
.footer-bot{margin-top:clamp(34px,10vw,60px)}
/* la línea se recorre por un costado y todo queda en una sola columna */
.ab-cols ul.dos{columns:1}
.tl-rail,.tl-prog{left:0; transform:none}
.tl-grid{display:block}
/* ojo: Chromium hace caso a justify-self también fuera del grid → hay que anularlo */
.tl-item{margin-bottom:52px; padding-left:26px; width:auto; justify-self:stretch;
opacity:1 !important; transform:none !important}
.tl-year{display:block; margin:0 0 12px; padding:0 0 0 26px; background:none; opacity:1;
justify-self:stretch}
.tl-year::before{content:""; position:absolute; left:-2.5px; top:50%; width:5px; height:5px;
margin-top:-2.5px; background:var(--ink); transform:rotate(45deg)}
}
/* ---------- PRINT ---------- */
@media print{
body::after,#cursor,#loader,.nav,.hero-bar .mark{display:none !important}
body{background:#fff}
}
/* badge de carrusel en el feed */
.feed-grid .cell{position:relative}
.car-badge{
position:absolute; top:8px; right:8px; z-index:2;
min-width:20px; height:20px; padding:0 6px; border-radius:10px;
background:rgba(16,16,16,.72); color:#fff; backdrop-filter:blur(6px);
font-size:10px; letter-spacing:.06em; display:flex; align-items:center; justify-content:center;
}
/* el cuadrito de cierre viaja pegado a la última palabra del título */
.big .wd:last-of-type{margin-right:.06em}
.big .sq{margin-left:0}
/* ---------- FLECHAS DEL CARRUSEL ---------- */
.rail-wrap{position:relative}
.rail-nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:5;
width:52px; height:52px; border-radius:50%;
border:1px solid var(--line); background:rgba(247,247,247,.82);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
font-size:15px; line-height:1; color:var(--ink);
display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .4s var(--ease), background .35s var(--ease),
color .35s var(--ease), border-color .35s var(--ease);
}
.rail-wrap:hover .rail-nav{opacity:1}
.rail-nav:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.rail-nav.prev{left:clamp(12px,2vw,28px)}
.rail-nav.next{right:clamp(12px,2vw,28px)}
/* en táctil no hay hover: se muestran siempre */
@media(hover:none){
.rail-nav{opacity:1; width:44px; height:44px}
}
/* banda sin ciclo: las piezas se muestran centradas y completas */
.rail-wrap.static{overflow-x:auto; cursor:default; scrollbar-width:none}
.rail-wrap.static::-webkit-scrollbar{display:none}
.rail-wrap.static .rail{justify-content:center; min-width:100%; padding:0 var(--pad)}
/* ---------- TIRA DE REELS Y STORIES ----------
Conservan su tamaño original, pero en una tira que se arrastra en lugar
de mostrarse todas de golpe. Se duplica al doble exacto para el ciclo. */
.vstrip{
margin-top:clamp(20px,3vw,34px); position:relative; cursor:grab;
/* la tira se extiende hasta el borde de la ventana para que las flechas
queden en la orilla, con su propio margen para no tocar las piezas */
margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
--sep:clamp(74px,7.6vw,132px); /* franja libre a los lados */
--btn:52px; /* diámetro de la flecha */
padding:0 var(--sep);
}
.vwin{overflow:hidden}
.vstrip.grabbing{cursor:grabbing}
.vrail{display:flex; gap:clamp(10px,1.4vw,20px); will-change:transform}
.vrail .cell{
flex:0 0 auto; width:clamp(240px,27vw,395px); aspect-ratio:9/16;
overflow:hidden; background:rgba(16,16,16,.05);
}
.vrail video,.vrail img,.vrail .ph{width:100%; height:100%; object-fit:cover}
/* en el visor del manual la hoja se ve entera, sin recortar un milímetro */
.bb-visor .vrail img{object-fit:contain}
@media(max-width:640px){
.vstrip{--sep:56px; --btn:38px; padding:0 var(--sep);
margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1)}
.vstrip .rail-nav{width:var(--btn); height:var(--btn)}
.vrail .cell{width:58vw}
}
/* las flechas de la tira vertical están siempre visibles, en su propio margen */
.vstrip .rail-nav{opacity:1; left:auto; right:auto}
/* la flecha queda centrada en la franja libre, ni pegada al borde ni a la pieza */
.vstrip .rail-nav.prev{left:calc((var(--sep) - var(--btn)) / 2)}
.vstrip .rail-nav.next{right:calc((var(--sep) - var(--btn)) / 2)}
/* ---------- LÍNEAS DE CARRUSEL (proyecto con carruseles completos) ---------- */
.fstrip{margin-bottom:clamp(14px,2vw,26px)}
.fstrip .vrail .cell{
width:clamp(190px,21vw,330px); aspect-ratio:4/5; cursor:pointer;
}
@media(max-width:640px){ .fstrip .vrail .cell{width:58vw} }
/* tira vertical que respeta la proporción original de sus piezas */
.vstrip.libre .vrail .cell{aspect-ratio:var(--ratio); width:clamp(210px,24vw,340px)}
@media(max-width:640px){ .vstrip.libre .vrail .cell{width:62vw} }
/* línea fina que separa tipos de contenido dentro de un proyecto */
.divisor{height:1px; background:var(--line); margin:clamp(48px,7vw,96px) 0 clamp(26px,4vw,44px)}
/* Visor del manual: páginas grandes, una a una. El alto se limita a lo que
queda de pantalla bajo el menú, si no la página no cabe entera y el menú le
come el borde de arriba. El ancho sale de ese alto por su proporción, así que
la hoja se ve completa: ni recortada ni deformada. */
.vstrip.libre.bb-visor .vrail .cell{
--alto-visor:min(calc(78svh - var(--nav-h)), calc(84vw / var(--ratio)));
height:var(--alto-visor);
width:calc(var(--alto-visor) * var(--ratio));
max-width:min(84vw, 1180px);
aspect-ratio:auto;
cursor:pointer;
}
@media(max-width:640px){
.vstrip.libre.bb-visor .vrail .cell{
--alto-visor:min(calc(70svh - var(--nav-h)), calc(88vw / var(--ratio)));
max-width:88vw;
}
}
/* ---------- PIEZAS DE PAPELERÍA AGRUPADAS ----------
Cada tarjeta en su fila; las caras comparten altura y su ancho es
proporcional al formato real, así ninguna se recorta. */
.piezas{display:flex; flex-direction:column; gap:clamp(14px,2.2vw,30px)}
.pieza-fila{display:flex; gap:clamp(10px,1.4vw,20px); align-items:flex-start}
.pieza{min-width:0; cursor:pointer; overflow:hidden}
.pieza img{width:100%; height:auto; display:block; transition:transform 1s var(--ease)}
.pieza:hover img{transform:scale(1.02)}
.pieza-fila.sola{max-width:100%}
@media(max-width:640px){
.pieza-fila{flex-direction:column}
.pieza{flex:none !important; width:100%}
}
/* carrusel de pósters: todos comparten altura y su ancho sale de su formato,
así los roll-ups conviven con los pósters sin deformarse */
/* misma presencia que las tiras de reels y stories */
.pstrip{--alto:clamp(430px,72vh,780px)}
.pstrip .vrail .cell{flex:0 0 auto; height:var(--alto); aspect-ratio:auto; cursor:pointer}
.pstrip .vrail .cell img{width:100%; height:100%; object-fit:contain; display:block}
@media(max-width:640px){ .pstrip{--alto:62vh} }
/* el sitio se muestra a ancho completo, como si se estuviera viendo */
.browser.ancho{width:100%}
.browser.ancho .view{aspect-ratio:16/9}
@media(max-width:640px){ .browser.ancho .view{aspect-ratio:4/3} }