@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*====================
    * CONFIGURACION *
==================== */
/* Se utiliza after y before para poner margenes automaticos*/
*,
*::after,
*::before {
    box-sizing: border-box;
}

/*====================
    * VARIABLES *
==================== */
:root{
    --fuente: 'Open Sans', sans-serif;
    --fondo: url("../img/fondo-pant7.jpg");  /*Puede incluirse una imagen como fondo de Pantalla*/
/*    --fondo: rgb(240, 231, 231); */
    --ancho-contenedor: 100%;

/* Variables Texto Animado */
	--fuente2: 'Bebas Neue', cursive;
	--fondo2: url('../img/bg.jpg');
	--logotipo: #1a1a1a;
	--profesion: #f2f2f2;
	--primario: #2e5fff;
}

/*=======================
    * BOTON REDES SOCIALES *
======================= */

.social-icons {
	background: rgb(230, 233, 53);
	border-radius: 20px;
    vertical-align: top;
    display: inline;
    font-size: 1.2em;
    padding: 0.5em;
/*    font-size: 30px;
    padding: 5px 5px; */
  }

.social-icons:hover{
	background: rgb(192, 189, 11);
}

/*=======================
    * ESTILOS GENERALES *
======================= */
body {
    background: var(--fondo);
    font-family: var(--fuente);
    font-size: 18px;
}

p {
    line-height: 27px;
}

a {
	text-decoration: none;
	color: #fff;
	outline: none;
}

/*
img {
	padding: 10px;
    vertical-align:top;
}*/

.float-left {
	float: left;
}

.float-right {
	float: right;
}


/*=======================
    * HEADERS *
======================= */
header{
	/*background: rgb(235, 232, 50);*/
	/*background: linear-gradient(90deg, red, blue); */
	background: radial-gradient(rgb(160, 159, 159), rgb(158, 141, 141), rgb(202, 191, 191), rgb(35, 35, 39));
	/*background: radial-gradient(rgb(160, 159, 159), rgb(231, 229, 67), rgb(202, 191, 191), rgb(92, 92, 243)); */
/*	background: rgb(204, 223, 241); */
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px 0px;
	border-bottom: 1px solid #dedede;
	border-radius: 8px;
	/*box-shadow: 1px 1px 30px rgba(221, 213, 211, 0.3);*/
	margin-bottom: 100px;
}

li{
	display: inline-block;
	padding: 0px 5px;
	list-style: none;
}

.logo {
	padding-top:4px;
	width: 120px;
}

/*=======================
    * TEXTO ANIMADO *
======================= */

main {
	background: var(--fondo2);
	width: 450px;
	margin: auto;
	max-width: 600px;
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logotipo {
	padding: 10px;
	border: 5px solid var(--logotipo);
	color: var(--logotipo);
}

.logotipo a {
	text-decoration: none;
	color: #fff;
	outline: none;
}

.logotipo .subtitulo {
	text-align: center;
	color: var(--profesion);
	background: var(--logotipo);
	padding: 12px 20px;
	transition: .5s ease all;
	font-size: 36px;
	font-family: 'Noto Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.logotipo:hover .subtitulo {
	background: var(--primario);
}

.texto-animado {
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.texto-animado > div {
	display: flex;
	flex-direction: column;
	position: relative;
	transition: .3s ease all;
}

.texto-animado > div.animacion {
	transform: translateY(-100px);
}

.texto-animado > div span {
	font-family: var(--fuente2);
	font-size: 100px;
	font-weight: normal;
	line-height: 100px;
}

.texto-animado .segunda-linea {
	position: absolute;
	top: 100px;
}

/*=======================
    * CONTENEDORES *
======================= */
.contenedor {
    max-width: 85%;
    width: var(--ancho-contenedor);
    margin: 20px auto;
    overflow: hidden;
}

.contenedor-ancho {
	width: 100%;
	padding: 0 15px;
	margin: 20px auto;
}

/* ====================
	* GRID *
==================== */
.grid {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

/* Tamaño Grande - Computadoras y TV */
.col-1 { grid-template-columns: repeat(1, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-5 { grid-template-columns: repeat(5, 1fr); }
.col-6 { grid-template-columns: repeat(6, 1fr); }
.col-7 { grid-template-columns: repeat(7, 1fr); }
.col-8 { grid-template-columns: repeat(8, 1fr); }
.col-9 { grid-template-columns: repeat(9, 1fr); }
.col-10 { grid-template-columns: repeat(10, 1fr); }
.col-11 { grid-template-columns: repeat(11, 1fr); }
.col-12 { grid-template-columns: repeat(12, 1fr); }

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

/* Tamaño Mediano - Tablets */
@media screen and (max-width: 992px) {
	.med-col-1 { grid-template-columns: repeat(1, 1fr); }
	.med-col-2 { grid-template-columns: repeat(2, 1fr); }
	.med-col-3 { grid-template-columns: repeat(3, 1fr); }
	.med-col-4 { grid-template-columns: repeat(4, 1fr); }
	.med-col-5 { grid-template-columns: repeat(5, 1fr); }
	.med-col-6 { grid-template-columns: repeat(6, 1fr); }
	.med-col-7 { grid-template-columns: repeat(7, 1fr); }
	.med-col-8 { grid-template-columns: repeat(8, 1fr); }
	.med-col-9 { grid-template-columns: repeat(9, 1fr); }
	.med-col-10 { grid-template-columns: repeat(10, 1fr); }
	.med-col-11 { grid-template-columns: repeat(11, 1fr); }
	.med-col-12 { grid-template-columns: repeat(12, 1fr); }

	.med-span-1 { grid-column: span 1; }
	.med-span-2 { grid-column: span 2; }
	.med-span-3 { grid-column: span 3; }
	.med-span-4 { grid-column: span 4; }
	.med-span-5 { grid-column: span 5; }
	.med-span-6 { grid-column: span 6; }
	.med-span-7 { grid-column: span 7; }
	.med-span-8 { grid-column: span 8; }
	.med-span-9 { grid-column: span 9; }
	.med-span-10 { grid-column: span 10; }
	.med-span-11 { grid-column: span 11; }
	.med-span-12 { grid-column: span 12; }
}

/* Tamaño Pequeño - Celulares */
@media screen and (max-width: 576px) {
	.peq-col-1 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-2 { grid-template-columns: repeat(2, 1fr); }
	.peq-col-3 { grid-template-columns: repeat(3, 1fr); }
	.peq-col-4 { grid-template-columns: repeat(4, 1fr); }
	.peq-col-5 { grid-template-columns: repeat(5, 1fr); }
	.peq-col-6 { grid-template-columns: repeat(6, 1fr); }
	.peq-col-7 { grid-template-columns: repeat(7, 1fr); }
	.peq-col-8 { grid-template-columns: repeat(8, 1fr); }
	.peq-col-9 { grid-template-columns: repeat(9, 1fr); }
	.peq-col-10 { grid-template-columns: repeat(10, 1fr); }
	.peq-col-11 { grid-template-columns: repeat(11, 1fr); }
	.peq-col-12 { grid-template-columns: repeat(12, 1fr); }
}


/* Tamaño Pequeño - Celulares -- LOGO ANIMADO*/
@media screen and (max-width: 600px){
	.texto-animado > div span {
		font-size: 70px;
		line-height: 60px;
		height: auto;
	}

	.texto-animado .segunda-linea {
		top: 60px;
	}

	.texto-animado > div.animacion {
		transform: translateY(-60px);
	}

	.logotipo .subtitulo {
		font-size: 30px;
	}
}

/* Tamaño Pequeño - Celulares -- LOGO ANIMADO*/
@media screen and (max-width: 415px){
	main {
		background: var(--fondo2);
		width: 300px;
		margin: auto;
		max-width: 600px;
		min-height: 55vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.texto-animado > div span {
		font-size: 30px;
		line-height: 30px;
		height: auto;
		align-items: center;
	}

	.texto-animado .segunda-linea {
		top: 30px;
	}

	.texto-animado > div.animacion {
		transform: translateY(-30px);
	}

	.logotipo .subtitulo {
		font-size: 15px;
	}
}


/*=======================
    * COMPONENTES *
======================= */
.card {
	padding: 40px;
	background: rgb(179, 179, 179);
	border-radius: 3px;
	box-shadow: 0px 0px 30px rgba(221, 213, 211, 0.3);
}

.card2 {
	padding: 20px;
	background: rgb(221, 199, 125);
	border-radius: 30px;
	box-shadow: 0px 0px 30px rgb(199, 196, 36);
}

.card-img1 {
	padding: 30px;
	background-image: url(../img/fondo-pant5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(189, 190, 185);
}

.card-img2 {
	padding: 80px;
	background-image: url(../img/fondo-pant5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img3 {
	padding: 20px;
	/*background: radial-gradient(rgb(160, 159, 159), rgb(158, 141, 141), rgb(202, 191, 191), rgb(35, 35, 39));*/
	background: radial-gradient(rgb(255, 255, 255), rgb(214, 214, 214), rgb(180, 180, 180), rgb(104, 104, 104));
/*
	background-image: url(../img/aud3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
*/
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img4 {
	padding: 180px;
	background-image: url(../img/aud4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img5 {
	padding: 80px;
	background-image: url(../img/aud5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img6 {
	padding: 80px;
	background-image: url(../img/aud6.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.nav {
/*	background: rgb(207, 204, 32);*/
	background: rgb(207, 207, 207);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
}

.nav .contenedor {
	display:flex;
	flex-wrap: wrap;
	margin: 1px auto;
}

.nav a {
/*	color: rgb(50, 121, 9); */
	color: rgb(49, 134, 184);
	border-radius: 20px;
	text-decoration:none;
	display: flex;
	align-items: center;
	text-align: center;
	padding: 15px 25px;
	transition: .3s ease all;
	font-size: 18px;
	display: inline-block;
	list-style: none;
	text-transform: uppercase;
	font-weight: 700;
	transition: all 0.3s;
}

.nav a.activo,
.nav a:hover {
	background: rgb(180, 180, 180);
}

/* ====================
	* 	SLIDERS IMAGENES *
==================== */
.slider{
	width: 800px;
	height: 350px;
	margin: auto;
	overflow: hidden;
	vertical-align:top;
}

.slider ul{
	display: flex;
	padding: 0px;
	width: 572%;

	animation: cambio 30s infinite alternate;
	animation-timing-function: linear;
}

.slider li{
	width: 100%;
	list-style: none;
}

.slider img{
	width: 610px;
	height: 330px;
	object-fit: cover;
}

@keyframes cambio{
	0% {margin-left: 0;}
	20% {margin-left: -100%;}
	40% {margin-left: -200%;}
	60% {margin-left: -300%;}
	80% {margin-left: -400%;}
	100% {margin-left: -470%;}
}

/* ====================
	* FUENTES *
==================== */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}

.display-1 {
	font-weight: 600;
	font-style: italic;
	font-size: 54px;
}

.display-2 {
	font-weight: 500;
	font-style: italic;
	font-size: 34px;
}

.display-3 {
	font-weight: 300;
	font-style: italic;
	font-size: 44px;
}

/* ====================
	* FORMULARIOS *
==================== */
form * {
	font-family: var(--fuente);
}

form .input {
/*	padding: 10px 15px; */
	border-radius: 10px;
/*	border: 1px solid #d6d6d6; */
	transition: .3s ease all;
	width: 100%;
	margin-bottom: 20px;
/* nuevas asignaciones */	
	padding: 12px 20px 12px 40px;
	border: none;
	color: #0c37c7;
	box-shadow: none;
	background: #ffffff url(../img/icon-right.png) no-repeat 20px center;
	text-decoration: #0d1ad4;
}

form .input:focus {
	border: 1px solid #641ee7;
	outline: none;
}

.boton {
	background: #641ee7;
	border: none;
	cursor: pointer;
	color: #fff;
	display: inline-block;
	padding: 10px 15px;
	border-radius: 3px;
	text-align: center;
	line-height: 22px;
	transition: .3s ease all;
}

.boton:hover {
	background: #5114c2;
}

.boton.verde {
	background: #00a04a;
}

.boton.verde:hover {
	background: #00833d; 
}

.boton.formu {
	background: #9b9791;
}

.boton.formu:hover {
	background: #757472;
}

/* ====================
	* FOOTERS *
==================== */
/* FOOTER */
footer{
    display: flex;
    margin-top: -90px;
}

.sociales-metodo{
    width: 25%;
    height: 100px;
    background: #333;
    color: #fff;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.sociales-metodo i{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 30px;
    line-height: 100px;
    transition: all 0.5s;
}

.sociales-metodo span{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 10px 0;
    font-size: 12px;
    background: var(--color-primario);
    color: #fff;
    letter-spacing: 1px;
    font-weight: 700;
    transform: translateY(60px);
    transition: all 0.5s;
}

.sociales-metodo i:hover + span{
    transform: translateY(0px);
}

.sociales-metodo i:hover{
    transform: translateY(-20px);
}

/* ====================
	* HELPERS *
==================== */
.no-margen { margin: 0 }
.no-margen-superior { margin-top: 0 }
.no-margen-inferior { margin-bottom: 0 }
.no-margen-izquierdo { margin-left: 0 }
.no-margen-derecho { margin-right: 0 }

.margen-inferior {margin-bottom: 20px;}
.margen-superior {margin-top: 20px;}

.texto-centrado {text-align: center;}
.texto-izquierda {text-align: left;}
.texto-derecha {text-align: right;}
.texto-justif {text-align: justify;}

.texto-color1 {color: rgb(27, 59, 240);}
.texto-color2 {color: rgb(53, 199, 119);}
.texto-color3 {color: rgb(32, 204, 69);}
.texto-color4 {color: rgb(204, 120, 23);}
.texto-color5 {color: rgb(102, 101, 112);}
.texto-color6 {color: rgb(40, 98, 224);}
.texto-color7 {color:black}


.boton-centrado {text-align: center;}