:root{--bg:#0d0d0c;--fg:#ece7de;--mut:#8e887c;--ac:#c9a36a}
@media(prefers-color-scheme:light){:root{--bg:#f4f0e8;--fg:#1b1a17;--mut:#6f6a5f;--ac:#8a5f25}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
a{color:inherit;text-decoration:none}
header.top{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;background:linear-gradient(var(--bg),transparent);backdrop-filter:blur(6px)}
.brand{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;letter-spacing:.04em}
.brand b{color:var(--ac);font-weight:500}
nav a+a{margin-left:28px}
nav a{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);transition:color .3s}
nav a:hover{color:var(--ac)}
.hero{min-height:72vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:140px 6vw 60px}
.hero small{letter-spacing:.35em;text-transform:uppercase;color:var(--ac);font-size:.75rem;opacity:0;animation:up 1s .1s forwards}
.hero h1{font-size:clamp(2.8rem,8vw,6.5rem);line-height:1.02;margin:.35em 0;opacity:0;animation:up 1.1s .3s forwards}
.hero h1 i{color:var(--ac)}
.hero p{max-width:560px;color:var(--mut);opacity:0;animation:up 1.1s .55s forwards}
.line{width:1px;height:70px;background:var(--ac);margin-top:44px;opacity:0;animation:up 1s .9s forwards}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.gallery{columns:3 340px;column-gap:18px;padding:20px 4vw 90px;max-width:1700px;margin:auto}
.card{display:block;position:relative;overflow:hidden;margin-bottom:18px;break-inside:avoid;border-radius:3px;background:#000;opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
.card.in{opacity:1;transform:none}
.card img{display:block;width:100%;height:auto;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.12)}
.card .cap{position:absolute;inset:auto 0 0;padding:60px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#f3eee4;opacity:0;transform:translateY(12px);transition:.5s}
.card:hover .cap{opacity:1;transform:none}
.cap h2{font-size:1.5rem}.cap span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#d8b77f}
footer{text-align:center;padding:50px 5vw 60px;border-top:1px solid rgba(128,120,100,.25);color:var(--mut);font-size:.85rem}
footer .serif{font-size:1.4rem;color:var(--fg)}
/* detalle */
.view{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:100px 4vw 40px}
.frame{overflow:hidden;border-radius:3px;max-width:min(1500px,100%);cursor:zoom-in;background:#000;animation:fade 1s both}
.frame img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-origin:var(--x,50%) var(--y,50%)}
.frame:hover img{transform:scale(1.8)}
@keyframes fade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.meta{text-align:center;margin-top:28px;animation:up 1s .3s both}
.meta h1{font-size:clamp(2rem,4vw,3.2rem)}
.meta p{color:var(--mut);max-width:560px;margin:.4em auto}
.meta .by{color:var(--ac);letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;margin-top:14px}
.pager{display:flex;justify-content:space-between;gap:20px;width:100%;max-width:900px;margin:36px 0 10px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.pager a{color:var(--mut);transition:color .3s}.pager a:hover{color:var(--ac)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card,.hero *{opacity:1!important;transform:none!important}}