html{scroll-behavior:smooth}
/* ============================================================
   CRECE · Página Mezcal — estilos unificados (eventos + reservas)
   Estética de cantina/noche. Color por variables -> los temas
   de Crece la pueden recolorear.
   ============================================================ */
:root{
  --mz-bg:        #15100b;
  --mz-bg2:       #1e150e;
  --mz-surface:   #281b12;
  --mz-field:     #1a120c;
  --mz-text:      #fbf3e7;
  --mz-muted:     #b29a82;
  --mz-accent:    #e0a32e;
  --mz-accent-dk: #c4861a;
  --mz-on-accent: #20160f;
  --mz-line:      #3a2a1d;
  --mz-ok:        #5fbf8a;
  --mz-warn:      #ef9a7a;
  --mz-wa:        #1f9d57;
  --mz-radius:    16px;
  --mz-font-display: "Bookman Old Style","Georgia",serif;
  --mz-font-body: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0}
.mz-root{background:linear-gradient(180deg, var(--mz-bg) 0%, var(--mz-bg2) 100%); background-attachment:fixed; color:var(--mz-text); font-family:var(--mz-font-body); -webkit-font-smoothing:antialiased}
.mz-inner{max-width:1040px; margin:0 auto}
.mz-inner.narrow{max-width:860px}
a{color:inherit}

/* ---- Encabezado ---- */
.mz-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--mz-surface); border-bottom:1px solid var(--mz-line)}
.mz-brand{font-family:var(--mz-font-display); font-weight:700; font-size:20px; letter-spacing:.01em}
.mz-logo{height:36px; width:auto; max-width:200px; object-fit:contain; display:block}
.mz-nav{display:flex; gap:18px; align-items:center}
.mz-nav a{text-decoration:none; font-size:14px; font-weight:600; color:var(--mz-muted)}
.mz-nav a.cta{background:var(--mz-grad); color:var(--mz-on-accent); padding:8px 16px; border-radius:999px}

/* ---- Secciones ---- */
.mz-section{padding:36px 18px}
.mz-section.alt{background:linear-gradient(180deg,#efe2cc 0%, #e4d3b4 100%); --mz-surface:#fffaf0; --mz-field:#f5ead3; --mz-text:#3a2a1a; --mz-muted:#8a755a; --mz-line:#e0cfb0; color:#3a2a1a}
.mz-section.alt .rs-input{color-scheme:light}
.mz-section.alt .rs-slot .h{color:#3a2a1a}
.mz-h{font-family:var(--mz-font-display); font-weight:700; font-size:clamp(24px,5vw,34px); margin:0; line-height:1; background:var(--mz-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--mz-accent)}
.ev-head{display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap}
.ev-eyebrow{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--mz-accent); font-weight:700}

/* ============ EVENTOS ============ */
.ev-feat{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 1.15fr;
  background:var(--mz-surface); border:1px solid var(--mz-line); border-radius:var(--mz-radius); overflow:hidden; margin-bottom:24px}
.ev-feat .poster{position:relative; min-height:310px; background:#0c0805 center/cover no-repeat}
.ev-feat .poster::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 40%, var(--mz-surface) 100%)}
.ev-feat .poster.noimg{display:flex; align-items:center; justify-content:center; color:var(--mz-line); font-size:60px}
.ev-feat .body{padding:26px 28px; display:flex; flex-direction:column; justify-content:center}
.ev-tag{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mz-accent); border:1px solid var(--mz-accent); border-radius:999px; padding:4px 12px; margin-bottom:14px}
.ev-feat h3{font-family:var(--mz-font-display); font-size:clamp(26px,4.5vw,40px); margin:0 0 4px; line-height:1.05}
.ev-feat .artista{color:var(--mz-muted); font-size:16px; margin:0 0 16px}
.ev-meta{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px}
.ev-meta .it{display:flex; align-items:center; gap:7px; font-size:14px}
.ev-meta .it b{color:var(--mz-accent); font-weight:700}
.ev-count{display:flex; gap:10px; margin-bottom:20px}
.ev-count .box{background:var(--mz-bg); border:1px solid var(--mz-line); border-radius:10px; padding:8px 12px; text-align:center; min-width:54px}
.ev-count .box .num{font-family:var(--mz-font-display); font-size:24px; font-weight:700; line-height:1; color:var(--mz-accent)}
.ev-count .box .lab{font-size:10px; color:var(--mz-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:3px}
.ev-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start;
  background:var(--mz-grad); color:var(--mz-on-accent); font-weight:800; font-size:15px; text-decoration:none;
  padding:14px 26px; border-radius:12px; transition:transform .08s ease, background .15s ease; border:none; cursor:pointer}
.ev-cta:hover{filter:brightness(.93); transform:translateY(-1px)}
.ev-cta.off{background:transparent; color:var(--mz-muted); border:1px solid var(--mz-line); cursor:not-allowed}
.ev-sub{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--mz-muted); margin:0 0 12px; font-weight:700}
.ev-scroll{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch}
@media (max-width:900px){.ev-scroll{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ev-scroll{grid-template-columns:1fr}}
.ev-card{width:auto; max-width:none}
.ev-scroll::-webkit-scrollbar{height:6px}
.ev-scroll::-webkit-scrollbar-thumb{background:var(--mz-line); border-radius:3px}
.ev-card{background:var(--mz-surface); border:1px solid var(--mz-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 20px rgba(0,0,0,.10)}
.ev-wrap{position:relative}
.ev-card .pst-img{width:100%; height:auto; display:block}
.ev-card .pst{height:300px; background:#0c0805 center top/cover no-repeat; position:relative}
.ev-card .pst.noimg{display:flex; align-items:center; justify-content:center; color:var(--mz-line); font-size:34px}
.ev-card .datechip{position:absolute; top:10px; left:10px; background:rgba(21,16,11,.85); border:1px solid var(--mz-line); border-radius:10px; padding:5px 8px; text-align:center; line-height:1}
.ev-card .datechip .d{font-family:var(--mz-font-display); font-size:19px; font-weight:700; color:var(--mz-accent)}
.ev-card .datechip .m{font-size:9px; letter-spacing:.1em; color:var(--mz-muted)}
.ev-card .ct{padding:14px; display:flex; flex-direction:column; gap:4px; flex:1}
.ev-card .ct h4{font-family:var(--mz-font-display); font-size:18px; margin:0; line-height:1.1}
.ev-card .ct .ar{font-size:13px; color:var(--mz-muted); margin:0}
.ev-card .ct .meta{font-size:12px; color:var(--mz-muted); margin:2px 0 0; text-transform:capitalize}
.ev-card .ct .pr{font-size:13px; color:var(--mz-accent); font-weight:700; margin-top:2px}
.ev-card .mini{margin-top:auto; padding-top:10px}
.ev-card .mini a{display:block; text-align:center; background:var(--mz-grad); color:var(--mz-on-accent); font-weight:700; font-size:13px; text-decoration:none; padding:9px; border-radius:9px}
.ev-card .mini a.off{background:transparent; color:var(--mz-muted); border:1px solid var(--mz-line)}
.badge{position:absolute; top:10px; right:10px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:8px}
.badge.agotado{background:#5a2020; color:#ffd9d9}
.ev-empty{text-align:center; padding:40px 20px; color:var(--mz-muted)}
.ev-empty .big{font-family:var(--mz-font-display); font-size:22px; color:var(--mz-text); margin-bottom:6px}

/* ============ RESERVAS (adaptado a oscuro) ============ */
.rs-card{background:var(--mz-surface); border:1px solid var(--mz-line); border-radius:var(--mz-radius); padding:20px; margin-bottom:16px}
.rs-step{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-weight:700; font-size:15px}
.rs-step .n{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; background:var(--mz-grad); color:var(--mz-on-accent)}
.rs-lab{display:block; font-size:13px; color:var(--mz-muted); margin:12px 0 5px; font-weight:600}
.rs-input{width:100%; padding:12px 13px; font-size:16px; color:var(--mz-text); background:var(--mz-field); border:1.5px solid var(--mz-line); border-radius:10px; font-family:inherit}
.rs-input::placeholder{color:#6f604f}
.rs-input:focus{outline:2px solid var(--mz-accent); border-color:var(--mz-accent)}
.rs-input[type=date]{color-scheme:dark}
.rs-row{display:flex; gap:14px}
.rs-row>div{flex:1}
.rs-row.three{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end}
@media (max-width:640px){.rs-row.three{grid-template-columns:1fr}}
.rs-row>*{flex:1}
.rs-stepper{display:flex; align-items:center; max-width:160px}
.rs-stepper button{width:44px; height:46px; font-size:22px; line-height:1; cursor:pointer; background:var(--mz-field); border:1.5px solid var(--mz-line); color:var(--mz-text)}
.rs-stepper button:first-child{border-radius:10px 0 0 10px}
.rs-stepper button:last-child{border-radius:0 10px 10px 0}
.rs-stepper .val{flex:1; text-align:center; font-size:17px; font-weight:700; border-top:1.5px solid var(--mz-line); border-bottom:1.5px solid var(--mz-line); height:46px; display:grid; place-items:center}
.rs-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.rs-slot{position:relative; padding:11px 8px 9px; border-radius:11px; cursor:pointer; border:1.5px solid var(--mz-line); background:var(--mz-field); text-align:center; transition:transform .08s ease, border-color .15s}
.rs-slot:hover{transform:translateY(-1px)}
.rs-slot .h{font-weight:700; font-size:16px; color:var(--mz-text)}
.rs-slot .c{font-size:11px; color:var(--mz-muted); margin-top:2px}
.rs-slot.sel{border-color:var(--mz-accent); background:var(--mz-field); box-shadow:0 0 0 2px var(--mz-accent) inset}
.rs-slot.full{opacity:.4; cursor:not-allowed}
.rs-slot .bar{height:4px; border-radius:3px; background:var(--mz-line); margin-top:8px; overflow:hidden}
.rs-slot .bar>i{display:block; height:100%; background:var(--mz-accent)}
.rs-empty{color:var(--mz-muted); font-size:14px; padding:14px 0; text-align:center}
.rs-btn{width:100%; padding:15px; border:none; border-radius:12px; cursor:pointer; background:var(--mz-grad); color:var(--mz-on-accent); font-size:16px; font-weight:700; font-family:inherit; transition:background .15s}
.rs-btn:hover{filter:brightness(.93)}
.rs-btn:disabled{opacity:.45; cursor:not-allowed}
.rs-btn.wa{display:block; text-align:center; text-decoration:none; background:var(--mz-wa); color:#fff; margin-top:10px}
.rs-btn.wa:hover{background:#178a4b}
.rs-done{text-align:center; padding:14px 6px}
.rs-code{font-family:var(--mz-font-display); font-size:30px; font-weight:700; color:var(--mz-accent); letter-spacing:.06em; margin:10px 0}
.rs-mini{font-size:13px; color:var(--mz-muted); margin-top:18px; text-align:center}
.rs-msg{font-size:14px; margin-top:10px}
.rs-msg.err{color:var(--mz-warn)}

.mz-foot{text-align:center; color:var(--mz-muted); font-size:12px; padding:22px}
.hidden{display:none !important}

@media (max-width:720px){
  .ev-feat{grid-template-columns:1fr}
  .ev-feat .poster{min-height:200px}
  .ev-feat .poster::after{background:linear-gradient(180deg, transparent 50%, var(--mz-surface) 100%)}
}

/* Brillo metálico en botones con degradé (acabado premium) */
.ev-card .mini a:not(.off), .ev-cta, .rs-btn:not(.wa), .mz-nav a.cta{
  box-shadow:0 3px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.32);
}

/* Selector de hora desplegable (compacto) */
.rs-select{width:100%; padding:14px 16px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--mz-line); border-radius:12px; background:var(--mz-field); color:var(--mz-text);
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mz-accent) 50%),linear-gradient(135deg,var(--mz-accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center; background-size:6px 6px,6px 6px; background-repeat:no-repeat}
.rs-select:focus{outline:2px solid var(--mz-accent); border-color:var(--mz-accent)}

/* Hero: logo grande centrado (portada) */
.mz-hero{display:flex; justify-content:center; align-items:center; padding:18px 20px 4px; text-align:center}
.mz-hero-logo{max-width:280px; width:48%; height:auto; display:block;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
@media (max-width:600px){ .mz-hero{padding:14px 20px 2px} .mz-hero-logo{width:64%; max-width:230px} }
/* Logo del encabezado (nav) más pequeño para que no compita con el hero */
.mz-top .mz-logo, .mz-top img{max-height:46px; width:auto}


/* Evitar que los campos se salgan del cuadro (móvil) */
.rs-card{overflow:hidden}
.rs-input, .rs-select{max-width:100%; box-sizing:border-box}
.rs-input[type=date]{-webkit-appearance:none; appearance:none; min-width:0; width:100%}
.rs-row.three>div{min-width:0}

/* Comprobante de reserva (ticket) */
.rs-ticket{background:var(--mz-field); border:1px solid var(--mz-line); border-radius:16px; padding:22px; text-align:center; margin-bottom:6px}
.rs-ticket-head{border-bottom:1px dashed var(--mz-line); padding-bottom:14px; margin-bottom:14px}
.rs-ticket .rs-code{font-family:var(--mz-font-display); font-size:34px; letter-spacing:1px; margin-top:2px; background:var(--mz-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--mz-accent)}
.rs-ticket-body{display:flex; flex-direction:column; gap:8px; text-align:left}
.tk-row{display:flex; justify-content:space-between; gap:12px; font-size:15px; border-bottom:1px solid var(--mz-line); padding-bottom:8px}
.tk-row:last-child{border-bottom:none}
.tk-row span{color:var(--mz-muted)}
.tk-row b{color:var(--mz-text); font-weight:700; text-align:right}

/* Complementos / extras en la reserva */
.rs-extras{display:flex; flex-direction:column; gap:8px}
.rs-extra{display:flex; align-items:center; gap:10px; padding:11px 14px; border:1.5px solid var(--mz-line); border-radius:11px; background:var(--mz-field); cursor:pointer; font-size:15px}
.rs-extra input{width:18px; height:18px; accent-color:var(--mz-accent)}

.rs-extra span{display:flex; flex-direction:column; gap:2px}
.rs-incluye{color:var(--mz-muted); font-size:13px; line-height:1.4; font-weight:400}

/* Paquetes/kits con adicionales y total */
.rs-kits{display:flex; flex-direction:column; gap:12px}
.rs-kit{border:1.5px solid var(--mz-line); border-radius:12px; background:var(--mz-field); overflow:hidden}
.rs-kit-top{display:flex; align-items:flex-start; gap:10px; padding:13px 14px; cursor:pointer; font-size:15px}
.rs-kit-top input{width:18px; height:18px; margin-top:2px; accent-color:var(--mz-accent)}
.rs-kit-top span{display:flex; flex-direction:column; gap:2px}
.rs-precio{color:var(--mz-accent); font-weight:700}
.rs-adic{border-top:1px dashed var(--mz-line); padding:10px 14px 12px 38px; display:flex; flex-direction:column; gap:8px}
.rs-adic-item{display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer}
.rs-adic-item input{width:16px; height:16px; accent-color:var(--mz-accent)}
.rs-total{margin-top:6px; text-align:right; font-size:17px}
.rs-total b{color:var(--mz-accent); font-size:20px}
.rs-medios{margin-top:8px; padding:12px 14px; border:1px dashed var(--mz-line); border-radius:10px; font-size:14px; line-height:1.6; background:var(--mz-field)}

/* Total, detalle del paquete y chips de adicionales */
.rs-total-box{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; border:1.5px solid var(--mz-line); border-radius:12px; background:var(--mz-field); padding:9px 12px; min-height:50px}
.rs-total-box span{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mz-muted)}
.rs-total-box b{font-size:22px; color:var(--mz-accent); line-height:1}
.rs-incluye-box{margin-top:10px; padding:12px 14px; border:1px dashed var(--mz-line); border-radius:10px; font-size:14px; line-height:1.7; color:var(--mz-muted); background:var(--mz-field)}
.rs-chips{display:flex; flex-wrap:wrap; gap:8px}
.rs-chips:not(:empty){margin-top:10px}
.rs-chip{display:inline-flex; align-items:center; gap:8px; background:var(--mz-field); border:1.5px solid var(--mz-line); border-radius:999px; padding:7px 13px; font-size:14px}
.rs-chip b{color:var(--mz-accent)}
.rs-chip i{cursor:pointer; font-style:normal; color:var(--mz-muted); font-weight:700}
.rs-chip i:hover{color:#b4451f}

/* Opciones de pago */
#rs-pago .rs-pay{display:flex; align-items:center; gap:9px; padding:11px 14px; border:1.5px solid var(--mz-line); border-radius:11px; background:var(--mz-field); cursor:pointer; font-size:15px; margin-bottom:8px}
#rs-pago .rs-pay input{width:18px; height:18px; accent-color:var(--mz-accent)}
#rs-comprobante input[type=file]{padding:10px}