body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/*    background-color: #f9f9f9;*/
    background-color: silver;
    margin: 0;
    padding: 0;
	height: auto;
}

.container {
	display: flex;
    max-width: 100%;
	width: 99%;
    margin: 0px auto;
    background-color: #ffffff;
    border-radius: 10px;
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
	height: auto; /* anterior height: 100%;*/
	flex-wrap: wrap;
	max-height: 90%;
	
}


h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333333;
}


.frmContacto {
    background-color: #2c3e50; /* Fondo oscuro */
    border-radius: 10px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
	min-width: 15em;
/*	width: 30%;*/
    height: auto;
    padding: 40px;
	padding-bottom: 60px;
/*    margin-top: 50px;
	margin-bottom: 50px;
	margin-right: 0px;
	margin-left: 20px;*/
}
.subContainer,
.frmContacto,
.mapartesanias {
    width: calc(31% - 5px); /* Ajusta el ancho de los elementos a aproximadamente un tercio del contenedor con un margen */
/*    margin: 1%; /* Margen entre elementos */
	height: auto; 
	margin: 10px auto;
	
}

/*   .mapartesanias {
		margin-right: 5px;
    	margin-top: 10%;
    	margin-left: 2%;
        width: 350px;
		height: 60vh;
		border: 2px solid #d1d1d1;
	}
/*
.mapaarte {
        margin-left: 10px;
		height: 84%;
}*/
.mapartesanias {
    margin-right: 40px; /* Reduce el margen derecho según sea necesario */
    margin-top: 10%;
    margin-left: 3%;
    width: 29%; /* 31% del ancho del contenedor flex menos el margen izquierdo y derecho */
    border: 2px solid #d1d1d1;
    height: 50%;
    box-sizing: border-box; /* Incluir el borde en el ancho del contenedor */
}

.mapaarte {
    margin-left: 3%; /* Eliminar el margen izquierdo */
    height: 83%; /* Ajustar la altura para llenar el contenedor */
    width: 95%; /* Ajustar el ancho al 100% */
}


.company-details {
    margin-bottom: 20px;
	margin-top: 11%;
    margin-right: 1%;
	margin-left: 2px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	width: 89%;
	height: 25%;
	padding-bottom: 20px;
	padding-left: 10px;
    background-color: #f2f2f2;
}

.company-details h2 {
    color: #555555;
    margin-bottom: 15px;
    padding-top: 15px;
	padding-bottom: 5px;
}

.company-details p {
    margin: 5px 0;
    color: #777777;

}

.subContainer {
	margin-top: 10%;
	margin-left: 1%;
	width: 25%;
	height: 70%;
    border: 2px solid #d1d1d1;
	
}
.imagenesVarias img{
	width: 20em;
	height: 20em;
	margin-top: 10%;
}

.imagenesVarias {
	margin-top: -30px;
}

/*.company-details,
.frmContacto {
	flex: 0 0 31%;
}
*/
.grupo-datos {
    margin-bottom: 20px;
	margin-right: 30px;
}

.logo-container img {
            width: 3.5%;
            height: 3.5%;
/*            object-fit: cover;*/
            border-radius: 50%;
			justify-content: left;
			float: left;
			vertical-align: middle;
}	
.logo-container span {
            width: 300px;
            height: 75px;
            display: flex;
            justify-content: left;
/*            align-items: center;*/
			margin-right: 5px;
			color:red;
			margin-top: 30px;
			float: left;
			font-family: "Segoe Script";
			font-size: 20px;
}

.menu {
    border-radius: 10px;	 /* redondea las esquinas del fondo del menu de navegacion nav que tiene la clase menu */
/*    background: rgba(0, 50, 150, 0.9);*/
    background: #005a9e;
    padding: 0.5em 0;
/*    justify-content: left;*/
    float: left;
/*	margin-left: 48.8px;*/
	margin-top:13px;
}

.menu ul {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
    list-style: none;
    padding-left: 0;
}
.menu li {
    margin: 0.2em;
}
.menu a {
    text-transform: uppercase;
    font-size: 0.8em;
    color: #fff;
    line-height: 2.5;
    display: block;
    padding: 0 0.7em;
	text-decoration: none; /* Evitar subrayado */
}
.menu a.active,
.menu a:hover {
    text-decoration: none;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.3);
}


label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333333;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #d1d1d1;
    border-radius: 6px;
    font-size: 16px;
    color: #444444;
    transition: border-color 0.3s ease;


/*    width: 100%;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    font-size: 16px;
    color: #555555; */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: #e74c3c; /* Color de foco */
    background-color: #2c3e50; /* Vuelta al fondo oscuro */
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #34495e; /* Bordes más fuertes */
    border-radius: 8px;
    font-size: 17px;
    color: #ecf0f1;
    background-color: #3a4d62; /* Color de fondo más oscuro para los campos */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}


input[type="submit"] {
    background-color: #e74c3c; /* Rojo brillante */
    color: #ecf0f1;
    padding: 14px 26px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    transition: background-color 0.3s ease;
}


input[type="submit"]:hover {
    background-color: #c0392b; /* Rojo más oscuro al pasar el mouse */
}

#botonEnviar {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

footer {
    text-align: center;
    margin-top: 20px;
}

.main-footer {
	padding-top: 15px;
}


/*  css para mostrar mensaje enviando */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blinking {
    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
    font-size: 24px;
    color: white;
}

#loading-overlay {
    display: none;
}

@keyframes blinker {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Ejemplo de reglas de CSS personalizadas para SweetAlert2 */
.swal2-popup {
    font-size: 8px; /* Ajusta el tamaño de la fuente */
    width: 400px; /* Ajusta el ancho de la ventana emergente */
    color: #333; /* Cambia el color del texto */
    /* Agrega más reglas de estilo según sea necesario */
}
 .swal2-container {
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 .sugerencias {
    list-style-type: none;
    padding: 0;
	margin: 0;
    margin-left: 2px;
    position: absolute;
    width: 20%; /* Ajusta el ancho según sea necesario */
/*	height: 10%;*/
	background: white;
/*    border: 1px solid #ccc;*/
    max-height: 150px; /* Ajusta la altura máxima según tus necesidades */
    overflow-y: auto; /* Habilita el scroll vertical si es necesario */
/*	width: 180px;*/
}

.sugerencia-item {
    padding: 1px 8px;
    cursor: pointer;
}

.sugerencia-item:hover {
/*    background-color: yellow;*/
/*    background-color: #f2f2f2;*/
    background-color: #e0e0e0; /* Color más oscuro */
}
.resaltado {
    background-color: #e0e0e0; /* Color más oscuro */    
/*    background-color: #f2f2f2;*/
    border: 1px solid #888;
    color: #333;
}

/*===========================================================================*/


.grupo-datos {
    margin-bottom: 25px;
}

label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #ecf0f1; /* Blanco para contraste en el fondo oscuro */
}



.fa-fw {
	background-color: #25D366;
	color: #ffffff;
    border-radius: 50%;	 /* redondea las esquinas del fondo del menu de navegacion nav que tiene la clase menu */
    overflow: hidden; /* Asegura que la imagen no se salga del círculo */
    width: 100%; /* Ajusta la imagen para que ocupe todo el contenedor */
    height: auto; /* Mantén la proporción de la imagen */
/*  display: block; /* Elimina cualquier espacio extra debajo de la imagen */

}	
.fa-map-marker {
	color: #8B0000;
}

.fa-envelope {
	color:  #00008B;
}


/* celular y tablet en horizontal */
/* 621 es el limite minimo en horizontal (celular mio) y el max-width: 1024 para abarcar mi tablet acer*/
@media screen and (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
	.mapartesanias {
		margin-left: 10%;
		border: none;

	}	
    .subContainer,
    .frmContacto,
    .mapartesanias {
        width: calc(40% - 20px); /* Ajusta el ancho de los elementos al 100% del contenedor con un margen */
		margin: 0 auto;
	    border: 2px solid #d1d1d1;

    }
	.frmContacto {
		order: 1;
        max-width: 800px;
	    min-width: 10em;
	}
	.subContainer {
		order: 2;
	}
	.mapartesanias {
		order: 3;
	}
	.company-details {
		margin-top: 1em;
		margin-bottom: 0em;
	}
	.imagenesVarias {
		align-items: center;
		justify-content: center;
		margin-left: 0.5em;
	}
    #imagenCambiante {
		width: 90%;
		height: 90%;
/*		align-items: center;*/
/*		margin-left: 3em;*/
	}
		

}


@media only screen and (max-width: 767px) and (orientation: portrait) {
  /* Estilos para teléfonos móviles vertical y tablet*/

	.mapartesanias {
		margin-left: 10%;
	    border: 2px solid #d1d1d1;
		order: 3;
	}	
    .subContainer,
    .frmContacto,
    .mapartesanias {
        width: calc(100% - 20px); /* Ajusta el ancho de los elementos al 100% del contenedor con un margen */
		margin: 10px auto;
    }
	.frmContacto {
		order: 1;
	}
	.subContainer {
		order: 2;
        padding: 0 10px; /* Añade un relleno horizontal para evitar el solapamiento en los bordes */
        margin-bottom: 2px; /* Añade margen inferior para separar los elementos */
        border: 2px solid #d1d1d1;

	}
	.company-details {
		margin-top: 1em;
		margin-bottom: 0.3em;
	}
	/* la siguiente regla es para que si no alcanza el texto, parrafo, continue abajo
	 es como flex-wrap, pero esto es a nivel de elemento, y no de contenedor (yo)*/
.company-details p {
    word-wrap: break-word; /* Rompe palabras largas para evitar que se desborden del contenedor */
    overflow: hidden; /* Oculta cualquier contenido que se desborde del contenedor */
}

  .imagenesVarias {
    margin-top: 2px; /* Añade margen superior para separar la imagen de los detalles de la empresa */
    padding-bottom: 1em;
    margin-left: 0.1em;
    max-width: 100%; /* El contenedor nunca excederá el 100% del ancho del contenedor padre */
/*	height: 20em;*/
  }
  
/*  .siguenos {
	  display: flex;
	  flex-wrap: wrap;
/*    word-wrap: break-word; /* Rompe palabras largas para evitar que se desborden del contenedor */
/*    overflow: hidden; /* Oculta cualquier contenido que se desborde del contenedor */

	  
    #imagenCambiante {
        width: 90%; /* La imagen ocupará todo el ancho del contenedor */
        height: auto; /* La altura se ajustará automáticamente para mantener las proporciones */
        padding-left: 0.5em;
    }

	.menu {
		margin-left: 0.5em;
	}
	.main-footer {
		background: none;
		margin-left: 15%;
		width: 55%;
		
	}	

    .siguenos ul {
    /* Asegura que el div se ajuste al contenido */
        display: flex;
        flex-direction: column;
        align-items: left; /* Centrar horizontalmente */
        text-align: left; /* Centrar el texto dentro de cada <a> */
        align-self: stretch;  /*Hace que el contenedor se estire en altura */
 
    /* Espacio entre los elementos */
        margin: 0px;
        background: #005a9e;
        border-radius: 10px;
    }
	
}

  /*----------------------------------------------------------------------------------*/  
 .comunicate {
    text-align: center;
    margin-bottom: 15px;
}

@media screen and (max-width: 907px) and (orientation: landscape) {
	.menu {
		width: 50%;
	}
	.subContainer, 
	.frmContacto, 
	.mapartesanias {
        margin: 10px auto;
	}
}

@media screen and (max-width: 590px) and (orientation: landscape) {
	.menu {
		width: 100%;
	}
	.subContainer, 
	.frmContacto, 
	.mapartesanias {
        margin: 10px auto;
	}
}


/* Estilos de los iconos dentro de .redes-sociales */
.redes-sociales a p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    color: white;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 27px; /* Tamaño del icono */
    transition: background-color 0.3s, transform 0.3s; /* Transición suave para hover */
}

.redes-sociales {
    display: flex;
    justify-content: center; /* Centra los iconos horizontalmente */
    align-items: center;
    gap: 10px; /* Espacio entre los iconos */
}

/* Estilo para hover en los iconos */
.redes-sociales a:hover p {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño del icono al pasar el mouse */
}

/* Estilos individuales para cada red social */
.fa-twitter {
    background: #2E9FFA;
}

.fa-facebook {
    background: #3B5998;
}

.fa-youtube {
    background: #ff0000;
}

.fa-whatsapp {
    background: #25D366;
}

/* Iconos redondeados con borde */
.redes-sociales a p {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar un efecto de profundidad */
}

        /* fin redes sociales */
/*-----------------------------------------------------*/	
 /* whatsapp aparte */   
.whatsapp-tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: 160px;
    background-color: #25d366;   /*#e6753b;*/
    color: #000000;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 80%; /* Posición por encima del ícono */
    left: 50%;
    margin-left: -80px; /* Centrar el tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.whatsapp-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
	/* fin whatsapp aparte */