body{font-family:Arial;background:#0a0a0a;color:white;margin:0}
nav{display:flex;justify-content:space-between;padding:12px;background:#111;border-bottom:2px solid #0ff}
ul{display:flex;gap:15px;list-style:none}
.hero{text-align:center;padding:60px;background:linear-gradient(90deg,#111,#1a1a1a)}
.productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:20px}
.card{background:#111;padding:12px;border-radius:12px;transition:.3s;border:1px solid #222}
.card:hover{box-shadow:0 0 15px #0ff,0 0 25px #f0f}
img{width:100%;border-radius:8px}
button{padding:8px;margin-top:8px;background:#0ff;border:none;border-radius:6px;cursor:pointer}
button:hover{background:#f0f;color:white}
footer{text-align:center;padding:20px;background:#111;margin-top:20px}



.carrusel {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.carrusel-container {
    position: relative;
    width: 80%;
    max-width: 900px;
    overflow: hidden;
    border-radius: 15px;
    height: 600px; 
}

.carrusel-slide {
    position: relative;
}

.slide {
    width: 100%;
    display: none;
    object-fit: cover; 
}

.slide.active {
    display: block;
}

.btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.btn:hover {
    background: rgba(0,0,0,0.8);
}