/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:#fff;color:#111827;line-height:1.6;-webkit-font-smoothing:antialiased;}
*{scrollbar-width:thin;scrollbar-color:#e5e7eb transparent;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{display:block;max-width:100%;}

/* ── Tokens ──────────────────────────────────────────────────── */
:root{
  --green:    #16a34a;
  --green-lt: #f0fdf4;
  --green-md: #dcfce7;
  --gold:     #b45309;
  --gold-lt:  #fffbeb;
  --gold-md:  #fef3c7;
  --text:     #111827;
  --text-2:   #6b7280;
  --text-3:   #9ca3af;
  --border:   #e5e7eb;
  --surface:  #f9fafb;
  --r:        10px;
  --r-sm:     7px;
  --hh:       60px;
  --sh:       0 1px 3px rgba(0,0,0,.07);
  --sh-md:    0 4px 16px rgba(0,0,0,.07);
}

/* ── Layout ──────────────────────────────────────────────────── */
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
.w-full{width:100%;}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:10px 20px;border-radius:var(--r-sm);
  background:var(--green);color:#fff;font-size:14px;font-weight:600;
  border:none;transition:background .15s,box-shadow .15s;white-space:nowrap;
}
.btn-primary:hover{background:#15803d;box-shadow:0 4px 12px rgba(22,163,74,.22);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:10px 20px;border-radius:var(--r-sm);
  background:transparent;color:var(--text);font-size:14px;font-weight:500;
  border:1px solid var(--border);transition:background .15s,border-color .15s;white-space:nowrap;
}
.btn-ghost:hover{background:var(--surface);border-color:#d1d5db;}
.btn-sm{padding:7px 14px;font-size:13px;}
.btn-lg{padding:13px 28px;font-size:15px;}

/* ── HEADER ──────────────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--hh);background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  transition:box-shadow .2s;
}
.header.elevated{box-shadow:var(--sh);}
.header-inner{
  max-width:1120px;margin:0 auto;padding:0 24px;
  height:100%;display:flex;align-items:center;gap:28px;
  position:relative;
}
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.brand-mark{
  width:30px;height:30px;border-radius:7px;
  background:var(--green);color:#fff;font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.brand-name{font-size:14px;font-weight:700;color:var(--text);}
.nav{display:flex;align-items:center;gap:2px;flex:1;}
.nav-a{padding:5px 11px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-2);transition:color .15s,background .15s;}
.nav-a:hover{color:var(--text);background:var(--surface);}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.btn-nav-login{padding:7px 16px;border-radius:var(--r-sm);background:var(--green);color:#fff;font-size:13px;font-weight:600;border:none;transition:background .15s;}
.btn-nav-login:hover{background:#15803d;}
.nav-user{display:flex;align-items:center;gap:10px;}
.nav-avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.nav-avatar-vip{background:var(--gold);}
.nav-user-info{line-height:1.25;}
.nav-user-name{font-size:13px;font-weight:600;color:var(--text);}
.nav-user-plan{font-size:11px;color:var(--text-3);}
.btn-nav-logout{
  padding:5px 11px;border-radius:6px;background:transparent;color:var(--text-3);
  font-size:12px;font-weight:500;border:1px solid var(--border);transition:all .15s;
}
.btn-nav-logout:hover{color:var(--text);border-color:#9ca3af;}

/* Hamburger */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;background:none;border:none;
  width:40px;height:40px;cursor:pointer;border-radius:8px;
  margin-left:auto;flex-shrink:0;
}
.nav-toggle:hover{background:var(--surface);}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .25s;}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* Drawer */
.drawer{
  display:none;position:fixed;inset:0;z-index:850;
  background:rgba(0,0,0,.32);
  opacity:0;transition:opacity .25s;
  pointer-events:none;
}
.drawer.open{opacity:1;pointer-events:auto;}
.drawer-inner{
  position:absolute;top:var(--hh);left:0;right:0;
  background:#fff;border-bottom:1px solid var(--border);
  padding:16px 20px 24px;display:flex;flex-direction:column;gap:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transform:translateY(-8px);transition:transform .25s;
}
.drawer.open .drawer-inner{transform:translateY(0);}
.drawer-a{
  padding:11px 14px;border-radius:8px;font-size:15px;
  font-weight:500;color:var(--text-2);transition:all .15s;display:block;
}
.drawer-a:hover{color:var(--text);background:var(--surface);}
.drawer-a-vip{color:var(--gold)!important;font-weight:600;}
.drawer-auth{margin-top:12px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}

/* ── MODAL ───────────────────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.22);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px;}
.overlay.on{display:flex;}
.dialog{background:#fff;border-radius:14px;padding:32px 28px;width:100%;max-width:380px;position:relative;box-shadow:var(--sh-md);animation:dlg-in .18s ease;}
@keyframes dlg-in{from{opacity:0;transform:scale(.96) translateY(8px);}}
.dialog-close{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text-3);display:flex;align-items:center;justify-content:center;transition:all .15s;}
.dialog-close:hover{background:var(--border);color:var(--text);}
.dialog-logo{width:40px;height:40px;border-radius:10px;background:var(--green);color:#fff;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.dialog-title{font-size:18px;font-weight:700;margin-bottom:4px;}
.dialog-sub{font-size:13px;color:var(--text-2);margin-bottom:18px;}
.dialog-err{display:none;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:13px;border-radius:7px;padding:9px 12px;margin-bottom:12px;}
.dialog-ok{display:none;background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;font-size:13px;border-radius:7px;padding:9px 12px;margin-bottom:12px;}
.dialog-foot{text-align:center;font-size:13px;color:var(--text-3);margin-top:14px;}
.dialog-foot a{color:var(--green);font-weight:500;}
.login-forgot{font-size:12px;color:var(--text-3);text-decoration:none;}
.login-forgot:hover{color:var(--green);}
.login-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-3);font-size:12px;}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 16px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .15s;}
.btn-google:hover{background:var(--surface);border-color:var(--text-3);}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field-label{font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;}
.field-input{padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:14px;font-family:inherit;color:var(--text);background:#fff;transition:border-color .15s,box-shadow .15s;}
.field-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.1);}
.field-input::placeholder{color:var(--text-3);}
.field-req{color:#dc2626;margin-left:2px;}
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── Modal detalle premio público ────────────────────────────── */
.modal{background:#fff;border-radius:var(--r);width:100%;max-width:540px;
  max-height:90vh;overflow-y:auto;margin:auto;-ms-overflow-style:none;scrollbar-width:none;}
.modal::-webkit-scrollbar{display:none;}
.modal-hdr{padding:18px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--border);}
.modal-ttl{font-size:15px;font-weight:800;}
.modal-x{width:26px;height:26px;background:#f4f4f5;border:none;border-radius:6px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#6b7280;transition:all .13s;flex-shrink:0;}
.modal-x:hover{background:#e5e7eb;}
.modal-body{padding:18px 20px;}
.modal-foot{padding:0 20px 18px;display:flex;gap:8px;justify-content:flex-end;}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.det-item{background:#f4f4f5;padding:8px 12px;border-radius:6px;}
.det-lbl{font-size:10px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.det-val{font-size:13px;font-weight:700;word-break:break-word;}
.det-val a{color:var(--green);text-decoration:underline;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;
  font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:all .15s;font-family:inherit;}
.btn.btn-s{background:#f4f4f5;color:#1f2937;border-color:#e5e7eb;}
.btn.btn-s:hover{border-color:var(--green);color:var(--green);}
@media(max-width:500px){
  .det-grid{grid-template-columns:1fr;}
  .modal{max-width:100%;border-radius:var(--r) var(--r) 0 0;}
  #premioDetailModal{align-items:flex-end;padding:0;}
  .modal-hdr{padding:16px 16px 12px;}
  .modal-body{padding:14px 16px;}
  .modal-foot{padding:12px 16px 16px;}
}

/* ── Password toggle & rules ─────────────────────────────────── */
.pass-wrap{position:relative;display:flex;align-items:center;}
.pass-wrap .field-input{width:100%;padding-right:40px;}
.pass-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;
  color:var(--text-3);padding:4px;display:flex;align-items:center;transition:color .15s;}
.pass-toggle:hover{color:var(--text);}

.pass-rules{list-style:none;margin:8px 0 0;padding:10px 12px;
  background:#f8fafc;border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;gap:5px;}
.pass-rules li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3);transition:color .2s;}
.pass-rules li.ok{color:#16a34a;}
.pass-rules li .rule-dot{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:700;transition:background .2s;}
.pass-rules li.ok .rule-dot{background:#16a34a;border-color:#16a34a;color:#fff;}

/* ── REGISTER WIZARD ─────────────────────────────────────────── */
.reg-dialog{max-width:480px;max-height:92vh;overflow-y:auto;padding:28px;}
/* Steps */
.reg-steps{display:flex;align-items:center;margin-bottom:22px;}
.reg-step-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.reg-step-dot{width:28px;height:28px;border-radius:50%;background:var(--border);color:var(--text-3);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.reg-step-item span{font-size:10px;color:var(--text-3);font-weight:500;white-space:nowrap;}
.reg-step-item.active .reg-step-dot{background:var(--green);color:#fff;}
.reg-step-item.done .reg-step-dot{background:#bbf7d0;color:#16a34a;}
.reg-step-line{flex:1;height:2px;background:var(--border);margin:0 6px;margin-bottom:16px;}
/* Plans grid */
.reg-planes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.reg-plan-card{border:2px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .15s;}
.reg-plan-card:hover{border-color:var(--green);background:var(--surface);}
.reg-plan-card.reg-plan-sel{border-color:var(--green);background:#f0fdf4;}
.reg-plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.reg-plan-name{font-size:14px;font-weight:700;color:var(--text);}
.reg-plan-price{font-size:14px;font-weight:800;color:var(--green);}
.reg-plan-days{font-size:12px;color:var(--text-3);}
/* Nav row */
.reg-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;}
.reg-nav .btn-ghost{flex:0 0 auto;}
.reg-nav .btn-primary{flex:1;}

/* ── PROFILE MODAL ───────────────────────────────────────────── */
.dialog-profile{max-width:580px;max-height:88vh;overflow-y:auto;padding:28px;}
.prof-header{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border-radius:10px;margin-bottom:16px;}
.prof-header-vip{background:linear-gradient(135deg,#fefce8,#fef9c3);}
.prof-avatar{width:54px;height:54px;border-radius:50%;background:var(--green);color:#fff;font-size:19px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:-1px;}
.prof-avatar-vip{background:linear-gradient(135deg,#d97706,#f59e0b);}
.prof-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px;}
.prof-plan-badge{font-size:12px;font-weight:600;color:var(--text-3);}
.prof-plan-vip{color:#d97706;}
/* Tabs */
.prof-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:16px;gap:0;}
.prof-tab{flex:1;padding:9px 6px;font-size:12px;font-weight:600;color:var(--text-3);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px;}
.prof-tab:hover{color:var(--text);}
.prof-tab.on{color:var(--green);border-bottom-color:var(--green);}
.prof-tab-count{font-size:10px;font-weight:700;background:var(--green);color:#fff;border-radius:99px;padding:1px 6px;}
/* Pane */
.prof-pane{margin-bottom:14px;}
.prof-fields{display:flex;flex-direction:column;gap:0;background:var(--surface);border-radius:10px;overflow:hidden;}
.prof-row{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border);}
.prof-row:last-child{border-bottom:none;}
.prof-row-label{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;width:44%;flex-shrink:0;background:var(--surface);}
.prof-row-value{font-size:13px;color:var(--text);padding:10px 12px;line-height:1.4;}
.prof-plan-val{font-weight:600;color:var(--text-2);}
.prof-plan-val-active{color:#16a34a;}
.prof-dias{font-size:11px;color:var(--text-3);}
.prof-dias-warn{color:#dc2626;}
.prof-ref{font-size:11px;background:#f1f5f9;padding:2px 7px;border-radius:4px;font-family:monospace;}
.prof-actions{display:flex;flex-direction:column;gap:8px;}
/* Recibos */
.recibos-list{display:flex;flex-direction:column;gap:8px;}
.recibo-item{border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.recibo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.recibo-plan{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px;}
.recibo-monto{font-size:13px;font-weight:700;color:var(--green);}
.recibo-pdf-btn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text-2);cursor:pointer;transition:all .15s;}
.recibo-pdf-btn:hover{background:var(--green);color:#fff;border-color:var(--green);}
.recibo-meta{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.recibo-sep{color:var(--border);}
.recibo-badge-ok{font-size:10px;font-weight:600;padding:2px 7px;border-radius:99px;background:#dcfce7;color:#16a34a;}
.recibo-badge-exp{font-size:10px;font-weight:600;padding:2px 7px;border-radius:99px;background:#f1f5f9;color:var(--text-3);}

/* ── PAYMENT MODAL ───────────────────────────────────────────── */
.dialog-payment{max-width:420px;max-height:92vh;overflow-y:auto;padding:28px;}
/* Steps */
.pay-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:22px;}
.pay-step-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pay-step-dot{width:28px;height:28px;border-radius:50%;background:var(--border);color:var(--text-3);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.pay-step-dot.on{background:var(--green);color:#fff;}
.pay-step-item span{font-size:10px;color:var(--text-3);font-weight:500;}
.pay-step-line{flex:1;height:2px;background:var(--border);margin:0 6px;margin-bottom:16px;min-width:24px;}
/* Plan card */
.pay-plan-card{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;border-radius:10px;padding:14px 16px;margin-bottom:16px;text-align:center;}
.pay-plan-name{font-size:13px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;}
.pay-plan-price{font-size:28px;font-weight:800;color:#16a34a;margin:4px 0;}
.pay-plan-period{font-size:12px;color:var(--text-3);}
/* Methods */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;}
.pay-method-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;border-radius:10px;border:2px solid var(--border);background:#fff;cursor:pointer;transition:all .15s;font-size:13px;font-weight:600;color:var(--text);}
.pay-method-btn:hover{border-color:var(--green);background:var(--surface);transform:translateY(-1px);}
.pay-method-icon{font-size:24px;margin-bottom:2px;}
.pay-method-sub{font-size:11px;font-weight:400;color:var(--text-3);}
/* Card input */
.pay-card-input{font-family:monospace;letter-spacing:2px;font-size:15px;}
/* Yape hint */
.yape-hint{display:flex;align-items:flex-start;gap:8px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;padding:10px 12px;font-size:12px;color:#6d28d9;margin-bottom:14px;}
/* Back link */
.btn-link{display:block;width:100%;text-align:center;padding:8px;font-size:13px;color:var(--text-3);background:none;border:none;cursor:pointer;margin-top:8px;}
.btn-link:hover{color:var(--green);}
/* Processing */
.pay-processing{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0;}
.pay-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.pay-proc-text{font-size:15px;color:var(--text-2);font-weight:500;}
/* Result */
.pay-result{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0;text-align:center;}
.pay-result-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;}
.pay-result-ok{background:#dcfce7;color:#16a34a;}
.pay-result-err{background:#fee2e2;color:#dc2626;}
.pay-result-title{font-size:18px;font-weight:700;}
.pay-result-sub{font-size:13px;color:var(--text-3);font-family:monospace;}
.pay-welcome{margin-top:8px;width:100%;}
.pay-welcome-msg{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:14px 16px;font-size:13px;color:#166534;line-height:1.6;text-align:left;}

/* ── HERO ────────────────────────────────────────────────────── */
.hero{position:relative;padding:calc(var(--hh) + 72px) 0 88px;overflow:hidden;}
.hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.deco-circle{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22;}
.deco-1{width:480px;height:480px;background:radial-gradient(circle,#bbf7d0,transparent 70%);top:-160px;right:-80px;}
.deco-2{width:340px;height:340px;background:radial-gradient(circle,#d1fae5,transparent 70%);bottom:-80px;left:-60px;}
.hero-body{position:relative;z-index:1;max-width:640px;margin:0 auto;text-align:center;}
.hero-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 13px;border-radius:99px;border:1px solid var(--green-md);background:var(--green-lt);font-size:12px;font-weight:600;color:var(--green);margin-bottom:24px;}
.hero-chip.chip-vip{border-color:var(--gold-md);background:var(--gold-lt);color:var(--gold);}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:dot-pulse 2s ease-in-out infinite;}
.chip-dot-gold{background:var(--gold);}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.18);}50%{box-shadow:0 0 0 6px rgba(22,163,74,.04);}}
.hero-title{font-size:clamp(2.1rem,5.5vw,3.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--text);margin-bottom:18px;}
.hero-title em{font-style:normal;color:var(--green);}
.hero-title .hero-name{color:var(--gold);}
.hero-desc{font-size:clamp(.92rem,2vw,1.02rem);color:var(--text-2);max-width:460px;margin:0 auto 30px;line-height:1.75;}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ── STATS ───────────────────────────────────────────────────── */
.stats-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;background:#fff;}
.stats-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 40px;}
.stat-val{font-size:1.75rem;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.stat-key{font-size:11px;color:var(--text-3);font-weight:500;}
.stat-sep{width:1px;height:30px;background:var(--border);}

/* ── SECTIONS ────────────────────────────────────────────────── */
.section{padding:40px 0;background:var(--surface);}
.section-vip{padding:40px 0;background:#fff8f3;}
.sec-box{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.sec-box-vip{background:#fffdf5;border-color:var(--gold-md);}
.sec-box-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:24px;
}
.sec-box-head .section-title{margin-bottom:0;}
.sec-box-head .section-desc{max-width:300px;text-align:right;margin:0;padding-top:2px;}
.section-label{font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;}
.section-label-gold{color:var(--gold);}
.section-title{font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.section-desc{font-size:13px;color:var(--text-2);line-height:1.65;}

/* ── GRIDS ───────────────────────────────────────────────────── */
.grid-3{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.grid-2{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));}

/* ── SKELETON ────────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,#f3f4f6 0%,#e9eaec 50%,#f3f4f6 100%);background-size:400% 100%;border-radius:var(--r);animation:sk-wave 1.6s ease infinite;}
.h-96{height:340px;}.h-80{height:280px;}
@keyframes sk-wave{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;}
.badge-live{background:var(--green-lt);color:var(--green);border:1px solid var(--green-md);}
.badge-vip{background:var(--gold-lt);color:var(--gold);border:1px solid var(--gold-md);}

/* ── SORTEO BLOCK — wireframe minimalista ────────────────────── */
.sorteo-block{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:20px;
}
.sorteo-block:last-child{margin-bottom:0;}
.sorteo-block-vip{ border-color:var(--border); }

/* ── Cabecera tipo wireframe (chip + botón) ── */
.sb-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 16px 0;
}
.sb-head-left{ display:flex; flex-direction:column; gap:5px; }

/* Chip "● Premios" */
.sb-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--text);
  line-height:1;
}
.sb-chip-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(22,163,74,.18);
  animation:dot-pulse 2s ease-in-out infinite;
}
.sorteo-block-vip .sb-chip-dot{
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(180,83,9,.15);
}

/* Subtítulo (fecha cierre / contador) */
.sb-sub{
  font-size:11px; color:var(--text-3);
  padding-left:2px; font-weight:500;
}

/* Botón "Mostrar más" */
.sb-more{
  flex-shrink:0; padding:9px 22px;
  border-radius:99px; background:var(--green);
  color:#fff; font-size:13px; font-weight:700;
  border:none; cursor:pointer; font-family:inherit;
  transition:background .15s, transform .15s, box-shadow .15s;
  white-space:nowrap; min-height:40px;
}
.sb-more:hover{
  background:#15803d;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(22,163,74,.25);
}
.sorteo-block-vip .sb-more{ background:var(--gold); }
.sorteo-block-vip .sb-more:hover{ background:#92400e; }

/* ── Grid de premios portrait ─────────────────── */
.sb-prizes{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:20px 20px 24px;
}

/* Card portrait dentro del grid */
.sb-prizes .pc-card{
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.sb-prizes .pc-card-vip{ border-color:var(--border); }
.sb-prizes .pc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  border-color:#d1d5db;
}
.sb-prizes .pc-card-vip:hover{
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  border-color:#d1d5db;
}

/* Imagen portrait más alta */
.sb-prizes .pc-img{ height:180px; }

/* Body centrado, compacto */
.sb-prizes .pc-body{
  padding:10px 12px 6px;
  text-align:center; gap:3px;
}
.sb-prizes .pc-title{
  font-size:13px; font-weight:700;
  text-align:center;
  -webkit-line-clamp:2; line-clamp:2;
}
.sb-prizes .pc-label{
  display:block; text-align:center;
  font-size:11px; font-weight:600;
  color:var(--text-3); text-transform:uppercase;
  letter-spacing:.07em; margin-top:2px;
}
.sb-prizes .pc-label-vip{ color:var(--gold); }

/* Botón: oculto por defecto, se revela en hover */
.sb-prizes .pc-foot{
  opacity:0;
  transition:opacity .22s ease;
}
.sb-prizes .pc-card:hover .pc-foot{
  opacity:1;
}

/* Barra vip encima queda desactivada (limpio) */
.sorteo-block::before{ display:none; }
.sorteo-block-vip::before{ display:none; }

/* grid de premios — controlado por .sb-prizes (ver definición en SORTEO BLOCK) */

/* ── PRIZE CARD — minimalista ─────────────────────────────────── */
.pc-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.09);
  border-color:#d1d5db;
}

/* VIP — borde ámbar sin barra superior (más limpio) */
.pc-card-vip{ border-color:#fde68a; }
.pc-card-vip:hover{ border-color:#fbbf24; box-shadow:0 12px 32px rgba(180,83,9,.12); }
.pc-card-vip::before{ display:none; } /* quita la barra de 2px */

/* Imagen — parte superior del card */
.pc-img{
  height:180px; flex-shrink:0;
  background-size:cover; background-position:center;
  background-color:var(--surface);
}
.pc-img-empty{
  display:flex; align-items:center; justify-content:center;
  font-size:52px;
  background:linear-gradient(135deg,#f3f4f6,#e9eaec);
}

/* Overlay VIP sobre la imagen (esquina sup-der) */
.pc-vip-badge{
  position:absolute; top:10px; right:10px;
  background:rgba(180,83,9,.88);
  color:#fff; font-size:10px; font-weight:800;
  padding:3px 9px; border-radius:99px;
  letter-spacing:.04em; backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
}

/* Overlay de fecha sobre la imagen (esquina inf-izq) */
.pc-date-overlay{
  position:absolute; bottom:10px; left:10px;
  background:rgba(0,0,0,.52); color:#fff;
  font-size:10px; font-weight:700;
  padding:3px 9px; border-radius:6px;
  letter-spacing:.04em; backdrop-filter:blur(4px);
}

/* Cuerpo — debajo de la imagen */
.pc-body{
  padding:10px 12px 8px;
  display:flex; flex-direction:column; gap:2px;
  background:#fff;
}
.pc-meta{ display:none; } /* badges internos ocultos — se usa overlay */

/* Título — 2 líneas máximo */
.pc-title{
  font-size:13px; font-weight:700; color:var(--text);
  line-height:1.3;
  overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical;
}


/* Etiqueta encima del título */
.pc-label{
  font-size:10px; font-weight:700;
  color:var(--text-3); text-transform:uppercase;
  letter-spacing:.12em;
  order:-1;
}
.pc-label-vip{ color:var(--gold); }

/* Descripción — oculta (card minimalista) */
.pc-desc{ display:none; }

/* Pie — botón debajo del body */
.pc-foot{
  padding:0 12px 10px;
  display:flex; justify-content:center;
  background:#fff;
}
.pc-foot .btn-primary,
.pc-foot .btn-ghost,
.pc-foot a.btn-primary{
  width:auto !important;
  padding:8px 26px;
  border-radius:99px;
  font-size:13px; font-weight:600;
  letter-spacing:.01em;
}

/* ── GANADORES CAROUSEL ──────────────────────────────────────── */
/* ── GANADORES — grid 5 col ──────────────────────────────────── */
.gana-header{ margin-bottom:18px; }
.gana-chip{
  font-size:13px; font-weight:600; color:var(--text);
}
.gana-chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; }
.gana-sub{ font-size:12px; color:var(--text-3); margin:6px 0 0 4px; }

.gana-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.gana-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.gana-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.10); border-color:#d1d5db; }
.gana-img-wrap{ position:relative; }
.gana-img{ width:100%; height:140px; background-size:cover; background-position:center; background-color:var(--surface); }
.gana-img-empty{ display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg,#f3f4f6,#e9eaec); }
.gana-avatar{ position:absolute; bottom:-14px; left:12px; width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.14); }
.gana-body{ padding:20px 12px 12px; display:flex; flex-direction:column; gap:3px; }
.gana-name{ font-size:12px; font-weight:700; color:var(--text); }
.gana-prize{ font-size:11px; color:var(--text-2); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }

/* ── EVENTOS (4 cards horizontal) ───────────────────────────── */
#eventosList{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ev-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:0;display:flex;flex-direction:column;gap:0;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ev-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.10);border-color:#d1d5db;}
.ev-top{display:flex;align-items:flex-start;justify-content:space-between;}
.ev-date-box{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.ev-day{font-size:24px;font-weight:900;color:var(--text);}
.ev-mon{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}
.ev-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;flex:1;}
.ev-place{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px;}
.ev-meta{font-size:11px;color:var(--text-3);}
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:600;}
.tag-virtual{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.tag-presencial{background:var(--green-lt);color:var(--green);border:1px solid var(--green-md);}
.tag-on{background:var(--green-lt);color:var(--green);border:1px solid var(--green-md);}
.tag-off{background:var(--surface);color:var(--text-3);border:1px solid var(--border);}
.btn-evento{padding:5px 11px;border-radius:6px;background:var(--green-lt);color:var(--green);font-size:11px;font-weight:600;border:1px solid var(--green-md);transition:all .15s;white-space:nowrap;}
.btn-evento:hover{background:var(--green);color:#fff;border-color:var(--green);}

/* ── PLANES (siempre centradas) ──────────────────────────────── */
.plans-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:stretch;}
.plan-card{
  background:#fff;border:1.5px solid var(--border);
  border-radius:var(--r);padding:22px 18px;
  display:flex;flex-direction:column;gap:14px;
  flex:0 0 240px;width:240px;
  position:relative;overflow:hidden;
  transition:box-shadow .18s,border-color .18s;
}
.plan-card:hover{box-shadow:var(--sh-md);}
.plan-featured{border-color:var(--green);box-shadow:0 0 0 1px var(--green);}
.plan-featured::before{content:'Más popular';position:absolute;top:0;left:0;right:0;background:var(--surface);color:var(--green);text-align:center;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 0;border-bottom:1px solid var(--border);}
.plan-featured{padding-top:36px;}
.plan-current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.plan-current::before{content:'Tu plan';position:absolute;top:0;left:0;right:0;background:var(--surface);color:var(--gold);text-align:center;font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 0;border-bottom:1px solid var(--border);}
.plan-current{padding-top:36px;}
.plan-name{font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.07em;}
.plan-price{display:flex;align-items:baseline;gap:3px;margin:5px 0 2px;}
.plan-currency{font-size:13px;font-weight:600;color:var(--text);}
.plan-amount{font-size:2.2rem;font-weight:900;color:var(--text);letter-spacing:-.03em;line-height:1;}
.plan-current .plan-amount{color:var(--gold);}
.plan-featured .plan-amount{color:var(--green);}
.plan-period{font-size:12px;color:var(--text-3);}
.plan-desc{font-size:12px;color:var(--text-2);line-height:1.55;}
.plan-perks{list-style:none;display:flex;flex-direction:column;gap:6px;flex:1;}
.plan-perk{font-size:12px;color:var(--text);display:flex;align-items:flex-start;gap:7px;}
.perk-check{width:14px;height:14px;border-radius:50%;background:var(--green-lt);color:var(--green);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.btn-plan{width:100%;padding:10px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--text);transition:all .15s;margin-top:auto;}
.btn-plan:hover{background:var(--surface);border-color:#9ca3af;}
.plan-featured .btn-plan{background:var(--green);color:#fff;border-color:var(--green);}
.plan-featured .btn-plan:hover{background:#15803d;}
.btn-plan-active{width:100%;padding:10px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1.5px solid var(--gold-md);background:var(--gold-lt);color:var(--gold);margin-top:auto;cursor:default;}

/* ── PROMOS VIP ──────────────────────────────────────────────── */
/* ── PROMOS — header ─────────────────────────────────────────── */
.promo-section-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:18px;
}
.promo-section-left{ display:flex; flex-direction:column; gap:4px; }
.promo-chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid var(--border); border-radius:99px;
  padding:5px 14px; font-size:13px; font-weight:600; color:var(--text);
  background:#fff;
}
.promo-chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; }
.promo-sub{ font-size:12px; color:var(--text-3); margin-left:4px; }
.promo-more{
  border-radius:99px; background:var(--green); color:#fff;
  font-size:13px; font-weight:600; padding:7px 18px; border:none; cursor:pointer;
  transition:background .15s;
}
.promo-more:hover{ background:#15803d; }

/* ── PROMOS — grid 2 col ─────────────────────────────────────── */
.promo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.promo-card.promo-hidden{ display:none; }
.promo-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.promo-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.10); border-color:#d1d5db; }
.promo-img{
  width:100%; height:200px;
  background-size:cover; background-position:center;
  background-color:var(--surface); flex-shrink:0;
}
.promo-img-empty{ display:flex; align-items:center; justify-content:center; font-size:48px; background:linear-gradient(135deg,#fff7ed,#ffedd5); }
.promo-foot{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px 14px;
}
.promo-logo{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--text-2); text-align:center;
  line-height:1.2; overflow:hidden;
}
.promo-info{ flex:1; display:flex; flex-direction:column; gap:2px; }
.promo-title{ font-size:13px; font-weight:700; color:var(--text); }
.promo-desc{ font-size:11px; color:var(--text-3); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.promo-price{
  flex-shrink:0; background:var(--green); color:#fff;
  font-size:12px; font-weight:700; padding:7px 12px; border-radius:10px;
  border:none; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.promo-price:hover{ background:#15803d; }
.promo-price-locked{ background:var(--border); color:var(--text-3); }
.promo-price-locked:hover{ background:#d1d5db; }
.promo-valid{font-size:11px;color:var(--text-3);}
.btn-promo{padding:6px 14px;border-radius:var(--r-sm);background:var(--green);color:#fff;font-size:12px;font-weight:600;border:none;transition:background .15s;}
.btn-promo:hover{background:#15803d;}

/* ── EMPTY ───────────────────────────────────────────────────── */
.empty{display:none;flex-direction:column;align-items:center;gap:10px;padding:56px 20px;text-align:center;}
.empty-icon{font-size:38px;line-height:1;}
.empty p{font-size:14px;color:var(--text-2);}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer{background:var(--text);color:#fff;padding:52px 0 0;}
.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07);}
.footer .brand-mark{background:#fff;color:var(--text);}
.footer .brand-name{color:#fff;}
.footer-tagline{font-size:12px;color:rgba(255,255,255,.32);margin:10px 0 16px;}
.footer-socials{display:flex;gap:8px;}
.social-btn{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:all .15s;}
.social-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.footer-col{display:flex;flex-direction:column;gap:8px;}
.footer-col-title{font-size:10px;font-weight:700;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px;}
.footer-col a{font-size:12px;color:rgba(255,255,255,.42);transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 0;font-size:11px;color:rgba(255,255,255,.26);}
.footer-legal{display:flex;gap:16px;}
.footer-legal a{font-size:11px;color:rgba(255,255,255,.26);}
.footer-legal a:hover{color:rgba(255,255,255,.6);}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:7px;}
.toast{padding:10px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:500;opacity:0;transform:translateY(8px) scale(.97);transition:all .22s;box-shadow:var(--sh-md);max-width:300px;border:1px solid transparent;}
.toast.on{opacity:1;transform:none;}
.toast-success{background:#fff;border-color:var(--green-md);color:var(--green);}
.toast-info{background:#fff;border-color:#bfdbfe;color:#1d4ed8;}
.toast-error{background:#fff;border-color:#fecaca;color:#dc2626;}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* Tablet grande */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr;}
  .sb-prizes{grid-template-columns:repeat(3,1fr);gap:14px;padding:16px;}
  .sb-prizes .pc-img{height:140px;}
  #eventosList{grid-template-columns:repeat(2,1fr)!important;}
  .stat{padding:6px 28px;}
  .plan-card{width:210px;flex:0 0 210px;}
}

/* Tablet */
@media(max-width:768px){
  /* Navbar → hamburger */
  .nav,.header-actions{display:none!important;}
  .nav-toggle{display:flex!important;}
  .drawer{display:block;}           /* activar drawer en mobile */

  .header-inner{padding:0 16px;gap:12px;}

  /* Layout */
  .container{padding:0 16px;}
  .section{padding:22px 0;}
  .sec-box{padding:20px 16px;border-radius:12px;}
  .sec-box-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .sec-box-head .section-desc{text-align:left;max-width:100%;}

  /* Grids */
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .sb-prizes{grid-template-columns:repeat(2,1fr);gap:12px;padding:14px;}
  .sb-prizes .pc-img{height:130px;}
  #eventosList{grid-template-columns:repeat(2,1fr)!important;}
  .gana-grid{grid-template-columns:repeat(2,1fr);}
  .promo-grid{grid-template-columns:repeat(2,1fr);}
  .plans-grid{gap:14px;}
  .plan-card{width:100%;flex:0 0 calc(50% - 9px);}

  /* Footer */
  .footer-links{grid-template-columns:repeat(2,1fr);}
  .footer-top{gap:28px;}

  /* Stats */
  .stat{padding:6px 16px;}
  .stat-val{font-size:1.5rem;}

  /* Texto */
  .section-title{font-size:1.45rem;}
  .sb-more{padding:7px 16px;font-size:12px;min-height:36px;}

  /* Reg row de 2 col → 1 col */
  .reg-row{grid-template-columns:1fr;}
}

/* Móvil */
@media(max-width:600px){
  .container{padding:0 14px;}
  .section{padding:16px 0;}
  .sb-prizes{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px;}
  .sb-prizes .pc-img{height:120px;}
  #eventosList{grid-template-columns:1fr!important;}
  .gana-grid{grid-template-columns:repeat(2,1fr);}
  .promo-grid{grid-template-columns:repeat(2,1fr);}
  .plan-card{flex:0 0 100%;width:100%;}
  .footer-links{grid-template-columns:1fr 1fr;}
}

/* Móvil pequeño */
@media(max-width:480px){
  .section{padding:12px 0;}
  .sec-box{padding:14px 12px;border-radius:10px;}
  .hero{padding:calc(var(--hh) + 36px) 0 48px;}
  .hero-title{font-size:1.85rem;}
  .hero-desc{font-size:.9rem;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn-lg{text-align:center;justify-content:center;}

  .stat-val{font-size:1.3rem;}
  .stat{padding:4px 10px;}
  .stats-row{gap:0;}

  .sb-prizes{grid-template-columns:1fr 1fr;gap:8px;padding:10px;}
  .sb-prizes .pc-img{height:105px;}
  .sb-prizes .pc-body{padding:8px 10px 4px;}
  .sb-prizes .pc-title{font-size:12px;}

  #eventosList{grid-template-columns:1fr!important;}
  .gana-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .promo-grid{grid-template-columns:1fr;}

  .footer-links{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
  .sorteo-block{border-radius:12px;}
  .plans-grid{gap:10px;}
  .plan-amount{font-size:2.2rem;}

  /* Modals full-width en móvil pequeño */
  .dialog{padding:20px 16px;max-width:100%;border-radius:16px 16px 0 0;}
  .reg-dialog{padding:18px 14px;max-width:100%;border-radius:16px 16px 0 0;}
  .dialog-payment{padding:18px 14px;max-width:100%;border-radius:16px 16px 0 0;}
  .dialog-profile{padding:18px 14px;max-width:100%;border-radius:16px 16px 0 0;}
  .overlay{align-items:flex-end;padding:0;}

  /* Decorativos ocultos en móvil para ahorrar espacio */
  .deco-1,.deco-2{display:none;}

  /* Input touch-friendly */
  .form-input,.fc,.reg-input{font-size:16px!important;} /* evita zoom en iOS */

  /* Sorteo block full */
  .sorteo-block{padding:14px 12px;}
  .sorteo-prizes{gap:6px;}
  .prize-chip{font-size:11px;padding:4px 8px;}
}

/* iPhone SE / pantallas muy pequeñas */
@media(max-width:360px){
  .container{padding:0 10px;}
  .hero-title{font-size:1.6rem;}
  .section-title{font-size:1.2rem;}
  .sb-prizes{grid-template-columns:1fr 1fr;gap:6px;padding:8px;}
  .gana-grid{grid-template-columns:1fr 1fr;gap:6px;}
  .btn-lg{padding:12px 18px;font-size:14px;}
  .plan-amount{font-size:2rem;}
}

/* Landscape móvil */
@media(max-height:500px) and (orientation:landscape){
  .hero{padding:calc(var(--hh) + 20px) 0 32px;}
  .overlay{align-items:center;}
  .dialog,.reg-dialog,.dialog-payment,.dialog-profile{
    max-height:96vh;overflow-y:auto;border-radius:14px;
  }
}

/* ════════════════════════════════════════════════════════════════
   SECTION IDENTITY — UX/UI por sección
   Sorteos · Ganadores · Eventos · Planes · Promos
════════════════════════════════════════════════════════════════ */

:root {
  --c-sort:   #6366f1;   /* índigo — sorteos */
  --c-gana:   #f59e0b;   /* ámbar  — ganadores */
  --c-ev:     #0ea5e9;   /* cielo  — eventos */
  --c-plan:   #16a34a;   /* verde  — planes (marca) */
  --c-promo:  #f97316;   /* naranja — promos */
}

/* ── Sombra suave en cada sec-box (sin bordes de color) ──────── */
#sorteos   .sec-box,
#ganadores .sec-box,
#eventos   .sec-box,
#planes    .sec-box,
#promos    .sec-box { box-shadow: 0 4px 20px rgba(0,0,0,.06); border-color: var(--border); }

/* ── Section label color por sección ─────────── */
#sorteos   .section-label { color: var(--c-sort);  }
#ganadores .section-label { color: var(--c-gana);  }
#eventos   .section-label { color: var(--c-ev);    }
#planes    .section-label { color: var(--c-plan);  }
#promos    .section-label { color: var(--c-promo); }

/* ── Section title color sutil ───────────────── */
#sorteos   .section-title { color: var(--text); }
#ganadores .section-title { color: var(--text); }
#eventos   .section-title { color: var(--text); }

/* ══════════════════════════════════════════════
   SORTEOS — identidad índigo
══════════════════════════════════════════════ */

/* sorteo-block overrides — movidos a la definición del bloque SORTEO BLOCK */


/* Botón de participar (si lo hay) — índigo */
.btn-participar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 9px 16px; border-radius: var(--r-sm);
  background: var(--c-sort); color: #fff;
  font-size: 13px; font-weight: 700; border: none;
  transition: background .15s, transform .15s, box-shadow .15s;
  letter-spacing: .01em;
}
.btn-participar:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.btn-participar-locked {
  background: rgba(99,102,241,.08);
  color: var(--c-sort);
  border: 1.5px solid rgba(99,102,241,.2);
}
.btn-participar-locked:hover { background: rgba(99,102,241,.14); }

/* Lock icon chip */
.pc-lock-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(99,102,241,.08); color: var(--c-sort);
  border: 1px solid rgba(99,102,241,.15);
}

/* ══════════════════════════════════════════════
   GANADORES — identidad ámbar/oro
══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   EVENTOS — identidad azul cielo
══════════════════════════════════════════════ */

/* Grid de eventos */
#eventosList { gap: 18px; }

/* Card de evento — mejora visual */

/* Imagen del evento */
.ev-img {
  width: 100%; height: 130px;
  background-size: cover; background-position: center;
  background-color: var(--surface);
  flex-shrink: 0;
  position: relative;
}
.ev-img-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

/* Cuerpo del evento con padding */
.ev-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Fecha — caja de calendario más visual */
.ev-date-box {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--c-ev); color: #fff;
  border-radius: 8px; padding: 4px 10px;
  min-width: 44px; text-align: center; line-height: 1;
}
.ev-day { font-size: 22px; font-weight: 900; color: #fff; }
.ev-mon { font-size: 9px; font-weight: 800; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .1em; margin-top: 1px; }

/* Header del evento */
.ev-top { align-items: flex-start; gap: 10px; }

/* Título del evento */
.ev-title { font-size: 13px; font-weight: 700; line-height: 1.35; }

/* Lugar */
.ev-place {
  font-size: 11px; color: var(--text-3); font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.ev-place::before { content: '📍'; font-size: 11px; }

/* Tags de tipo */
.tag-virtual  { background: rgba(14,165,233,.1); color: #0369a1; border-color: rgba(14,165,233,.2); }
.tag-presencial { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.2); }

/* Botón del evento */
.btn-evento {
  background: rgba(14,165,233,.08);
  color: #0369a1;
  border-color: rgba(14,165,233,.2);
  font-weight: 700;
  padding: 5px 12px;
}
.btn-evento:hover { background: var(--c-ev); color: #fff; border-color: var(--c-ev); }

/* Hora del evento */
.ev-time { font-size: 11px; color: var(--text-3); font-weight: 500; }

/* ══════════════════════════════════════════════
   PLANES — identidad verde (marca)
══════════════════════════════════════════════ */

/* Grid de planes — más espacioso */
.plans-grid { gap: 18px; }

/* Card de plan — más poderoso visualmente */
.plan-card {
  width: 240px; flex: 0 0 240px;
  padding: 26px 20px;
  border-radius: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0,0,0,.1);
}

/* Plan destacado — sombra pronunciada sin borde de color */
.plan-featured {
  border-color: #d1d5db;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.plan-featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
.plan-featured::before {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 5px 0;
}

/* Plan actual — sombra suave sin borde de color */
.plan-current {
  border-color: #d1d5db;
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
}

/* Nombre del plan */
.plan-name {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3);
}
.plan-featured .plan-name { color: var(--green); }

/* Precio — más dramático */
.plan-amount {
  font-size: 2.8rem; font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}
.plan-period { font-size: 13px; color: var(--text-3); font-weight: 500; }

/* Perks list — check más visual */
.perk-check {
  width: 16px; height: 16px;
  background: var(--green-lt);
  color: var(--green);
  border: 1px solid var(--green-md);
  font-size: 9px; font-weight: 800;
}
.plan-featured .perk-check {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* Descripción del plan */
.plan-desc { font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* Separador entre precio y perks */
.plan-divider {
  height: 1px; background: var(--border);
  margin: 2px 0;
}

/* Badge de plan (cantidad de premios) */
.plan-qty-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
  background: var(--green-lt); color: var(--green);
  border: 1px solid var(--green-md);
}
.plan-featured .plan-qty-badge {
  background: var(--green); color: #fff;
}

/* ══════════════════════════════════════════════
   PROMOS VIP — identidad naranja
══════════════════════════════════════════════ */

/* Sección VIP — fondo naranja muy sutil */
.section-vip { background: #fff8f3; }
.sec-box-vip {
  background: #fff;
  border-color: rgba(249,115,22,.2);
}

/* Card de promo — naranja accent */

/* Vigencia */
.promo-valid { font-size: 11px; color: var(--text-3); font-weight: 500; }

/* Botón acción promo */
.btn-promo {
  padding: 7px 16px;
  background: var(--c-promo);
  font-size: 12px; font-weight: 700;
  border-radius: var(--r-sm);
  letter-spacing: .01em;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-promo:hover {
  background: #ea6c0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(249,115,22,.3);
}
.btn-promo-locked {
  background: var(--border);
  color: var(--text-3);
}
.btn-promo-locked:hover {
  background: #d1d5db;
  transform: none;
  box-shadow: none;
}
.promo-card-locked {
  opacity: .72;
}

/* Badge de plan requerido en promo */
.promo-plan-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
  background: rgba(249,115,22,.08);
  color: #c2410c;
  border: 1px solid rgba(249,115,22,.18);
}

/* ── Mejoras generales de UX ──────────────────── */

/* Skeleton más suave */
.skeleton {
  background: linear-gradient(90deg, #f0f1f3 0%, #e4e6ea 50%, #f0f1f3 100%);
  background-size: 400% 100%;
  border-radius: var(--r);
  animation: sk-wave 1.8s ease infinite;
}

/* Empty state — más atractivo */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 20px;
  text-align: center;
}
.empty-icon {
  font-size: 48px;
  filter: grayscale(.15);
}
.empty p {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
  max-width: 280px;
  line-height: 1.65;
}

/* responsive adicional consolidado arriba */

/* ── Lazy scroll ─────────────────────────────────────────────── */
.lazy-sentinel { height: 1px; }
.lazy-spinner  { display: flex; justify-content: center; padding: 28px 0; }