/* Variables de color, estilos generales, acceso, navbar, secciones e imágenes */
:root{--negro:#050505;--carbon:#17181a;--gris:#26282b;--militar:#80848b;--oliva:#5b5f66;--oliva-claro:#c3c7cf;--blanco:#ececee;
--titulo:"Stardos Stencil","Impact",sans-serif;--texto:"Barlow","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--carbon) repeating-linear-gradient(45deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px);color:var(--blanco);font:400 1.05rem/1.6 var(--texto)}
body.locked{overflow:hidden}body.locked #app{display:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--oliva-claro);outline-offset:2px}

/* ===== ACCESO ===== */
#login{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;text-align:center}
#login small{color:var(--militar);letter-spacing:.3em;font-size:.8rem}
#login h1{font:700 2rem var(--titulo);letter-spacing:.25em}
#login .row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
#pw{background:transparent;border:1px solid var(--militar);color:var(--blanco);padding:.6rem .9rem;width:min(260px,70vw);font:inherit;letter-spacing:.2em;text-align:center}
#go{background:transparent;border:1px solid var(--oliva-claro);color:var(--oliva-claro);padding:.6rem 1.1rem;letter-spacing:.2em;font-size:.85rem;transition:.2s}
#go:hover{background:var(--oliva);color:var(--blanco)}
#msg{color:#b4513f;min-height:1.4em;letter-spacing:.2em;font-size:.85rem}

/* ===== NAVBAR ===== */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.9rem 1.5rem;background:var(--negro);border-bottom:2px solid var(--oliva)}
nav ul{display:flex;list-style:none;padding:0;gap:.25rem;overflow-x:auto;margin-left:auto;min-width:0}
nav a{display:block;padding:.8rem 1.2rem;color:var(--blanco);text-decoration:none;font:700 1.25rem var(--titulo);letter-spacing:.12em;border-bottom:2px solid transparent;white-space:nowrap;transition:.2s}
nav a:hover,nav a.on{color:var(--oliva-claro);border-color:var(--oliva-claro)}
#logo{flex:none;width:72px;height:72px;border:1px dashed var(--militar);display:grid;place-items:center}
#logo img{width:100%;height:100%;object-fit:contain}

/* ===== SECCIONES ===== */
section{display:none;max-width:1100px;margin:0 auto;padding:2.5rem 1rem 1rem}section.on{display:block}
section>h2{font:700 2.2rem var(--titulo);letter-spacing:.1em;padding-bottom:.4rem;margin-bottom:1.5rem;border-bottom:1px solid var(--militar);position:relative}
section>h2::after{content:"";position:absolute;left:0;bottom:-2px;width:90px;height:3px;background:var(--oliva-claro)}
.panel{background:var(--gris);border:1px solid var(--militar);border-left:5px solid var(--oliva);padding:1.2rem 1.5rem;margin-bottom:2rem}
.tag{display:inline-block;border:1px solid var(--oliva-claro);color:var(--oliva-claro);padding:0 .6rem;font-size:.75rem;letter-spacing:.2em;margin-bottom:.8rem}
.panel h3{font:700 1.3rem var(--titulo);margin-bottom:.6rem}
[contenteditable]:focus{outline:1px dashed var(--oliva-claro)}

/* ===== PLACEHOLDER DE IMAGEN ===== */
figure{position:relative;background:var(--negro);border:1px solid var(--militar);overflow:hidden;cursor:zoom-in}
figure::before{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;color:var(--militar);font-size:.8rem;letter-spacing:.2em;text-align:center;padding:.5rem}
figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
figure:hover img{transform:scale(1.03)}