@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');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*colores
font-family: "Poppins", sans-serif;
font-family: "Open Sans", sans-serif;
AZUL: #282D40;
DORADO: #C1904B;
GRIS: #FBFBFB;

*/

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

html {
	scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #FBFBFB;
}
img {
  display: block;
  width: 100%;
  margin: auto;
}
ul,
li {
  list-style: none;
}
a {
  display: block;
  text-decoration: none;
  font-family: "Open Sans", 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: "PT Serif", serif;
}
p {
  font-family: "Open Sans", sans-serif;
}

.leyicono-img {
  background: #C1904B;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  padding: 4px;
}
/*TITULOS Y TEXTOS*/
.titulo {
  font-weight: 600;
  font-size: 2.0em;
  text-align: center;
  color: #282D40;
  margin-bottom: 25px;
  line-height: 1.1em;
  letter-spacing: -0.03em;
  max-width: 900px;
  margin: auto;
}
.titulo span {
	font-size: 1.2em;
  color: #C1904B;
  font-style: italic;
}
.subtitulo {
  font-weight: 700;
  font-size: 1.3em;
  text-align: center;
  color: #282D40;
  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: #282D40;
}
.txt span {
  font-weight: 700;
}

/*BANNER INDEX*/
.bannernuevo {
  max-width: 100%;
  margin: auto;
	position: relative;
	background-image: url(../img/BANNER.jpg);
	background-size: cover;
  background-attachment: fixed;
	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.7;
}
.bannernuevo .wa-btnverdegeneral {
	width: fit-content;
	margin: auto;
  color: #fff;
	background: #C1904B;
  font-size: 1em;
  font-weight: 600;
  padding: 10px 30px;
  border-radius: 5px;
  transition: all 0.4s;
}
.grupo-banner {
	position: absolute;
	width: 95%;
	max-width: 900px;
	margin: auto;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translateX(-50%)translateY(-50%);
}

.bannernuevo .elegirnostxt {
	font-size: 1.2em;
	color: #fff;
}
.bannernuevo .titulo {
	font-size: 2.6em;
	color: #fff;
	margin: 7px;
  line-height: 1.1em;
  text-shadow: 1px 5px 7px rgba(0,0,0,0.5);
}
.bannernuevo .titulo span {
  color: #C1904B;
  font-style: italic;
}
.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: 3px 20px;
	font-size: 1em;
	border-radius: 30px;
	width: fit-content;
	margin: auto;

	display: flex;
	justify-content: center;

  border: 1px dashed #fff;
}
.bannerelegirnostxt {
	font-size: 1em;
	color: #fff;
    padding: 0 5px;
}
.estrellas {
	position: relative;
	top: 2px;
	padding: 0 5px;
	margin: auto;
}
.icon-star {
	color: #C1904B;
	font-size: 0.7em;
}

/*boton  CTA*/
.botonwasap {

}
.wa-btnverdegeneral {
	width: fit-content;
	margin: auto;
  color: #fafbf5;
	background: #C1904B;
  font-size: 1em;
  font-weight: 600;
  padding: 10px 30px;
  border-radius: 5px;
  transition: all 0.4s;
}
.wa-btnverdegeneral:hover {
  background: #282D40;
}

/*SLOGAN SUPERIOR*/
.atendidos {
  overflow: hidden;
  width: 100%;
  margin: auto;
	background: #282D40;
	padding: 10px 0px;
  border-top: 2px solid #C1904B;
}
.atendidos .contenedor {
    max-width: 600px;
    overflow: hidden;
    position: relative;
}
.atendidos .subtitulo2 {
	font-size: 1em;
	color: #fff;
  
  display: inline-block;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: slideLoop 16s linear infinite;
}
/* ANIMACIÓN */
@keyframes slideLoop{
/* inicia fuera de pantalla derecha */
0%{
  transform: translateX(100%);
}
/* cruza toda la pantalla */
100%{
  transform: translateX(-100%);
}
}

/*QUIENES SOMOS*/
#nosotros {
	background: #FBFBFB;
  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: 30px 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 SERVICIOS */
#servicios {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #FBFBFB;
}

.grupo-servicios {

}
.columna-servicios {
  border: 1px dashed #999;
	border-radius: 20px;
	padding: 40px 10px;
	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: #C1904B;
	margin-right: 10px;
}
.serviciositems .subtitulo {
  font-size: 1.2em;
  text-align: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
.servicios-mitad {
  width: 100%;
}
#servicios .servicios-img {
  width: 50px;
	margin-bottom: 15px;
}
.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;
}

/*STAFF DE ABOGADOS*/
#staff {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #fff;
}
.grupo-staff {
  
}
.columna-staff {
	background: linear-gradient(#C1904B 40%, #eee 40%);
	text-align: center;
	padding: 40px 40px;
	margin-bottom: 30px;
  border-radius: 20px;
}
.staff-img {
	width: 220px;
	height: 220px;
	object-fit: cover;
	border-radius: 50%;
	margin: auto;
	border: 5px solid #eee;
}
#staff .subtitulo {
  margin-bottom: 20px;
}
#staff .txt {
  text-align: center;
}
#staff .icon-check {
  color: #666;
  margin-right: 5px;
}




/*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: #282D40;
  position: relative;
}
.cortejudicial-img {
  opacity: 0.1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#beneficios .titulo {
	color: #fff;
}
#beneficios .txt {
	color: #fff;
}
#beneficios span {
	color: #fff;
}
.grupo-beneficios {
  position: relative;
  z-index: 100;
}
.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: 16px 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;
}
/* 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-weight: 500;
  color: #333;
	position: relative;
	font-size: 1.1em;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	transition: all 0.5s;
  padding: 0 10px 0 0;
}
.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: 0.9em;
  margin-top: 10px;
	text-align: left;
	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: 200px;
}

/* Cambia de signo positivo a negativo una vez activado */ .acordeon .acordeon-contenedor.activa .label::before {
	content: '-';
	font-size: 1em;
}
.acordeon-icono {
	width: 30px;
	margin: 0;
	margin-right: 5px;
}


/*ESTILOS DEL FORMULARIO COTIZA*/
#cotiza {
	background: #eee;
  max-width: 100%;
  margin: auto;
	overflow: hidden;
}
.columna-cotiza {
	padding: 15px;
}
.formbase {
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
}
.cotiza-txt {
	text-align: center;
	color: #fff;
	font-weight: 400;
  background: #282D40;
  padding: 5px;
  border-radius: 7px;
  margin-bottom: 10px;
}
.cotiza-img {
  margin: auto;
  border-radius: 20px;
/*
  max-height: 400px;
  object-fit: cover;
  border-radius: 50%;
*/
}
.cotiza-confianza {
  font-size: 0.8em;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}
.cotiza-confianza span {
  color: #999;
}

form {

}
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;
  background: rgba(0,0,0,0.05);
}
::placeholder {
	color: #999;
}
textarea {
  min-height: 100px;
  max-height: 200px;
  max-width: 100%;
}
.form-boton .icon-whatsapp {
	position: relative;
  top: 4px;
	font-size: 2em;
  padding-right: 10px;
}
#contacto-boton {
  color: #fff;
	background-color: #C1904B;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  padding: 5px 30px;
  border-radius: 5px;
  transition: all 0.4s;
  
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  margin: 15px auto;
}
#contacto-boton:hover {
  background: #022752;
}
.privacidad {
  font-size: 0.8em;
  color: #333;
  text-align: center;
}
.privacidad-img {
  margin: auto;
  width: 20px;
}

#estado-envio{
  display:none;
  margin-top:20px;
  text-align:center;
  color:#25D366;
  font-weight:600;
  font-size:15px;
}

.spinner{
  width:22px;
  height:22px;
  margin:12px auto 0;
  border:3px solid #DDD;
  border-top:3px solid #25D366;
  border-radius:50%;
  animation:girar .8s linear infinite;
}

@keyframes girar{
from{
  transform:rotate(0deg);
  }

to{
  transform:rotate(360deg);
  }
}

/*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: #C1904B;
}

/*ESTILOS RESPONSIVE*/
@media (min-width: 450px) {

}

@media (min-width: 768px) {
.grupo-cotiza {
	max-width: 1100px;
	margin: auto;
  display: flex;
  justify-content: center;
}
.columna-cotiza {
  width: 50%;
}
#contacto-boton {
  margin: 15px 0;
}
.privacidad {
  text-align: left;
  display: flex;
  align-items: center;
}
.privacidad-img {
  width: 15px;
  margin: 0 10px;
}
.form-grupo {
	display: flex;
	justify-content: space-between;
}
.form-grupo input {
  width: 49%;
}
}

@media (min-width: 1024px) {
/*trabaja con nosotros*/
	.grupo-trabaja {
		display: flex;
		justify-content: center;
		max-width: 600px;
		margin: auto;
	}
	.columna-trabaja {
		width: 48%;
    margin: 1%;
	}
}
  
  /*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: #282D40;
	padding: 80px 0;
}
.footer-columna {
  margin-bottom: 20px;
  text-align: left;
  padding: 10px;
}
.logofooter {
  width: 290px;
  background: rgba(255,255,255,0.8);
  border-radius: 20px;
  padding: 10px;
}
.asociado-img {
  padding: 20px 0;
  width: 200px;
}
.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: #C1904B;
  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;
}
.txt {
  font-size: 1em;
}

/*	BANNER*/
.bannernuevo {
	height: 600px;
}
.bannernuevo .titulo {
	font-size: 4.4em;
}
.bannernuevo .bannercasorealtxt {
	font-size: 1.4em;
}
.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: center;
  flex-wrap: wrap;
	}
	.columna-servicios {
	width: 31%;
	margin: 1%;
	}
  
/*STAFF*/
  .grupo-staff {
    max-width: 1200px;
    margin: auto;
	display: flex;
	justify-content: center;
  flex-wrap: wrap;
  }
	.columna-staff {
	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;
  align-items: 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: 240px;
}
.footer-columna {
  padding: 30px 20px;
  width: 33%;
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}
}