:root{
  --bg:#000; --bg2:#1b1b1b; --ink:#f1ece8; --mute:#8c8680; --line:#333;
  --brick:#c2342a; --brick2:#e5483b; --rail:64px;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter Tight",Inter,system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--brick2);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:var(--bg);padding:8px 12px}
.skip:focus{left:calc(var(--rail) + 8px)}
main,.foot{margin-left:var(--rail)}

/* ---------- Barra lateral ---------- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:60;background:var(--bg);border-right:1px solid rgba(241,236,232,.12);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0}
.rail__logo{display:block;width:40px;height:40px;transition:opacity .3s}
.rail__logo svg{display:block;width:100%;height:100%}
.rail__burger{width:40px;height:56px;display:flex;gap:7px;justify-content:center;align-items:center}
.rail__burger span{width:1px;height:28px;background:var(--ink);transition:transform .45s cubic-bezier(.7,0,.2,1),height .45s}
.rail__burger[aria-expanded=true] span:first-child{transform:translateX(4px) rotate(45deg)}
.rail__burger[aria-expanded=true] span:last-child{transform:translateX(-4px) rotate(-45deg)}
.rail__wa{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.rail__wa:hover,.rail__logo:hover{opacity:.7}

/* ---------- Menú pantalla completa ---------- */
.menu{position:fixed;inset:0 0 0 var(--rail);z-index:55;display:grid;grid-template-columns:minmax(0,30%) 1fr;background:var(--brick)}
.menu[hidden]{display:none}
.menu.is-open .menu__panel>*{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
.menu.is-open .menu__media{animation:wipe .8s cubic-bezier(.7,0,.2,1) both}
.menu__media{position:relative;overflow:hidden}
.menu__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s,transform 1.2s}
.menu__media img.is-on{opacity:1;transform:none}
.menu__panel{padding:clamp(24px,5vw,40px) clamp(24px,8vw,120px);display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.menu__brand{font:400 20px/1.1 var(--serif);margin:0}
.menu__brand small{font:300 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.menu__main{list-style:none;margin:6vh 0;padding:0}
.menu__main a{font:400 clamp(38px,6.2vw,76px)/1.06 var(--serif);text-decoration:none;color:rgba(239,228,210,.38);transition:color .35s}
.menu__main a:hover,.menu__main a:focus-visible,.menu__main a.is-on{color:var(--ink)}
.menu__foot{display:flex;gap:clamp(24px,8vw,120px);flex-wrap:wrap;font:400 17px/1.7 var(--serif)}
.menu__sub{list-style:none;margin:0;padding:0}
.menu__sub a,.menu__touch a{text-decoration:none;display:block}
.menu__sub a:hover,.menu__touch a:hover{text-decoration:underline}
.menu__touch p{font:300 13px var(--sans);opacity:.75;margin:0 0 4px}
@keyframes up{from{opacity:0;transform:translateY(24px)}}
.menu__panel>*:nth-child(2){animation-delay:.08s!important}.menu__panel>*:nth-child(3){animation-delay:.16s!important}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---------- Hero (patrón Dieste) ---------- */
.hero{height:250vh;position:relative;overflow-x:clip;padding:0}
/* En iPhone la barra de Safari aparece y desaparece: la foto usa el alto grande (lvh) para no dejar franja negra y el texto el alto visible (svh) para no quedar tapado */
:root{--vh:100vh;--vhl:100vh}
@supports (height:100svh){:root{--vh:100svh;--vhl:100lvh}}
.hero__stick{position:sticky;top:0;height:var(--vhl);overflow:hidden}
.hero__frame{position:absolute;inset:0;transform:scale(var(--s,1));transform-origin:50% 45%;will-change:transform}
.hero__frame img{width:100%;height:100%;object-fit:cover}
.hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.18) 32%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.5))}
/* Espaciado de eladiodieste.com: margen lateral 1,34vw; nombre recortado a la altura de mayúsculas, a dos márgenes de arriba y de abajo */
.hero__over{--hpad:max(16px,1.34vw);position:absolute;inset:0 0 auto;height:var(--vh);text-shadow:0 1px 14px rgba(0,0,0,.45);pointer-events:none;padding:0 var(--hpad);display:flex;align-items:center}
.hero__name{position:absolute;inset:0 var(--hpad);margin:0;font:400 20vw/.727 var(--sans);letter-spacing:-.075em;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--hpad)*2) 0 calc(.24em + var(--hpad))}
.hero__name span{display:block;will-change:transform}
.hero__name span:first-child{transform:translateX(var(--x1,0))}
.hero__name span:last-child{align-self:flex-end;text-align:right;transform:translateX(var(--x2,0))}
.hero__nav{position:relative;width:100%;opacity:var(--o,1);pointer-events:auto}
.hero__line{height:1px;background:rgba(241,236,232,.7);transform-origin:left;animation:line 1.4s cubic-bezier(.7,0,.2,1) both}
.hero__nav ul{list-style:none;margin:0;padding:4px 0 0;display:flex;justify-content:space-between;font-size:14px;font-weight:500}
.hero__nav a{text-decoration:none;display:inline-flex;align-items:center;gap:.5em}
.hero__nav a::before{content:"";width:.6em;height:.6em;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hero__nav a:hover::before,.hero__nav a.is-on::before{transform:scale(1)}
@keyframes line{from{transform:scaleX(0)}}
.hero+.intro{position:relative;z-index:2;margin-top:calc(var(--vhl)*-1);background:var(--bg)}

/* ---------- Bloques ---------- */
section{padding:clamp(64px,10vw,140px) var(--pad)}
.rule{height:1px;background:var(--ink);width:0;transition:width 1.4s cubic-bezier(.7,0,.2,1);margin-bottom:clamp(28px,4vw,56px)}
.is-in .rule,.rule.is-in{width:min(50%,720px)}
.display{font:400 clamp(48px,8.4vw,122px)/1 var(--sans);margin:0 0 clamp(32px,5vw,72px);letter-spacing:-.05em}
.intro__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,5vw,80px);max-width:1100px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.56}
.intro__cols p{margin:0}
/* Texto que se rellena al hacer scroll (patrón Dieste #vida) */
.fill{font:400 clamp(34px,4.6vw,66px)/1.08 var(--sans);letter-spacing:-.045em;margin:0;max-width:1500px}
.fill .w{color:rgba(241,236,232,var(--a,.16));transition:color .25s linear}
.fill-side{max-width:520px;margin:clamp(48px,8vw,120px) 0 0 auto;font-size:clamp(17px,1.4vw,19.5px);line-height:1.56}
.quote{margin:clamp(64px,10vw,140px) 0 0;max-width:1000px}
.quote p:not(.fill){font:400 clamp(28px,3.6vw,52px)/1.1 var(--sans);letter-spacing:-.035em;margin:0}
.quote cite{display:block;margin-top:24px;font:300 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-style:normal}
.lead{color:var(--mute);margin:-32px 0 28px}

/* ---------- Trayectoria ---------- */
.tray__body{display:grid;grid-template-columns:minmax(240px,4fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start;max-width:1400px}
.tray__foto{margin:0;position:sticky;top:clamp(24px,6vh,64px)}
.tray__foto img{display:block;width:100%;height:auto;aspect-ratio:1100/1243;object-fit:cover;filter:grayscale(1)}
.tray__foto figcaption{margin-top:10px;font:300 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.tray__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,4vw,64px) clamp(24px,5vw,80px);max-width:1200px}
.tray__c h3,.hitos b{font:300 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.tray__c p{margin:0;font-size:clamp(16px,1.3vw,18px)}
.hitos{list-style:none;margin:clamp(56px,8vw,112px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-top:1px solid var(--line)}
.hitos li{padding:24px 24px 0 0}
.hitos b{display:block;font:400 clamp(24px,2.4vw,34px)/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.hitos span{color:var(--mute);font-size:14px}

/* ---------- Obra (tarjeta) ---------- */
.obra{display:block;text-align:left;width:100%}
.obra__img{display:block;overflow:hidden;background:var(--bg2)}
.obra__rv{display:block;height:100%;overflow:hidden}
.obra{position:relative}
.obra__img img{width:100%;height:auto;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.obra:hover .obra__img img,.obra:focus-visible .obra__img img{transform:scale(1.05)}
.obra__cap{display:flex;justify-content:space-between;gap:16px;padding-top:10px;font-size:14px}
.obra__t{font-weight:500;letter-spacing:-.01em}
/* Pie de foto sobre la imagen, abajo a la derecha (patrón Dieste) */
.obra--trio .obra__cap{position:absolute;right:16px;bottom:12px;left:16px;padding:0;justify-content:flex-end;gap:12px;font-size:15px;font-weight:500;color:rgba(241,236,232,.85);filter:drop-shadow(0 6px 18px #000);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.obra--trio .obra__m{color:inherit;opacity:.8}
.obra--trio .obra__img{position:relative}
.obra--trio .obra__img::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.obra--trio .obra__cap{z-index:1}
/* Proyectos en desarrollo: tarjetas grandes con pie sobre la imagen */
.rec__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(16px,2vw,28px)}
.obra--rec .obra__img{position:relative;aspect-ratio:4/3}
.obra--rec .obra__img img{height:100%;object-fit:cover}
.obra--rec .obra__img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.obra--rec .obra__cap{position:absolute;left:18px;right:18px;bottom:14px;padding:0;z-index:1;font-size:16px;font-weight:500;color:rgba(241,236,232,.92);flex-wrap:wrap}
.obra--rec .obra__m{color:inherit;opacity:.8}
.rec__grid:has(> :only-child){grid-template-columns:minmax(0,900px)}
.rec__grid > .obra--rec:first-child{grid-column:1/-1}
.rec__grid > .obra--rec:first-child .obra__img{aspect-ratio:16/8}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(56px,8vw,110px)}
.obra--trio .obra__img{aspect-ratio:4/5}
.obra--trio .obra__img img{height:100%;object-fit:cover}
.obra__m{color:var(--mute);text-align:right;white-space:nowrap}

/* ---------- Línea de tiempo (patrón Dieste #obras) ---------- */
/* Línea de tiempo horizontal: la sección se fija a pantalla y el scroll vertical desplaza las obras hacia la izquierda */
.tl{position:relative;overflow-x:clip}
.tl__pin{position:relative;margin:0 calc(var(--pad)*-1)}
.tl__stick{position:sticky;top:0;height:var(--vh);overflow:hidden}
.tl__list{--sp:clamp(110px,10vw,180px);list-style:none;margin:0;padding:0 50vw 0 calc(var(--pad) + var(--sp));position:relative;display:flex;width:max-content;height:100%;transform:translate3d(var(--x,0px),0,0);will-change:transform}
/* La línea corre detrás de las fotos y se ve en los huecos; el rombo pasa por encima */
.tl__list::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(241,236,232,.2);z-index:0;pointer-events:none}
.tl__list::after{content:"";position:absolute;top:50%;left:0;height:1px;width:var(--p,0px);background:var(--ink);z-index:1;pointer-events:none}
.tl__mark{position:absolute;top:50%;left:var(--p,0px);width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--ink);transform:rotate(var(--rot,45deg));z-index:5;pointer-events:none}
/* Cada foto ocupa el 60% del alto, centrada sobre la línea; el texto alterna arriba y abajo */
.tl__item{--h:min(calc(var(--vh)*.6),calc(70vw / var(--arn)));position:relative;z-index:2;flex:none;width:calc(var(--h)*var(--arn));margin-right:var(--sp)}
.tl__item .obra{display:grid;grid-template-rows:minmax(0,1fr) var(--h) minmax(0,1fr);row-gap:16px;height:100%;transition:opacity .75s cubic-bezier(.2,.7,.2,1)}
.tl__item .obra__img{grid-row:2;width:100%;height:100%;background:rgba(241,236,232,.06);clip-path:inset(0);transition:clip-path .7s cubic-bezier(.2,.7,.2,1)}
.tl__item .obra__rv{clip-path:inset(0 calc(var(--r,0)*100%) 0 0)}
.tl__item .obra__rv img{width:100%;height:100%;object-fit:cover;transform:translateX(calc(var(--r,0)*-20%))}
.tl__item .obra__cap{grid-row:3;align-self:start;flex-direction:column;justify-content:flex-start;gap:6px;padding:0;max-width:min(100%,34ch)}
.tl__item--r .obra__cap{grid-row:1;align-self:end}
.tl__item .obra__t{font-size:clamp(18px,1.7vw,26px);line-height:1.05;letter-spacing:-.04em}
.tl__item .obra__m{text-align:left;white-space:normal;font-size:13px;color:rgba(241,236,232,.7)}
/* El texto sube desde una máscara a medida que su obra entra; el subtítulo un poco después */
.tl__item .obra__t,.tl__item .obra__m{display:block;overflow:hidden;padding-bottom:.08em}
.tl__item .obra__in{display:block;transform:translateY(calc(var(--k)*115%));opacity:calc(1 - var(--k))}
.tl__item .obra__t .obra__in{--k:min(1,var(--r,0)*1.25)}
.tl__item .obra__m .obra__in{--k:min(1,var(--r,0)*1.9)}
/* El año queda sobre la línea, centrado en el hueco antes de su foto */
.tl__year{position:absolute;right:calc(100% + var(--sp)/2);top:50%;transform:translate(50%,-50%);z-index:6;padding:0 10px;background:var(--bg);font:500 clamp(18px,2.2vw,30px)/1 var(--sans);letter-spacing:-.03em;opacity:.4;transition:opacity .5s;pointer-events:none}
.tl__item.is-on .tl__year{opacity:1}
/* Atajo para quien no quiere recorrer toda la fila: queda fijo mientras la sección está fijada */
.tl__skip{position:absolute;right:var(--pad);bottom:clamp(16px,3vh,32px);z-index:7;display:inline-flex;align-items:center;gap:.7em;padding:10px 16px;border:1px solid rgba(241,236,232,.35);background:rgba(0,0,0,.6);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.tl__skip:hover,.tl__skip:focus-visible{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tl__skip span{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tl__skip.is-up span{transform:rotate(180deg)}
/* Velo del salto: tapa el contenido (no la barra lateral) mientras la página cambia de sitio */
.veil{position:fixed;inset:0;z-index:55;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .28s ease}
.veil.is-on{opacity:1}
@media (hover:hover) and (min-width:761px){
  .tl__item .obra:hover .obra__img{clip-path:inset(5%)}
  .tl__list:has(.obra:hover) .obra:not(:hover){opacity:.3}
}

/* ---------- Cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);padding:0;margin:0 var(--pad);border:1px solid var(--line)}
.cifras div{background:var(--bg);padding:clamp(28px,4vw,56px) 24px}
.cifras b{display:block;font:400 clamp(48px,6vw,88px)/1 var(--sans);letter-spacing:-.05em}
.cifras span{color:var(--mute);font-size:14px}

/* ---------- Archivo ---------- */
/* Filtros como el menú de la portada: texto sobre una línea fina, el activo marcado con un punto, y el número de obras volado */
.chips{display:flex;flex-wrap:wrap;gap:10px clamp(20px,2.4vw,36px);margin-bottom:clamp(28px,4vw,48px)}
.chip{display:inline-flex;align-items:center;gap:.5em;padding:6px 0;font-size:13px;font-weight:500;color:var(--mute);white-space:nowrap;transition:color .3s}
.chip::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;transform:scale(0);margin-right:-.95em;transition:transform .3s cubic-bezier(.2,.7,.2,1),margin .3s cubic-bezier(.2,.7,.2,1)}
.chip sup{font-size:10px;letter-spacing:.06em;margin-left:.15em;opacity:.6;align-self:flex-start;line-height:1.6}
.chip:hover,.chip.is-on{color:var(--ink)}
.chip.is-on::before{transform:scale(1);margin-right:0}
/* Galería horizontal infinita: los clones se generan en JS y el scroll se recoloca al llegar a un extremo */
.gal__bar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:clamp(28px,4vw,48px);padding:12px 0;border-top:1px solid rgba(241,236,232,.25);border-bottom:1px solid rgba(241,236,232,.12)}
/* Una sola fila: si no cabe se desliza, con un fundido en el borde derecho */
.gal__bar .chips{margin:0;flex:1;flex-wrap:nowrap;gap:clamp(14px,1.4vw,30px);overflow-x:auto;scrollbar-width:none;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:32px}
.gal__bar .chips::-webkit-scrollbar{display:none}
.gal__bar{position:relative}
/* Las flechas suben sobre la línea, a la altura del texto de entrada, y los filtros usan todo el ancho */
.gal__nav{display:flex;gap:8px;flex:none;position:absolute;right:0;bottom:calc(100% + 14px)}
.gal__nav button{width:44px;height:44px;border:1px solid rgba(241,236,232,.35);font-size:16px;transition:background .3s,color .3s,border-color .3s}
.gal__nav button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gal{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;user-select:none;-webkit-user-select:none}
.gal::-webkit-scrollbar{display:none}
.gal.is-drag{cursor:grabbing}.gal.is-drag .obra{pointer-events:none}
.gal .obra{flex:0 0 auto;width:clamp(280px,48vw,860px)}
.gal img{-webkit-user-drag:none}
.obra--grid .obra__img{aspect-ratio:4/3}
.obra--grid .obra__img img{height:100%;object-fit:cover}
.obra--grid .obra__cap{flex-direction:column;gap:0}
.obra--grid .obra__m{text-align:left;white-space:normal}
.obra--grid[hidden]{display:none}

/* ---------- Clientes / contacto ---------- */
.cli__wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,56px)}
.cli h3,.con__grid h3{font:300 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.cli ul{list-style:none;margin:0;padding:0;font:400 clamp(19px,1.8vw,24px)/1.45 var(--sans);letter-spacing:-.02em}
.con__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,56px);font:400 clamp(19px,1.8vw,24px)/1.45 var(--sans);letter-spacing:-.02em}
.con__grid a{display:block;text-decoration:none;overflow-wrap:anywhere}
.con__grid a:hover{color:var(--brick2)}
.cta{margin:clamp(56px,8vw,120px) 0 0;font:400 clamp(30px,4.4vw,64px)/1.05 var(--sans);letter-spacing:-.045em}
.cta a{color:var(--brick2)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:28px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:12px}
.foot__by{text-decoration:none;transition:color .3s}
.foot__by:hover,.foot__by:focus-visible{color:var(--ink)}

/* ---------- Lightbox ---------- */
.lb{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(13,11,10,.97);color:var(--ink)}
.lb::backdrop{background:transparent}
.lb[open]{display:flex;flex-direction:column;justify-content:center;align-items:center}
.lb figure{margin:0;max-width:min(1100px,92vw)}
.lb img{max-height:74vh;width:auto;margin:0 auto}
.lb figcaption{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;font-size:14px}
.lb figcaption b{font:500 26px/1.2 var(--sans);letter-spacing:-.03em;width:100%}
.lb figcaption span,.lb figcaption em{color:var(--mute);font-style:normal}
.lb__x{position:absolute;top:20px;right:24px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.lb__nav{display:flex;gap:24px;align-items:center;margin-top:16px;font-size:20px}
.lb__nav[hidden]{display:none}
.lb__n{font-size:12px;color:var(--mute)}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  :root{--rail:0px}
  .rail{inset:0 0 auto 0;width:100%;height:56px;border-right:0;border-bottom:1px solid rgba(241,236,232,.12);flex-direction:row;padding:0 16px}
  .rail__wa{writing-mode:horizontal-tb;transform:none}
  .rail__logo{width:36px;height:36px}
  .rail__burger{order:3;height:40px}
  .rail__burger span{height:22px}
  .rail__wa{order:2;margin-left:auto;margin-right:16px}
  main{padding-top:56px}
  .menu{inset:56px 0 0 0;grid-template-columns:1fr;grid-template-rows:22vh 1fr}
  .trio{grid-template-columns:1fr}
  .obra--trio .obra__img{aspect-ratio:4/3}
  .tray__body{grid-template-columns:minmax(0,1fr)}
  .tray__foto{position:static}
  .gal .obra{width:82vw}
  .gal__nav{display:none}
  /* En móvil la fila sigue horizontal, fijada bajo la barra superior */
  .tl__stick{top:56px;height:calc(var(--vh) - 56px)}
  .tl__list{--sp:84px}
  .tl__item{--h:min(calc((var(--vh) - 56px)*.5),calc(86vw / var(--arn)))}
  .tl__item .obra__t{font-size:19px}
  .tl__year{font-size:17px}
  .hero__nav ul{display:none}
  .hero__over{height:calc(var(--vh) - 56px)}
  .hero__name{font-size:calc((100vw - 2*var(--hpad))/3.3)}
}
@media (prefers-reduced-motion:reduce){
  .fill .w{--a:1!important}
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero__frame{--s:1!important}
  .tl__item{--r:0!important}
}