/*
  #IdObjeto : Para dar estilo a un objeto con base en su caracteristica "id"
  .Class : Para dar estilo a muchos objetos con base en su caracteristica "class"
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="4" fill="%23ff7eb3" /><circle cx="4" cy="4" r="2" fill="%23ff758c" /><circle cx="16" cy="16" r="2" fill="%23ff758c" /></svg>') repeat;
  .class1 > .class2 : objeto con class2 pero hijo inmediato de objeto con class1

  documentacion de pseudoClases
        https://www.w3schools.com/cssref/css_ref_pseudo_classes.php
  documentacion de pseudoElementos
        https://www.w3schools.com/cssref/css_ref_pseudo_elements.php

*/

html {
/*	font-size:				1.5vw; */
	font-family:				LatoRegular;
}

body {
	font-size:				1rem;
/*
	background-image:			url(../imagenes/background.jpg);
	background-size:			cover;
*/
	background-color:			white;
	color:					var(--kp-ColorAzulOscuro);
	padding:				0;
	margin:					0;
}

input, select, button {
	font-family:				LatoRegular;
}

input[type=text],
input[type=password],
select
{
	font-family:				LatoItalic;
	font-size:				1em;
	padding:				0.5em 0.5em;
	border:					none;
	border-radius:				1em;
	outline:				none;
	background-color:			#b0b0c0;
}

.AreaEncabezado{
	position:				fixed;
	top:					0;
	left:					0;
	width:					100vw;
	height:					12vh;
	z-index:				1000;
}

#AreaTrabajo{
	position:				fixed;
	left:					0;
	bottom:					0;
	width:					100vw;
	height:					88vh;
	z-index:				100;
	overflow-y:				auto;
	overflow-x:				hidden;
}

.LogoSuperior {
	position:				absolute;
	top:					4vh;
	left:					5vw;
	height:					5vh;
}

.WhatsAppBoton{
	position:				absolute;
	display:				inline-block;
	font-family:				LatoBold;
	font-size:				0.85em;
	top:					1em;
	right:					2em;
	padding:				1em 1.5em;
	background-color:			#25D366;
	color:					var(--kp-ColorAzulOscuro);
	border-radius:				1.5em;
	cursor:					pointer;
	transition:				all 6s ease;
}

.WhatsAppBoton:hover{
	box-shadow:				3px 3px 12px var(--kp-ColorAzulOscuro);
	background-color: red;
}

.DivBoton{
	position:				relative;
	display:				inline-block;
	font-family:				LatoBlack;
	font-size:				1em;
	padding:				0.8em 1.2em;
	background-color:			var(--kp-ColorFondoBotonAzulClaro);
	color:					var(--kp-ColorLetraBotonAzulClaro);
	border-radius:				1.2em;
	cursor:					pointer;
}

/* Pone una sobra debajo del div, como si flotara */
.DivSombra{
	box-shadow:				2px 2px 5px grey;
}

/* oscurece un poco todo lo que este debajo del div */
.DivFondoOscurecer{
	position:				absolute;
	top:					0;
	left:					0;
	width:					100%;
	height:					100%;
	background-color:			rgba(0,0,0,0.35);
	transition:				all 1s ease;
}

*:has(.DivFondoOscurecer):hover > .DivFondoOscurecer ,
.DivFondoOscurecer:hover{
	background-color:			rgba(0,0,0,0.6);
}

.DivBotonResaltado{
	animation-name:				DivBotonResaltar;
	animation-duration:			30s;
	animation-iteration-count:		30;
}

.DivBotonTransparente{
	background:				transparent;
	border:					3px solid #E0E0E0;
	color:					#E0E0E0;
	padding-top:				0.6em;
	padding-bottom:				0.6em;
}

.DivCentrar{
	width:					100%;
	text-align:				center;
}

.TextoCentrado{
	position:				relative;
	width:					80%;
	text-align:				center;
	padding-left:				10%;
	padding-right:				10%;
}

.TextoTituloGrande{
	font-family:				LatoBold;
	font-size:				2.3em;
	letter-spacing:				1px;
	color:					white;
}

.TextoTituloMediano{
	font-family:				LatoBold;
	font-size:				1.5em;
	letter-spacing:				0.9px;
	color:					white;
}

.TextoTituloChico{
	font-family:				LatoBold;
	font-size:				1em;
	letter-spacing:				0.8px;
	color:					white;
}

.TextoDescripcionGrande{
	font-family:				LatoRegular;
	font-size:				2.3em;
	letter-spacing:				1px;
	color:					white;
}

.TextoDescripcionMediano{
	font-family:				LatoRegular;
	font-size:				1.5em;
	letter-spacing:				0.9px;
	color:					white;
}

.TextoDescripcionChico{
	font-family:				LatoRegular;
	font-size:				1em;
	letter-spacing:				0.8px;
	color:					white;
}

.TextoLivianoGrande{
	font-family:				LatoLight;
	font-size:				2.3em;
	letter-spacing:				1px;
	color:					white;
}

.TextoLivianoMediano{
	font-family:				LatoLight;
	font-size:				1.5em;
	letter-spacing:				0.9px;
	color:					white;
}

.TextoLivianoChico{
	font-family:				LatoLight;
	font-size:				1em;
	letter-spacing:				0.8px;
	color:					white;
}

.WhatsAppIcono{
	height:					1em;
	color:					var(--kp-ColorAzulOscuro);
	fill:					var(--kp-ColorAzulOscuro);
}

.svg-chico{
	max-width:				3em;
	max-height:				3em;
	color:					white;
	fill:					white;
	transition:				all 0.6s ease;
}

.svg-chico:hover{
	max-width:				3.3em;
	max-height:				3.3em;
}

.MenuPrincipal{
	display:				inline-block;
	position:				absolute;
	top:					1.8em;
	right:					10em;
	color:					var(--kp-ColorAzulOscuro);
}

.MenuTitulo{
	display:				inline-block;
	position:				relative;
	margin-right:				1.7em;
	font-size:				0.93em;
	cursor:					pointer;
	font-family:				LatoBold;
}

.MenuTitulo .MenuEmergente{
	display:				none;
	background-color:			rgba(230,230,230,0.9);
	padding:				0.6em 1.2em 1.3em 1.2em;
}

.MenuTitulo:hover .MenuEmergente{
	display:				inline-block;
	position:				absolute;
	top:					1.35em;
	left:					0;
}

.MenuTituloFlechaAbajoDesplegar{
	width:					0.7em;
	color:					var(--kp-ColorAzulOscuro);
	fill:					var(--kp-ColorAzulOscuro);
	margin-left:				0.3em;
}

.MenuItem{
	display:				inline-block;
	position:				relative;
	padding-top:				1em;
	white-space:				nowrap;
	font-family:				Lato;
	cursor:					pointer;
}

.BannerRiesgosLegales{
	position:				relative;
	width:					100vw;
	height:					56vw;
}

.BannerRiesgosLegalesFondo{
	position:				absolute;
	display:				table-cell;
	text-align:				center;
	top:					0;
	left:					0;
	width:					100vw;
	height:					45vw;
	background-position-x:			center;
	background-position-y:			top;
	background-size:			100% auto;
	background-repeat:			no-repeat;
}

.BannerMarcoAzul{
	position:				absolute;
	display:				table-cell;
	text-align:				center;
	font-size:				1em;
	left:					7vw;
	bottom:					0;
	width:					84vw;
	height:					22vw;
	border-radius:				1.8em;
	background-color:			#01015E;
	color:					white;
}

.BannerPorQueAfiliarte{
	float:					left;
	position:				relative;
	display:				table-cell;
	text-align:				center;
	width:					100vw;
	min-height:				56vw;
	padding-bottom:				2em;
	color:					var(--kp-ColorAzulOscuro);
}

.PorQueAfiliarteImagen{
	width:					40vw;
	height:					30em;
	border-radius:				4vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/Abogado-confiable-1024x576.webp');
	background-size:			cover;
	background-position:			center;
}

.BannerDefensaEspecializada{
	float:					left;
	position:				relative;
	display:				table-cell;
	text-align:				center;
	width:					100vw;
	height:					53em;
	background-color:			black;
}

.DefensaEspecializadaTransitoImagen{
	position:				relative;
	float:					left;
	width:					35vw;
	height:					30em;
	border-radius:				4vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/accidente_carro_1-576x1024.webp');
	background-size:			100% auto;
	background-position:			center;
	transition:				all 1.2s ease;
	overflow:				hidden;
}

.DefensaEspecializadaServidorPublicoImagen{
	position:				relative;
	float:					left;
	width:					35vw;
	height:					30em;
	border-radius:				4vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/funcionario-01-576x1024.webp');
	background-size:			100% auto;
	background-position:			center;
	transition:				all 1.2s ease;
	overflow:				hidden;
}

.DefensaEspecializadaTextoInternoImagen{
	position:				absolute;
	bottom:					2em;
	width:					80%;
	font-size:				1em;
	transition:				all 1.2s ease;
}

.DefensaEspecializadaTransitoImagen:hover,
.DefensaEspecializadaServidorPublicoImagen:hover{
	background-size:			125% auto;
}

.DefensaEspecializadaTransitoImagen:hover .DefensaEspecializadaTextoInternoImagen,
.DefensaEspecializadaServidorPublicoImagen:hover .DefensaEspecializadaTextoInternoImagen{
	font-size:				1.03em;
}

.BannerPasosAfiliacion{
	float:					left;
	position:				relative;
	display:				table-cell;
	text-align:				center;
	width:					100vw;
	height:					34em;
}

.PasosAfiliacionIconoMarcoCircular{
	display:				inline-block;
	width:					4.7em; /* al sumar el padding-left queda en 5em */
	height:					4em; /* al sumar el padding-top queda en 5em */
	padding-top:				1em;
	padding-left:				0.3em;
	border-radius:				2.5em;
	background-color:			var(--kp-ColorAzulOscuro);
}

.BannerInformateConNuestrosExpertos{
	float:					left;
	position:				relative;
	display:				table-cell;
	text-align:				center;
	width:					100vw;
	height:					47em;
	background-color:			rgb(245,245,245);
}

.InformateConNuestrosExpertosTransitoImagen{
	position:				relative;
	float:					left;
	width:					45vw;
	height:					20em;
	border-radius:				2vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/defensa-accidente-768x432.webp');
	background-size:			cover;
	background-position:			center;
	transition:				all 1.2s ease;
	overflow:				hidden;
}

.InformateConNuestrosExpertosServidorPublicoImagen{
	position:				relative;
	float:					left;
	width:					45vw;
	height:					20em;
	border-radius:				2vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/Abogado-confiable02-768x432.webp');
	background-size:			cover;
	background-position:			center;
	transition:				all 1.2s ease;
	overflow:				hidden;
}

.InformateConNuestrosExpertosTextoDebajoImagen{
	font-size:				1.1em;
	float:					left;
	width:					80%;
	margin-top:				1.5em;
	margin-left:				10%;
	color:					var(--kp-ColorAzulOscuro);
}

.BannerTransito{
	position:				relative;
	display:				inline-block;
	width:					100vw;
	height:					30em;
	color:					white;
	text-align:				center;
	background-image:			url('../imagenes/accidente-transito-hz-1.webp');
	background-size:			cover;
}

.BannerNosotrosNuestraHistoria .NosotrosImagenChica{
	width:					42vw;
	height:					15em;
	border-radius:				4vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/defensa-servidores-publicos-1024x576.webp');
	background-size:			cover;
	background-position:			center;
}

.BannerNosotrosNuestraHistoria .TextoTituloMediano{
	margin-left:				1.2em;
	color:					var(--kp-ColorAzulOscuro);
	font-size:				1.7em;
}

.BannerNosotrosNuestraHistoria .TextoLivianoMediano{
	margin-left:				1.8em;
	margin-top:				1em;
	color:					var(--kp-ColorGrisOscuro);
	font-size:				1em;
}

.BannerNosotrosMisionVision {
	padding-top:				2.5em;
	padding-bottom:				2.5em;
}

.BannerNosotrosMisionVision .NosotrosImagenChica{
	width:					42vw;
	height:					15em;
	border-radius:				4vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/defensa-servidores-publicos2-1024x576.webp');
	background-size:			cover;
	background-position:			center;
}

.BannerNosotrosMisionVision .TextoTituloMediano{
	margin-left:				1.2em;
	color:					var(--kp-ColorAzulOscuro);
	font-size:				1.7em;
}

.BannerNosotrosMisionVision .TextoLivianoMediano{
	margin-left:				1.8em;
	margin-top:				1em;
	color:					var(--kp-ColorGrisOscuro);
	font-size:				1em;
}

.BannerNosotrosValores {
	background-color:			var(--kp-ColorAzulOscuro);
	padding-top:				3em;
	padding-bottom:				3em;
}
.BannerNosotrosValores .UnTercio {
	width:					27%;
	display:				inline-block;
	float:					left;
	color:					white;
	padding-left:				3%;
	padding-right:				3%;
}

.BannerNosotrosValores .svg-chico{
	margin-left:				42%;
}

.BannerNosotrosValores .UnTercio .TextoTituloMediano{
	text-align:				center;
	font-size:				1.2em;
}

.BannerNosotrosValores .UnTercio .TextoLivianoMediano{
	text-align:				center;
	font-size:				1em;
	margin-top:				0.7em;
}

.BannerNosotrosNuestroEquipo {
	padding-top:				3em;
	padding-bottom:				3em;
}

.BannerNosotrosNuestroEquipo .NosotrosImagenGrande{
	margin-left:				9vw;
	width:					80vw;
	height:					44vw;
	border-radius:				4vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/Abogado-confiable02-1024x576.webp');
	background-size:			cover;
	background-position:			center;
}

.BannerNosotrosNuestroEquipo .TextoTituloMediano{
	text-align:				center;
	font-size:				1.6em;
	color:					var(--kp-ColorAzulOscuro);
}

.BannerNosotrosNuestroEquipo .TextoLivianoMediano{
	text-align:				center;
	font-size:				1em;
	margin-top:				0.7em;
	color:					var(--kp-ColorGrisOscuro);
}

.BannerNosotrosAfiliateAhora {
	background-color:			var(--kp-ColorAzulOscuro);
	padding-top:				3em;
	padding-bottom:				3em;
}
.BannerNosotrosAfiliateAhora .TextoTituloMediano{
	text-align:				left;
	font-size:				2.1em;
	margin-left:				1.4em;
	color:					white;
}

.BannerNosotrosAfiliateAhora .TextoLivianoMediano{
	text-align:				left;
	font-size:				1em;
	margin-top:				0.7em;
	margin-left:				3.1em;
	color:					white;
}

.TablaAfiliate {
	width:					100%;
	border-collapse:			collapse;		
	font-size:				1em;
}

.TablaAfiliate select,
.TablaAfiliate input[type=text] {
	width:					100%;
}

.TablaAfiliate .TextoTituloMediano {
	color:					var(--kp-ColorAzulOscuro);
	margin-top:				1em;
}

.TablaAfiliate .TextoLivianoChico {
	color:					var(--kp-ColorGrisOscuro);
	margin-top:				0.8em;
}

.TerminosYCondicionesItem{
	display:				inline-block;
	width:					100%;
	padding:				0.3em 2em;
	margin-bottom:				0.4em;
}

.TerminosYCondicionesItem .Barra{
	width:					88%;
	padding:				0.4em 1em;
	border-radius:				0.7em;
	background-color:			rgba(0,0,0,0.2);
}

.TerminosYCondicionesItem .Icono{
	display:				inline-block;
	width:					5%;
	height:					1em;
	margin:					0;
	background-image:			var(--kp-IconoMas);
	background-size:			contain;
	background-repeat:			no-repeat;
}

.TerminosYCondicionesItemDesplegado .Icono{
	background-image:			var(--kp-IconoGuion);
}

.TerminosYCondicionesItemDesplegado .Detalle{
	display:				inline-block ! important;
}

.TerminosYCondicionesItem .Titulo{
	display:				inline-block;
	width:					80%;
	margin-left:				4%;
}
.TerminosYCondicionesItem .Detalle{
	display:				none;
	width:					90%;
	margin:					0;
	margin-top:				0.7em;
	margin-left:				4%;
}

.TransitoBaner3Imagen{
	position:				relative;
	float:					left;
	width:					90vw;
	height:					24em;
	margin-top:				3em;
	border-radius:				3vw;
	background-color:			#01015E;
	background-image:			url('../imagenes/accidente-transito-hz-1024x576.webp');
	background-size:			cover;
	background-position:			center;
	transition:				all 1.2s ease;
	overflow:				hidden;
}

.Banner_16_9{
	position:				relative;
	display:				inline-block;
	width:					100vw;
	height:					56.25vw;
	text-align:				center;
}

.Banner_25_9{
	position:				relative;
	display:				inline-block;
	width:					100vw;
	height:					36vw;
	text-align:				center;
}