/*
    ########  #######   #######  ######## ######## ########  
    ##       ##     ## ##     ##    ##    ##       ##     ## 
    ##       ##     ## ##     ##    ##    ##       ##     ## 
    ######   ##     ## ##     ##    ##    ######   ########  
    ##       ##     ## ##     ##    ##    ##       ##   ##   
    ##       ##     ## ##     ##    ##    ##       ##    ##  
    ##        #######   #######     ##    ######## ##     ## */
footer{
    background-image: url(../images/footer.svg); 
    background-repeat: no-repeat;
    background-position: center top; 
    background-size: cover;
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2em;
    padding-top: 12em;
}

.container-footer {
    width: 90%;
	display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: baseline;
	gap: 5em 1em;
	padding: 2em;
    flex-wrap: wrap;
}

.contact-info, .contact-sucursales, .social-icons-section{
    flex: 1 1 18em;
}

.title-footer {
    text-align: center;
    color: #ffffff; 
	font-weight: 700;
	font-size: 1.5em;
    padding-bottom: 10px;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.contact-info a, .contact-sucursales a{
    color: #fff;
    display: inline-block;
}

.contact-info a:hover, .contact-sucursales a:hover{
    color: #fff;
    transform: scale(1.2);
}

.contact-sucursales a{
    margin: auto;
    text-align: center;
    font-weight: bold;
}

.contact-info ul {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	padding: 0;
    margin: 0;
}

.contact-info ul li {
	list-style: none;
	color: #ffffff; 
	font-size: 1.1em;
	font-weight: lighter;
    text-align: center;
}

.social-icons-section {
	display: flex;
    flex-direction: column;
	align-items: center;
    gap: 2em;
}

.social-icons-section ul {
	display: flex;
	gap: 3rem;
	padding: 0;
	margin: 0;
}

.social-icons-section ul li a {
    text-decoration: none;
    display: inline-block;
}

.social-icons-section ul li a i {
	color: #ffffff;
    align-items: center;
	justify-content: center;
	font-size: 3em;
}

.social-icons-section ul li a:hover{
    transform: scale(1.4);
    filter: drop-shadow(0 0 5px #001489);
}

.contact-sucursales {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.contact-sucursales ul {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    list-style: none; 
}

.contact-sucursales ul li {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    align-items: center; 
    color: #ffffff; 
    font-weight: lighter;
    font-size: 1em;
}

.contact-sucursales ul li i {
    font-size: 1.25em; 
}

.copyright {
	display: flex;
	justify-content: space-between;
	padding-top: 2rem;
    color: #ffffff; 
    width: 90%;
	border-top: 2px solid #ffffff; 
}

.copyright p {
	font-weight: 400;
	font-size: 1.2rem;
    text-align: center;
}

/*
    ##      ## ##     ##    ###    ########  ######     ###    ########  ########  
    ##  ##  ## ##     ##   ## ##      ##    ##    ##   ## ##   ##     ## ##     ## 
    ##  ##  ## ##     ##  ##   ##     ##    ##        ##   ##  ##     ## ##     ## 
    ##  ##  ## ######### ##     ##    ##     ######  ##     ## ########  ########  
    ##  ##  ## ##     ## #########    ##          ## ######### ##        ##        
    ##  ##  ## ##     ## ##     ##    ##    ##    ## ##     ## ##        ##        
     ###  ###  ##     ## ##     ##    ##     ######  ##     ## ##        ##        
*/
/* Estilos generales */
.whatsapp-btn {
    position: fixed;
    bottom: 10em;
    right: 10em;
    z-index: 20;  
    width: fit-content; 
}

.whatsapp-btn a {
    display: inline-block;
    position: absolute;
}

#contisito-saluda {
    display: none;
}

.whatsapp-btn:hover #contisito-saluda {
    display: block;
}

.whatsapp-btn:hover #contisito-normal {
    display: none;
}

.whatsapp-btn img {
    height: 8em;
}

.overlay-text {
    position: absolute;
    top: -3em; /* Ajusta la posición vertical sobre el botón */
    left: 50%;
    transform: translateX(-50%);
    background-color: #1B0480;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Solo visible al pasar el mouse en escritorio */
    transition: opacity 0.3s ease;
}

.whatsapp-btn:hover .overlay-text {
    opacity: 1;
}

/* Media Queries para pantallas más pequeñas */
@media screen and (max-width: 1024px), 
       screen and (max-width: 480px) {
    .whatsapp-btn {
        bottom: 10em; /* Ajustamos la posición */
        right: 5em;
    }

    .whatsapp-btn img {
        height: 5em; /* Reducimos el tamaño de la imagen */
    }

    .overlay-text {
        top: -4em; /* Ajustamos la posición del globo */
        font-size: 12px; /* Reducimos el tamaño del texto */
        padding: 10px; /* Ajustamos el espacio dentro del globo */
        width: auto; /* Ajusta automáticamente el tamaño */
        max-width: 8em; /* Limita el ancho para evitar que sea muy largo */
        text-align: center; /* Centra el texto */
        white-space: pre-line; /* Permite saltos de línea */
        display: inline-block; /* Mantiene el tamaño ajustado al contenido */
        opacity: 1; /* Siempre visible en móviles */
    }
}


/* Mantener el efecto de saludo y overlay solo en escritorio */
@media screen and (max-width: 768px) {
    .whatsapp-btn:hover #contisito-saluda {
        display: none;
    }
    .whatsapp-btn:hover #contisito-normal {
        display: block;
    }
    .overlay-text {
        opacity: 1; /* Visible en móviles sin hover */
    }
}

/*
    ########  ########  ######  ########   #######  ##    ##  ######  #### ##     ## ######## 
    ##     ## ##       ##    ## ##     ## ##     ## ###   ## ##    ##  ##  ##     ## ##       
    ##     ## ##       ##       ##     ## ##     ## ####  ## ##        ##  ##     ## ##       
    ########  ######    ######  ########  ##     ## ## ## ##  ######   ##  ##     ## ######   
    ##   ##   ##             ## ##        ##     ## ##  ####       ##  ##   ##   ##  ##       
    ##    ##  ##       ##    ## ##        ##     ## ##   ### ##    ##  ##    ## ##   ##       
    ##     ## ########  ######  ##         #######  ##    ##  ######  ####    ###    ######## 
*/


@media screen and (max-width: 768px) {
    .container-footer {
        gap: 3em 1em;
        padding: 1em;
    }

    .title-footer {
        font-size: 15px;
    }

    .contact-info ul {
        gap: 1em;
    }

    .contact-info ul li {
        font-size: 1em;
    }

    .social-icons-section {
        gap: 1em;
    }

    .social-icons-section ul li a i {
        font-size: 2em;
    }
    
    .contact-sucursales ul li i {
        font-size: 1em; 
    }
    
}