/* =============================
   HEADER BASE
   ============================= */
#tz-header {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1000;
}

.tz-container {
  max-width: 1280px;
  margin: auto;
  padding: 0 20px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tz-logo img {
  max-width: 100%;
}

/* =============================
   MENU ESCRITORIO
   ============================= */
.tz-nav {
  display: flex;
}

.tz-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tz-menu a,
.submenu-toggle {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
}

.tz-menu a.active {
  border-bottom: 2px solid #ff2f92;
  padding-bottom: 4px;
}

/* SUBMENU DESKTOP */
.has-sub {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #111;
  list-style: none;
  padding: 10px 0;
  min-width: 180px;
  display: none;
}

.submenu li a {
  display: block;
  padding: 10px 18px;
}

.has-sub:hover .submenu {
  display: block;
}

/* =============================
   BURGER
   ============================= */
.tz-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.tz-burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  margin: 6px 0;
}

/* =============================
   MOBILE
   ============================= */
@media (max-width: 992px) {

  .tz-burger {
    display: block;
  }

  .tz-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: #000;
    padding: 90px 20px;
    transition: right .3s ease;
    flex-direction: column;
  }

  .tz-nav.open {
    right: 0;
  }

  .tz-menu {
    flex-direction: column;
    gap: 18px;
  }

  /* SUBMENU MOBILE */
  .has-sub:hover .submenu {
    display: none;
  }

  .submenu {
    position: static;
    display: none;
    padding-left: 10px;
  }

  .has-sub.open .submenu {
    display: block;
  }

  .submenu-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
  }

  /* OVERLAY */
  .tz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: none;
  }

  .tz-overlay.open {
    display: block;
  }
}
@media (max-width: 992px) {

  /* EL MENÚ VA ARRIBA DEL OVERLAY */
  .tz-nav {
    z-index: 1001;
  }

  /* EL OVERLAY VA DEBAJO DEL MENÚ */
  .tz-overlay {
    z-index: 1000;
  }

}



/* =========================
   Ticketiza Auth Modal (tzm-*)
   Corto, limpio, parecido al UI que enviaste
   ========================= */

/* Overlay (si tu modal() ya trae overlay, aplica estas clases al contenedor) */
.tzm-ov{
  position:fixed; inset:0;
  background:rgba(10,12,18,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}

/* Card */
.tzm{
  width:min(520px, 92vw);
  background:#fff;
  border:1px solid #eef0f6;
  border-radius:18px;
  box-shadow: 0 22px 70px rgba(18, 24, 40, .20);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
}

/* Header */
.tzm-h{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 12px;
}

.tzm-ttl{
  margin:0;
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.2px;
}

.tzm-sub{
  margin:6px 0 0;
  font-size:13px;
  color:#64748b;
  line-height:1.35;
}

.tzm-x{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #eef0f6;
  background:#fff;
  color:#0f172a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s ease;
}
.tzm-x:hover{ background:#f6f7fb; }
.tzm-x:active{ transform: translateY(1px); }

/* Body */
.tzm-b{
  padding:14px 18px 18px;
}

/* Mini resumen tipo "carrito" */
.tzm-sum{
  border:1px solid #eef0f6;
  background:#fbfcff;
  border-radius:14px;
  padding:12px 12px;
  margin:0 0 14px;
}

.tzm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tzm-lbl{
  font-size:12px;
  color:#64748b;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.tzm-val{
  font-size:16px;
  color:#0f172a;
  font-weight:900;
}

.tzm-hint{
  margin:8px 0 0;
  font-size:12px;
  color:#94a3b8;
}

/* Form */
.tzm-f{
  display:grid;
  gap:10px;
}

.tzm-field{
  display:grid;
  gap:6px;
}

.tzm-l{
  font-size:12px;
  color:#334155;
  font-weight:700;
}

.tzm-in{
  height:44px;
  border-radius:12px;
  border:1px solid #e7eaf2;
  background:#fff;
  padding:0 12px;
  font-size:14px;
  color:#0f172a;
  outline:none;
  transition:.15s ease;
}
.tzm-in::placeholder{ color:#94a3b8; }
.tzm-in:focus{
  border-color:#ff2b5b;
  box-shadow: 0 0 0 4px rgba(255, 43, 91, .12);
}

/* Botones */
.tzm-btn{
  height:46px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:.15s ease;
  user-select:none;
}

.tzm-btn--pri{
  background: linear-gradient(180deg, #ff2b5b 0%, #ff1f57 100%);
  color:#fff;
  box-shadow: 0 16px 34px rgba(255, 43, 91, .28);
}
.tzm-btn--pri:hover{ filter: brightness(.98); }
.tzm-btn--pri:active{ transform: translateY(1px); }

.tzm-btn--gh{
  background:#fff;
  color:#ff2b5b;
  border-color:#ffd0db;
}
.tzm-btn--gh:hover{ background:#fff5f7; }
.tzm-btn--gh:active{ transform: translateY(1px); }

/* Links */
.tzm-lnks{
  margin-top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
}
.tzm-a{
  color:#64748b;
  text-decoration:none;
  font-weight:700;
}
.tzm-a:hover{ color:#0f172a; text-decoration:underline; }
.tzm-dot{ color:#cbd5e1; }

/* Divider */
.tzm-div{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.tzm-div::before,
.tzm-div::after{
  content:"";
  flex:1;
  height:1px;
  background:#eef0f6;
}

/* Footnote */
.tzm-ft{
  margin:12px 0 0;
  font-size:12px;
  color:#94a3b8;
  text-align:center;
}
.tzm-ft a{
  color:#64748b;
  font-weight:800;
  text-decoration:none;
}
.tzm-ft a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width:420px){
  .tzm{ border-radius:16px; }
  .tzm-h{ padding:16px 16px 10px; }
  .tzm-b{ padding:12px 16px 16px; }
}