@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'OwenPro-SemiBold';
    src: url("../../fonts/Owen Pro/OwenPro-SemiBold.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Medium';
    src: url("../../fonts/Owen Pro/OwenPro-Medium.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Regular';
    src: url("../../fonts/Owen Pro/OwenPro-Regular.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OwenPro-Light';
    src: url("../../fonts/Owen Pro/OwenPro-Light.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--owenPro-600: 'OwenPro-SemiBold';
	--owenPro-500: 'OwenPro-Medium';
	--owenPro-400: 'OwenPro-Regular';
	--owenPro-300: 'OwenPro-Light';
	--primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
}
.containter__letras h2{
	font-family: var(--owenPro-400);
	font-size: 1.25rem;
	color: var(--gris);
	margin-bottom: 0;
	margin-top: 0;
}
.containter__letras h1{
	font-family: var(--owenPro-500);
	font-size: 1.563rem;
	color: var(--aqua);
	margin-top: 0;
}
.glider__letra{
    font-family: var(--owenPro-600);
	font-size: 1.363rem;
	color: #FFFFFF;
	background-color:#E3E9EA;
	border-radius: 30px;
	text-align: center;
	margin-right: 15px;
}

.glider__letra button{
	border-radius: 30px;
	text-align: center;
	border: none;
	cursor: pointer;
	width: 100%;
	padding: 5px 0;
}
.glider__letra button:hover{
	color: #FFFFFF;
	background-color:var(--aqua);
}
.container__categorias {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	background-color: #F5F5F7;
	margin-top: 6%;
	padding: 3% 0 5% 0;
}

.containter__letras {
	grid-area: 1 / 1 / 2 / 5;
	padding: 4% 10% 0 25%;
}
.carousel { 
	grid-area: 1 / 5 / 2 / 13; 
}

/* --- --- CAROUSEL --- --- */
.carousel__contenedor {
	position: relative;
}

.carousel__anterior,
.carousel__siguiente {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	border: none;
	top: calc(50% - 35px);
	left: calc(96% - 35px);
	cursor: pointer;
	line-height: 30px;
	text-align: center;
	background: none;
}
.carousel__anterior {
	left: -52px;
}
.carousel__siguiente {
	right: -30px;
}
.carousel__lista {
	overflow: hidden;
	display: flex;
}
.carousel__elemento {
	min-width: 249px;
	min-height: 440px;
	text-align: center;
	background-color: #E3E9EA;
  	color: var(--gris);
    transition: background-color 0.3s, color 0.3s;
	border-radius: 30px;
	margin: 1rem 2rem 1rem 0;
	padding: 0 20px;
	display: flex; 
    flex-direction: column; 
    justify-content:flex-end; 
    align-items: flex-start; 
	box-sizing: border-box;
}
.shadow {
 box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 .2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}
.carousel__elemento:hover {
    background-color: var(--aqua);
    color: #FFFFFF; 
}
.carousel__elemento-texto{
	height: auto;
}
.carousel__elemento h1{
	font-family: var(--owenPro-600);
	font-size: 1.375rem;
	margin-bottom: 0;
	text-align: left;
}
.carousel__elemento p{
	font-family: var(--owenPro-400);
	font-size: 1rem;
	margin-top: 0px;
	text-align:left;
}
.carousel__indicadores .glider-dot {
	display: block;
	width: 30px;
	height: 4px;
	background: #fff;
	opacity: .2;
	border-radius: 0;
}

.carousel__indicadores .glider-dot:hover {
	opacity: .5;
}

.carousel__indicadores .glider-dot.active {
	opacity: 1;
}

.carousel__elemento-imagen{
	height: 15rem;
	width: 100%;
	align-content: center;
}
.carousel__elemento-imagen img{
	width: 90%;
	height: 100%;
	align-content:center;
}
.glider-next{
	top: -10%!important;
	transform: rotate(90deg);
}
.glider-prev{
	top: -15%!important;
	left: -40px;
	transform: rotate(270deg);
}

@media screen and (max-width: 800px) {
	.contenido-principal {
		flex-direction: column;
	}

	.contenido-principal > * {
		width: 100%;
	}
}
@media screen and (max-width: 690px) {
	.container__categorias {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		background-color: #F5F5F7;
	}

	.containter__letras {
		grid-area: 1 / 1 / 2 / 13;
        padding: 2% 10%;
	}
	.carousel { 
		grid-area: 2 / 1 / 3 / 13;
		box-sizing: border-box;
	}
	.carousel__elemento {
		margin: 1rem;
		max-width: 95vw;
	}
	.carousel__anterior {
		left: 15px;
		z-index: 1;
	}
	.carousel__siguiente{
		left: calc(96% - 44px);
	}
}