/* ====== Dark theme base ====== */
:root{
  --bg:#0b0f14;         /* negro azulado */
  --panel:#111622;      /* paneles */
  --panel-2:#151c29;
  --text:#f3f4f6;       /* blanco suave */
  --muted:#b9c2cf;
  --gold:#c9a227;       /* acento dorado */
  --link:#7aa2ff;       /* acento azulado */
  --border:#1f2a3a;
  --note-bg:#1f1b0a;
  --note-border:#3b2f0b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #0e1421 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, #0c1a2d 0%, transparent 60%),
    var(--bg);
}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* Header */
.site-header{position:sticky;top:0;z-index:5;background:rgba(17,22,34,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.site-header .top{display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;margin:0}
.brand img{height:56px;display:block}
nav{display:flex;gap:1rem;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--text);opacity:.9;padding:.35rem .5rem;border-radius:.4rem}
nav a:hover{opacity:1;background:var(--panel-2);outline:1px solid var(--border)}

/* Hero / cards */
.hero{padding:2.4rem 1rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:.8rem;padding:1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card.hero-banner{
  padding:2.2rem 1.6rem;
  background:
    linear-gradient(180deg, rgba(12,26,45,.7), rgba(12,26,45,.7)),
    url('/assets/hero.jpg') center/cover no-repeat,
    var(--panel);
}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
p{margin:.5rem 0 1rem}
small,footer{color:var(--muted)}
a{color:var(--link)}
a:focus{outline:2px dashed var(--link);outline-offset:2px}

/* Notice box */
.note{background:var(--note-bg);border:1px solid var(--note-border);padding:.9rem;border-radius:.6rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--panel-2)}

/* Forms */
label{display:block;margin:.7rem 0 .25rem}
input,textarea{
  width:100%;padding:.7rem;border:1px solid var(--border);border-radius:.45rem;
  background:#0c1220;color:var(--text)
}
button{
  padding:.7rem 1.1rem;border:1px solid #000;background:var(--gold);color:#111;border-radius:.45rem;cursor:pointer;font-weight:600
}
button:hover{filter:brightness(1.05)}
.form-hint{font-size:.9rem;color:var(--muted)}

/* ====== Age Gate (modal) ====== */
.agegate-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:50
}
.agegate{
  width:min(520px,92vw);
  background:var(--panel);border:1px solid var(--border);border-radius:.8rem;padding:1.25rem;
  box-shadow:0 16px 40px rgba(0,0,0,.45)
}
.agegate h3{margin-top:0}
.agegate .actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.agegate .actions button{flex:1}
.agegate .muted{color:var(--muted);font-size:.9rem;margin-top:.5rem}
.show-agegate{display:flex}