body{
        margin:0;
        font-family: 'Segoe UI', sans-serif;
        background:#f4f4f4;
    }

    /* NAVBAR */
    nav{
        background:#0d0d0d;
        padding:15px;
        position:fixed;
        width:100%;
        top:0;
        z-index:1000;
    }

    nav ul{
        list-style:none;
        display:flex;
        justify-content:center;
        gap:30px;
        margin:0;
        padding:0;
    }

 nav ul{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:25px;
}

/* LINKS NORMALES */
nav ul li a{
    text-decoration:none;
    font-weight:bold;
    color:white;
    transition:0.3s;
}

nav ul li a:hover{
    color:#FFDE42;
}



/* CARRUSEL*/
.carrusel {
    position: relative;
    width: 90%;
    margin: 40px auto;
    overflow: hidden;
}

.contenedor {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* 🔥 CLAVE */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

/* opcional: ocultar barra fea */
.contenedor::-webkit-scrollbar {
    display: none;
}

    /* Tarjetas pequeñas */
.card {
    min-width: 200px;
    height: 180px;
    padding: 20px;
    margin: 7px;
    background: white;
    border-radius: 15px;
    color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
    scroll-snap-align: start;
}


.card:hover {
    transform: translateY(-5px) scale(1.01);
}

/* Botón */
.card a {
    margin-top: 10px;
    background: #FFDE42;
    color: black;
    padding: 8px 15px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.productos:hover{
    background: #b09fcf;
}

.mision:hover{
    background: #C3CC9B;
}

.vision:hover{
    background:#CFECF3;
}

.carr:hover{
    background: #FAACBF;
}

.contacto:hover{
    background: #FFC570;
}
/* Flechas */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
}

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

    /* HERO */
    .hero{
        height:105vh;
        background:url('https://thermtest.com/latinamerica/wp-content/uploads/2021/07/ropa-deportiva-mejora-rendimiento-2.jpg') center/cover no-repeat;
        display:flex;
        align-items:center;
        justify-content:center;
        color:white;
        text-align:center;
    }

    .hero h1{
        font-size:60px;

        padding:20px;
        border-radius:10px;
    }

    /* SECCIONES */
    section{
        padding:50px 20px;
        text-align:center;
    }

    h2{
        margin-bottom:20px;
        color:#111;
    }

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

    .cards{
        background:white;
        padding:20px;
        border-radius:10px;
        box-shadow:0 5px 15px rgba(0,0,0,0.1);
        transition:0.3s;
    }


    .cards:hover{
        transform:translateY(-5px);
    }

    .camiseta:hover{
        background: #FAACBF;
    }
    .pantalones:hover{
        background: #C3CC9B;
    }

    .zapatos:hover{
        background: #FFC570;
    }

    .sudaderas:hover{
        background: #FFDE42;
    }
    .conjuntos:hover{
        background: #CFECF3;
    }

    .otros:hover{
        background: #b09fcf;
    }

    /* FOOTER */
    footer{
        background:#0d0d0d;
        color:white;
        text-align:center;
        padding:20px;
    }