:root{
--yellow:#FFD600;
--black:#0B0B0B;
--card:#171717;
--white:#FFFFFF;
--gray:#A3A3A3;
--border:#2A2A2A;
--success:#133d20;
--warning:#574000;
--danger:#4a1313;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--black);
color:var(--white);
}

a{
text-decoration:none;
color:inherit;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}

header{

position:sticky;

top:0;

z-index:999;

background:
rgba(10,10,10,.75);

backdrop-filter:
blur(18px);

border-bottom:
1px solid
rgba(255,255,255,.05);

}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo img{
height:52px;
}

.logo h2{
color:var(--yellow);
}

.menu{
display:flex;
gap:25px;
}

.menu a:hover{
color:var(--yellow);
}

.hero{

padding:160px 0 120px;

text-align:center;

background:

radial-gradient(
circle at top,
rgba(255,214,0,.12),
transparent 35%
);

}

.hero h1{

font-size:5rem;

font-weight:800;

letter-spacing:-2px;

margin-bottom:20px;

}

.hero p{

font-size:1.1rem;

line-height:1.8;

color:#b5b5b5;

max-width:760px;

margin:auto;

}

.benefits{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
margin-bottom:60px;
}

.benefit{
background:var(--card);
border:1px solid var(--border);
padding:20px;
border-radius:14px;
text-align:center;
}

.section{
padding:80px 0;
}

.section-title{
text-align:center;
margin-bottom:35px;
}

.section-title h2{
color:var(--yellow);
font-size:2.2rem;
}

.filters{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:25px;
}

.filters input,
.filters select,
.form-grid input,
.form-grid select{
background:#202020;
color:white;
border:1px solid var(--border);
border-radius:10px;
padding:14px;
}

.filters input{
min-width:260px;
}

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

.card{
background:linear-gradient(
180deg,
#1c1c1c,
#141414
);

border:1px solid rgba(255,255,255,.05);

border-radius:24px;

position:relative;

overflow:hidden;

transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;

box-shadow:
0 10px 30px rgba(0,0,0,.35);
}

.card:hover{

transform:translateY(-6px);

border-color:
rgba(255,214,0,.35);

box-shadow:
0 20px 50px rgba(0,0,0,.5);

}

.card img{
width:100%;
height:300px;
object-fit:cover;
}

.card-content{
padding:22px;
}

.details{
color:var(--gray);
line-height:1.8;
}

.price{
color:var(--yellow);
font-size:1.8rem;
font-weight:700;
margin:15px 0;
}

.badge{
display:inline-block;
padding:8px 12px;
border-radius:30px;
font-size:12px;
font-weight:700;
margin-bottom:12px;
}

.available{
background:var(--success);
}

.reserved{
background:var(--warning);
}

.sold{
background:var(--danger);
}

.buttons{
display:flex;
gap:10px;
}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 22px;

border-radius:14px;

font-weight:700;

cursor:pointer;

border:none;

transition:.25s ease;

}

.btn:hover{

transform:translateY(-2px);

}

.btn-yellow{

background:var(--yellow);

color:#111;

box-shadow:
0 8px 20px
rgba(255,214,0,.25);

}

.btn-yellow:hover{

box-shadow:
0 12px 30px
rgba(255,214,0,.4);

}

.btn-dark{
background:#2A2A2A;
color:white;
}

.btn-danger{
background:#c62828;
color:white;
}

.canje{

background:
linear-gradient(
180deg,
#1b1b1b,
#131313
);

border:1px solid
rgba(255,255,255,.05);

border-radius:28px;

padding:35px;

box-shadow:
0 20px 50px
rgba(0,0,0,.35);

}

.form-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}

.resultado{
margin-top:20px;
background:#202020;
padding:20px;
border-radius:12px;
}

.tech-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.tech-card{

background:
linear-gradient(
180deg,
#1b1b1b,
#141414
);

border:1px solid
rgba(255,255,255,.05);

border-radius:22px;

padding:40px;

text-align:center;

transition:.25s;

}

.tech-card:hover{

transform:translateY(-5px);

border-color:
rgba(255,214,0,.25);

}

footer{
border-top:1px solid var(--border);
padding:40px 0;
text-align:center;
color:var(--gray);
margin-top:80px;
}

/* VENDIDO */

.sold-ribbon{
position:absolute;
top:18px;
right:-42px;
background:#e53935;
color:white;
padding:10px 55px;
font-weight:700;
transform:rotate(45deg);
z-index:10;
box-shadow:0 4px 10px rgba(0,0,0,.3);
}

.badge.available{
background:#2e7d32;
}

.badge.reserved{
background:#ef6c00;
}

.badge.sold{
background:#c62828;
}

@media(max-width:768px){

.menu{
    display:none;
}

.hero h1{
    font-size:2.4rem;
}

.buttons{
    flex-direction:column;
}

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

.filters input,
.filters select{
    width:100%;
}
}
/* ==========================
   GALERIA APPLE STORE
========================== */

.gallery{
    width:100%;
}

.main-image{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.thumbs{
    display:flex;
    gap:8px;
    padding:12px;
    overflow-x:auto;
}

.thumb{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:10px;
    border:2px solid transparent;
    cursor:pointer;
    transition:.2s;
    flex-shrink:0;
}

.thumb:hover{
    border-color:var(--yellow);
    transform:scale(1.05);
}

.thumb.active{
    border-color:var(--yellow);
}

@media(max-width:768px){

    .main-image{
        height:260px;
    }

    .thumb{
        width:50px;
        height:50px;
    }

}
/* ==========================
   LIGHTBOX
========================== */

.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.lightbox.active{
    display:flex;
}

.lightbox-image{
    max-width:95%;
    max-height:90vh;
    border-radius:16px;
}

#closeLightbox{
    position:absolute;
    top:20px;
    right:30px;
    font-size:42px;
    color:white;
    cursor:pointer;
    font-weight:bold;
}

.main-image,
.thumb{
    cursor:pointer;
}
/* ==========================
   BANNER SLIDER
========================== */

.banner-slider{

    width:100%;

    position:relative;

    overflow:hidden;

    background:#000;

}

.slides{

    position:relative;

    width:100%;

}

.slide{

    width:100%;

    display:none;

    object-fit:cover;

}

.slide.active{

    display:block;

}

.slide{

    max-height:550px;

}

@media(max-width:768px){

    .slide{

        max-height:220px;

    }

}