@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;
	--gris-claro: #646972;
	--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);
}

.container__tiendas{
	padding: 2% 5% 5% 5%;
}
.container__tiendas-tittle{
	text-align: center;
	font-family: var(--owenPro-300);
	font-size: 1.125rem;
}
.container__botones{
	display: flex;
	justify-content: center;
	margin-top: 30px;
	flex-wrap: wrap;
}
.container__botones button{
	background-color: #E3E9EA;
	color: var(--gris-claro);
	border-radius: 10px;
	border: none;
	cursor: pointer;
	text-align: center;
	font-family: var(--owenPro-600);
	font-size: 1.25rem;
	width: 350px;
	min-height: 53px;
	margin-right: 25px;
	margin-top: 25px;
}

.container__botones button:hover{
	background-color: var(--verde);
	color: #FFFFFF;
}

.container__botones button.active {
	background-color: var(--verde);
	color: #FFFFFF;
}
.container__luagres h1{
	
}
.container__ecommerce {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	padding: 5%;
}
.container__ecommerce-card{
	border: 2px solid #8DBB00;
	border-radius: 10px;
	min-width: 255px;
	min-height: 164px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.container__ecommerce-card:hover {
    background-color: var(--verde);
    color: white !important; 
}
.container__ecommerce-card:hover p {
    color: white !important;
}
.container__ecommerce-card:hover h1 {
    color: white !important; 
}
.container__ecommerce-card h1{
	font-family: var(--owenPro-500);
	font-size: 1.375rem;
	color: var(--verde);
	margin-bottom: 0;
}

.container__ecommerce-card p{
	font-family: var(--owenPro-400);
	font-size: 1.125rem;
	color: var(--gris);
	margin-top: 0;
}
.container__ecommerce-card button{
	font-family: var(--owenPro-500);
	font-size: 1rem;
	color: var(--gris-claro);
	background-color: #E3E9EA;
	border: none;
	width: 60%;
	min-height: 44px;
	border-radius: 10px;
	margin-top: auto; 
    align-self: flex-end;
	cursor: pointer;
}
.card-lugar {
    position: relative; 
	width: 100%;
}
	#distribuidores,
	#ecommerce,
	#tiendas{
	position: relative; 
	}

	#distribuidores::before{
    content: ""; 
    display: block;
    width: 15px; 
    height: 15px;
    background-image: url('../img_repository/iconos-flechas/botones-tiendas/Distribuidores-gris.svg'); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
	left: 22px;
    top: 48%;
    transform: translateY(-50%);
	}

	#distribuidores:hover::before,
	#distribuidores.active::before {
	background-image: url('../img_repository/iconos-flechas/botones-tiendas/Distribuidores-blanco.svg');
	}
	#ecommerce::before{
    content: ""; 
    display: block;
    width: 15px; 
    height: 15px;
    background-image: url('../img_repository/iconos-flechas/botones-tiendas/ecommerce-gris.svg'); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
	left: 92px;
    top: 49%;
    transform: translateY(-50%);	
	}
	#ecommerce:hover::before,
	#ecommerce.active::before{
   	background-image: url('../img_repository/iconos-flechas/botones-tiendas/ecommerce-blanco.svg');
}
	#tiendas::before{
    content: ""; 
    display: block;
    width: 15px; 
    height: 15px;
    background-image: url('../img_repository/iconos-flechas/botones-tiendas/tiendas-gris.svg'); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
 	left: 114px;
    top: 48%; 
    transform: translateY(-50%); 
	}
	#tiendas:hover::before,
	#tiendas.active::before{
   	background-image: url('../img_repository/iconos-flechas/botones-tiendas/tiendas-blanco.svg');
}

.hide{
	display: none;
}
.container__distribuidores{
	padding: 5% 0;
}
form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    align-items: center; 
    justify-content: center; 
	min-height: 160px;
}
 label {
     display: inline;
}
.filtros__select, .filtros__input{
    height: 50px;
	border: 2px solid #8DBB00;
	border-radius: 10px;
	font-family: var(--owenPro-500);
	align-content: center;
	padding: 4px 4px 4px 8px;
    box-sizing: border-box;
}
.filtros__select label, .filtros__input label{
	color: #646972;
	margin-right: 5px;
}
.filtros__select select, .filtros__input input {
	color: #B8B8B1;
	background-color: #F8F8F8;
	padding: 4px 10px;
	border: none;
	border-radius: 5px;
	flex-grow: 1;
	width: 100%;
}
.filtros__select select:focus{
	border: 1px solid #8DBB00;
}
.button-container {
    flex-basis: 100%; 
    display: flex;
    justify-content: center; 
    margin-top: auto; 
	border: none;
}
.button-container button{
	background-color: #E3E9EA;
	border: none;	
	font-family: var(--owenPro-600);
	color: var(--gris-claro);
	border-radius: 10px;
	width: 350px;
    height: 53px;
    margin-top: 30px;
	cursor: pointer;
}
.filtros__select {
    display: flex; 
    align-items: center; 
    flex: 1 1 350px; 
    min-width: 300px;
}
.filtros__input-domicilio {
    display: flex; 
    align-items: center; 
    flex: 2.2 1 700px;
    min-width: 300px;
}
.filtros__input-cp {
    display: flex; 
    align-items: center; 
    flex: 1 1 350px; 
}
.filtros__select option{
	background-color: #FFFFFF;
	color: #979797;
	font-size: 1rem;

}
/*---------Resultados--------------*/
.container__tiendas-page, .container__lugares-page{
	border: 2px solid var(--verde);
	border-radius: 10px;
	min-height: 30vh;
	margin-top: 40px;
	padding: 2%;
	box-sizing: border-box;
}
.container__resultados, .resultados__tienda, .resultados__card {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	padding: 20px 5px 20px 5px;
	border-bottom: 1px solid #D9D9D9;
}
.container__resultados:last-child,
.resultados__tienda:last-child{
	border:none;
	padding: 15px 5px 15px 5px;
}
.resultados__info, .resultados__acciones{
	display: inline-grid;
}
.resultados__info h1, .tienda__info h1{
	font-family: var(--owenPro-600);
	font-size: 1.375rem;
	color: var(--gris-claro);
/*	margin: 15px 0 0 0;*/
}
.resultados__info p{
	font-family: var(--owenPro-400);
	font-size: 1.125rem;
	color: #1F242D;
	margin: 5px 0 20px 0;
}

.resultados__ciudad-tienda, .resultados__telefono-tienda{
	font-family: var(--owenPro-600);
	font-size: 1.125rem;
	color: var(--verde);
	margin-top: -8px;
	margin-left: 16px;
	position: relative;
}
.resultados__ciudad-tienda::before{
	content: ""; 
    display: block;
    width: 9px; 
    height: 13px;
    background-image: url('../img_repository/iconos-flechas/pin-ubicacionVerde.svg'); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
 	left: -17px;
    top: 46%; 
    transform: translateY(-50%); 
}
.resultados__telefono-tienda::before{
	content: ""; 
    display: block;
    width: 13px; 
    height: 12px;
    background-image: url('../img_repository/iconos-flechas/telefono-verde.svg'); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
 	left: -17px;
    top: 46%; 
    transform: translateY(-50%); 
}
.resultados__acciones, .resultados__boton-tienda{
	align-content: center;
    justify-self: end;
	position: relative
}
.resultados__ubicacion-boton, .resultados__lugares-boton{
	background-color: #E3E9EA;
	color: var(--gris-claro);
	border:none;
	font-family: var(--owenPro-600);
	font-size: 1rem;
	border-radius: 10px;
	width: 221px;
	height: 44px;
	cursor: pointer;
}

.resultados__ubicacion-boton:hover, 
.resultados__lugares-boton:hover{
	background-color: var(--verde);
	color: #FFFFFF;
}

@media screen and (max-width: 1090px) {
	.container__ecommerce {
	grid-template-columns: repeat(2, 1fr);
	padding: 5% 2%;
}
}

@media screen and (max-width: 780px) {
	.container__ecommerce {
	grid-template-columns: repeat(1, 1fr);
	padding: 5% 2%;
}
	.container__botones button{
	width: 350px;
	margin: 12px auto ;
}
	.container__resultados, .resultados__tienda, .resultados__card {
		grid-template-columns: repeat(1, 1fr);
	}
	.resultados__acciones {
		justify-self: center;
		margin: 20px 0;
	}
.container__tiendas{
    padding: 2% 4%;
}
}
@media screen and (max-width: 399px){
.container__botones button {
    font-size: 1.1rem;
}	
	.button-container button{
		width: 100%;
	}
}