/* ------------------------------------------------------ */

/* Variables */

:root {
	--color-1: rgb(99, 153, 153) /* #639999 */;
	--color-1-hover: rgb(121, 186, 186);
	--color-1-alfa: rgba(99, 153, 153, 0.5);
	--color-2: #14363F;
	--color-3: rgb(225, 192, 113) /* #e1c071 */;
	--color-4: #f5f5f5;
	--color-textos-suaves: #3a3a3a;
	--color-textos-neutral: #555;

}


/* ------------------------------------------------------ */


/* Tipografías de Google Fonts */

/* @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap'); */
/* font-family: 'Oswald', sans-serif; */

/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300&display=swap'); */
/* font-family: 'IBM Plex Serif', serif; */

@import url('https://fonts.googleapis.com/css2?family=Bitter: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');
/* font-family: 'Bitter', serif; */



/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
    font-family: 'Trajan Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trajan Pro Regular'), url('TrajanPro-Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Trajan Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Trajan Pro Bold'), url('TrajanPro-Bold.woff') format('woff');
    }

/* ------------------------------------------------------ */


/* Custom */

body {
	font-family: 'Bitter', serif;
	font-weight: 300;
	color: var(--color-textos-suaves);
	font-size: 18px;
}

main>.container {
	padding: 40px 15px 0;
	margin-bottom: 3rem;
}

.mt-6, .my-6 {
	margin-top: 60px !important;
}

.pt-6 {
	padding-top: 60px;
}

.pb-6 {
	padding-bottom: 60px;
}

.navbar .toggle-btn {
	display: none;
}

.nav-link.js-scroll-trigger {
	color: var(--color-3);
	font-weight: 400;
	font-family: 'Ysabeau Office', sans-serif;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: var(--color-4);
	background-color: var(--color-1-alfa) !important;
}

#mainab .nav-link:focus, .nav-link:hover {
	background-color: var(--color-1-hover);
	color: var(--color-2);
}

header {
	/* background: var(--color-2);
	color: #fff; */
	height: 60px;
}

.title-header {
	/* font-family: 'Trajan Pro Regular'; */
	font-family: 'Bitter', serif;
	font-weight: normal;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	color: var(--color-3);
}

.bg-dark {
	background-color: #111 !important;
}

.footer {
	font-size: .75rem;
}

.text-precio {
	font-weight: 600;
	font-size: 1.25rem;
}

.text-titulo-card {
	font-weight: 600;
	font-size: 1.25rem;
}

.card-horizontal {
	display: flex;
	flex: 1 1 auto;
}

.icono-picas {
	text-align: left;
	vertical-align: middle;
}

.showcase .showcase-img {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 30rem;
}

.showcase .showcase-text {
	line-height: 1.6rem;
	color: #BBB;
	text-align: left;
	padding: 2.5rem 2rem;
}

#nosotros .showcase .showcase-text {
	color: var(--color-textos-suaves);
}

/* .showcase .showcase-text p{
	text-align: justify;
	padding: 5rem 7rem 5rem 5rem;
}

.showcase .showcase-text p{
	text-align: justify;
	padding: 5rem 7rem 5rem 5rem;
} */

.showcase .showcase-text h4, .showcase .showcase-text i {
	font-weight: bold;
	color: var(--color-3);
	font-size: 1.1rem;
}

.showcase .showcase-text i {
	padding-right: .4rem;
}

.recuadro {
	border: solid 12px rgba(255, 255, 255, 0.6);
	padding: 1.5rem;
	margin: 1.5rem;
	height: 90%;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
}

.content-caract {
	text-align: justify;
}

.content-caract h2 {
	font-size: 1.5rem;
	font-weight: 600;
}

.content-caract h3 {
	font-size: 1.25rem;
	font-weight: 600;
}

.content-caract i {
	text-align: justify;
	font-size: 2.25rem;
	color: var(--color-1);
	padding-top: 5px;
	max-width: 48px;
	padding-right: 60px;
}

.services .icon-box {
	padding: 25px 25px 15px 25px;
	border-radius: 8px;
	background: #f9f9f9;
	transition: ease-in-out 0.3s;
	/* font-family: 'Trajan Pro', sans-serif; */
	font-weight: bold;
}

.services .icon-box:hover {
	box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

.services .icon-box i {
	float: left;
	color: var(--color-1);
	font-size: 30px;
	line-height: 0;
	padding-top: 16px;
}

.services .icon-box h4 {
	margin-left: 50px;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 20px;
}

.services .icon-box p {
	margin-left: 50px;
	line-height: 24px;
	font-size: 1rem;
	margin-bottom: 0 important;
}

.height-400 {
	height: 50vh;
}

.h-50 {
	height: 50vh;
}

.rounded-lg {
	border-radius: 0.5rem !important;
}

.bg-card {
	background: #eff0eb;
	background-image: url('../images/bg_beige.webp');
	background-size: cover;
	background-repeat: no-repeat;
}

.card .card-body .card-title {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: var(--color-3);
	font-size: 1rem;
	font-weight: bold;
}

.card .card-body h6 {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: var(--color-1);
	font-size: .85rem;
	font-weight: bold;
}

.card .card-body .card-text {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: var(--color-1);
	font-size: .85rem;
	font-weight: regular;
}

.card .card-body span {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #bbb;
	font-size: .75rem;
	font-weight: regular;
}

.card .card-body .linea-left {
	border-left: 5px solid #ddd;
	padding-left: 18px;
}

.card {
	display: flex;
	flex: 1;
}

/* ------------------------------------------------------ */


/* Background colors */

.bg-darken-2 {
	background-color: #dfdfdf;
}

.bg-black-0 {
	background-color: #000;
}

.bg-black-1 {
	background-color: #111;
}

.bg-black-2 {
	background-color: #222;
}

.bg-black-3 {
	background-color: #2D3333;
}

.bg-1 {
	background-color: var(--color-1);
	color: #fff;
	border-color: var(--color-1);
}

.bg-1:hover {
	background-color: var(--color-1-hover);
	color: rgba(255, 255, 255, 0.842);
	border-color: var(--color-1-hover);
}

.bg-1-alfa {
	background-color: var(--color-1-alfa);
}

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



/* ------------------------------------------------------ */


/* Text Colors */

.color-1 {
	color: var(--color-1);
}

a:hover.color-1 {
	color: var(--color-3);
}

.color-2 {
	color: var(--color-2);
}

.color-3 {
	color: var(--color-3);
}

/* ------------------------------------------------------ */


/* Border Colors */

.border-color-1 {
	border-color: var(--color-1) !important;
}


/* ------------------------------------------------------ */


/* Backgorunds */

.bg-parallax {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: top center;
}

.bg-sistemas {
	height: 50px;
	background-color: #367719;
}

.bg-seccion-1 {
	background-color: #ececec;
}

.bg-seccion-2 {
	background-color: #faecb6;
}


/* ------------------------------------------------------ */


/* Botones para Redes Sociales by Noel */

.boton-redes-ahref, .boton-redes-ahref:hover {
	text-decoration: none;
	color: #fff;
}

.boton-redes {
	border-radius: 5px;
	margin-top: 1rem;
	padding: 10px 20px;
}

.boton-redes .icono-redes {
	border-right: 1px solid;
	width: 44px;
	font-size: 1.6rem;
}

.boton-redes .texto-redes {
	font-size: 1.25rem;
	padding-top: 4px;
}

.boton-redes-whatsapp {
	background-color: #367719;
}

.boton-redes-whatsapp:hover {
	background-color: #59c428;
}

.boton-redes-facebook {
	background-color: #114fa1;
}

.boton-redes-facebook:hover {
	background-color: #1877F2;
}

.boton-redes-youtube {
	background-color: #990101;
}

.boton-redes-youtube:hover {
	background-color: #FF0000;
}

.boton-redes-udemy {
	background-color: #652094;
}

.boton-redes-udemy:hover {
	background-color: #A435F0;
}

.boton-redes-email {
	background-color: #a58e0c;
}

.boton-redes-email:hover {
	background-color: #e9c913;
}

/* ------------------------------------------------------ */


/* Secciones */

.secciones h1 {
	font-size: 1.5rem;
	color: var(--color-1);
	border-bottom: 1px solid;
	padding-bottom: .5rem;
	/* font-family: 'Trajan Pro Regular'; */
	font-weight: bold;
}


/* ------------------------------------------------------ */


/* Contacto */

.headerContacto {
	padding: 1.6rem;
	cursor: unset;
}

.headerContacto i {
	padding-right: 12px;
	font-size: 1.3rem;
}

.headerContacto span {
	font-size: 1rem;
}

.headerContacto img {
	display: none;
}

.datosContacto a span {
	margin-top: .6rem;
}

.datosContacto a i {
	font-size: 1.8rem;
	margin-right: 1rem;
}

/* ------------------------------------------------------ */


/* Grid Gallery */

.gallery-block.grid-gallery {
	padding-bottom: 60px;
	padding-top: 60px;
}

.gallery-block.grid-gallery .heading {
	margin-bottom: 50px;
	text-align: center;
}

.gallery-block.grid-gallery .heading h2 {
	font-weight: bold;
	font-size: 1.4rem;
	text-transform: uppercase;
}

.gallery-block.grid-gallery a:hover {
	opacity: 0.8;
}

.gallery-block.grid-gallery .item img {
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
	transition: 0.4s;
}

.gallery-block.grid-gallery .item {
	margin-bottom: 20px;
}

@media (min-width: 576px) {

	.gallery-block.grid-gallery .scale-on-hover:hover {
		transform: scale(1.05);
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
	}
}

/* ------------------------------------------------------ */


/* @Media */

@media (min-width: 576px) {

	.showcase .showcase-text {
		padding: 3.5rem 3rem;
	}

}

@media (min-width: 767.98px) {

	.navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 15px;
	}

	.showcase .showcase-text {
		padding: 4rem;
	}

}

@media (min-width: 1200px) {

	.showcase .showcase-text {
		padding: 5rem 6rem;
	}

}

@media (max-width: 767.98px) {

	.header {
		position: static;
		width: inherit;
		height: auto;
	}

	.header .navbar {
		padding: 1rem;
	}

	.main-wrapper {
		margin-left: 0;
	}

	.footer {
		margin-left: 0;
	}

	.navbar .toggle-btn {
		display: block;
		cursor: pointer;
	}

	.navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 15px;
	}

	.header .blog-name {
		width: 100%;
		position: absolute;
		left: 0;
		top: 1.2rem;
		display: block;
	}

	.headerContacto img {
		display: block;
		position: absolute;
		width: 140px;
		right: 10px;
		bottom: 10px;
	}

	.showcase .showcase-img {
		min-height: 20rem;
	}

	.card {
		display: block;
		flex: none;
	}

	.card .card-body .linea-left {
		border-left: 0px;
		padding-left: 0px;
	}

}



/* ------------------------------------------------------ */

*, *::before {
	box-sizing: border-box;
}

.vineta {
	position: relative;
	width: 100%;
	max-width: 600px;
	height: calc(100vh - 30px);
	max-height: 600px;
	/*Opcionalmente con box-shadow, creamos varias sombras, para simular un marco*/
	box-shadow:
		0 0 0 1px black,
		0 0 0 6px white,
		0 0 0 7px black;
}

.globo {
	position: absolute;
	text-transform: uppercase;
	font-size: .62rem;
	font-weight: normal;
	color: #14363F;
	text-align: center;
	border-radius: var(--borde);
	padding: var(--borde);
	--borde: 5px;
	font-family: sans-serif;
	z-index: 1;
	background-color: white;
	filter: drop-shadow(0px 0px 1px black);
}

.globo.i {
	width: 150px;
	top: 20px;
	left: 80px;
}

.globo.ii {
	width: 150px;
	top: 100px;
	left: 20px;
}

.globo.iii {
	width: 154px;
	top: -50px;
	right: 0px;
}

.globo.iv {
	width: 150px;
	bottom: 10px;
	left: 40%;
}

.globo::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: var(--colita);
	height: var(--colita);
}

.globo.abajo-derecha::before {
	--colita: 20px;
	left: 50%;
	bottom: calc(var(--colita) / -1.5);
	transform: skewY(30deg) rotateZ(-30deg);
	border-radius: 0 0 0 10em;
	box-shadow:
		inset calc(var(--colita)/2) calc(var(--colita)/3) 0 0 white;
}

.globo.derecha-arriba::before {
	--colita: 20px;
	top: 10px;
	right: calc(var(--colita) / -1.5);
	transform: skewY(30deg) rotateZ(-120deg);
	border-radius: 0 0 0 10em;
	box-shadow:
		inset calc(var(--colita)/2) calc(var(--colita)/3) 0 0 white;
}

.globo.abajo-izquierda::before {
	--colita: 50px;
	left: 10px;
	bottom: calc(var(--colita) / -1.5);
	border-radius: 0 0 10em 0;
	box-shadow:
		inset calc(var(--colita)/-3) calc(var(--colita)/4) 0 0 white;
}

.globo.izquierda-arriba::before {
	--colita: 20px;
	top: 0;
	left: calc(var(--colita) / -1.5);
	transform: rotateZ(-60deg);
	border-radius: 10em 0 0 0;
	color: white;
	box-shadow:
		inset calc(var(--colita)/3) calc(var(--colita)/-4) 0 0;
}

.globo.yellow::before {
	background-color: rgba(255, 255, 0, .8);
	color: rgba(255, 2, 0, .5);
	animation: cambio-color ease 5s infinite both;
}

@keyframes cambio-color {
	45%, 55% {
		background-color: rgba(255, 255, 255, 0);
		color: white;
	}
}

.navbar {
    padding: 0.8rem 1rem !important;
}
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}