:root{--ink:#111;--bg:#fff;--mute:#8a8a8a}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important} /* si no, .adm-login/.adm-form/.foot con display:flex ganan a [hidden] y no ocultan */
html{height:100%}
body{min-height:100%;background:var(--bg);color:var(--ink);font:400 12px/1.4 "Helvetica Neue",Arial,sans-serif;letter-spacing:.2em}
body.home{height:100%;overflow:hidden}
.screen{height:100svh;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom))}
.brand{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.logo{height:min(14svh,110px);width:auto;max-width:60vw}
.slogan{margin:0;font-family:'DM Sans',"Helvetica Neue",Arial,sans-serif;font-size:clamp(9px,2.6vw,10px);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);text-align:center}
.reel{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.reel video{max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:1/1;object-fit:cover;background:#f3f3f3;display:block}
form{flex:none;width:100%;max-width:420px}
.row{display:flex;border-bottom:1px solid var(--ink)}
.row input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;letter-spacing:.08em;padding:10px 0;color:var(--ink);outline:0;border-radius:0}
input::placeholder{color:var(--mute);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
button{border:0;background:none;font:inherit;font-size:20px;padding:0 4px 0 12px;cursor:pointer;color:var(--ink)}
#m{height:16px;margin-top:6px;font-size:10px;color:var(--mute);text-align:center}
@media(min-width:700px){.screen{padding-top:24px;padding-bottom:24px;gap:20px}}

/* ---- Galería (página aparte gallery.html): pestañas + vitrina minimalista ---- */
.gpage{max-width:1040px;margin:0 auto;padding:clamp(22px,5vw,56px) clamp(16px,5vw,48px) 80px}
.g-top{display:flex;justify-content:center;margin-bottom:clamp(18px,5vh,36px)}
.g-back{display:inline-block;line-height:0}
.g-logo{height:min(9svh,64px);width:auto}
.tabs{display:flex;justify-content:center;gap:clamp(14px,5vw,48px);margin-bottom:clamp(26px,6vh,52px);border-bottom:1px solid #ececec}
.tab{border:0;background:none;font:inherit;font-size:clamp(10px,2.5vw,11px);letter-spacing:.2em;color:var(--mute);padding:0 1px 14px;cursor:pointer;white-space:nowrap;position:relative;top:1px;border-bottom:1px solid transparent;transition:color .2s}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--ink)}
.panel{animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.vitrina{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,30px);animation:fade .3s ease}
.cuadro{display:block;text-decoration:none;color:inherit}
.frame{position:relative;display:block;background:#fff;padding:clamp(8px,1.4vw,14px);border:1px solid #ececec;box-shadow:0 2px 28px rgba(0,0,0,.07);transition:box-shadow .2s,transform .2s}
.cuadro:hover .frame{box-shadow:0 6px 34px rgba(0,0,0,.12);transform:translateY(-2px)}
.frame img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f3f3f3}
.price{position:absolute;right:clamp(8px,1.4vw,14px);bottom:clamp(8px,1.4vw,14px);background:rgba(255,255,255,.92);color:var(--ink);font-size:10px;letter-spacing:.08em;padding:4px 8px}
.cap{display:block;text-align:center;margin-top:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.empty{text-align:center;color:var(--mute);font-size:11px;letter-spacing:.15em;padding:40px 0}
.muted{color:var(--mute)}
@media(max-width:640px){.vitrina{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* ---- Footer de redes (todas las páginas) ---- */
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,4vw,28px)}
.foot a{color:var(--mute);text-decoration:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
.foot a:hover{color:var(--ink)}
.home .foot{flex:none}
.gpage .foot{margin-top:clamp(40px,8vh,64px)}

/* ---- Detalle (detail.html) ---- */
.detail{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,4vh,34px)}
.work{margin:0;max-width:720px;width:100%;background:#fff;padding:clamp(10px,1.6vw,16px);border:1px solid #ececec;box-shadow:0 2px 28px rgba(0,0,0,.07)}
.work img,.work video{width:100%;display:block;background:#f3f3f3}
.detail .meta{max-width:620px;text-align:center}
.detail h1{font-size:clamp(14px,3vw,18px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.price-lg{font-size:13px;letter-spacing:.1em;color:var(--ink);margin:0 0 14px}
.desc{font-size:12px;line-height:1.9;letter-spacing:.06em;color:#444;text-transform:none}

/* ---- Admin (admin.html) ---- */
body.admin{background:#fafafa;letter-spacing:.04em}
.adm-login{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
.adm-logo{height:72px;width:auto;margin-bottom:6px}
.adm-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px}
.adm-form input{border:1px solid #ddd;background:#fff;font:inherit;font-size:16px;letter-spacing:.1em;padding:12px;border-radius:8px;outline:0;text-align:center}
.adm-form button{border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:12px;letter-spacing:.15em;text-transform:uppercase;padding:12px;border-radius:8px;cursor:pointer}
.locked{color:#b00;font-size:11px;line-height:1.5;letter-spacing:.04em;text-transform:none;text-align:center}
.msg{font-size:11px;color:var(--mute);min-height:16px;letter-spacing:.04em;text-align:center}
.adm{max-width:860px;margin:0 auto;padding:20px 16px 90px}
.adm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #eaeaea}
.adm-logo-sm{height:34px;width:auto}
.adm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-sec{padding:22px 0;border-bottom:1px solid #eee}
.adm-sec h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.adm input,.adm select,.adm textarea{border:1px solid #ddd;background:#fff;font:inherit;font-size:14px;letter-spacing:.03em;padding:9px 10px;border-radius:7px;outline:0;color:var(--ink)}
.adm textarea{min-height:60px;resize:vertical;line-height:1.5;text-transform:none}
.adm button{border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border-radius:7px;cursor:pointer;white-space:nowrap}
.adm button.ghost{background:none;color:var(--ink);border-color:#ccc}
.adm-list{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.adm-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-list li.tab-row{flex-direction:column;align-items:stretch}
.tab-main{display:flex;align-items:center;gap:8px}
.tab-main .t-name{flex:1;min-width:120px}
.tab-main .tcount{min-width:18px;text-align:center;font-size:10px}
.tab-del-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:10px;background:#f6f6f6;border:1px solid #eee;border-radius:8px;font-size:11px;text-transform:none}
.tab-del-opts .movewrap{display:flex;align-items:center;gap:6px}
.res-filter{margin-bottom:14px;min-width:200px}
.adm-list code{background:#f0f0f0;padding:3px 8px;border-radius:5px;letter-spacing:.1em}
.inline{display:flex;gap:8px}
.inline input{flex:1}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adm-grid textarea,.adm-grid button,.adm-grid input[type=file]{grid-column:1/-1}
.adm-res{display:flex;flex-direction:column;gap:14px}
.res{display:flex;gap:14px;padding:12px;border:1px solid #eee;border-radius:10px;background:#fff}
.res-th{position:relative;flex:none;width:92px}
.res-th img,.res-th .noimg{width:92px;height:92px;object-fit:cover;border-radius:8px;background:#f0f0f0;display:block}
.res-fields{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.res-fields .r-title{width:100%}
.row2{display:flex;gap:8px}
.row2>*{flex:1;min-width:0}
.badge{position:absolute;left:4px;top:4px;font-size:9px;letter-spacing:.03em;padding:2px 6px;border-radius:4px;background:#333;color:#fff;text-transform:none}
.badge.error{background:#b00}
.adm-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adm-social label{display:flex;flex-direction:column;gap:5px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.adm-social button{grid-column:1/-1}
@media(max-width:560px){.adm-grid,.adm-social{grid-template-columns:1fr}.res{flex-direction:column}.res-th,.res-th img,.res-th .noimg{width:100%}.res-th img,.res-th .noimg{height:180px}}
