:root{
  --bg:            #0F1220;
  --bg-soft:       #151934;
  --card:          #181C34;
  --card-edge:     #262b4d;
  --gold:          #E8B34D;
  --gold-soft:     rgba(232,179,77,.14);
  --violet:        #6C5CE7;
  --text:          #EDEBF6;
  --text-dim:      #9490B5;
  --danger:        #E5484D;
  --success:       #3FB68B;
  --font-display:  'Anton', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(108,92,231,.18), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(232,179,77,.10), transparent 40%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
}

/* ---------- Header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw;
  border-bottom:1px solid var(--card-edge);
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display);
  letter-spacing:.5px;
  font-size:1.5rem;
  color:var(--gold);
  text-transform:uppercase;
}
.brand .ticket-icon{font-size:1.6rem;}
.topbar a.admin-link{
  color:var(--text-dim);
  font-size:.8rem;
  text-decoration:none;
  border:1px solid var(--card-edge);
  padding:8px 14px;
  border-radius:999px;
  transition:.2s;
}
.topbar a.admin-link:hover{border-color:var(--gold); color:var(--gold);}

/* ---------- Hero ---------- */
.hero{
  padding:64px 6vw 32px;
  text-align:center;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 5vw, 4rem);
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 10px;
  line-height:1.05;
  background:linear-gradient(180deg,#fff, var(--gold) 140%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{color:var(--text-dim); font-size:1.05rem; max-width:560px; margin:0 auto;}

/* ---------- Grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:34px;
  padding:24px 6vw 90px;
}

/* ---------- Ticket card ---------- */
.ticket{
  position:relative;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:14px;
  overflow:visible;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ticket:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(232,179,77,.35); }

.ticket-img{
  width:100%; height:170px; object-fit:cover;
  border-radius:14px 14px 0 0;
  border-bottom:1px dashed var(--card-edge);
}
.ticket-img.placeholder{
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem;
  background:linear-gradient(135deg, var(--bg-soft), var(--card));
}

.ticket-body{ padding:22px 22px 18px; flex:1; display:flex; flex-direction:column; gap:10px;}
.ticket-body h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:1.25rem;
  margin:0;
  color:#fff;
}
.ticket-body .premio{
  color:var(--gold); font-weight:600; font-size:.95rem;
}
.ticket-body p.desc{
  color:var(--text-dim); font-size:.88rem; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* perforated divider like a real ticket stub */
.perforation{
  position:relative;
  height:0;
  border-top:2px dashed var(--card-edge);
  margin:0 0;
}
.perforation::before, .perforation::after{
  content:''; position:absolute; top:-9px; width:18px; height:18px;
  background:var(--bg); border-radius:50%;
}
.perforation::before{ left:-9px; }
.perforation::after{ right:-9px; }

.ticket-stub{
  padding:16px 22px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.countdown{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-dim);
}
.countdown b{ color:var(--gold); font-size:.95rem; }
.participantes-count{
  font-size:.72rem; color:var(--text-dim);
}

.btn-participar{
  font-family:var(--font-body);
  font-weight:700;
  border:none;
  background:var(--gold);
  color:#1a1608;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
  font-size:.85rem;
}
.btn-participar:hover{ filter:brightness(1.08); transform:scale(1.02); }
.btn-participar:disabled{ background:var(--card-edge); color:var(--text-dim); cursor:not-allowed; }

/* corner day-count stub, like a torn ticket corner */
.corner-stub{
  position:absolute; top:-14px; right:16px;
  background:var(--violet);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:6px 10px;
  border-radius:8px;
  box-shadow:0 6px 16px -6px rgba(108,92,231,.6);
}

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center; padding:100px 20px; color:var(--text-dim);
}
.empty-state .emoji{ font-size:2.6rem; display:block; margin-bottom:14px;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,7,16,.75);
  display:none; align-items:center; justify-content:center;
  padding:20px; z-index:100;
  backdrop-filter:blur(3px);
}
.modal-overlay.abierto{ display:flex; }
.modal-box{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:16px;
  width:100%; max-width:440px;
  padding:30px 28px;
  position:relative;
}
.modal-box h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  color:var(--gold);
  font-size:1.35rem;
  margin:0 0 4px;
}
.modal-box .sub{ color:var(--text-dim); font-size:.85rem; margin-bottom:20px;}
.modal-close{
  position:absolute; top:16px; right:18px;
  background:none; border:none; color:var(--text-dim);
  font-size:1.3rem; cursor:pointer;
}
.campo{ margin-bottom:14px; }
.campo label{
  display:block; font-size:.78rem; color:var(--text-dim); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.4px;
}
.campo input{
  width:100%; padding:11px 13px;
  background:var(--bg-soft); border:1px solid var(--card-edge);
  border-radius:8px; color:var(--text); font-size:.92rem;
}
.campo input:focus{ outline:none; border-color:var(--gold); }
.form-msg{ font-size:.85rem; margin-top:6px; min-height:20px; }
.form-msg.error{ color:var(--danger); }
.form-msg.success{ color:var(--success); }
.btn-enviar{
  width:100%; margin-top:8px; padding:13px; border:none; border-radius:8px;
  background:var(--gold); color:#1a1608; font-weight:700; font-size:.95rem; cursor:pointer;
}
.btn-enviar:disabled{ opacity:.6; cursor:not-allowed; }

footer{
  text-align:center; padding:30px; color:var(--text-dim); font-size:.78rem;
  border-top:1px solid var(--card-edge);
}