/* Estilo del contenedor UL */
.sizes {
    list-style: none;  /* Eliminar los puntos de la lista */
    padding: 0;
    margin: 0;
    margin-top: 10px;
    display: flex; /* Hace que los elementos li estén en línea */
    gap: 10px; /* Espacio entre los elementos */
}

/* Estilo de los elementos LI */
.size {
    width: 35px; /* Tamaño fijo para que siempre sea un círculo */
    height: 35px; /* Igual al width para mantener el círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #c5a47e; /* Borde con el color especificado */
    border-radius: 50%; /* Hace que siempre sea un círculo */
    font-size: 16px;
    font-weight: bold;
    color: #c5a47e; /* Color del texto inicial */
    transition: all 0.3s ease; /* Transición suave */
}

/* Estilo al hacer hover */
.size:hover {
    background-color: #c5a47e; /* Fondo del mismo color del borde */
    color: #343a40; /* Texto en negro */
}

ul li.disabled {
    border-color: #d3c5b2; /* Color más claro para el borde */
    color: #d3c5b2; /* Texto más claro */
    cursor: not-allowed; /* Indica que está deshabilitado */
    opacity: 0.5; /* Reduce la opacidad */
    pointer-events: none; /* Desactiva interacciones */
}

@media screen and (max-width: 767px) {
    .banner-header {
        height: 40vh;
        background-attachment: scroll !important;
        background-position: left center !important;
        background-size: cover !important;
    }

    .banner-header h1 {
        font-size: clamp(24px, 7vw, 36px) !important;
        text-align: center;
        padding: 0 15px;
    }

    .section-title {
        font-size: clamp(28px, 8vw, 60px) !important;
    }
}