:root{
  --bg:#0a0a0c;
  --bg-alt:#131316;
  --card:#18181c;
  --red:#c81e2f;
  --red-dark:#8f1420;
  --text:#eae7e2;
  --text-dim:#9a9a9f;
  --border:#2a2a2f;
  --radius:14px;
  --font: 'Georgia', 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,12,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.logo{font-family:var(--font); font-size:1.4rem; letter-spacing:2px; color:var(--text);}
.logo span{color:var(--red);}
nav ul{list-style:none; display:flex; gap:28px;}
nav a{
  font-size:0.85rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-dim); transition:color .2s;
}
nav a:hover, nav a.active{color:var(--red);}
.nav-actions{display:flex; align-items:center; gap:18px;}
.cart-btn{
  position:relative; background:none; border:1px solid var(--border);
  color:var(--text); padding:9px 14px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; gap:8px; font-size:0.85rem;
  transition:border-color .2s, background .2s;
}
.cart-btn:hover{border-color:var(--red); background:rgba(200,30,47,0.08);}
.cart-badge{
  position:absolute; top:-8px; right:-8px;
  background:var(--red); color:#fff; font-size:0.7rem;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:bold;
}
.burger{display:none; background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer;}

/* ---------- MENÚ MÓVIL ---------- */
.mobile-nav{
  display:none; flex-direction:column;
  position:fixed; left:0; right:0;
  background:var(--bg-alt); border-bottom:1px solid var(--border);
  padding:6px 24px 14px; z-index:150;
  max-height:calc(100vh - 60px); overflow-y:auto;
}
.mobile-nav.active{display:flex;}
.mobile-nav a{
  padding:14px 0; border-bottom:1px solid var(--border);
  font-size:0.9rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-dim);
}
.mobile-nav a:last-child{border-bottom:none;}
.mobile-nav a:hover, .mobile-nav a.active{color:var(--red);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:80vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:60px 20px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(200,30,47,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #000 100%);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 2px);
  pointer-events:none;
}
.hero-inner{max-width:760px; position:relative; z-index:1;}
.eyebrow{
  color:var(--red); text-transform:uppercase; letter-spacing:4px;
  font-size:0.8rem; font-weight:600; margin-bottom:18px; display:inline-block;
}
.hero h1{
  font-family:var(--font); font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:1.05; margin-bottom:22px; letter-spacing:1px;
}
.hero p{color:var(--text-dim); font-size:1.05rem; max-width:560px; margin:0 auto 34px;}

/* Hero compacto, usado en páginas internas (no home) */
.hero-page{min-height:auto; padding:70px 20px 60px; text-align:center;}
.hero-page .hero-inner{max-width:820px;}
.hero-page p{margin:0 auto;}

.btn{
  display:inline-block; padding:14px 34px; border-radius:8px;
  font-weight:600; letter-spacing:0.5px; text-transform:uppercase; font-size:0.85rem;
  cursor:pointer; border:none; transition:transform .18s, box-shadow .18s;
}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 8px 24px rgba(200,30,47,0.35);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(200,30,47,0.45);}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--red); color:var(--red);}

.warning-box{
  max-width:640px; margin:50px auto 0; padding:20px 24px;
  border:1px solid var(--red-dark); border-radius:var(--radius);
  background:rgba(200,30,47,0.06); text-align:left;
}
.warning-box h3{color:var(--red); font-size:0.95rem; text-transform:uppercase; letter-spacing:2px; margin-bottom:8px;}
.warning-box p{color:var(--text-dim); font-size:0.92rem; margin:0;}

/* video */
.video-wrap{max-width:720px; margin:40px auto 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9;}
.video-wrap iframe{width:100%; height:100%; border:0;}

/* ---------- STATS ---------- */
.stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat{
  flex:1; min-width:140px; text-align:center; padding:28px 12px;
  border-right:1px solid var(--border);
}
.stat:last-child{border-right:none;}
.stat strong{display:block; font-family:var(--font); font-size:1.8rem; color:var(--red);}
.stat span{color:var(--text-dim); font-size:0.8rem; text-transform:uppercase; letter-spacing:1px;}

/* ---------- SECTIONS (genérico, usado en todas las páginas) ---------- */
.section{max-width:1200px; margin:0 auto; padding:90px 24px;}
.section-head{text-align:center; margin-bottom:50px;}
.section-head .eyebrow{margin-bottom:12px;}
.section-head h2{font-family:var(--font); font-size:clamp(1.8rem,4vw,2.6rem);}
.section-head p{color:var(--text-dim); max-width:600px; margin:14px auto 0;}

.section-narrow{max-width:840px; margin:0 auto; padding:70px 24px;}
.section-narrow h2{font-family:var(--font); font-size:clamp(1.5rem,3.4vw,2.1rem); margin-bottom:18px;}
.section-narrow p{color:var(--text-dim); margin-bottom:16px;}
.section-narrow img{border-radius:var(--radius); border:1px solid var(--border); margin:30px 0;}

/* ---------- LEVELS / PRODUCTS ---------- */
.levels-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:26px;
}
.level-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.level-card:hover{
  transform:translateY(-6px);
  border-color:var(--red-dark);
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.level-img{
  aspect-ratio:4/3; background:linear-gradient(160deg, #1e1e22, #0c0c0e);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-size:1.1rem; color:var(--text-dim); letter-spacing:1px;
  position:relative; overflow:hidden;
}
.level-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s;
}
.level-card:hover .level-img img{transform:scale(1.06);}
.level-img .level-img-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #1e1e22, #0c0c0e);
}
.level-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.level-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--red); color:#fff; font-size:0.7rem; text-transform:uppercase;
  letter-spacing:1px; padding:4px 10px; border-radius:20px; font-weight:600;
}
.level-body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.level-body h3{font-family:var(--font); font-size:1.3rem;}
.level-body p{color:var(--text-dim); font-size:0.9rem; flex:1;}
.level-meta{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.level-price{font-size:1.25rem; font-weight:700; color:var(--text);}
.level-price small{display:block; font-size:0.7rem; color:var(--text-dim); font-weight:400;}
.add-btn{
  background:transparent; border:1px solid var(--red); color:var(--red);
  padding:9px 16px; border-radius:8px; font-size:0.8rem; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase; cursor:pointer;
  transition:background .2s, color .2s;
}
.add-btn:hover{background:var(--red); color:#fff;}
.add-btn.added{background:var(--red); color:#fff;}

/* ---------- INFO CARDS (condiciones, requisitos, etc.) ---------- */
.info-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:18px; margin:30px 0;
}
.info-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; text-align:center;
}
.info-card .label{color:var(--red); text-transform:uppercase; font-size:0.72rem; letter-spacing:1.5px; margin-bottom:8px; display:block;}
.info-card .value{font-family:var(--font); font-size:1.05rem;}

/* ---------- STEP LIST (instrucciones numeradas) ---------- */
.step-list{list-style:none; counter-reset:step; margin:24px 0;}
.step-list li{
  position:relative; padding:16px 0 16px 50px; border-bottom:1px solid var(--border);
  color:var(--text-dim);
}
.step-list li:last-child{border-bottom:none;}
.step-list li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:14px;
  width:30px; height:30px; border-radius:50%;
  background:var(--red); color:#fff; font-weight:700; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center;
}
.step-list strong{color:var(--text);}

/* ---------- RULES LIST (reglas del juego) ---------- */
.rules-list{list-style:none; margin:24px 0;}
.rules-list li{
  padding:18px 20px; margin-bottom:12px;
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--red);
  border-radius:0 10px 10px 0; color:var(--text-dim); font-size:0.92rem;
}
.rules-list strong{color:var(--text); display:block; margin-bottom:4px; font-family:var(--font); font-size:1rem;}

/* ---------- FAQ (acordeón nativo con <details>) ---------- */
.faq-list{max-width:760px; margin:0 auto;}
.faq-list details{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  margin-bottom:12px; overflow:hidden;
}
.faq-list summary{
  cursor:pointer; padding:18px 22px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font); font-size:1rem; color:var(--text);
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+"; color:var(--red); font-size:1.3rem; font-weight:700; flex-shrink:0;
  transition:transform .2s;
}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list details[open] summary{border-bottom:1px solid var(--border);}
.faq-list .faq-answer{padding:4px 22px 20px; color:var(--text-dim); font-size:0.92rem;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--border); padding:50px 24px 30px;
  text-align:center; color:var(--text-dim); font-size:0.85rem;
}
.social-row{display:flex; justify-content:center; gap:20px; margin-bottom:24px;}
.social-row a{
  width:38px; height:38px; border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.9rem;
  transition:border-color .2s, color .2s;
}
.social-row a:hover{border-color:var(--red); color:var(--red);}

/* ---------- CART DRAWER ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:200;
}
.overlay.active{opacity:1; pointer-events:auto;}
.cart-drawer{
  position:fixed; top:0; right:0; width:min(420px, 92vw);
  height:100vh; height:100dvh; /* 100dvh evita que la barra del navegador móvil tape contenido */
  background:var(--bg-alt); border-left:1px solid var(--border);
  z-index:201; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.active{transform:translateX(0);}
.cart-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 24px; border-bottom:1px solid var(--border);
  flex-shrink:0; /* el encabezado nunca se comprime */
}
.cart-header h3{font-family:var(--font); font-size:1.3rem;}
.close-cart{background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer;}
.cart-items{
  flex:1 1 auto; min-height:0; /* clave: permite que este bloque SÍ se encoja y muestre su propio scroll */
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 24px;
}
.cart-item{
  display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border);
}
.cart-item-thumb{
  width:64px; height:64px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(160deg, #232327, #0c0c0e);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:0.7rem;
  overflow:hidden;
}
.cart-item-thumb img{width:100%; height:100%; object-fit:cover;}
.cart-item-info{flex:1;}
.cart-item-info h4{font-size:0.95rem; margin-bottom:4px;}
.cart-item-info .price{color:var(--red); font-weight:600; font-size:0.9rem;}
.qty-controls{
  display:flex; align-items:center; gap:10px; margin-top:8px;
}
.qty-controls button{
  width:24px; height:24px; border-radius:6px; border:1px solid var(--border);
  background:none; color:var(--text); cursor:pointer; font-size:0.9rem;
  display:flex; align-items:center; justify-content:center;
}
.qty-controls button:hover{border-color:var(--red); color:var(--red);}
.remove-item{
  background:none; border:none; color:var(--text-dim); font-size:0.75rem;
  text-decoration:underline; cursor:pointer; margin-top:6px;
}
.remove-item:hover{color:var(--red);}
.cart-empty{
  text-align:center; color:var(--text-dim); padding:60px 20px; font-size:0.95rem;
}
.cart-footer{
  border-top:1px solid var(--border); padding:18px 24px;
  flex-shrink:0; /* el footer no se estira más de lo necesario */
  max-height:55vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.cart-subtotal{display:flex; justify-content:space-between; margin-bottom:16px; font-size:1.05rem;}
.cart-subtotal strong{color:var(--red);}
.checkout-btn{width:100%; text-align:center; border:none; font-family:var(--font-ui);}
.customer-form{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;}
.customer-form label{font-size:0.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; display:flex; flex-direction:column; gap:6px;}
.customer-form input{
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; color:var(--text); font-size:0.9rem; font-family:var(--font-ui);
}
.customer-form input:focus{outline:none; border-color:var(--red);}
.form-error{color:var(--red); font-size:0.78rem; min-height:1em;}
.secure-note{text-align:center; color:var(--text-dim); font-size:0.75rem; margin-top:10px;}
.checkout-btn:disabled{opacity:0.6; cursor:not-allowed;}
.payment-badge-wrap{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:18px;
}
.payment-label{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-dim);
}
.wompi-logo-chip{
  background:#fff; border-radius:8px; padding:8px 16px;
  display:inline-flex; align-items:center; justify-content:center;
}
.wompi-logo{height:22px; width:auto; display:block;}
.wompi-logo-fallback{color:#00825A; font-family:var(--font); font-size:1.1rem; letter-spacing:0.5px;}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--red); color:#fff; padding:12px 22px; border-radius:8px;
  font-size:0.85rem; opacity:0; pointer-events:none; transition:all .3s; z-index:300;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:760px){
  nav{display:none;}
  .burger{display:block;}
  .stats{flex-direction:column;}
  .stat{border-right:none; border-bottom:1px solid var(--border);}
  .customer-form{gap:9px; margin-bottom:12px;}
  .customer-form input{padding:8px 10px;}
  .cart-footer{max-height:50vh;}
}