/* Layout: un lienzo de partículas fijo cuenta la historia; encima, escenas de pantalla completa con textos pequeños a máquina.
   Crema #f0eeeb y casi negro: el fondo oscuro lo forman las propias partículas. Un solo mundo, elegido a propósito. */
:root{
  --crema:#F0EEEB;
  --tinta:#1E1C1A;
  --suave:#8A837D;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--crema);color:var(--tinta);font-family:var(--mono);font-size:max(12px,1.2vh);line-height:1.55;-webkit-font-smoothing:antialiased}
#fondo{position:fixed;inset:0;z-index:0;background:var(--crema)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
#cur{position:fixed;left:0;top:0;z-index:50;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;display:none;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1)}
#cur.grande{width:44px;height:44px;margin:-22px 0 0 -22px}
body.con-cursor #cur{display:block}
body.con-cursor,body.con-cursor a,body.con-cursor button{cursor:none}
#gl.golpe{animation:golpe .38s cubic-bezier(.3,.7,.4,1)}
@keyframes golpe{0%{transform:translate(0,0)}15%{transform:translate(0,9px)}35%{transform:translate(-4px,-5px)}55%{transform:translate(3px,3px)}75%{transform:translate(-1px,-1px)}100%{transform:none}}

.nav{position:fixed;top:calc(4.6vh + env(safe-area-inset-top,0px));right:4vw;z-index:10;display:flex;gap:26px;mix-blend-mode:difference}
.nav a{color:#fff;text-decoration:none;font-size:max(11px,1.15vh);display:inline-flex;align-items:flex-start;gap:3px}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.ast{display:inline-block;width:.62em;height:.6em;flex:none}
.ast path{fill:currentColor}
:focus-visible{outline:2px solid #8A837D;outline-offset:4px}

main{position:relative;z-index:3}
main.fluido{mix-blend-mode:difference}
main.fluido .mezcla{mix-blend-mode:normal}
.sec{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;padding:0 24px}
.oscuro{color:var(--crema)}
.txt{margin:0;font-size:max(12px,1.2vh);letter-spacing:.02em;max-width:60ch;text-align:center;min-height:1.6em}
.txt-responsive{max-width:none;white-space:nowrap!important}
@media (max-width:700px){.txt-responsive{white-space:pre!important;font-size:12px;min-height:3.1em}}
.caret::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:currentColor;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.col{display:flex;flex-direction:column;align-items:center;gap:2.2vh}
.pill{font-family:var(--mono);font-size:max(11px,1.1vh);letter-spacing:.03em;color:var(--tinta);background:var(--crema);border:0;border-radius:99px;padding:max(5px,.55vh) max(18px,2.2vh);cursor:pointer;text-decoration:none;display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .8s}
.pill:hover{transform:scale(1.05)}
.nota{position:absolute;font-size:max(11px,1.15vh);line-height:1.3;display:flex;gap:4px;align-items:flex-start;margin:0}
.nota .ast{margin-top:.1em}
.mezcla{mix-blend-mode:difference;color:#fff}
.fila{display:flex;font-size:max(12px,1.2vh);gap:min(12vw,180px);flex-wrap:wrap;justify-content:center;text-align:left}
.fila p{margin:0}
.fila a{color:inherit}
#btn-final{opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
#btn-final.ver{opacity:1;pointer-events:auto;transform:none}
#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;background:var(--tinta);color:var(--crema);padding:8px 16px;border-radius:99px;font-size:12px;transition:opacity .4s;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Portfolio: lámina crema sobre fondo oscuro. Rejilla de marcos negros gruesos (los de la maqueta) que se dibujan al abrir;
   cada proyecto se abre dentro de la misma lámina con título grande a máquina, vídeo, créditos y galería. */
#pf{position:fixed;inset:0;z-index:40;background:#1F1E1D;visibility:hidden;opacity:0;transition:opacity .5s ease,visibility 0s .9s}
#pf.abierto{visibility:visible;opacity:1;transition:opacity .45s ease}
.pf-lam{position:absolute;inset:max(12px,1.3vw);background:var(--crema);border-radius:max(14px,1.15vw);overflow:hidden;
  transform:translateY(104%);transition:transform .9s cubic-bezier(.7,0,.2,1)}
#pf.abierto .pf-lam{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) .08s}
.pf-scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.pf-scroll::-webkit-scrollbar{display:none}
.pf-vista{transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pf-vista.fuera{opacity:0;transform:translateY(18px)}
.pf-vista.pf-contacto{min-height:100%;display:flex;align-items:center;justify-content:center;padding:72px 24px;text-align:center}
.pf-email{color:var(--tinta);font-size:clamp(14px,2.4vw,36px);text-decoration:none}
.pf-email:hover{text-decoration:underline;text-underline-offset:.2em}
.pf-x{position:absolute;z-index:5;top:max(18px,2.1vw);right:max(18px,2.1vw);width:max(22px,1.6vw);height:max(22px,1.6vw);border:0;background:none;padding:0;color:var(--tinta);cursor:pointer;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pf-x:hover{transform:rotate(90deg)}
.pf-x svg{width:100%;height:100%;display:block}
.pf-cab{display:flex;align-items:center;gap:10px;padding:calc(max(28px,5.4vh) + max(30px,3.6vh)) 7.1% 0;font-size:max(11px,1.15vh);letter-spacing:.04em}
.pf-tit{margin:0;font-size:inherit;font-weight:400}
.pf-vol{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.pf-vol:hover{text-decoration:underline;text-underline-offset:4px}
.pf-cab .sep{color:var(--suave)}
.pf-rej{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:max(16px,1.75vw);padding:max(40px,6vh) 7.1% max(60px,12vh)}
.pf-c{position:relative;aspect-ratio:485/455;max-width:100%;display:block;color:var(--tinta);text-decoration:none}
.pf-c.ancho{grid-column:span 2;aspect-ratio:auto}
.pf-c svg.marco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.pf-c rect{fill:none;stroke:var(--tinta);stroke-width:5;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 0s .9s}
#pf.abierto .pf-c rect{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1) var(--d)}
.pf-c .med{position:absolute;inset:2px;overflow:hidden;background:#e4e0db}
.pf-c .med img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.08);transition:opacity .9s ease var(--d),transform 1.6s cubic-bezier(.2,.8,.2,1) var(--d)}
#pf.abierto .pf-c .med img{opacity:1;transform:scale(1.001)}
#pf.abierto .pf-c:hover .med img{transform:scale(1.045);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pf-c .eti{position:absolute;left:10%;top:30%;z-index:3;display:flex;gap:4px;align-items:flex-start;font-size:max(11px,1.1vh);line-height:1.3;background:var(--crema);padding:3px 8px 4px 6px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.pf-c .eti .ast{margin-top:.18em}
.pf-c:hover .eti,.pf-c:focus-visible .eti{opacity:1;transform:none}
@media (hover:none){.pf-c .eti{opacity:1;transform:none;top:auto;bottom:12px;left:12px}}

/* proyecto */
.pr{padding:max(36px,5vh) 0 max(60px,10vh)}
.pr-cab{padding:0 7.1%;display:grid;gap:max(14px,2vh)}
.pr-cat{margin:0;display:flex;gap:4px;font-size:max(11px,1.15vh);color:var(--suave)}
.pr-tit{margin:0;font-family:var(--mono);font-weight:500;font-size:clamp(38px,7.2vw,132px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.pr-tit span{display:block}
.pr-tit span+span{padding-left:.9em}
.pr-vids{display:grid;gap:max(16px,1.75vw);padding:max(36px,6vh) 7.1% 0}
.pr-vid{position:relative;display:block;border:5px solid var(--tinta);aspect-ratio:16/9;max-width:100%;overflow:hidden;color:var(--tinta);background:#e4e0db}
.pr-vid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .6s}
.pr-vid:hover img{transform:scale(1.035);filter:brightness(.82)}
.pr-vid .pill{white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;gap:8px;align-items:center;padding:9px 20px 10px;font-size:max(12px,1.25vh)}
.pr-vid:hover .pill{transform:translate(-50%,-50%) scale(1.06)}
.pr-vid .pill svg{width:.75em;height:.75em;fill:currentColor}
.pr-extra{padding:16px 7.1% 0;margin:0;font-size:max(11px,1.15vh)}
.pr-extra a{color:inherit;display:inline-flex;gap:4px}
.pr-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:max(32px,6vw);padding:max(44px,7vh) 7.1% 0;align-items:start}
.pr-cr{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;font-size:max(11px,1.12vh);line-height:1.4}
.pr-cr div{min-width:0}
.pr-cr dt{color:var(--suave)}
.pr-cr dd{margin:0;overflow-wrap:anywhere}
.pr-cr.uno{grid-template-columns:1fr}
.pr-txt{display:grid;gap:max(26px,3.6vh);min-width:0}
.pr-txt h4{margin:0 0 8px;font-weight:500;font-size:max(13px,1.5vh);display:flex;gap:5px;align-items:flex-start}
.pr-txt h4 .ast{margin-top:.2em}
.pr-txt p{margin:0;max-width:48ch;font-size:max(12px,1.35vh);line-height:1.65}
.pr-gal{columns:3;column-gap:max(16px,1.75vw);padding:max(48px,8vh) 7.1% 0}
.pr-gal figure{margin:0 0 max(16px,1.75vw);break-inside:avoid;border:5px solid var(--tinta);background:#e4e0db;overflow:hidden}
.pr-gal img{display:block;width:100%;height:auto}
.pr-sig{margin:max(60px,10vh) 7.1% 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:max(20px,3vw);align-items:end;color:var(--tinta);text-decoration:none;border-top:5px solid var(--tinta);padding-top:max(22px,3vh)}
.pr-sig small{display:flex;gap:4px;font-size:max(11px,1.15vh);color:var(--suave);margin-bottom:10px}
.pr-sig strong{display:block;font-weight:500;font-size:clamp(26px,4vw,70px);line-height:.95;letter-spacing:-.04em;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pr-sig:hover strong{transform:translateX(14px)}
.pr-sig .mini{width:clamp(90px,14vw,220px);aspect-ratio:485/455;border:5px solid var(--tinta);overflow:hidden}
.pr-sig .mini img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pr-sig:hover .mini img{transform:scale(1.07)}
@media (max-width:900px){.pf-rej{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-c.ancho{aspect-ratio:2.196}.pr-gal{columns:2}.pr-info{grid-template-columns:1fr}}
@media (max-width:560px){.pf-rej{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.pf-c.ancho{grid-column:auto;aspect-ratio:485/455}
  .pf-cab,.pr-cab,.pr-vids,.pr-info,.pr-gal,.pr-extra{padding-left:16px;padding-right:16px}.pr-sig{margin-left:16px;margin-right:16px}.pr-gal{columns:1}.pr-cr{gap:10px 16px}}
@media (prefers-reduced-motion:reduce){.pf-lam,#pf.abierto .pf-lam,.pf-vista{transition:none}.pf-c rect{stroke-dashoffset:0!important;transition:none!important}.pf-c .med img{opacity:1!important;transform:none!important}}
@media (max-width:700px){.nav{right:18px;gap:18px}.nota{font-size:12px}}
@media (prefers-reduced-motion:reduce){.caret::after{animation:none}}