@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*colores
font-family: "Poppins", sans-serif;
font-family: "Open Sans", sans-serif;
VERDE: #008080;
BLANCO: #fafbf5;

*/

/*----------ESTILOS GENERALES----------*/

html {
	scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #333;
}
img {
  display: block;
  width: 100%;
  margin: auto;
}
ul,
li {
  list-style: none;
}
a {
  display: block;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

.contenedor {
  width: 95%;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}
.section {
  padding: 100px 0;
}
h1,h2,h3,h4,h5,h6 {
  font-family: "Poppins", sans-serif;
}
p {
  font-family: "Open Sans", sans-serif;
}

/*TITULOS Y TEXTOS*/
.titulo {
  font-weight: 600;
  font-size: 2.0em;
  text-align: center;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.1em;
}
.subtitulo {
  font-weight: 700;
  font-size: 1.2em;
  text-align: center;
  color: #666;
  line-height: 1.1em;
}
.subtitulo2 {
  font-family: "Open Sans", sans-serif;
  max-width: 960px;
  margin: auto;
	font-size: 1em;
	color: #666;
	font-weight: 500;
}
.subtitulo2 span {
  font-weight: 800;
}
.subtitulo-atendidos {
  font-weight: 500;
  font-size: 1.2em;
  text-align: center;
  color: #fff;
  line-height: 1.1em;
}
.subtitulo-atendidos span {
  font-weight: 800;
}

.txt {
  font-size: 1em;
  max-width: 960px;
  margin: auto;
  font-weight: 400;

  text-align: left;
  color: #666;
}
.txt span {
  font-weight: 800;
}

/*prueba social 1*/
.pruebasocial1 {
	padding: 5px 30px;
	font-size: 1em;
	border-radius: 5px;
	width: fit-content;
	margin: auto;

	display: flex;
	justify-content: center;

    border: 1px dashed #fff;
}
.estrellas {
	position: relative;
	top: 3px;
	padding: 0 5px;
	margin: auto;
}
.icon-star {
	color: #F5B700;
	font-size: 0.8em;
}

/*BANNER INDEX*/
.bannernuevo {
  max-width: 100%;
  margin: auto;
	position: relative;
	background-image: url(../img/BANNER.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 400px;
}
.bannernuevo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
}
.bannernuevo .wa-btnverdegeneral {
	width: fit-content;
	margin: auto;
  color: #fff;
	background: #008080;
  font-size: 1em;
  font-weight: 600;
  padding: 7px 20px;
  border-radius: 5px;
  transition: all 0.4s;
}
.grupo-banner {
	position: absolute;
	width: 95%;
	max-width: 1200px;
	margin: auto;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translateX(-50%)translateY(-50%);
}
.grupo-banner2 {
	position: absolute;
	width: 95%;
	max-width: 1200px;
	margin: auto;
	text-align: center;
	top: 98%;
	left: 50%;
	transform: translateX(-50%)translateY(-98%);
}
.columna-banner2 {
	padding: 7px;
	border: 2px solid #fff;
	margin-bottom: 5px;
}

.bannernuevo .elegirnostxt {
	font-size: 1.2em;
	color: #fff;
}
.bannernuevo .titulo {
	font-size: 2.1em;
	color: #fff;
	margin: 7px;
    line-height: 1.1em;
}
.bannernuevo .bannercasorealtxt {
    color: #fff;
	font-size: 1em;
}
.bannernuevo .casorealtxt {
	font-size: 1em;
	color: #fff;
}
.bannernuevo .casorealtxt span {
	font-weight: 700;
	color: #eee;
}

/*prueba social 1*/
.pruebasocial1 {
	padding: 5px;
	border-radius: 7px;

	margin: auto;
	margin-bottom: 10px;

	display: flex;
	justify-content: center;
}
.bannerelegirnostxt {
	font-size: 1em;
	color: #fff;
    padding: 0 5px;
}
.estrellas {
	position: relative;
	top: 2px;
	padding: 0 5px;
	margin: auto;
}
.icon-star {
	color: #F5B700;
	font-size: 0.7em;
}

/*boton  CTA*/
.botonwasap {
	max-width: 300px;
	margin: auto;
	margin-bottom: 10px;
}
.botonwasap span {
	position: relative;
	top: 5px;
	font-size: 1.4em;
}
.wa-btnverdegeneral {
	width: fit-content;
	margin: auto;
  color: #fafbf5;
	background: #008080;
  font-size: 1em;
  font-weight: 600;
  padding: 7px 20px;
  border-radius: 5px;
  transition: all 0.4s;
}
.wa-btnverdegeneral:hover {
  color: #fafbf5;
  background: #333;
}

/*SLOGAN SUPERIOR*/
.atendidos {
  overflow: hidden;
  width: 100%;
  margin: auto;
	background: #008080;
	padding: 10px 0px;
}
.atendidos .contenedor {
	display: flex;
	justify-content: center;
}
.atendidos .subtitulo2 {
	font-size: 1em;
	color: #fff;
}


/*QUIENES SOMOS*/
#nosotros {
	background: #eee;
  overflow: hidden;
  max-width: 100%;
  margin: auto;
}
.nosotros-img {
	width: 260px;
	height: 260px;
    object-fit: cover;
	margin-bottom: 20px;
	border-radius: 50%;
	border: 5px solid transparent;
  outline: 5px solid #008080;
  outline-offset: 0; /* Ajusta la separación */
	
}
.columna-nosotros {
	padding: 20px;
	margin-bottom: 15px;
}
.dato1 {
  max-width: 960px;
	margin: auto;
	border-radius: 20px;
	background: #008080;
	padding: 20px;
}
.dato1 .unidades-img {
	width: 160px;
}
.dato1 .txt {
	color: #fff;
}


/*FILOSOFIA*/
#filosofia {
	background: #fff;
  overflow: hidden;
  max-width: 100%;
  margin: auto;
}
.columna-filosofia {
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}
.filosofia-img {
	width: 130px;
	height: 130px;
    object-fit: cover;
	margin-bottom: 20px;
	
	border-radius: 50%;
	border: 5px solid transparent;
  outline: 5px solid #008080;
  outline-offset: 0; /* Ajusta la separación */
}


/* NUESTROS PRODUTOS - ESTILOS EN ASSETS styles.css */
#servicios {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #eee;
}

.grupo-servicios {

}
.columna-servicios {
	border-radius: 20px;
	padding: 40px 10px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	margin-bottom: 20px;
}
.serviciositems {
  font-family: "Open Sans", sans-serif;
	font-size: 1em;
	text-align: left;
}
.servicios-item {
	display: flex;
	padding: 7px 0px;
	border-bottom: 1px dashed #999;
}
.servicios-item:last-child {
	border-bottom: none;
}
.serviciositems .icon-check {
	color: #008080;
	margin-right: 10px;
}
.serviciositems .subtitulo {
    text-align: center;
    margin-bottom: 10px;
}
.servicios-mitad {
  width: 100%;
}
.servicios-img {
	width: 200px;
	height: 200px;
    object-fit: cover;
	margin-bottom: 15px;
	
	border-radius: 50%;
	border: 5px solid transparent;
  outline: 5px solid #008080;
  outline-offset: 0px; /* Ajusta la separación */
}
.servicios-btn {
  align-self: flex-end;
	width: 80%;
	margin: 0 auto;
}
.servicios-boton {
  padding: 10px;
	border-radius: 20px;
	font-size: 0.95em;
	text-align: center;
	background: #F0F3FA;
	color: #0F4395;
	transition: all 0.4s;
}
.servicios-boton:hover {
	background: #0F4395;
	color: #F0F3FA;
}

/*POR QUE - QUE NOS DIFERENCIA*/
#porque {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #fff;
}
.columna-porque {
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}
.porque-img {
	width: 180px;
}

/*POR QUE ELEGIRNOS - BENEFICIOS*/
#beneficios {
  overflow: hidden;
  width: 100%;
  margin: auto;
	background: #008080;
}
#beneficios .titulo {
	color: #fff;
}
#beneficios .txt {
	color: #fff;
}
#beneficios span {
	color: #fff;
}
.columna-beneficios {

}
.beneficios-img {
	width: 260px;
	height: 260px;
    object-fit: cover;
	border-radius: 50%;
    margin-bottom: 20px;
	border: 5px solid transparent;
  outline: 5px solid #999;
  outline-offset: 0; /* Ajusta la separación */
}
.beneficios-item {
  font-family: "Open Sans", sans-serif;
	display: flex;
	padding: 10px 0;
	border-bottom: 1px dashed #fff;
}
.beneficios-item:last-child {
	border-bottom: none;
}
#beneficios h2 {
  font-weight: 600;
  font-size: 2.0em;
  text-align: center;
}
.beneficios-item .icon-check {
	font-size: 1.2em;
	margin-right: 10px;
}
.beneficios-item p {
	font-size: 1em;
	margin: 0;
}
#beneficios .complemento {
	text-align: center;
	font-size: 1.2em;
	color: #fff;
}
/*BOTON FLOTANTE WASAP*/
.btn-whatsapp {
  display: block;
  width: 90px;
  height: 90px;
  color: #fff;
  right: 20px;
  bottom: 20px;
  position: fixed;
  z-index: 999;
}

/*PREGUNTAS FRECUENTES*/
#preguntas {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #fff;
}
.acordeon {
	width: 100%;
	max-width: 700px;
	margin: auto;
}
.acordeon .acordeon-contenedor {
	position: relative;
	margin: 10px 10px;
}
/* Posiciona las etiquetas en relación con el contenedor. Añade relleno en la parte superior e inferior y aumenta el tamaño de la fuente. También hace que su cursor sea un puntero */
.acordeon .label {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #666;
	position: relative;
	font-size: 1.0em;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	transition: all 0.5s;
}
.acordeon .label:hover {
	background: rgba(0,0,0,0.09);
}
/* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */
.acordeon .label::before {
	content: '+';
	color: black;
	position: absolute;
	top: 50%;
	right: -5px;
	font-size: 1em;
	transform: translateY(-50%);
}
/* Oculta el contenido (altura: 0), disminuye el tamaño de la fuente, justifica el texto y añade la transición */
.acordeon .content {
  font-family: "Open Sans", sans-serif;
	position: relative;
	height: 0;
	font-size: 1em;
	text-align: justify;
	overflow: hidden;
	transition: all 0.5s;
} 
/* Añade una línea horizontal entre los contenidos */
.acordeon hr {
	width: 100;
	margin-left: 0;
	border: 1px dashed #999;
}
/* Muestra la parte de contenido cuando está activa. Establece la altura */ 
.acordeon .acordeon-contenedor.activa .content {
	height: 135px;
}

/* Cambia de signo positivo a negativo una vez activado */ .acordeon .acordeon-contenedor.activa .label::before {
	content: '-';
	font-size: 1em;
}

.acordeon-icono {
	width: 45px;
	margin: 0;
	margin-right: 10px;
}


/*ESTILOS DEL FORMULARIO COTIZA*/
#cotiza {
	background: #eee;
  max-width: 100%;
  margin: auto;
	overflow: hidden;
}
form {
  width: 95%;
  margin: auto;
  padding: 10px;
}
form p {
	font-size: 0.9em;
	padding: 5px 0;
	color: #666;
}
input, textarea {
  font-family: sans-serif;
  font-size: 1em;
  width: 100%;
  padding: 10px;
	margin: 5px 0;
	border: none;
	border-radius: 10px;
}
::placeholder {
	color: #999;
}
textarea {
  min-height: 100px;
  max-height: 200px;
  max-width: 100%;
}
#contacto-boton {
  width: 40%;
	max-width: 140px;
  margin: 15px auto;
  background: #008080;
  color: #fff;
  padding: 10px;
  text-align: center;
	cursor: pointer;
	border-radius: 20px;
}
.cotiza-img {
	width: 260px;
	height: 260px;
    object-fit: cover;
	border-radius: 50%;
	border: 5px solid transparent;
  outline: 5px solid #999;
  outline-offset: 0; /* Ajusta la separación */
}
/*ESTILOS RESPONSIVE FORMULARIO*/
@media (min-width: 768px) {
.grupo-cotiza {
  max-width: 800px;
  margin: auto;
  display: flex;
  justify-content: center;
	align-items: center;
}
.form-boton {
	display: flex;
	justify-content: flex-start;
}
#contacto-boton {
	margin: 10px 0;
}
.columna-cotiza {
  width: 50%;
}
.form-grupo {
	display: flex;
	justify-content: space-between;
}
.form-grupo input {
	width: 49%;
}
/*trabaja con nosotros*/
	.grupo-trabaja {
		display: flex;
		justify-content: center;
		max-width: 600px;
		margin: auto;
	}
	.columna-trabaja {
		width: 48%;
    margin: 1%;
	}
}

/*trabaja con nosotros*/
.columna-trabaja {
	border-radius: 10px;
	padding: 10px;
	background: #fff;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
}
.grupo-trabaja .txt {
	text-align: center;
	margin-top: 10px;
}
.grupo-trabaja .icon-mail, .icon-call, .icon-whatsapp-1 {
	position: relative;
	top: 5px;
	font-size: 1.4em;
	color: #008080;
}

/*CLIENTES*/
#clientes {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #fff;
}
.grupo-clientes {
	max-width: 960px;
	margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.columna-clientes {
	padding: 10px;
  width: 48%;
  margin: 1%;
	background: #fff;
}
.clientes-img {
	width: 120px;
}

/* ESTILOS DEL FOOTER*/
.footer {
  max-width: 100%;
  margin: auto;
  background: #008080;
	padding: 80px 0;
}
.footer-columna {
  margin-bottom: 20px;
  text-align: left;
  padding: 10px;
}
.logofooter {
  width: 260px;
}
.footer .rubros {
  font-size: 1.2em;
  color: #fff;
	margin-bottom: 20px;
}
.footer p {
  font-size: 1em;
	color: #fff;
	margin: 10px 0;

}
.footer span {
  font-size: 1em;
  color: #fff;
  margin-right: 10px;
  position: relative;
  top: 3px;
}
.redes-socialesfooter {
  padding: 10px 20px;
}
.redes-imgfooter {
	width: 32px;
  margin-left: 0px;
  padding: 5px;
}
.footercertificados-img {
	width: 280px;
	margin-top: 10px;

}
.copy {
  max-width: 100%;
  margin: auto;
  padding: 20px 10px;
  background: #1d1d1d;
  color: #fff;
  font-size: 0.9em;
	text-align: center;
}
.copy a {
	color: #fff;
}

/*REDES ICONOS*/
.redes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 200px;
    margin: auto;
}
.redes-img {
    width: 40px;
    margin: 0 3px;
}
.redes a {
    opacity: 0.7;
    transition: all .4s;
}
.redes a:hover {
    opacity: 1;
    transform: scale(1.1);
}
/*-------------ESTILOS RESPONSIVE WEB DESIGN-------------*/

/*CELULARES*/
@media (min-width: 450px) {
	
}

/*TABLETS*/
@media (min-width: 768px) {

	
}

/*LAPTOPS*/
@media (min-width: 1024px) {
.titulo {
  font-size: 2.4em;
}
.subtitulo {
  font-size: 1.4em;
}
.txt {
  font-size: 1em;
}

/*	BANNER*/
.bannernuevo {
	height: 550px;
}
.bannernuevo .titulo {
	font-size: 3.6em;
}
.bannernuevo .bannercasorealtxt {
	font-size: 1.6em;
}
.bannernuevo .casorealtxt {
	font-size: 1.4em;
}
.grupo-banner2 {
	display: flex;
	justify-content: space-between;
}
.columna-banner2 {
	width: 350px;
}
.bannernuevo .botonwasap {
	position: relative;
	top: 50%;
}
	
.atendidos {
	padding: 20px;
}
.atendidos .subtitulo2 {
	font-size: 1.3em;
}

    /*SECTION*/
.section {
  padding: 160px 0;
}	

/*NOSOTROS - DATO1*/
.dato1 {
	padding: 0;
	background: none;
}
.grupo-dato1 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.columna-dato1 {
	background: #A40808;
	border-radius: 10px;
	padding: 20px;
	width: 48%;
	margin: 1%;
}
	
/*CONTACTO*/
.contactanos {
	display: flex;
	justify-content: flex-end;
}
.contactanos a {
	background: #F0F3FA;
	padding: 3px 15px;
	border-radius: 20px;
	text-align: center;
	color: #0F4395;
	font-weight: 400;
}
.contactanos .icon-whatsapp {
	margin-right: 5px;
  font-size: 1.4em;
	color: #0F4395;
	position: relative;
	top: 3px;
}
.banner-productos {
	width: 100%;
}
	
/*SERVICIOS*/
	.grupo-servicios {
	display: flex;
	justify-content: space-between;
      flex-wrap: wrap;
	}
	.columna-servicios {
	width: 31%;
	margin: 1%;
	}
	
/*GRUPO FILOSOFIA*/
	.grupo-filosofia {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}
	.columna-filosofia {
	width: 31%;
	margin: 1%;
	}

	
/*POR QUE*/
.grupo-porque {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.columna-porque {
	width: 31%;
	margin: 1%;
}
	
/*BENEFICIOS*/
.grupo-beneficios {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
}
.columna-beneficios {
    padding: 0 20px;
}
.beneficios {
    width: 100%;
}

/*FOOTER*/
.grupo-footer {
  display: flex;
  justify-content: space-between;
}
.rubros {

    text-align: center;
}
.logofooter {
	width: 200px;
}
.footer-columna {
    padding: 30px 20px;
    width: 24%;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}
}