*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-size:1em;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	color: #333;
	--color-1:#633E89;/*Azul oscuro*/
	--color-2:#795199;/*Azul claro*/
	--color-3:#e72f74;/*Rosado*/
	--color-4:#4a2969;/*Morado*/
	--color-5:#651080;/*Morado complementario*/
	--positivo:#fff;
	--negativo:#333;
	--fuente-s:1.1vw;
	--fuente-n:1.4vw;
	--fuente-m:2vw;
	--fuente-l:3vw;
	--fuente-xl:3.5vw;
	--font-w-1:200;
	--font-w-2:500;
	--font-w-3:700;
	--padding-0:1vw;
	--padding-1:2vw;
	--padding-2:4vw;
	--padding-3:5vw;
	--padding-4:6vw;
	--ancho-side: 25%;
	--ancho-side-2: 30%;
	--ancho-cuadros-1:75%;
	--ancho-cuadros-2:20%;
	--altura-1:10vh;
}

h1{
	font-size:var(--fuente-xl);
	font-weight:var(--font-w-3);
	text-transform:uppercase;
	margin-bottom:2vw;
}

h2{
	font-size:var(--fuente-xl);
	font-weight:var(--font-w-3);
	margin-bottom:0.7em;
}

h3{
	font-size:var(--fuente-m);
	margin-bottom:2vw;
}

h4{
	font-size:var(--fuente-m);
	margin-bottom:2vw;
}

h1, h2, h3, h4{
	color:var(--color-1);
	line-height: 1em;
}

h2 span{
	font-size:var(--fuente-m);
	float: left;
	line-height: 1em;
}

p{
	font-size:var(--fuente-n);
	line-height: 1.5em;
	font-weight:var(--font-w-1);
	margin-bottom:var(--padding-1);
}

em{
}

a{
	color:var(--color-1);
	font-weight:var(--font-w-3);
}

ul li{
	font-size:var(--fuente-n);
	line-height: 1.2em;
	font-weight:var(--font-w-1);
	margin:0 var(--padding-1) 0 var(--padding-1); 
}

strong{
	font-weight:var(--font-w-3);
}

img{
	max-width: 100%;
}

blockquote{
	float: right;
	width: 50%;
	margin: var(--padding-2) -20% var(--padding-2) var(--padding-4);
}

blockquote.completo{
	float: left;
	width: 100%;
	margin: var(--padding-2) 0;
}

blockquote p{
	font-weight: var(--font-w-3);
	color: var(--color-3);
	font-size: var(--fuente-m);
	line-height: 1em;
}

/*Header*/

/*Header animado*/
.cbp-af-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background:transparent;
	z-index:1000;
	overflow: hidden;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

	#id{
		float: left;
		width:15%;
		padding:var(--padding-0) var(--padding-1);
		background-color: var(--positivo);
		margin: 0;
		height: 100%;
	}

	.tit-sitio{
		float: left;
		width: 65%;
		display: none;
		padding: var(--padding-0);
		text-align: left;
	}

	.tit-sitio h1{
		font-size: var(--fuente-n);
		margin: 0;
		font-weight: var(--font-w-3);
		color: var(--positivo);
	}

		.tit-sitio h1 span{
			margin:0 0 0 var(--padding-0);
			color: var(--color-3);
		}

/* Transitions and class for reduced height */
.cbp-af-header .tit-sitio,
.cbp-af-header #id{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.cbp-af-header.cbp-af-header-shrink {
	background-image: url("../img/patron-trensa-blanco.svg");
	background-size: 3vw auto;
	background-color: var(--color-2);
	box-shadow: 2px 2px 4px 2px rgba(98,98,98,0.20);
	height: 9vh;
}

.cbp-af-header.cbp-af-header-shrink #id{
	width: 10%;
	padding: var(--padding-0) var(--padding-1);
	margin: 0 var(--padding-1);
}

.cbp-af-header.cbp-af-header-shrink .tit-sitio{
	display:inherit;
}

.cbp-af-header.h-estatico {
	background-image: url("../img/patron-trensa-blanco.svg");
	background-size: 3vw auto;
	background-color: var(--color-2);
	box-shadow: 2px 2px 4px 2px rgba(98,98,98,0.20);
	height: 9vh;
}

.cbp-af-header.h-estatico  #id{
	width: 10%;
	padding: var(--padding-0) var(--padding-1);
	margin: 0 var(--padding-1);
}

.cbp-af-header.h-estatico  .tit-sitio{
	display:inherit;
}

.no-pc{
	display: none;
}

/*Acaba header animado*/

#menu-nav{
	position:fixed;
	top: 0;
	right: 0;
	width:var(--ancho-side);
	height:100vh;
	z-index:1001;
	background-color:var(--color-1);
	color:#fff;
	padding:3vw;
	background-image: url("../img/patron-trensa-blanco.svg");
	background-size: 6vw;
}
			
			nav{
				float:left;
				width:100%;
				padding:0 0 0 var(--padding-0);
				text-align:left;
				position: relative;
				height: 100%;
			}
			
					nav ul li{
						list-style-type:none;
						margin:0 0 var(--padding-0) 0;
						font-size:var(--fuente-n);
						font-weight:var(--font-w-3);
						color:var(--color-3);
					}
					
					nav ul li.letra{
						margin-left:-1em;
					}

					nav ul li span{
						float: left;
						width: 100%;
						margin-bottom:var(--padding-0);
						color: var(--color-3);
					}
					
					nav ul li a span, nav ul li a{
						color:var(--positivo) !important;
						font-weight: var(--font-w-1);
						text-decoration: underline;
					}

					nav ul li a{
						font-weight: var(--font-w-3);
					}

					nav ul li li{
						list-style-type: circle !important;
					}

					a.ultimo-link{
						color: #fff;
					  position: absolute;
					  bottom: 0;
					  left: 0;
					  padding: 0;
					}


/*Home*/		

.contenedor-cuadros{
	float:left;
	width:var(--ancho-cuadros-1);
}

	

	.banner-entrada{
		float: left;
		width: 100%;
		min-height: 100vh;
		padding:10vw 8vw;
		position: relative;
		background-image: url("../img/patron-trensa-blanco.svg");
		background-size: 4vw auto;
		background-color: var(--color-2);
	}

		.tit-texto-banner{
			position: absolute;
			top: 10vw;
			left:var(--padding-3);
			width: 65%;
			z-index: 1;
			color: vaR(--positivo);
		}

			.tit-texto-banner h1{
				color: var(--positivo);
			}

				.tit-texto-banner h1 span{
					float: left;
					width: 100%;
					border-top: 2px solid var(--color-3);
					margin: var(--padding-0) 0;
					padding: var(--padding-0) 0 0;
					font-size: var(--fuente-l);
				}

		.imagen-banner{
			position: absolute;
			width: 30%;
			bottom: 0;
			right: 0;
			z-index:0;
			height: 100%;
		}

			.imagen-banner img{
				position: absolute;
				bottom: 0;
			}

		.imagen-banner-2{
			position: absolute;
			width: 45%;
			bottom: 0;
			right: 0;
			z-index:0;
			height: 100%;
		}

			.imagen-banner-2 img{
				position: absolute;
				bottom: 0;
			}

		.cuadro-home{
			float:left;
			width: 100%;
			min-height:100vh;
			background-color:#fff;
			background-size:cover;
			padding:var(--padding-2) var(--padding-4) var(--padding-4);
			position: relative;
		}

			.c-intro{

			}

			.c-izquierda{
				text-align: left;
				padding-right: 20%;
			}

			.c-derecha{
				text-align: right;
				padding-left: 20%;
			}

			.c-color-1{
				background-color: var(--color-2);
			}

			.c-color-2{
				background-color: var(--color-3);
			}

			.tit-cap{
				
			}

				.tit-cap h2{
					font-weight: var(--font-w-3);
					margin: 0;
					margin: 0 0 var(--padding-1) 0;
				}

	.caso{
	background-image: url("../img/patron-trensa-2.svg");
	background-size:8vw;
	}

	.caso-2{
		background-image: url("../img/patron-trensa-blanco.svg");
		background-size:8vw;
		background-color: var(--color-2);
		color:var(--positivo);
	}

.tit-general-sec{
	float: left;
	width:var(--ancho-cuadros-1);
	margin: var(--padding-3) 0;
	padding:var(--padding-2);
	text-align: center;
	background-color: var(--color-2);
	background-image: url("../img/patron-trensa-blanco.svg");
	background-size:8vw;
}

.tit-general-sec h1, .tit-general-sec h2{
	color: var(--positivo);
	margin: 0;
}

.separador{
	float: left;
	width: 100%;
	height: var(--altura-1);
}

		.cuadro-grande-1{
			float:left;
			width:100%;
			min-height:100vh;
			padding:var(--padding-4) 32% var(--padding-4) var(--padding-4);
			background-position: right bottom;
			text-align:left;
		}
		
				.cuadro-grande-1 > div{
				  text-align: center;
				}
		
				.cuadro-grande-1 h2{
					color:var(--color-1);
					width: 100%;
					float: left;
				}

		.cuadro-grande-2{
			float:left;
			width:100%;
			min-height:100vh;
			padding:var(--padding-4) var(--padding-4) var(--padding-4) 32%;
			text-align:right;
			background-position: left bottom;
		}

			.analisis ul {
			  	display: flex;
			  	flex-wrap: wrap;
			  	padding: 0;
				border: 1px dashed var(--color-2);
			}

			.analisis ul li {
			  	list-style: none;
			  	flex: 0 0 33.333333%;
				margin: 0;
				padding: var(--padding-0);
			}

			.analisis ul li div{
				border: 1px dashed var(--color-1);
				padding: var(--padding-0);
				height: 100%;
				min-height: 20vh;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

.analisis ul li div a{
	font-size: var(--fuente-n);
	font-weight: var(--font-w-2);
	line-height: 1.3em;
}
		
				.cuadro-grande-2 > div{
					text-align: center;
				}
		
				.cuadro-grande-2 h2{
					color:var(--positivo);
					width: 100%;
					float: left;
				}

				.cuadro-grande-2 h2 span{
					float: right;
				}
		
				.bg-caso-0, .bg-caso-1, .bg-caso-2, .bg-caso-3, .bg-caso-4, .bg-caso-5, .bg-caso-6, .bg-caso-7{
					background-size:auto 100%;
					background-repeat: no-repeat; 
				}
				
				.bg-caso-0{
					background-image:url(../img/bg-intro-2.svg) !important;
				}
				
				.bg-caso-1{
					background-image:url(../img/ayelin-2.svg) !important;
				}
				
				.bg-caso-2{
					background-image:url(../img/bianet.svg) !important;
				}
				
				.bg-caso-3{
					background-image:url(../img/brenda.svg) !important;
				}
				
				.bg-caso-4{
					background-image:url(../img/diana.svg) !important;
				}
				
				.bg-caso-5{
					background-image:url(../img/fatima.svg) !important;
				}
				
				.bg-caso-6{
					background-image:url(../img/natali.svg) !important;
				}
				
				.bg-caso-7{
					background-image:url(../img/bg-caso-7.svg) !important;
				}
		
				.boton-mas{
					float: left;
					background-color: var(--color-1);
					border-radius:2vw;
					padding:var(--padding-1);
					text-decoration:none;
					font-weight:var(--font-w-3);
					font-size:var(--fuente-n);
					color:var(--positivo);
				}

				.boton-mas-2{
					float:right;
					background-color: var(--positivo);
					border-radius:2vw;
					padding:var(--padding-1);
					text-decoration:none;
					font-weight:var(--font-w-3);
					font-size:var(--fuente-n);
					color:var(--color-1);
				}
		
				.etiqueta-cap{
					background-color:var(--color-3);
					color:#fff;
					float:left;
					padding:0.5vw 1vw 0.5vw 2vw;
					font-weight:var(--font-w-2);
				}
		
				.numero-cap{
					width:100%;
					height:30vh;
					display:flex;
					align-items: center;
					text-align:center;
					color:#ccc;
				}
				
						.numero-cap p{
							font-size:4em;
							font-weight:var(--font-w-3);
							width:100%;
						}
.cuadro-legal{
	float: left;
	width: var(--ancho-cuadros-1);
	padding:0 var(--padding-2) var(--padding-2);
}

				.legal-cap{
					width:100%;
					min-height:30vh;
					display:flex;
					align-items:center;
					justify-content: center;
					flex-direction:column;
					color:#333;
					padding:2vw;
					border-top: 1px dashed var(--color-2);
				}
				
						.legal-cap p{
							font-size:var(--fuente-s);
						}

.legal-logos{
	width: auto;
}

						.legal-cap img{
							width: 120px;
							margin: var(--padding-0) var(--padding-1) ;
							float: left;
						}
				
/*Internas*/

		.contenedor-apertura-capitulo{
			float:right;
			width:var(--ancho-cuadros-1);
			height:100vh;
			background-color:#fff;
			background-image:url(../img/bg-intro-2.svg);
			background-size:cover;
		}
		
				#titulo-apertura-capitulo{
					float:left;
					width:100%;
					height:100vh;
					padding:8vw;
					text-align:left;
				}
						
						#titulo-apertura-capitulo h1{
							font-size:var(--font-s-3);
							text-transform:uppercase;
							line-height:1em;
							font-weight:var(--font-w-1);
							color:var(--color-3);
						}
						
						#titulo-apertura p{
							font-size:var(--font-s-1);
							line-height:1.2em;
							font-weight:var(--font-w-1);
							margin-top:2em;
							width:60%;
						}

.cuadro-chico-fijo{
	position:fixed;
	width:var(--ancho-cuadros-2);
	height:25vh;
	background-color:#f4f4f4;
	bottom:0;
}

#contenedor-general-interna{
	float:right;
	width:var(--ancho-cuadros-1);
	padding:5vw 12vw 5vw 10vw;
	text-align:left;
}

		.imagen-100{
			float:left;
			margin:1vw 0 2vw -6vw;
			width:calc(100% + 21vw);
		}
		
		.imagen-texto{
			float:left;
			margin:0 2vw 2vw -10vw;
			width:70%;
		}
		
		.imagen-der{
			float:right;
			margin:0 -20% var(--padding-2) var(--padding-2);
			width:60%;
		}
		
				.imagen-100 img, .imagen-texto img, .imagen-der img{
					max-width:100%;
					width:100%;
				}
				
				.pie-foto{
					float:right;
					border-right:5px solid var(--color-3);
					padding:0.5vw;
					font-size:0.8vw;
				}
				
		.gal-100{
			float:left;
			margin:1vw 0 2vw -10vw;
			width:calc(100% + 22vw);
		}
		
				.fotos-gal{
					float:left;
					width:21%;
					margin:2%;
				}
				
						.fotos-gal img, .fotos-gal-3 img{
							max-width:100%;
						}
						
				.fotos-gal-3{
					float:left;
					width:29%;
					margin:2%;
				}
				
		ul.notas{
			float:left;
			margin:1vw 0 2vw -10vw;
			width:calc(100% + 22vw);
			padding:2vw;
		}
		
				ul.notas li{
					list-style-type:none;
					float:left;
					display:inline-block;
					width:29%;
					margin:2%;
					height:8em;
				}
				
				ul.notas li span{
					float:right;
					color:var(--color-3);
					width:100%;
					text-align:right;
					margin:0.5em 0 0;
				}
				
		.video-izq{
			float:left;
			margin:0 2vw 2vw -10vw;
			width:calc(100% + 10vw);
		}

		.ver-mas-interna{
			float:right;
			width:15vw;
			background-color:#f4f4f4;
			padding:2vw;
			margin:0 -10vw 2vw 2vw;
		}
		
		.ver-mas-interna-grande{
			float:right;
			width:25vw;
			background-color:#f4f4f4;
			padding:2vw;
			margin:0 -10vw 2vw 2vw;
		}
		
				.ver-mas-interna p, .ver-mas-interna-grande p{
					background-color:var(--color-5);
					color:#fff;
					padding:1vw;
					width:calc(100% + 2vw);
					margin-left:-2vw;
					font-size:0.8vw;
					font-weight:var(--font-w-2);
				}
				
				.ver-mas-interna img, .ver-mas-interna-grande img{
					max-width:100%;
					margin:1vw 0;
				}
				
				.ver-mas-interna a, .ver-mas-interna-grande a{
					font-size:0.8vw;
					font-weight:var(--font-w-2);
				}
				
		.destacado{
			float:right;
			width:60%;
			margin:1em -10vw 2vw 2vw;
			border:1px dashed #ccc;
			padding:2vw;
		}
		
				.destacado p{
					font-size:0.8vw;
				}
				
#botones-navegacion{
	float:right;
	width:100%;
	margin:2vw 0;
}

		#botones-navegacion a{
			float:right;
			width:40%;
			background-color:var(--color-1);
			color:#fff;
			padding:2vw;
			font-weight:var(--font-w-2);
			text-decoration:none;
		}

		#botones-navegacion a:first-child{
			float:left;
		}