/* Estilos para el logo */
#logo {
    max-height: 56px !important; /* Altura máxima del logo */
    width: auto !important; /* Ancho automático para mantener la proporción */
}

/* El icono del home no es visible pero al estar, aparece en el menú vertical de versiones estrechas o móviles*/
@media (max-width: 4096px) {
    .home-icon {
        display: none; /* Hace invisible el icono de inicio */
    }
}

/* Media query para ajustar el tamaño del logo en pantallas más pequeñas */
@media (max-width: 1060px) {
    #logo {
        max-height: 55px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 1055px) {
    #logo {
        max-height: 53px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 1050px) {
    #logo {
        max-height: 51px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 1045px) {
    #logo {
        max-height: 49px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 1040px) {
    #logo {
        max-height: 47px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 1035px) {
    #logo {
        max-height: 45px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 1030px) {
    #logo {
        max-height: 43px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 1025px) {
    #logo {
        max-height: 41px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 1020px) {
    #logo {
        max-height: 39px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 1015px) {
    #logo {
        max-height: 37px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 1010px) {
    #logo {
        max-height: 36px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 1005px) {
    #logo {
        max-height: 35px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 1005px) {
    #logo {
        max-height: 34px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 995px) {
    #logo {
        max-height: 33px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

@media (max-width: 990px) {
    #logo {
        max-height: 32px !important; /* Altura máxima del logo en pantallas aún más pequeñas */
    }
}

@media (max-width: 985px) {
    #logo {
        max-height: 31px !important; /* Altura máxima del logo en pantallas más pequeñas */
    }
}

/* Ocultar el banner de arriba del todo cuando la página es suficientemente estrecha. 
Para que no quede detras de la versión móvil o ultra estrecha que pone el menú en un botón desplegable
a la izquierda */
@media (max-width: 980px) {
    #banner-top {
        display: none;
    }
}


/* Mostrar imagenes solo en versión de pantalla estrecha (móvil) y ocultarlas en pantalla más ancha */
@media (max-width: 736px) {
    #ocultar-en-movil {
        display: none;
    }    
    #mostrar-en-movil {
        display: block;
    }
}
@media (min-width: 737px) {
    /* Ocultar imagen_movil en pantallas más grandes que 980px */
    #mostrar-en-movil {
        display: none;
    }
    #ocultar-en-movil {
        display: block;
    }
}



/* Ocultar la barra horizontal de los iconos de contacto del footer cuando la pantalla es suficientemente estrecha */
@media (max-width: 488px) {
    #footer-contact-bar {
        display: none;
    }
}

#formulario-presupuesto {
    border: 1px solid #ccc; /* Color y grosor del borde */
    border-radius: 10px; /* Borde redondeado */
    padding: 20px; /* Espaciado interno para que el contenido no esté pegado al borde */
}

#whatsapp-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

#whatsapp-icon {
  display: block;
  width: 65px;
  height: 60px;
  background-color: green;
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
}

#email-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 1000;
}

#email-icon {
  display: block;
  width: 65px;
  height: 60px;
  background-color: darkorange;
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
}

#idioma-widget {
  position: fixed;
  bottom: 160px;
  right: 20px;
  z-index: 1000;
}

#idioma-icon {
  display: block;
  width: 65px;
  height: 59px;
  background-color: whitesmoke;
  border-radius: 50%; /* Para hacerlo circular */
  overflow: hidden; /* Oculta partes de la imagen que sobresalen del círculo */
}

#idioma-icon img {
    width: 100%; /* Ajusta la imagen al tamaño del contenedor */
    height: auto; /* Mantiene la proporción de aspecto */
}


#close-btn {
  position: absolute;
  top: -5px;
  right: -2px;
  width: 20px;
  height: 20px;
  background-color: black;
  box-shadow: none;

  border: 0px;
  border-radius: 50%;
  outline: none;
  text-align: center;
  line-height: 0px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

#close-btn-email {
  position: absolute;
  top: -5px;
  right: -2px;
  width: 20px;
  height: 20px;
  background-color: black;
  box-shadow: none;

  border: 0px;
  border-radius: 50%;
  outline: none;
  text-align: center;
  line-height: 0px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

#close-btn-idioma {
  position: absolute;
  top: -5px;
  right: -2px;
  width: 20px;
  height: 20px;
  background-color: black;
  box-shadow: none;

  border: 0px;
  border-radius: 50%;
  outline: none;
  text-align: center;
  line-height: 0px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* Estilos para los desplegables del menú */
#header ul ul {
    background-color: #1f4164; /* Cambia el color de fondo según tu preferencia */
}

/* Panel de navegación lateral (cuando la pantalla es estrecha) */
#navPanel {
    background-color: #1f4164; /* Cambia el color de fondo según tu preferencia */
}

/* Cambiar el color de la hamburguesa */
#titleBar .toggle {
    color: #1f4164; /* Cambia el color de la hamburguesa según tu preferencia */
}

/* Cambiar el color de fondo del banner superior */
#titleBar {
    background-color: #1f4164; /* Cambia el color de fondo del banner superior según tu preferencia */
}

/* Cambiar el color de fondo del banner-top */
#banner-top {
    background-color: #1f4164; /* Cambia el color de fondo según tu preferencia */
}

/* Cambiar el color de fondo del reborde inferior adicional de header-fina */
#header-fina {
    background-color: #1f4164; /* Cambia el color de fondo según tu preferencia */
}

/* Cambiar el color de fondo del header-fina  NO HACE NADA !!!!!!!!!!!!!!!!!!!!! */
#inner {
    background-color: #111111; /* Cambia el color de fondo según tu preferencia */
}

/* Cambiar el color de fondo del footer-wrapper */
#footer-wrapper {
    background-color: #1f4164; /* Cambia el color de fondo según tu preferencia */
}

/* Cambiar el color del texto del menú de navegación */
#logo ul li a {
    background-color: #1f4164; /* Cambia el color del texto según tu preferencia */
}

/* Estilos para el banner-movil */
#banner-movil {
    display: none; /* Ocultar el banner por defecto */
    background-color: #1f4164; /* Color de fondo del banner */
    padding: 10px; /* Espacio interno del banner */
    z-index: 1000; /* Asegurar que el banner esté en la parte superior */
}

/* Estilos para el contenedor del menú y los iconos de contacto */
#menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Estilos para los iconos de contacto */
#contact-icons {
    display: flex;
    align-items: center;
}

#contact-icons a {
    margin-left: 10px; /* Espacio entre los iconos */
}

/* Estilos específicos para la versión móvil (menú en modo hamburguesa) */
@media (max-width: 980px) {
    #menu-container {
        flex-direction: column; /* Coloca los elementos en columnas */
        align-items: flex-start; /* Alinea los elementos a la izquierda */
    }

    #contact-icons {
        margin-top: 10px; /* Espacio entre el menú y los iconos */
    }
}

/* Regla CSS para aumentar el tamaño del icono en un 150% */
.icono-grande {
  font-size: 150%;
}