:root{
  --bg: #0b0e13;
  --panel: #11161e;
  --panel-2: #0e131a;
  --text: #e8eef6;
  --muted: #a4afbf;
  --primary: #3a86ff;
  --primary-600:#2f6fd1;
  --accent: #00d4ff;
  --ok: #19c37d;
  --warn: #f4b740;
  --err: #ef476f;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 400 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(180deg, var(--bg), #0d1219 50%, var(--bg) 100%);
  color: var(--text);
}

img{max-width:100%; display:block}

.container{
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:#000; z-index:9999; border-radius:8px}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,14,20,.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
}
.brand{
  color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px; font-size:1.25rem; display:flex; align-items:center; gap:.5rem;
}
.brand-mark{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#001220; font-weight:900;
}

.nav{
  display:flex; gap:1rem;
}
.nav a{
  color: var(--muted); text-decoration:none; padding:.4rem .6rem; border-radius:8px;
}
.nav a:hover{ color:var(--text); background: rgba(255,255,255,.06); }

.nav-toggle{ display:none; background:none; border:0; }
.nav-toggle .nav-toggle-bar{
  width:26px; height:2px; background:var(--text); display:block; position:relative;
}
.nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--text);
}
.nav-toggle .nav-toggle-bar::before{ top:-7px }
.nav-toggle .nav-toggle-bar::after{ top:7px }

/* Main */
.main{ padding: 28px 0 64px; }

/* Flash */
.flash-area{ margin: 8px 0 18px; }
.flash{
  padding:.8rem 1rem; border-radius:12px; background: #0d1a12; border:1px solid rgba(255,255,255,.05)
}
.flash-success{ background: #0f1e14; border-color: rgba(25,195,125,.35); }
.flash-error{ background: #1e1014; border-color: rgba(239,71,111,.35); }
.flash-warning{ background: #1e1a10; border-color: rgba(244,183,64,.35); }

/* Hero */
.hero{
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(58,134,255,.25), transparent 60%),
    radial-gradient(60% 50% at 80% 0%, rgba(0,212,255,.18), transparent 60%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 44px 24px;
  box-shadow: var(--shadow);
}
.hero-inner{ text-align: center; max-width: 800px; margin: 0 auto; }
.hero h1{ font-size: clamp(28px, 3.2vw, 42px); margin:0 0 .5rem; letter-spacing:.2px }
.hero .accent{ background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ color: var(--muted); margin:.2rem 0 1.1rem }

.hero-search{
  display:grid; grid-template-columns: 1fr 180px 160px; gap:.5rem; justify-content:center;
  margin: 8px auto 12px; max-width: 900px;
}
.input{
  width:100%; padding:.75rem .85rem; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background: #0f141c; color: var(--text); outline:0;
}
.input::placeholder{ color:#7e8898 }

.hero-tags{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:6px }
.tag{
  display:inline-block; padding:.45rem .7rem; border-radius:999px; font-size:.9rem;
  color:var(--text); text-decoration:none; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08)
}
.tag:hover{ background: rgba(255,255,255,.1) }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition: transform .08s ease, background .2s ease, border-color .2s ease;
  font-weight:600;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#001220;
}
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{
  background: transparent; color: var(--text);
  border-color: rgba(255,255,255,.12);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06) }

/* Sections */
.section{ margin-top: 36px; }
.section-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:14px }
.section-head h2{ margin:0; font-size:1.25rem }
.link{ color: var(--accent); text-decoration:none; }
.link:hover{ text-decoration:underline }

/* Cards */
.cards{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.card{
  grid-column: span 12;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
@media (min-width:560px){ .card{ grid-column: span 6; } }
@media (min-width:900px){ .card{ grid-column: span 4; } }

.card-media{
  display:block; position:relative; background:#0c131b; overflow:hidden;
  aspect-ratio: 16/9;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02); transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.05);
}
.card-media:hover img{ transform: scale(1.06) }

.media-placeholder{
  width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(58,134,255,.25), rgba(0,212,255,.18)),
    linear-gradient(#0d131b,#0d131b);
}

.card-body{ padding: 14px 14px 16px }
.card-title{ margin:.2rem 0 .4rem; font-size:1.05rem; letter-spacing:.2px }
.card-title a{ color: var(--text); text-decoration:none }
.card-title a:hover{ text-decoration:underline }
.card-meta{ color: var(--muted); font-size:.92rem; display:flex; gap:.5rem; flex-wrap:wrap }
.card-actions{ margin-top: .75rem; display:flex; gap:.5rem }

/* “Confianza” */
.section-safe{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 18px;
}
.safe-grid{ display:grid; gap:10px }
@media (min-width:780px){ .safe-grid{ grid-template-columns:repeat(3,1fr) } }
.section-safe h3{ margin:.2rem 0 .25rem }
.muted{ color: var(--muted) }

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: #0a0f15;
  margin-top: 32px;
}
.footer-grid{
  display:grid; gap: 18px; padding: 22px 0;
}
@media (min-width:780px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; } }
.footer-col h4{ margin:0 0 .4rem }
.footer-col a{ display:block; color: var(--muted); text-decoration:none; padding:.25rem 0; }
.footer-col a:hover{ color:var(--text) }
.brand-alt{ font-weight:800; font-size:1.1rem; margin-bottom:.25rem }
.footer-bottom{ padding: 10px 0 24px; color:var(--muted) }

/* Responsive nav */
@media (max-width:820px){
  .nav{ display:none; position:absolute; right:1rem; top:64px; background:#0a0f15; border:1px solid rgba(255,255,255,.08); padding:.6rem; border-radius:12px; flex-direction:column; gap:.25rem; box-shadow: var(--shadow) }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-grid; place-items:center }
  .hero-search{ grid-template-columns: 1fr; }
}
/* Pills / etiquetas */
.pill{
  display:inline-block; font-size:.8rem; color:#001220; background: linear-gradient(135deg,var(--primary),var(--accent));
  padding:.25rem .55rem; border-radius:999px; font-weight:700; letter-spacing:.2px; margin-bottom:.35rem;
}

/* Event detail */
.event-page{ display:grid; gap:18px }
.event-hero{
  display:grid; gap:16px; grid-template-columns: 1fr;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.event-media{ aspect-ratio: 16/9; background:#0c131b }
.event-media img{ width:100%; height:100%; object-fit:cover; display:block }
.event-head{ padding: 14px 14px 18px }
.event-title{ margin:.2rem 0 .35rem; font-size: clamp(22px, 3.2vw, 32px) }
.event-meta{ display:flex; gap:.75rem; flex-wrap:wrap; color:var(--muted) }
.event-cta{ margin-top: 12px; display:flex; gap:.5rem; flex-wrap:wrap }

@media (min-width:920px){
  .event-hero{ grid-template-columns: 2fr 3fr; }
  .event-media{ aspect-ratio: auto; min-height: 320px }
}

/* Sectors list */
.sectors{ display:grid; gap:10px }
.sector{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#0f141c; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.8rem .9rem;
}
.sector-main{ display:flex; flex-direction:column; gap:4px }
.sector-side{ display:flex; align-items:center; gap:10px }
.price{ font-weight:800 }

/* Filters bar */
.filters{
  display:grid; gap:.5rem; grid-template-columns: 1fr 200px 180px 140px;
  margin: 10px 0 16px;
}
@media (max-width:900px){ .filters{ grid-template-columns: 1fr } }

.cta-bottom{ margin-top: 10px }
.table table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding:.6rem .5rem; border-bottom:1px solid rgba(255,255,255,.08) }
.badge{ display:inline-block; padding:.15rem .45rem; border-radius:999px; background:#0f1a2a; border:1px solid rgba(255,255,255,.12); font-size:.78rem }
.badge-warn{ background:#2a140f; border-color:#ffb38a }
.btn-sm{ padding:.25rem .5rem; font-size:.85rem }
/* ---- Home: mapa más chico y a la izquierda ---- */
#home-map{
  display: inline-block;      /* para que no ocupe todo el ancho */
  width: 360px !important;    /* override del width inline */
  height: 260px !important;   /* override del height inline */
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  vertical-align: top;        /* alinear con contenido adyacente si lo hay */
  margin-right: 16px;         /* separarlo del contenido a la derecha */
}

/* un poquito más grande en pantallas grandes */
@media (min-width: 1024px){
  #home-map{
    width: 420px !important;
    height: 300px !important;
    margin-right: 24px;
  }
}
.flash-box{
  padding: 10px 15px;
  border-radius: 8px;
  margin: 5px 0;
}
.flash-ok{ background-color: #0d6efd33; }
.flash-bad{ background-color: #ff444433; }

/* ---- Fin Home: mapa más chico y a la izquierda ---- */

.sold-out,
.badge-soldout,
.soldout-label {
    display: none !important;
}