/* ========= Base ========= */
:root{
  --bg:#ffffff; --fg:#0a0a0a;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sk:0deg;
}
*{box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  margin:0; background-color:var(--bg); color:var(--fg);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  transition:background-color 1s var(--ease), color .6s var(--ease);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}
h1,h2,h3,p{margin:0}
::selection{background:var(--fg);color:var(--bg)}

.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.track{position:relative;display:flex;width:max-content;height:100vh;will-change:transform}
.panel{position:relative;flex:none;height:100vh}

/* grano sutil */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* estela de asteriscos que sigue al cursor en el inicio */
.spark-field{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.spark{position:absolute;left:0;top:0;font-family:var(--serif);color:#ff4f45;line-height:1;
  transform:translate(-50%,-50%) scale(.3) rotate(var(--r0,0deg));opacity:.95;will-change:transform,opacity;
  animation:spark-pop .85s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes spark-pop{
  0%{transform:translate(-50%,-50%) scale(.25) rotate(var(--r0,0deg));opacity:.95}
  45%{opacity:.7}
  100%{transform:translate(-50%,-50%) scale(1.2) rotate(var(--r1,40deg));opacity:0}
}
@media (hover:none){.spark-field{display:none}}

/* ========= Nav & HUD ========= */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:2.4vh 2.2vw;color:var(--fg);transition:color .6s var(--ease);pointer-events:none}
.nav>*{pointer-events:auto}
.logo{font-family:var(--serif);font-size:clamp(22px,1.7vw,32px);letter-spacing:-.01em;display:flex;gap:.35em;align-items:center}
.logo i{font-style:normal;display:inline-block;animation:spin 8s linear infinite}
.pills{display:flex;gap:.35rem;padding:.3rem;border-radius:999px;border:1.5px solid currentColor;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 55%,transparent)}
.pills a{padding:.55em 1.1em;border-radius:999px;font-size:clamp(12px,.85vw,15px);font-weight:500;transition:background .3s,color .3s}
.pills a:hover{background:color-mix(in srgb,var(--fg) 14%,transparent)}
.pills a.on{background:var(--fg);color:var(--bg)}
.nav-item{position:relative;display:flex}
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);padding-top:.7rem;
  display:flex;flex-direction:column;gap:.15rem;min-width:11rem;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.nav-drop-in{background:var(--bg);border:1.5px solid currentColor;border-radius:1rem;padding:.4rem;
  display:flex;flex-direction:column;gap:.15rem;box-shadow:0 1.6vh 3vh -1.4vh rgba(0,0,0,.3)}
.nav-item:hover .nav-drop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop a{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:.7em;
  padding:.55em .7em .55em .8em;border-radius:.7rem;font-size:13px;font-weight:500;white-space:nowrap;transition:color .3s}
.nav-drop a::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--c);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.nav-drop a:hover{color:var(--rfg,#fff)}
.nav-drop a:hover::before{transform:scaleY(1)}
.nav-drop a b{font-family:var(--serif);font-weight:400;opacity:.45;font-size:.85em}
.nav-drop a:hover b{opacity:.75}
.nd-thumb{width:1.3em;height:1.3em;border-radius:50%;background:var(--c);flex:none}
.nav-right{display:flex;align-items:center;gap:.5rem}
.cv{font-size:clamp(12px,.85vw,15px);font-weight:600;padding:.7em 1.2em;border-radius:999px;background:var(--fg);color:var(--bg);transition:transform .3s var(--ease)}
.cv:hover{transform:scale(1.06) rotate(-2deg)}
.cv-mobile{display:none}
.lang{font-family:var(--sans);font-size:clamp(12px,.85vw,15px);font-weight:600;padding:.6em 1em .6em .55em;border-radius:999px;
  display:inline-flex;align-items:center;gap:.5em;
  border:1.5px solid currentColor;background:transparent;color:var(--fg);cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease)}
.lang:hover{background:var(--fg);color:var(--bg);transform:scale(1.06)}
.flag{width:1.3em;height:1.3em;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset}
.flag.es{background:linear-gradient(to bottom,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75% 100%)}
.flag.en{background:
    linear-gradient(#c8102e,#c8102e) center/100% 32% no-repeat,
    linear-gradient(#c8102e,#c8102e) center/32% 100% no-repeat,
    linear-gradient(#fff,#fff) center/100% 52% no-repeat,
    linear-gradient(#fff,#fff) center/52% 100% no-repeat,
    #00247d}

.hud{position:fixed;z-index:50;left:0;right:0;bottom:0;display:flex;align-items:center;gap:2vw;
  padding:2.2vh 2.2vw;color:var(--fg);transition:color .6s var(--ease);pointer-events:none;font-size:clamp(11px,.8vw,14px);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.hud-l{display:flex;gap:.8em;min-width:14vw}
.hud-l b{font-family:var(--serif);font-size:1.6em;font-weight:400;line-height:.8;letter-spacing:0}
.hud-bar{flex:1;height:2px;background:color-mix(in srgb,var(--fg) 22%,transparent);border-radius:2px;overflow:hidden}
.hud-bar i{display:block;height:100%;width:100%;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.hud-r{min-width:14vw;text-align:right;transition:opacity .5s}
.hud-r span{display:inline-block;animation:nudge 1.4s var(--ease) infinite}
.hud-r.off{opacity:0}

/* ========= Cursor ========= */
.cursor{position:fixed;z-index:100;left:0;top:0;width:0;height:0;pointer-events:none}
.cursor span{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;mix-blend-mode:difference;
  display:grid;place-items:center;font-size:11px;font-weight:600;color:#3d2415;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
.cursor.big span{width:92px;height:92px;margin:-46px 0 0 -46px;mix-blend-mode:normal;background:#fff;color:#3d2415}
.cursor.big span::after{content:'Ampliar'}
.cursor.link span{width:46px;height:46px;margin:-23px 0 0 -23px}
@media (hover:none){.cursor{display:none}}

/* ========= Reveal helpers ========= */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .3em .34em;margin:-.14em -.3em -.34em}
.split .c{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease) calc(var(--i)*38ms + var(--d,0ms))}
.split.in .c{transform:none}
.split .wd{display:inline-block;transform:translateY(60%);opacity:0;transition:transform 1s var(--ease) calc(var(--i)*35ms),opacity .8s calc(var(--i)*35ms)}
.split.in .wd{transform:none;opacity:1}
.rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rise.in{opacity:1;transform:none}

.kick{display:inline-block;font-size:clamp(12px,.9vw,16px);font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* asteriscos sueltos en el cuerpo del texto: siempre en Instrument Serif */
.ast{font-family:var(--serif);font-style:normal;font-weight:400}
.badge svg tspan.ast-serif{font-family:'Instrument Serif',Georgia,serif}
/* asteriscos de las cintas (marquee): centrados en la línea, no flotando arriba */
.mstar{display:inline-block;transform:translateY(.22em)}

/* ========= Stickers ========= */
.stk{position:absolute;z-index:-1;pointer-events:none;aspect-ratio:1}
.stk svg{width:100%;height:100%;overflow:visible}
.stk .fill{fill:currentColor}
.stk .line{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.stk-slot{display:none}

/* ========= Marquee ========= */
.marquee{position:absolute;left:0;bottom:8vh;width:100%;overflow:hidden;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(28px,6.4vh,72px);font-style:italic;line-height:1;padding-bottom:.22em}
.marquee>div{display:inline-flex;animation:mq 34s linear infinite}
.marquee span{padding-right:.3em}
.marquee.big{left:8vw;width:92vw;font-size:min(10vw,18vh);bottom:2vh;opacity:.22;line-height:.95}
.marquee.big>div{animation-duration:60s}

/* ========= HERO ========= */
.hero{width:100vw}

.hero-year{position:absolute;z-index:4;left:4.6vw;top:9.5vh;font-size:clamp(12px,.9vw,16px);font-weight:600}

.hero-name{position:absolute;z-index:3;left:4.2vw;top:50%;transform:translateY(-56%);font-family:var(--serif);font-weight:400;
  font-size:min(16vw,32vh);line-height:.86;letter-spacing:-.035em;pointer-events:none}
.hero-name .line{display:block}
.hero-name .it{font-style:italic;margin-left:15vw}
.hero-name .c{--d:350ms}

.hero-side{position:absolute;z-index:4;right:6vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  align-items:flex-start;gap:3.4vh;max-width:22vw;padding-left:2.2vw;border-left:1.5px solid currentColor}

.badge{position:relative;width:min(9vw,15vh);aspect-ratio:1;display:grid;place-items:center}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite;fill:currentColor;font-family:var(--sans);font-weight:600;letter-spacing:.06em}
.badge b{font-family:var(--serif);font-size:min(2.4vw,4.4vh);font-weight:400;color:#ff4f45;animation:spin 12s linear infinite reverse}

.hero-tag{font-size:clamp(15px,1.35vw,23px);line-height:1.35;font-weight:300}
.hero-cta{display:inline-flex;align-items:center;gap:.6em;
  padding:.7em 1.4em;border-radius:999px;background:var(--fg);color:var(--bg);font-size:clamp(14px,1.1vw,20px);font-weight:600;transition:transform .4s var(--ease)}
.hero-cta em{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.hero-cta:hover{transform:scale(1.06)}
.hero-cta:hover em{transform:translateX(6px)}

/* ========= INTRO ========= */
.intro{width:96vw}
.intro-in{position:absolute;left:8vw;top:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:4vh;width:100vw}
.statement{font-family:var(--serif);font-size:min(4.8vw,9vh);line-height:1.06;letter-spacing:-.02em;max-width:86vw;white-space:normal}
.statement .hl{color:inherit;padding:0 .18em .04em;border-radius:.5em;display:inline-block;font-style:italic;transform:rotate(-1.4deg)}
.hl.h1{background:#ffd83a}
.hl.h2{background:#ff9ec9;transform:rotate(1.6deg)}
.sub{max-width:27vw;font-size:clamp(15px,1.25vw,23px);line-height:1.4;margin-left:46vw;font-weight:300}

/* ========= WORKS INDEX ========= */
.works{width:96vw;display:flex;align-items:center;padding-left:6vw;gap:5vw}
.works-head{display:flex;flex-direction:column;gap:2vh;flex:none;width:34vw}
.works-head h2{font-family:var(--serif);font-weight:400;font-size:min(7.4vw,14vh);line-height:1.15;letter-spacing:-.03em}
.works-head .count{font-family:var(--serif);font-size:min(4vw,8vh);font-style:italic}
.rows{display:grid;grid-template-columns:36vw;grid-template-rows:repeat(4,auto);gap:0;flex:none}
.row{position:relative;display:grid;grid-template-columns:3.2vw 1fr auto;align-items:center;gap:1.2vw;padding:2.3vh 0;border-top:1.5px solid var(--fg);
  transition:color .4s,padding .5s var(--ease);opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease) calc(var(--i)*90ms),transform 1s var(--ease) calc(var(--i)*90ms),padding .5s var(--ease),color .3s}
.row.in{opacity:1;transform:none}
.row::before{content:'';position:absolute;inset:0 -1.2vw;background:var(--c);border-radius:1.2vw;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:-1}
.row:hover::before{transform:scaleY(1)}
.row:hover{color:var(--rfg,#fff);padding-left:1.2vw;padding-right:1.2vw}
.rn{font-size:clamp(12px,.9vw,16px);font-weight:600}
.rname{font-family:var(--serif);font-size:min(4.6vw,9vh);line-height:.95;letter-spacing:-.02em}
.rname small{display:block;font-family:var(--sans);font-size:clamp(11px,.85vw,15px);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:1.6vh}
.rthumb{position:relative;width:6vh;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--c)}
.rthumb img{width:100%;height:100%;object-fit:cover;opacity:0}

/* ========= CHAPTERS ========= */
.chapter{display:flex;align-items:stretch;padding-right:8vw;overflow:visible}
.ghost{position:absolute;z-index:0;left:0;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:min(44vw,82vh);line-height:.8;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--fg) 20%,transparent);white-space:nowrap;pointer-events:none;user-select:none}
.ch-title{position:relative;z-index:2;flex:none;min-width:60vw;padding:0 4vw 0 6vw;display:flex;flex-direction:column;justify-content:center;gap:3.2vh}
.ch-top{display:flex;align-items:center;gap:1.2vw;flex-wrap:wrap}
.num{font-family:var(--serif);font-size:min(3.2vw,6vh);line-height:.8}
.pill{display:inline-block;padding:.5em 1.1em;border-radius:999px;border:1.5px solid currentColor;font-size:clamp(11px,.85vw,15px);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ch-title h2{font-family:var(--serif);font-weight:400;font-size:min(21vw,38vh);line-height:.86;letter-spacing:-.04em;white-space:nowrap;padding-bottom:.09em}
.ch-desc{display:flex;gap:3vw}
.ch-desc p{max-width:24vw;font-size:clamp(14px,1.08vw,20px);line-height:1.45;font-weight:300}
.ch-desc p:first-child{max-width:27vw}

.gallery{position:relative;z-index:2;display:flex;align-items:flex-start;gap:6vw;padding:0 3vw 0 2vw}
/* pareja de imágenes: en escritorio son transparentes (dos figuras sueltas, sin cambios);
   en móvil se apilan verticalmente para ahorrar scroll (ver media query) */
.pair-wrap{display:contents}
.item{position:relative;flex:none;margin:0;height:var(--h);aspect-ratio:var(--ar);margin-top:var(--top)}
.card{position:relative;width:100%;height:100%;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease);cursor:none;
  border-radius:0;box-shadow:0 2.4vh 5vh -1.6vh rgba(0,0,0,.28)}
.card .mask{width:100%;height:100%;overflow:hidden;border-radius:inherit}
.card img{width:100%;height:100%;object-fit:cover;scale:1.18;transform:skewX(var(--sk));transition:scale .5s var(--ease)}
.item:hover .card img{scale:1.22}
.cap{position:absolute;left:1.2vw;bottom:0;transform:translateY(50%);z-index:3;padding:.55em 1.1em;border-radius:999px;background:var(--fg);color:var(--bg);
  font-size:clamp(11px,.85vw,15px);font-weight:600;letter-spacing:.02em;white-space:nowrap;opacity:0;transition:opacity .8s .6s}
.item.in .cap{opacity:1}

/* mockup de navegador: enseña una web completa (capturada de arriba a abajo)
   dentro de una ventana con su propia barra, y con scroll interno propio
   (real, no simulado) para poder recorrer la página igual que en el navegador */
.browser-mock .card{cursor:default;border-radius:.8vw;overflow:hidden;transform:none!important}
.bmock-bar{position:relative;z-index:2;display:flex;align-items:center;gap:.45vw;padding:1vh 1vw;background:#e7e7ea;border-bottom:1px solid #d7d7da}
.bmock-dot{width:.65vw;height:.65vw;min-width:6px;min-height:6px;border-radius:50%;flex:none}
.bmock-url{margin:0 auto;padding:.35em 2vw;background:#fff;border-radius:999px;font-size:clamp(9px,.68vw,12px);color:#777;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.bmock-screen{position:relative;height:calc(100% - 4.4vh);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;background:#fff}
.bmock-screen::-webkit-scrollbar{width:6px}
.bmock-screen::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:3px}
.bmock-screen img{width:100%;height:auto;display:block;scale:1!important;transform:none!important}
.bmock-hint{position:absolute;left:50%;bottom:1.4vh;transform:translateX(-50%);z-index:2;padding:.4em 1em;border-radius:999px;
  background:rgba(10,10,10,.72);color:#fff;font-size:clamp(9px,.68vw,11px);font-weight:600;letter-spacing:.02em;
  opacity:1;transition:opacity .4s var(--ease);pointer-events:none;white-space:nowrap}
.browser-mock.scrolled .bmock-hint{opacity:0}
/* caption + botón para ir a la web real, uno junto al otro bajo el mockup */
.cap-group{position:absolute;left:1.2vw;bottom:0;transform:translateY(50%);z-index:3;display:flex;align-items:center;gap:.6vw;
  opacity:0;transition:opacity .8s .6s}
.item.in .cap-group{opacity:1}
.cap-group .cap{position:static;transform:none;opacity:1;transition:none}
.cap-link{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:999px;border:1.5px solid currentColor;
  background:var(--bg);color:var(--fg);font-size:clamp(11px,.85vw,15px);font-weight:600;white-space:nowrap;
  transition:background .3s,color .3s,transform .4s var(--ease)}
.cap-link i{font-style:normal;transition:transform .4s var(--ease)}
.cap-link:hover{background:var(--fg);color:var(--bg);transform:translateY(-3px)}
.cap-link:hover i{transform:translate(3px,-3px)}

/* collage: 4 imágenes en cruz (arriba, izquierda, derecha, abajo), cada una a un tamaño distinto,
   completas y sin recortar; se amplía al pasar el cursor */
.collage{position:relative;width:100%;height:100%;overflow:visible;display:grid;
  grid-template-columns:1fr 1.4fr .9fr;grid-template-rows:.9fr 1.4fr 1.1fr;
  grid-template-areas:". top ." "left . right" ". bottom .";gap:1.2vw}
.cage:nth-child(1){grid-area:top}
.cage:nth-child(2){grid-area:left}
.cage:nth-child(3){grid-area:right}
.cage:nth-child(4){grid-area:bottom}
.cage{position:relative;overflow:hidden;cursor:none;z-index:1;box-shadow:0 0 0 rgba(0,0,0,0);
  display:grid;place-items:center;background:var(--bg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),z-index .45s}
.cage .mask{width:100%;height:100%;overflow:hidden;display:grid;place-items:center}
.cage img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.cage:hover{transform:scale(1.24);z-index:5;box-shadow:0 2.4vh 5vh -1.2vh rgba(0,0,0,.32)}
.ccap{position:absolute;left:.6vw;bottom:.6vw;z-index:2;padding:.4em .85em;border-radius:999px;background:var(--fg);color:var(--bg);
  font-size:clamp(10px,.72vw,13px);font-weight:600;white-space:nowrap;opacity:0;transition:opacity .3s}
.cage:hover .ccap{opacity:1}

/* carrusel: varias imágenes en una misma tarjeta, con flechas y puntos */
.card.carousel .mask{position:relative}
.car-track{position:relative;width:100%;height:100%}
.car-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.car-slide.active{opacity:1;pointer-events:auto;z-index:1}
.car-arrow{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:2.6vw;height:2.6vw;min-width:34px;min-height:34px;max-width:46px;max-height:46px;
  border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0a0a0a;font-size:1.3rem;line-height:1;display:grid;place-items:center;
  cursor:pointer;transition:background .3s,transform .3s var(--ease);box-shadow:0 .6vh 1.4vh -.4vh rgba(0,0,0,.25)}
.car-arrow.car-prev{left:1vw}
.car-arrow.car-next{right:1vw}
.car-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1)}
.car-dots{position:absolute;left:0;right:0;bottom:1.4vh;z-index:4;display:flex;justify-content:center;gap:.6vw}
.car-dot{width:7px;height:7px;border-radius:50%;border:1.5px solid #fff;background:rgba(255,255,255,.4);padding:0;cursor:pointer;
  transition:background .3s,transform .3s var(--ease);box-shadow:0 .2vh .6vh rgba(0,0,0,.2)}
.car-dot.on{background:#fff;transform:scale(1.2)}

.tblock{position:relative;flex:none;width:23vw;margin-top:var(--top);padding:3vh 1.6vw;border-radius:1.2vw;
  display:flex;flex-direction:column;gap:2vh;background:var(--bg);color:var(--fg);border:1.5px solid currentColor;
  box-shadow:0 2vh 4vh -1.5vh rgba(0,0,0,.25)}
.tblock .kick{align-self:flex-start;padding:.4em .9em;border-radius:999px;background:var(--fg);color:var(--bg);letter-spacing:.1em}
.tblock p{font-size:clamp(14px,1.08vw,20px);line-height:1.45;font-weight:300}
.tblock.big{width:29vw}
.tblock p.serif{font-family:var(--serif);font-size:min(2.4vw,4.4vh);line-height:1.05}

.next{position:relative;z-index:2;flex:none;align-self:center;margin-left:2vw;width:min(8vw,15vh);aspect-ratio:1;border-radius:50%;background:var(--fg);color:var(--bg);
  display:grid;place-items:center;text-align:center;font-size:clamp(12px,.95vw,17px);font-weight:600;line-height:1.25;transition:transform .5s var(--ease)}
.next:hover{transform:scale(1.12) rotate(-6deg)}
.next span{display:inline-flex;align-items:center;gap:.4em}

/* ========= ABOUT ========= */
.about{width:106vw;display:flex;align-items:center;padding-left:7vw;gap:6vw}
.about-photo{position:relative;flex:none;height:78vh;aspect-ratio:1489/1800;z-index:2}
.about-photo .mask{width:100%;height:100%;overflow:hidden;border-radius:2vw;box-shadow:0 3vh 6vh -2vh rgba(0,0,0,.3)}
.about-photo img{width:100%;height:100%;object-fit:cover;scale:1.15;transform:skewX(var(--sk))}
.about-photo .tag{position:absolute;right:-2vw;bottom:8vh;padding:.6em 1.2em;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:600;font-size:clamp(12px,.9vw,16px);transform:rotate(-6deg)}
.about-text{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;gap:3.6vh;width:64vw}
.about-text h2{font-family:var(--serif);font-weight:400;font-size:min(5.8vw,11vh);line-height:.98;letter-spacing:-.03em;max-width:60vw}
.cols{display:flex;flex-direction:column;width:100%;max-width:42vw}
.cols p{font-size:clamp(14px,1.15vw,21px);line-height:1.5;font-weight:300;margin-bottom:2vh}
.cols p:last-child{margin:0}

.btns{display:flex;gap:1vw;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.7em;padding:.85em 1.6em;border-radius:999px;border:1.5px solid currentColor;font-size:clamp(13px,1vw,18px);font-weight:600;transition:background .3s,color .3s,transform .4s var(--ease)}
.btn i{font-style:normal;transition:transform .4s var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg);transform:translateY(-3px)}
.btn:hover i{transform:translateX(4px)}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{background:transparent;color:var(--fg)}

/* ========= CONTACT ========= */
.contact{width:79vw}
.contact-in{position:absolute;left:8vw;top:0;height:100%;width:68vw;display:flex;flex-direction:column;justify-content:center;gap:4vh;z-index:2}
.contact-in h2{font-family:var(--serif);font-weight:400;font-size:min(9vw,17vh);line-height:.9;letter-spacing:-.04em;white-space:normal;max-width:100vw}
.contact-in h2 em{font-style:italic;color:#ff9ec9}
.contact-in .btn{font-size:clamp(12px,.85vw,15px);padding:.7em 1.3em}
.mail{font-family:var(--serif);font-style:italic;font-size:min(3.2vw,6vh);display:inline-flex;gap:.3em;align-items:baseline;width:fit-content;
  background-image:linear-gradient(currentColor,currentColor);background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease)}
.mail:hover{background-size:0 2px;background-position:100% 100%}
.copy{font-size:clamp(12px,.9vw,16px);font-weight:600;opacity:.8}
.contact .btn:hover{background:var(--fg);color:var(--bg)}

/* ========= Lightbox ========= */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,12,10,.88);backdrop-filter:blur(8px);display:grid;place-items:center;padding:4vh 4vw;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;border-radius:0;animation:pop .5s var(--ease)}
.lightbox button{position:absolute;top:3vh;right:3vw;width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:18px;cursor:pointer}

/* ========= Keyframes ========= */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes nudge{50%{transform:translateX(8px)}}
@keyframes pop{from{transform:scale(.92);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .badge svg,.badge b,.logo i,.marquee>div{animation:none}
}

/* ========= Móvil / vertical (pase básico) ========= */
@media (max-aspect-ratio:1/1){
  .pills{display:none}
  .nav{padding:2vh 5vw}
  .nav-right{gap:.4rem}
  .cv-desktop{display:none}
  .cv-mobile{display:inline-block}
  .hud-l{min-width:0}.hud-r{min-width:0}

  /* héroe: la ficha circular pasa a ir a la derecha del nombre, y debajo del
     nombre va directamente el eslogan + botón (hero-side se hace transparente
     para poder colocar cada hijo por su cuenta) */
  .hero{width:100vw}
  .hero-year{top:17vh}
  .hero-name{position:absolute;top:22vh;transform:none;font-size:min(23vw,15vh)}
  .hero-side{display:contents}
  .badge{position:absolute;z-index:4;right:6vw;top:25vh;width:min(21vw,14vh);border-left:0;padding-left:0}
  .hero-tag{position:absolute;left:4.2vw;top:50vh;max-width:78vw;font-size:15px}
  .hero-cta{position:absolute;left:4.2vw;top:64vh}
  .marquee{bottom:15vh}

  /* diseño gráfico: cabía de sobra en una sola pantalla, sin que el resaltado se saliera */
  .intro{width:100vw}
  .intro-in{width:88vw;left:6vw;gap:5.5vh}
  .statement{font-size:min(8.6vw,6.6vh);line-height:1.08;max-width:88vw}
  .sub{max-width:88vw;margin-left:0;font-size:15px}

  /* trabajos: la palabra "seleccionados" ya no se recorta */
  .works-head h2{font-size:min(11vw,7vh)}.works-head{width:84vw;gap:3vh}
  .works{width:210vw}.rows{grid-template-columns:84vw}
  .rname{font-size:min(9vw,6vh)}.row{grid-template-columns:8vw 1fr auto;padding:3vh 0}.rthumb{width:12vw}

  .ch-title{min-width:100vw;padding:0 6vw;gap:4.5vh}
  .ch-title h2{font-size:min(30vw,20vh)}
  .ch-desc{flex-direction:column;gap:2.4vh}.ch-desc p,.ch-desc p:first-child{max-width:82vw;font-size:13px}
  /* algunas imágenes grandes se ven mejor un poco más pequeñas en móvil
     (no toca el tamaño en escritorio, que ya estaba bien calibrado) */
  .item[data-src*="rollup-eeg"]{height:45vh}
  .item[data-src*="Filmoteca-medidas-2"]{height:38vh}
  .item[data-src*="Bubble-medidas.jpg"]{height:46vh}
  .item[data-tk-car="ibercaja.car1"]{height:42vh}
  .item[data-tk-car="bitbrain.car2"]{height:36vh}
  .item[data-tk-car="bubble.car3"]{height:44vh}
  /* mockup de navegador: en móvil se ajusta al ancho de pantalla (en vez de
     ser más ancho, como en escritorio) para poder recorrerlo solo con el
     scroll vertical interno, sin tener que desplazarse también en horizontal */
  .browser-mock{width:88vw;height:auto;aspect-ratio:1.4}
  /* recuadros de texto montados sobre su imagen: al ser las imágenes más
     pequeñas en móvil, el margen negativo que las monta encima hay que
     recalcularlo aquí (el de escritorio no se toca) */
  .tblock:has(.kick[data-tk="ibercaja.k2"]){margin-left:-72vw !important;margin-top:48vh !important}
  .tblock:has(.kick[data-tk="bitbrain.k6"]){margin-left:-70vw !important;margin-top:45vh !important}
  .tblock:has(.kick[data-tk="bubble.k1"]){margin-left:-72vw !important;margin-top:48vh !important}
  .tblock:has(.kick[data-tk="filmoteca.k3"]){margin-left:-72vw !important;margin-top:48vh !important}
  /* todos los proyectos: las imágenes quedan centradas verticalmente (mismo
     margen arriba y abajo), en vez del escalonado que se usa en escritorio */
  #c-ibercaja .gallery, #c-bitbrain .gallery,
  #c-bubble .gallery, #c-filmoteca .gallery{align-items:center}
  #c-ibercaja .item, #c-ibercaja .pair-wrap,
  #c-bitbrain .item, #c-bubble .item, #c-bubble .pair-wrap,
  #c-filmoteca .item{margin-top:-7vh}
  /* más aire entre el nombre/descripción del proyecto y la primera imagen */
  .gallery{gap:22vw;padding-left:12vw}
  /* la pareja de imágenes (p.ej. Flyer informativo + Instagram stories) se apila
     en vertical en vez de ir una al lado de otra, para ahorrar recorrido de scroll */
  .pair-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:9vw;flex:none;margin-top:var(--top)}
  .pair-wrap .item{height:23vh;margin-top:0 !important}
  .tblock{width:74vw;padding:3.5vh 5vw;border-radius:4vw}.tblock.big{width:80vw}.tblock p{font-size:12px}
  .next{width:min(22vw,12vh);margin-left:4vw}
  .car-arrow{width:9vw;height:9vw;min-width:34px;min-height:34px;max-width:40px;max-height:40px}
  .car-dots{bottom:1.2vh}

  /* Sobre mí: primera pantalla con el titular y la foto en grande; en la
     siguiente, los 3 párrafos van uno encima de otro, seguidos, con los
     botones alineados debajo */
  .about{width:210vw;display:block;align-items:unset;padding-left:0}
  .about-photo{position:absolute;left:calc(50vw - 17.35vh);top:33vh;height:42vh;width:34.7vh}
  .about-text{display:contents}
  .about-text h2{position:absolute;left:50vw;transform:translateX(-50%);top:20vh;width:90vw;max-width:90vw;text-align:center;font-size:min(8.5vw,5.8vh);line-height:1.1}
  .about-text .kick{position:absolute;left:5vw;top:78vh;width:90vw}
  .about-text .btns{position:absolute;left:102vw;top:61vh;width:96vw;flex-wrap:nowrap;gap:1.5vw}
  .about-text .btns .btn{padding:.6em 1em;font-size:11px}
  /* los 3 párrafos, uno encima de otro, seguidos, a tamaño más pequeño */
  .cols{position:absolute;left:102vw;top:36vh;width:96vw;max-width:96vw;display:flex;flex-direction:column;gap:1.4vh}
  .cols p{font-size:12.5px;line-height:1.4;margin-bottom:0}

  /* contacto: título y botones ya no se salen de la pantalla */
  .contact{width:100vw}
  .contact-in{width:88vw;left:6vw;gap:5.5vh}
  .marquee.big{left:6vw;width:88vw;bottom:12vh}
  .contact-in h2{font-size:min(12.5vw,8vh);line-height:1.05;max-width:88vw}
  .mail{font-size:min(6.5vw,4.4vh);flex-wrap:wrap}
  .btns{max-width:88vw}

  .card,.cage{cursor:auto}
  /* táctil: sin hover real, así que las leyendas se ven siempre (los círculos de
     la lista de proyectos se quedan solo con el color, igual que en escritorio) */
  .ccap{opacity:1}
  /* en pantallas estrechas la cruz se aprieta demasiado: 2x2 simple */
  .collage{gap:1.6vw;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"top right" "left bottom"}
}