/* Reset corto */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}

/* Vars y tipografía básica (sin cargar fuentes externas) */
:root{
  --bg:#0b0b0c; --panel:#141417; --ink:#e9e9ee; --muted:#a6a6ac;
  --brand:#8fd3ff; --container:1100px;
}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.4}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:auto;padding:0 16px}

/* Header + nav */
.site-header{position:sticky;top:0;background:rgba(11,11,12,.7);backdrop-filter:blur(6px);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{width:40px;height:40px;object-fit:cover;border-radius:8px;background:#222}

/* Menú desktop */
.site-nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.site-nav a{padding:8px 10px;border-radius:10px}
.site-nav a:hover{background:#1f1f23}

/* Hamburguesa */
.menu-toggle{display:none;background:transparent;border:0;cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0}

/* Mobile */
@media (max-width:900px){
  .menu-toggle{display:block}
  .site-nav{
    position:fixed;left:12px;right:12px;top:60px;background:var(--panel);
    border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);
    transform:translateY(-16px);opacity:0;pointer-events:none;transition:.25s ease;
  }
  .site-nav ul{flex-direction:column}
  .site-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
}

/* Hero */
.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(28px,6vw,56px);margin:0 0 10px}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px);margin:8px 0 16px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--ink);color:#111;padding:10px 14px;border-radius:10px;font-weight:700}
.btn.ghost{background:#232329;color:var(--ink);border:1px solid #2c2c33}

/* Footer */
.site-footer{border-top:1px solid #1e1e24;margin-top:24px;padding:18px 0;color:#b6b6bb}

/* --- Tarjetas (destacados) --- */
.highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px; padding:28px 0;
}
.card{
  background:#15161a; border:1px solid #22232a; border-radius:14px;
  padding:14px; display:flex; flex-direction:column; gap:10px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card img{border-radius:10px; aspect-ratio:16/9; object-fit:cover}
.card h3{margin:6px 0 0}
.card p{color:var(--muted); margin:0}
.card .link{margin-top:auto; color:var(--brand); font-weight:600}
.card:hover{
  transform: translateY(-4px);
  border-color:#2a2b33;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Responsive tarjetas */
@media (max-width:900px){
  .highlights{grid-template-columns: 1fr 1fr}
}
@media (max-width:600px){
  .highlights{grid-template-columns: 1fr}
}

/* --- Galería mosaico --- */
.gallery-preview{padding:24px 0 36px}
.gallery-preview h2{margin:0 0 10px}
.mosaic{
  display:grid; gap:10px;
  grid-template-columns: repeat(3, 1fr);
}
.mosaic img{
  width:100%; height:100%; border-radius:10px; object-fit:cover;
  aspect-ratio:1/1; /* cuadrados bonitos */
  transition: transform .25s ease, filter .25s ease;
}
.mosaic img:hover{transform: scale(1.03); filter:brightness(1.05)}

/* --- Animación de aparición (scroll reveal) --- */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

.notice-bar{
  background:#0f1a24; border-bottom:1px solid #1e2a36; color:#cfeaff;
  font-weight:600; text-align:center; padding:10px 12px;
}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;margin-left:6px}
.badge.urg{background:#2a1212;color:#ffb3b3;border:1px solid #5a1a1a}
.badge.rel{background:#221b0e;color:#ffd699;border:1px solid #4a3414}
.badge.adult{background:#151826;color:#cdd6ff;border:1px solid #2a3152}