:root{--bg:#0a0a0a; --bg-soft:#121212; --fg:#e6e6e6; --muted:#b7b7b7; --brand:#ff9c00; --wrap:min(1100px,92vw)}
*{box-sizing:border-box}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--fg); background:#000}
img{max-width:100%; height:auto; display:block}
.wrap{width:var(--wrap); margin-inline:auto}
.section{padding:56px 0}
.sub{margin-top:24px; color:#ddd}
.site-header{position:sticky; top:0; z-index:10; background:rgba(0,0,0,.6); backdrop-filter:saturate(150%) blur(6px); border-bottom:1px solid #222}
.site-header .wrap{display:flex; align-items:center; gap:16px; padding:10px 0}
.brand img{height:38px}
.nav{margin-left:auto; display:flex; gap:18px}
.nav a{color:var(--fg); text-decoration:none; opacity:.9}
.nav a:hover{color:#fff}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid #333; color:#fff; padding:6px 10px; border-radius:6px}
.hero{position:relative; min-height:58vh; display:grid; place-items:center; text-align:center}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.45)}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.7))}
.hero-content{position:relative}
.hero h1{font-size:clamp(28px,5vw,48px); margin:0 0 10px}
.lead{color:var(--muted); max-width:720px; margin:0 auto 18px}
.cta-row{display:flex; gap:12px; justify-content:center}
.btn{display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600}
.btn-primary{background:var(--brand); color:#061108}
.btn-outline{border:1px solid #333; color:#fff}
.cols{display:grid; grid-template-columns:1.2fr .8fr; gap:32px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--bg-soft); border:1px solid #1f1f1f; border-radius:12px; overflow:hidden; padding:14px}
.accent{color:var(--brand)}
/* Masonry */
.masonry{columns:3 280px; column-gap:14px}
.masonry img{width:100%; margin:0 0 14px; border-radius:10px; border:1px solid #1f1f1f}
/* Lightbox */
.lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.85)}
.lightbox .lb-img{max-width:min(92vw,1200px); max-height:90vh}
.lb-close{position:absolute; top:20px; right:24px; font-size:28px; background:#000; color:#fff; border:1px solid #333; border-radius:8px; padding:4px 10px}
/* Contacto */
.contact-form{display:grid; gap:10px; background:var(--bg-soft); border:1px solid #1f1f1f; padding:16px; border-radius:12px}
.contact-form input, .contact-form textarea{background:#0d0d0d; border:1px solid #262626; color:#ddd; padding:10px; border-radius:8px}
.contact-form .hp{display:none}
.status{min-height:1em}
/* Footer */
.site-footer{padding:28px 0; border-top:1px solid #1e1e1e; background:#080808; color:#9a9a9a}
/* Skip link */
.skip{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{position:static; width:auto; height:auto; padding:8px; background:#222; color:#fff}
/* Responsive */
@media (max-width:840px){
  .cols{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; right:12px; top:55px; background:#0b0b0b; border:1px solid #222; border-radius:10px; padding:10px 12px; flex-direction:column}
  .nav-toggle{display:block}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
}