@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=PT+Sans&display=swap');
 :root{
        --main-header-colo:linear-gradient(45deg,#f5f2ee,#ffbc6a);
 }
body,html{
    margin: 0;
    padding: 0;   
    background: white;
}
.product-list {
    width: 100%;
    margin: 5px auto;
    margin-top: 210px;
    justify-content: space-around; /* Distribuye las listas de manera uniforme */
    align-items: flex-start;
}

.product {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 5px auto;
    background-color: #A44093;
}

.product img {
    height: auto;
    max-width: none; /* Evita restricciones */
}




.seccion1, .seccion2 {
    padding: 20px;
    font-family: Arial, sans-serif; /* Cambia la fuente */
    font-size: 18px; /* Ajusta el tamaño */
    line-height: 1.6; /* Espaciado entre líneas */  
}

.seccion1 {
    background-color: rgb(200, 61, 242);
    color: white;
}
.frase-animada {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    animation: moverFrase 30s linear infinite; /* Aplica la animación */
}

@keyframes moverFrase {
    0% { left: 0; }
    50% { left: 50%; } /* Se mueve a la mitad del ancho */
    100% { left: 0; } /* Vuelve a la posición original */
}


.seccion2 {
    background-color: #e85bd5;
    color: white;
}

.seccion2 .listas-container {
    display: flex; /* Activa flexbox */
    justify-content: space-around; /* Distribuye las listas de manera uniforme */
    align-items: flex-start; /* Asegura que cada lista inicie desde el mismo nivel */
    gap: 10%; /* Espacio entre las listas */
    padding: 100px 40px; /* Agrega margen a los lados para evitar que queden pegadas */
}
.seccion2 h2:first-of-type {
    margin-top: 10px; /* Ajusta la distancia desde arriba */
}
.seccion2 ul {
    list-style: none; /* Elimina los estilos de lista por defecto */
    padding: 0; /* Evita espacios extra */
    flex: 1; /* Hace que cada lista ocupe el mismo espacio */
}
.seccion2 ul:first-of-type {
    margin-left: 10%; /* Mueve solo la primera lista un poco hacia la derecha */
}
.seccion2 a {
    color: white; /* Cambia el color del texto */
    text-decoration: none; /* Elimina el subrayado */
    font-weight: bold;
    font-size:20px;
}

.seccion2 ul li a {
    transition: all 0.3s ease-in-out; /* Suaviza la animación */
    display: inline-block; /* Permite que el fondo se ajuste solo al texto */
    padding: 5px 10px; /* Agrega un pequeño espacio alrededor del texto */
}

.seccion2 ul li a:hover {
    background-color: rgba(243, 24, 24, 0.2); /* Cambia el fondo SOLO del texto */
    border-radius: 5px; /* Redondea ligeramente el fondo para un mejor efecto */
     transform: scale(1.1) translateX(10px); /* Agranda y desplaza el elemento */
}
.map-container {
    position: relative;
    display: inline-block;
}

.map-popup {
    display: none;
    position: absolute;
    top: -50px; /* Lo sube un poco arriba del texto */
    left: -320px; /* Lo mueve hacia la izquierda */
    width: 300px;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.map-container:hover .map-popup {
    display: block; /* Muestra el mapa cuando se pasa el cursor */
}
.whatsapp-icon {
    position: fixed;
    bottom: 120px; /* Lo coloca cerca del borde inferior */
    right: 80px; /* Lo coloca en la esquina derecha */
    width: 100px;
    height: 100px;
    z-index: 1000; /* Asegura que esté sobre otros elementos */
}

.whatsapp-icon img {
    width: 100%;
    height: auto;
    border-radius: 50%; /* Lo hace circular */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Le da un efecto de elevación */
    transition: transform 0.3s ease-in-out;
}

.whatsapp-icon:hover img {
    transform: scale(1.5); /* Efecto de agrandamiento al pasar el cursor */
}

.footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
    
}

.footer-content p {
    margin: 0;
}

.footer-nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
}

.footer-nav a:hover {
    text-decoration: underline;
}


@media (max-width: 600px) {
    .main-content {
        margin-top: 100px;
        min-width: auto;
    }
    .seccion2 .listas-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .whatsapp-icon {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
    }
}
@media (max-width: 768px) {
    .seccion2 .listas-container {
        display: flex;
        flex-wrap: wrap; /* Permite que se ajusten sin forzar una sola columna */
        justify-content: space-evenly; /* Distribuye mejor los elementos */
        align-items: flex-start; /* Evita que se alineen todos abajo */
        gap: 5%; /* Reduce la separación entre elementos */
        padding: 20px;
    }

    .seccion2 ul {
        flex: 1 1 45%; /* Cada lista ocupa el 45% del espacio */
        max-width: 45%; /* Evita que sean demasiado grandes */
        text-align: center; /* Centra el texto */
    }
}
@media (max-width: 768px) {
    .product-list {
        flex-direction: column; /* Acomoda los elementos en vertical */
        align-items: center; /* Centra los productos */
    }

    .product {
        width: 90%; /* Reduce el ancho para que no se vea excesivo en móvil */
    }

    .product img {
        width: 100%; /* Asegura que la imagen se ajuste bien al contenedor */
        max-width: none; /* Evita restricciones innecesarias */
    }

    .seccion1, .seccion2 {
        padding: 15px; /* Reduce el espacio para pantallas pequeñas */
        font-size: 16px; /* Ajusta el tamaño del texto */
    }

    .frase-animada {
        font-size: 20px; /* Disminuye el tamaño de la frase animada */
    }

    .seccion2 .listas-container {
        flex-direction: column; /* Acomoda las listas en una sola columna */
        gap: 10px; /* Reduce el espacio entre ellas */
        padding: 40px 20px; /* Ajusta el margen */
    }

    .map-popup {
        width: 90%; /* Hace que el mapa sea más adaptable */
        left: 5%; /* Ajusta la posición */
    }

    .whatsapp-icon {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px; /* Ajusta la ubicación en pantallas pequeñas */
    }

    .footer {
        padding: 15px; /* Reduce el espacio en móvil */
    }
}

@media (max-width: 768px) {
    .seccion2 .listas-container {
        flex-direction: row; /* Mantiene las listas en una fila */
        flex-wrap: wrap; /* Permite que se ajusten sin forzar una sola columna */
        justify-content: center; /* Centra los elementos */
        gap: 5%; /* Reduce la separación para evitar que se amontonen */
        padding: 20px; /* Ajusta el margen para que no quede demasiado espacio vacío */
    }
}