/* Globales */
*::after,
*::before,
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: 0 auto;
    max-width: 1200px;
    font-family: 'Lato';
    color: #a429d4;
}


img{
    max-width: 100%;
}

/* Header */
header{
    display: flex;
    justify-content: space-between;
    padding: 30px 0 40px 0;
}

.container-icon{
    position: relative;
}

poppins-regular {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
  }

  .sofia-regular {
    font-family: "Sofia", cursive;
    font-weight: 400;
    font-style: normal;
  }

/* Barra de navegación */
.navbar {
    font-family: Sofia;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(159, 97, 204, 0.658); /* Color morado con transparencia */
    padding: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* Logo y nombre del salón */
.navbar-brand {
    font-family: Sofia;
    display: flex;
    align-items: center;
}

.logo {
    width: 50px;
    height: 50px;
    margin-right: 0.5rem;
}

.brand-name {
    font-family: sofia;
    font-size: 1.5rem;
    color: #ffffff;
    white-space: nowrap;
}

/* Enlaces de la barra de navegación (visibles en pantallas grandes) */
.navbar-links {
    display: flex;
    list-style: none;
}

.navbar-links li {
    margin-right: -10%;
    margin-left: 10rem;
    font-weight: bold;
}

.navbar-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
}

.navbar-toggle {
    display: none; /* Oculta el ícono en pantallas grandes */
    font-size: 1.5rem;
    cursor: pointer;
    color: #ffffff;
}

/* Estilos responsive */
@media (max-width: 768px) {
    /* Muestra el ícono de menú en pantallas pequeñas */
    .navbar-toggle {
        display: block;
    }

 /* Oculta los enlaces de la barra de navegación en pantallas pequeñas */
 .navbar-links {
        display: none; /* Oculta el menú inicialmente */
        flex-direction: column;
        width: 100%;
        background-color: rgba(106, 13, 173, 0.705); /* Fondo del menú desplegado */
        position: absolute;
        top: 60px;
        left: 0;
        padding: 1rem 0;
        align-items: center;
        
 }

 .navbar-links li {
        text-align: center;
        padding: 1rem;
        width: 100%;
        margin-right: 70%;
  }

  /* Muestra el menú cuando tiene la clase 'active' */
    .navbar-links.active {
        display: flex;
  }
}



/* Main */
.container-items{
    margin-top: 10%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.item{
    border-radius: 10px;
}

.item:hover{
    box-shadow: 0 10px 20px rgb(131, 17, 224);
}

.item img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    transition: all .5s;
}

.item figure{
    overflow: hidden;
}

.item:hover img{
    transform: scale(1.2);
}

.info-product{
    padding: 15px 30px;
    line-height: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.info-product button{
    border: none;
    background: none;
    background-color: #6c2f88;
    color: #fff;
    padding: 15px 10px;
    cursor: pointer;
}
/* Main */
.container-items {
    margin-top: 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta el ancho mínimo de los elementos */
    gap: 20px;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .container-items {
        grid-template-columns: 1fr; /* Una columna para pantallas pequeñas */
    }

    .item img {
        height: 400px; /* Reduce la altura de la imagen */
    }
}
/* Estilo para la sección de Contacto */
/* Responsive Design para pantalla pequeña */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;      /* Cambia a columna en dispositivos pequeños */
        text-align: center;          /* Centra el contenido */
    }

    .contact-section {
        margin-bottom: 15px;         /* Espacio entre secciones en móviles */
    }
}

/* Estilo para la sección de Contacto */
#contact {
    width: 100%;                     /* Ancho completo */
    background-color: #b990cc;       /* Color de fondo */
    color: #fff;                     /* Color de texto */
    padding: 20px 0;                 /* Espaciado superior e inferior */
    font-family: Poppins;
}

.contact-container {
    display: flex;                   /* Flexbox para organizar en fila */
    justify-content: space-around;   /* Espaciado entre secciones */
    max-width: 1200px;               /* Ancho máximo de la caja */
    margin: 0 auto;                  /* Centrado horizontal */
    align-items: center;             /* Alinea al centro verticalmente */
}

.contact-section {
    text-align: center;              /* Centra el texto */
}

.contact-section h3 {
    font-size: 18px;                 /* Tamaño de título */
    margin-bottom: 10px;             /* Espacio debajo del título */
}

.contact-section p {
    font-size: 20px;                 /* Tamaño de título */
    margin-bottom: 10px;             /* Espacio debajo del título */
}


.social-icons a,
.payment-methods img {
    margin: 0.5px;                   /* Espacio entre íconos */
}

.social-icons img,
.payment-methods img {
    width: 30px;                     /* Tamaño de íconos */
    height: auto;
}


#whatsapp-button {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde el lado derecho */ /* Color de fondo de WhatsApp */
    border-radius: 50%; /* Hace que el botón sea redondo */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    transition: transform 0.3s; /* Efecto de transformación */
}

#whatsapp-button img {
    width: 60px; /* Tamaño del ícono */
    height: 60px; /* Tamaño del ícono */
}

#whatsapp-button:hover {
    transform: scale(1.1); /* Efecto de aumento al pasar el mouse */
}