*{margin:0;padding:0;box-sizing:border-box}

:root{
--bg:#07090f;
--card:#10141d;
--card2:#151a24;
--text:#fff;
--muted:#8d96a8;
--primary:#00e5ff;
--primary2:#00a8ff;
--green:#25d366;
--danger:#ff4757;
--border:rgba(255,255,255,.08);
--shadow:0 15px 40px rgba(0,0,0,.35)
}

html{scroll-behavior:smooth}

body{
font-family:Arial,Helvetica,sans-serif;
background:
radial-gradient(circle at 10% 0%,rgba(0,229,255,.08),transparent 25%),
radial-gradient(circle at 90% 10%,rgba(0,168,255,.08),transparent 25%),
var(--bg);
color:var(--text);
min-height:100vh
}

button,input{font-family:inherit}

header{
position:sticky;
top:0;
z-index:100;
background:rgba(7,9,15,.9);
backdrop-filter:blur(15px);
border-bottom:1px solid var(--border)
}

.header-inner{
max-width:1200px;
margin:auto;
padding:18px 20px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}

.logo{
font-size:25px;
font-weight:900;
letter-spacing:-1px
}

.logo span{color:var(--primary)}

.cart-btn{
border:1px solid rgba(0,229,255,.25);
background:rgba(0,229,255,.08);
color:white;
border-radius:12px;
padding:11px 15px;
cursor:pointer;
font-weight:800;
transition:.2s
}

.cart-btn:hover{
background:rgba(0,229,255,.16);
transform:translateY(-1px)
}

.cart-count{
display:inline-flex;
justify-content:center;
align-items:center;
min-width:22px;
height:22px;
margin-left:6px;
border-radius:50%;
background:var(--primary);
color:#001016;
font-size:12px;
font-weight:900
}

.hero{
max-width:1200px;
margin:auto;
padding:55px 20px 35px;
text-align:center
}

.hero-badge{
display:inline-block;
padding:7px 13px;
border-radius:999px;
background:rgba(0,229,255,.08);
border:1px solid rgba(0,229,255,.18);
color:var(--primary);
font-size:12px;
font-weight:800;
margin-bottom:18px
}

.hero h1{
font-size:clamp(34px,6vw,65px);
line-height:1;
letter-spacing:-2px;
margin-bottom:18px
}

.hero h1 span{color:var(--primary)}

.hero p{
max-width:680px;
margin:auto;
color:var(--muted);
font-size:16px;
line-height:1.6
}

.promo{
max-width:1200px;
margin:10px auto 25px;
padding:0 20px
}

.promo-box{
padding:18px 20px;
border-radius:18px;
border:1px solid rgba(0,229,255,.15);
background:
linear-gradient(135deg,rgba(0,229,255,.08),rgba(0,168,255,.03)),
var(--card);
text-align:center
}

.promo-box strong{color:var(--primary)}

.section{
max-width:1200px;
margin:auto;
padding:30px 20px
}

.section-title{
display:flex;
justify-content:space-between;
align-items:end;
gap:15px;
margin-bottom:20px
}

.section-title h2{font-size:25px}

.section-title p{
color:var(--muted);
font-size:13px
}

.platform-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px
}

.platform-card{
position:relative;
overflow:hidden;
background:linear-gradient(145deg,var(--card2),var(--card));
border:1px solid var(--border);
border-radius:20px;
padding:20px;
box-shadow:var(--shadow);
transition:.25s ease
}

.platform-card:hover{
transform:translateY(-4px);
border-color:rgba(0,229,255,.25)
}

.platform-card::before{
content:"";
position:absolute;
width:120px;
height:120px;
right:-50px;
top:-50px;
border-radius:50%;
background:var(--brand,rgba(0,229,255,.2));
filter:blur(45px);
opacity:.3
}

.platform-logo{
width:58px;
height:58px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
position:relative
}

.platform-logo img{
width:37px;
height:37px;
object-fit:contain
}

.logo-fallback{
font-size:10px;
font-weight:900;
text-align:center;
line-height:1.1
}

.platform-card h3{
font-size:18px;
margin-bottom:7px
}

.platform-description{
color:var(--muted);
font-size:12px;
min-height:34px;
line-height:1.4;
margin-bottom:14px
}

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

.platform-price{
font-size:23px;
font-weight:900
}

.platform-price small{
color:var(--muted);
font-size:11px;
font-weight:500
}

.platform-duration{
color:var(--muted);
font-size:11px;
margin-top:3px
}

.add-btn{
border:0;
border-radius:11px;
padding:10px 13px;
background:var(--primary);
color:#001016;
cursor:pointer;
font-weight:900;
transition:.2s
}

.add-btn:hover{
background:#fff;
transform:scale(1.03)
}

.brand-disney{--brand:#113ccf}
.brand-prime{--brand:#00a8e1}
.brand-max{--brand:#7d2cff}
.brand-universal{--brand:#e50914}
.brand-paramount{--brand:#0064ff}
.brand-vix{--brand:#00b894}
.brand-crunchyroll{--brand:#f47521}
.brand-netflix{--brand:#e50914}
.brand-apple{--brand:#999}
.brand-youtube{--brand:#ff0000}
.brand-spotify{--brand:#1ed760}
.brand-canva{--brand:#00c4cc}
.brand-gemini{--brand:#4285f4}
.brand-capcut{--brand:#fff}
.brand-office{--brand:#f25022}
.brand-fox{--brand:#ff8a00}
.brand-viki{--brand:#ff4d8d}
.brand-plex{--brand:#e5a900}

/* INSTRUCCIONES */

.purchase-instructions{
max-width:1200px;
margin:25px auto 10px;
padding:0 20px
}

.instructions-box{
position:relative;
overflow:hidden;
border:1px solid rgba(0,229,255,.22);
border-radius:22px;
padding:24px;
background:
linear-gradient(
135deg,
rgba(0,229,255,.10),
rgba(0,168,255,.04) 50%,
rgba(255,255,255,.02)
),
#10141d;
box-shadow:
0 15px 45px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.04)
}

.instructions-box::before{
content:"";
position:absolute;
width:180px;
height:180px;
right:-80px;
top:-90px;
border-radius:50%;
background:#00e5ff;
filter:blur(70px);
opacity:.13
}

.instructions-top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:22px
}

.instructions-icon{
width:52px;
height:52px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:rgba(0,229,255,.12);
border:1px solid rgba(0,229,255,.22);
font-size:25px
}

.instructions-title h2{
font-size:22px;
margin-bottom:5px
}

.instructions-title p{
color:var(--muted);
font-size:12px
}

.instructions-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px
}

.instruction-step{
position:relative;
padding:17px;
border-radius:16px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
transition:.2s
}

.instruction-step:hover{
transform:translateY(-3px);
border-color:rgba(0,229,255,.25);
background:rgba(0,229,255,.045)
}

.step-number{
position:absolute;
top:12px;
right:12px;
width:25px;
height:25px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--primary);
color:#001016;
font-size:11px;
font-weight:900
}

.step-icon{
font-size:25px;
margin-bottom:10px
}

.instruction-step h3{
font-size:14px;
margin-bottom:6px
}

.instruction-step p{
color:var(--muted);
font-size:11px;
line-height:1.5
}

.instructions-warning{
margin-top:15px;
padding:12px 14px;
border-radius:12px;
background:rgba(255,193,7,.06);
border:1px solid rgba(255,193,7,.14);
color:#d9dee8;
font-size:11px;
line-height:1.5
}

.instructions-warning strong{color:#ffd166}

/* CARRITO */

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
z-index:190;
opacity:0;
visibility:hidden;
transition:.25s
}

.overlay.active{
opacity:1;
visibility:visible
}

.cart-drawer{
position:fixed;
right:-430px;
top:0;
width:min(430px,100%);
height:100vh;
background:#0c1018;
z-index:200;
border-left:1px solid var(--border);
transition:.3s ease;
display:flex;
flex-direction:column
}

.cart-drawer.active{right:0}

.cart-header{
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--border)
}

.cart-header h3{font-size:20px}

.close-btn{
width:35px;
height:35px;
border:0;
border-radius:10px;
background:rgba(255,255,255,.06);
color:white;
cursor:pointer;
font-size:20px
}

.cart-items{
flex:1;
overflow-y:auto;
padding:15px
}

.empty-cart{
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:var(--muted);
padding:30px
}

.empty-cart div{
font-size:42px;
margin-bottom:10px
}

.cart-item{
display:flex;
justify-content:space-between;
gap:12px;
padding:14px;
border:1px solid var(--border);
border-radius:14px;
background:var(--card);
margin-bottom:10px
}

.cart-item-info{min-width:0}

.cart-item-name{
font-weight:800;
font-size:14px;
margin-bottom:4px
}

.cart-item-duration{
color:var(--muted);
font-size:11px
}

.cart-item-price{
font-weight:900;
white-space:nowrap
}

.remove-item{
border:0;
background:transparent;
color:var(--danger);
cursor:pointer;
font-size:12px;
margin-top:5px
}

.cart-footer{
padding:18px;
border-top:1px solid var(--border)
}

.total-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px
}

.total-row span:first-child{color:var(--muted)}

.total-price{
font-size:27px;
font-weight:900;
color:var(--primary)
}

.checkout-btn{
width:100%;
border:0;
border-radius:13px;
padding:14px;
background:var(--green);
color:#001f0b;
cursor:pointer;
font-weight:900;
font-size:15px
}

.checkout-btn:disabled{
opacity:.4;
cursor:not-allowed
}

/* CHECKOUT */

.checkout-modal{
position:fixed;
inset:0;
z-index:300;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
opacity:0;
visibility:hidden;
transition:.25s
}

.checkout-modal.active{
opacity:1;
visibility:visible
}

.checkout-box{
width:min(600px,100%);
max-height:92vh;
overflow-y:auto;
background:#0c1018;
border:1px solid var(--border);
border-radius:22px;
box-shadow:0 30px 80px rgba(0,0,0,.6)
}

.checkout-header{
padding:20px;
border-bottom:1px solid var(--border);
display:flex;
justify-content:space-between;
align-items:center
}

.checkout-body{padding:20px}

.checkout-section{margin-bottom:20px}

.checkout-section h4{
margin-bottom:10px;
font-size:15px
}

.customer-form{
display:grid;
gap:12px
}

.form-group{
display:flex;
flex-direction:column;
gap:6px
}

.form-group label{
color:#dfe5ef;
font-size:12px;
font-weight:700
}

.form-group input{
width:100%;
padding:13px 14px;
border-radius:12px;
border:1px solid var(--border);
outline:none;
background:var(--card);
color:white;
font-size:14px;
transition:.2s
}

.form-group input::placeholder{color:#687286}

.form-group input:focus{
border-color:rgba(0,229,255,.5);
box-shadow:0 0 0 3px rgba(0,229,255,.07)
}

.order-summary{
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
padding:14px
}

.summary-line{
display:flex;
justify-content:space-between;
gap:10px;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.05);
font-size:13px
}

.summary-line:last-child{border-bottom:0}

.summary-total{
display:flex;
justify-content:space-between;
margin-top:10px;
padding-top:10px;
border-top:1px solid var(--border);
font-weight:900;
font-size:18px
}

.payment-box{
padding:16px;
border-radius:15px;
background:
linear-gradient(135deg,rgba(0,229,255,.07),rgba(0,168,255,.02)),
var(--card);
border:1px solid rgba(0,229,255,.12)
}

.payment-row{
display:flex;
justify-content:space-between;
gap:15px;
padding:8px 0;
font-size:13px
}

.payment-row span:first-child{color:var(--muted)}

.payment-row strong{
text-align:right;
word-break:break-word
}

.copy-btn{
margin-left:5px;
border:0;
background:rgba(0,229,255,.1);
color:var(--primary);
border-radius:6px;
padding:4px 6px;
cursor:pointer;
font-size:10px
}

.whatsapp-btn{
width:100%;
border:0;
border-radius:13px;
padding:15px;
background:var(--green);
color:#00220c;
font-size:15px;
font-weight:900;
cursor:pointer;
margin-top:12px
}

.notice{
color:var(--muted);
font-size:11px;
line-height:1.5;
margin-top:10px;
text-align:center
}

footer{
max-width:1200px;
margin:20px auto 0;
padding:35px 20px;
border-top:1px solid var(--border);
text-align:center;
color:var(--muted);
font-size:12px
}

footer strong{color:white}

@media(max-width:800px){
.instructions-grid{
grid-template-columns:repeat(2,1fr)
}
}

@media(max-width:600px){

.header-inner{padding:14px 15px}

.logo{font-size:21px}

.hero{
padding:40px 15px 25px
}

.section{
padding:25px 15px
}

.platform-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px
}

.platform-card{
padding:14px;
border-radius:16px
}

.platform-logo{
width:48px;
height:48px;
border-radius:13px;
margin-bottom:12px
}

.platform-logo img{
width:30px;
height:30px
}

.platform-card h3{font-size:15px}

.platform-description{
font-size:10px;
min-height:42px
}

.platform-price{font-size:18px}

.platform-price small{font-size:9px}

.platform-bottom{
align-items:flex-end
}

.add-btn{
padding:8px 9px;
font-size:11px
}

.section-title{
align-items:flex-start;
flex-direction:column
}

.purchase-instructions{
padding:0 15px
}

.instructions-box{
padding:18px;
border-radius:18px
}

.instructions-top{
margin-bottom:17px
}

.instructions-icon{
width:45px;
height:45px;
font-size:21px
}

.instructions-title h2{font-size:19px}

.instructions-grid{
grid-template-columns:1fr 1fr;
gap:9px
}

.instruction-step{
padding:13px
}

.step-icon{font-size:22px}

.instruction-step h3{font-size:12px}

.instruction-step p{font-size:10px}

}

@media(max-width:360px){

.platform-grid{
grid-template-columns:1fr
}

}