:root { --black:#000; --silver:#d8d9dd; --dim:#898b91; --line:rgba(216,217,221,.25); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; background:var(--black); color:var(--silver); font-family:Montserrat,Arial,sans-serif; overflow-x:hidden; }
.home { min-height:100svh; padding:2.6vh 4vw 2.5vh; background:#000; display:flex; flex-direction:column; }
.top-layout { min-height:20vh; display:grid; grid-template-columns:1fr minmax(250px, 1.7fr) 1fr; align-items:center; position:relative; z-index:3; }
.profile-window { margin:0; width:clamp(120px,12vw,195px); justify-self:start; animation:portraitFloat 7s ease-in-out infinite; }.profile-window img { display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 20%; border-radius:50%; border:1px solid rgba(216,217,221,.7); box-shadow:0 0 0 7px rgba(216,217,221,.05), 0 20px 45px rgba(0,0,0,.8); filter:saturate(.82) contrast(1.12); }.profile-window figcaption { margin-top:10px; color:var(--dim); font:500 10px/1.55 'DM Mono',monospace; letter-spacing:.13em; }
.hero-logo { justify-self:center; width:min(29vw,400px); display:block; }.hero-logo img { width:100%; display:block; }
.contact-links { justify-self:end; display:grid; justify-items:end; gap:10px; font:500 12px/1.1 'DM Mono',monospace; letter-spacing:.12em; }.contact-links p { margin:0; color:var(--silver); padding:0 0 6px; border-bottom:1px solid var(--line); }.contact-links span{color:var(--dim);font-size:11px;margin-left:9px;}
.opening{min-height:72svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.opening::before,.opening::after{content:"";position:absolute;border:1px solid rgba(216,217,221,.17);border-radius:50%;width:76vw;height:18vw;left:50%;top:51%;transform:translate(-50%,-50%) rotate(-8deg)}.opening::after{width:54vw;height:13vw;transform:translate(-50%,-50%) rotate(12deg);opacity:.55}.opening p{position:relative;z-index:1;margin:0;font:400 clamp(48px,7.5vw,112px)/.84 'Cormorant Garamond',Georgia,serif;letter-spacing:-.055em;color:var(--silver);text-shadow:0 1px rgba(255,255,255,.65)}.opening em{font-style:italic;font-weight:500;background:linear-gradient(110deg,#777a82,#fff 47%,#a0a3ab);color:transparent;background-clip:text}.opening span{position:absolute;bottom:4vh;color:var(--dim);font-size:20px;animation:bob 1.7s ease-in-out infinite}@keyframes bob{50%{transform:translateY(8px)}}
.gallery { flex:1; min-height:0; display:flex; flex-direction:column; padding:1vh 0 0; }.gallery-head,.gallery-foot,.navigation-note,footer { font:500 9px/1.2 'DM Mono',monospace; letter-spacing:.13em; }.gallery-head,.gallery-foot { display:flex; justify-content:space-between; align-items:center; gap:15px; color:var(--dim); }.gallery-head p{margin:0}.gallery-head #category{color:var(--silver);font:500 21px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.04em}.loop-note{display:none}
.stage { flex:1; min-height:470px; position:relative; perspective:1600px; perspective-origin:50% 50%; overflow:hidden; outline:none; background:radial-gradient(ellipse at center,rgba(255,255,255,.035) 0, transparent 53%); }.stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.31) 100%);pointer-events:none}.photo-frame { position:absolute; inset:5% 15%; margin:0; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; will-change:transform,opacity,filter; }.photo-frame img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border:1px solid rgba(255,255,255,.37); box-shadow:0 36px 90px #000,0 0 0 8px rgba(255,255,255,.02); }.intro-card{background:radial-gradient(ellipse at center,rgba(216,217,221,.08),transparent 56%);border:1px solid rgba(216,217,221,.18)}.intro-card::before,.intro-card::after{content:"";position:absolute;border:1px solid rgba(216,217,221,.25);border-radius:50%;width:105%;height:30%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg)}.intro-card::after{width:72%;height:20%;transform:translate(-50%,-50%) rotate(12deg);opacity:.6}.intro-card-copy{position:relative;z-index:1;text-align:center}.intro-card-copy span{font:500 9px 'DM Mono',monospace;letter-spacing:.22em;color:var(--dim)}.intro-card-copy h1{margin:17px 0 0;font:400 clamp(48px,7vw,110px)/.82 'Cormorant Garamond',Georgia,serif;letter-spacing:-.055em;color:var(--silver);text-shadow:0 1px rgba(255,255,255,.65)}.intro-card-copy em{font-style:italic;font-weight:500;background:linear-gradient(110deg,#777a82,#fff 47%,#a0a3ab);color:transparent;background-clip:text}
.photo-frame.current { opacity:1; transform:translateZ(0) scale(1); filter:none; transition:transform 1.65s cubic-bezier(.16,.72,.18,1),opacity 1.05s ease,filter 1.05s ease; }.photo-frame.entering{opacity:0;transform:translateZ(-1700px) scale(.24);filter:blur(12px);transition:transform 1.65s cubic-bezier(.16,.72,.18,1),opacity 1.1s ease,filter 1.1s ease}.photo-frame.exiting{opacity:0;transform:translateZ(2100px) scale(2.15);filter:blur(8px);transition:transform 1.65s cubic-bezier(.16,.72,.18,1),opacity 1.25s ease,filter 1.2s ease}.photo-frame.reverse-enter{opacity:0;transform:translateZ(1950px) scale(2);filter:blur(11px);transition:transform 1.65s cubic-bezier(.16,.72,.18,1),opacity 1.1s ease,filter 1.1s ease}.photo-frame.reverse-exit{opacity:0;transform:translateZ(-1600px) scale(.21);filter:blur(11px);transition:transform 1.65s cubic-bezier(.16,.72,.18,1),opacity 1.25s ease,filter 1.2s ease}
.gallery-foot { min-height:48px; padding-top:10px; border-top:1px solid var(--line); }.gallery-foot p{margin:0;color:var(--silver);font:400 23px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.01em}.controls{display:flex;gap:8px}.controls button{width:35px;height:26px;border:1px solid var(--line);background:transparent;color:var(--silver);cursor:pointer;transition:.2s}.controls button:hover{background:var(--silver);color:var(--black)}.navigation-note{margin:13px 0 0;text-align:center;color:var(--dim);font-size:8px}
.contact{min-height:72svh;padding:13vw 7vw;display:flex;flex-direction:column;justify-content:center;background:#000;border-top:1px solid var(--line)}.eyebrow{color:var(--dim);font:500 10px 'DM Mono',monospace;letter-spacing:.14em;margin:0 0 26px}.contact h2{font-weight:400;letter-spacing:-.06em;line-height:.95;font-size:clamp(42px,7vw,92px);margin:0 0 46px}.contact-link{align-self:flex-start;color:var(--silver);font:500 clamp(11px,1.7vw,17px) 'DM Mono',monospace;text-decoration:none;padding-bottom:10px;border-bottom:1px solid var(--silver)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:22px 4vw;color:var(--dim)}footer a{color:var(--silver);text-decoration:none}
@keyframes portraitFloat{50%{transform:translateY(-10px) rotate(1.5deg)}}
@media(max-width:640px){.home{padding:17px 20px 18px;min-height:100svh}.top-layout{min-height:21vh;grid-template-columns:1fr auto;grid-template-rows:auto auto}.profile-window{width:82px}.profile-window figcaption{font-size:7px;margin-top:6px}.hero-logo{width:160px;justify-self:end}.contact-links{display:flex;grid-column:1 / -1;grid-row:2;justify-self:stretch;justify-content:space-between;margin-top:18px;font-size:7px;gap:7px}.contact-links span{display:none}.stage{min-height:460px}.photo-frame{inset:10% 0}.intro-card-copy h1{font-size:15vw}.gallery-foot p{max-width:72%;line-height:1.1;font-size:20px}.navigation-note{font-size:7px}.contact{padding:25vw 20px}footer{flex-direction:column;gap:13px;padding:20px}.contact h2{font-size:13vw}}

/* Enlaces de contacto */
.contact-links a{color:inherit;text-decoration:none}
.contact-links a:hover span,.contact-links a:focus-visible span{color:var(--silver)}
.contact-links a:focus-visible{outline:1px solid var(--silver);outline-offset:3px}
@media(min-width:641px) and (max-width:1100px){.contact-links span{display:block;margin:5px 0 0}}

/* Galería: tira de miniaturas con scroll independiente */
.gallery-body{--thumbs-w:clamp(84px,8vw,124px);flex:1;min-height:0;display:grid;grid-template-columns:var(--thumbs-w) minmax(0,1fr) var(--thumbs-w);gap:clamp(12px,1.6vw,24px)}
.gallery-body::after{content:""}
.thumbs{position:relative;min-height:0;border-right:1px solid var(--line)}
.thumbs-scroll{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:2px 12px 2px 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(216,217,221,.3) transparent}
.thumbs-scroll::-webkit-scrollbar{width:4px;height:4px}
.thumbs-scroll::-webkit-scrollbar-thumb{background:rgba(216,217,221,.3)}
.thumb{flex:none;position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:1px solid var(--line);background:#050505;overflow:hidden;cursor:pointer;opacity:.5;transition:opacity .3s,border-color .3s}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.45)}
.thumb span{position:absolute;left:5px;bottom:4px;font:500 8px/1 'DM Mono',monospace;letter-spacing:.1em;color:var(--silver);text-shadow:0 1px 3px #000}
.thumb:hover{opacity:.85}
.thumb.is-active{opacity:1;border-color:var(--silver)}
.thumb:focus-visible{outline:1px solid var(--silver);outline-offset:2px}
.thumb-intro{display:grid;place-items:center;color:var(--dim)}
.thumb-intro b{font:500 8px/1 'DM Mono',monospace;letter-spacing:.18em}

@media(max-width:640px){
  .gallery-body{grid-template-columns:1fr;gap:10px}
  .gallery-body::after{display:none}
  .thumbs{order:2;height:64px;border-right:0}
  .thumbs-scroll{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 0 6px}
  .thumb{width:auto;height:100%}
}
.navigation-note{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);max-width:calc(100vw - 40px);padding:11px 18px;background:#0b0b0b;border:1px solid var(--silver);color:var(--silver);font:500 10px/1.2 'DM Mono',monospace;letter-spacing:.12em;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}