:root{
	--calipso: #0DE8E4;
	--negro: #000;
}
body{
	font-family: 'Inter', sans-serif;
	background-color: #000;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Oxanium', cursive;
	font-weight: 700;
}
p, li{
	font-weight: 300;
}
.text-sm{
	font-size: 12px!important;
	line-height: 12px;
}
.text-small{
	font-size: 14px!important;
}

.btn{
	border-radius: 5px;
	font-family: 'Oxanium', cursive;
}
.btn-outline-color{
	border-color: var(--calipso);
	color: var(--calipso);
	padding: 13px 20px;
	font-weight: 500;
}
.btn-outline-color:is(:hover,:focus){
	background-color: var(--calipso);
	color: #222;
}
.btn-color{
	background-color: var(--calipso);
	color: #222;
	padding: 13px 20px;
	font-weight: 500;
}
.btn-color:is(:hover,:focus){
	background-color: #0BB9B6;
	color: var(--negro);
}

.topbar{
	background-color: var(--negro);
}
.topbar ul li a{
	font-family: 'Oxanium', cursive;
	color: var(--calipso);
	font-size: 13px;
	font-weight: 400;
}
.topbar .rrss a{
	color: #c0c0c0;
	font-size: 13px;
}
.topbar .rrss a:is(:hover,:focus){
	color: #fff;
}
#navbar{
	font-family: 'Oxanium', cursive;
}
#navbar .menu{
	background-color: rgba(255, 255, 255, .1);
	transition: all .2s ease-in-out;
}
#navbar .navbar-nav .nav-item .nav-link{ 
	font-size: 15px;
	letter-spacing: .3px;
	color: #fff;
	padding: 8px 13px;
}
#navbar .navbar-nav .nav-item .nav-link.active,
#navbar .navbar-nav .nav-item .nav-link:is(:hover,:focus){ 
	color: var(--calipso);
}

#navbar.navbar-shrink .menu{
/*	background-color: rgba(0, 0, 0, .8);*/
	background-color: #111;
}
#navbar .menu .navbar-brand img{
	transition: all .2s ease-in-out;
}
#navbar.navbar-shrink .menu .navbar-brand img{
	width: 80px;
}

.buscador{
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, .3);
}
.buscador .form-control{
	background-color: transparent;
	border: none;
	color: #fff;
	font-weight: 300;
}
.buscador .form-control::placeholder{
	color: #fff;
	font-size: 15px;
	font-weight: 300;
}
.buscador .btn-link{
	color: #fff;
}
.buscador .btn-link:is(:hover,:focus){
	color: var(--calipso);
}

.btn-carro{
	color: #fff;
}
.btn-carro:is(:hover,:focus){
	color: var(--calipso);
}
.btn-carro .badge {
	position: absolute;
	top: 4px;
	right: 3px;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
    font-weight: 400;
    font-size: 10px;
    line-height: 1px;
    background-color: var(--calipso);
	padding:0;
	color: #444;
}
#navbar .menu-plataformas{
	background-color: rgba(13, 232, 228, 0.2);
	transition: all .2s ease-in-out;
}
#navbar .menu-plataformas .nav-item .nav-link{
	font-weight: 400;
	font-size: 16px;
	color: #fff;
}
#navbar .menu-plataformas .nav-item .nav-link:is(:hover,:focus){
	color: #111;
}
#navbar.navbar-shrink .menu-plataformas{
/*	background-color: rgba(13, 232, 228, 1);*/
	background-color: #0ab8b4;
}

.menu-plataformas .dropdown .dropdown-content{
	display: none;
  	position: absolute;
  	background-color: rgba(6, 110, 108, 0.9);
  	max-width: 160px;
  	width: 160px;

}
.menu-plataformas .dropdown:hover .dropdown-content {
	display: block;
}
.menu-plataformas .dropdown .dropdown-content .dropdown-item{
	padding: .5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.cat-offcanvas .nav-link{
	background-color: rgba(13, 232, 228, 0.2);
	border-radius: 20px;
/*	border: 1px solid var(--calipso);*/
	color: var(--calipso);
	margin-right: .5rem;
	margin-bottom: .5rem;
}

footer{
	background-color: #222222;
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center;
	border-top: 1px solid #585858;
	margin-top: -5rem;
	padding-top: 7rem;
}
.linea-color{
	height: 1px;
	width: 70px;
	background-color: var(--calipso);
}

.modal-content{
/*	background: rgb(9,130,128);*/
	background: linear-gradient(304deg, rgb(5 38 37) -35%, rgba(0,0,0,1) 60%, rgb(5 45 44) 125%);
	border-radius: 0;
/*	border: 1px solid var(--calipso);*/
}

.alerta .alert{
	position: fixed!important;
	bottom: 0!important;
	width: 100%!important;
	border-radius: 0!important;
	margin: 0!important;
	padding: 25px 15px!important;
	border: none!important;
	z-index: 9999!important;
	text-align: center!important;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.text-color{
	color: var(--calipso)!important;
}

.carousel{
	-webkit-clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	background-color: var(--calipso);
	padding-bottom: 2px;
}
.carousel-inner{
	-webkit-clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	position: relative;
}

.carousel-item{
	height: 100vh;
	min-height: 600px;
	max-height: 800px;
	background: no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top: 140px;
}
[class^="carousel-control"]{
	padding-top: 140px;
}
.gradiente-slide{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(146deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.carousel-caption{
	bottom: inherit;
	padding: 0;
	text-align: left;
	position: absolute;
	top: 55%;
	transform: translateY(-40%);
}
.titulo-slide{
	font-size: 55px;
	line-height: 55px;
}
.texto-slide{
	font-weight: 300;
}
.carousel-indicators button{
	height: 16px!important;
	width: 16px!important;
	border-radius: 50%!important;
}
.carousel-indicators button.active{
	background-color: var(--calipso);
}

.banner-secciones{
	-webkit-clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	background-color: var(--calipso);
	padding-bottom: 2px;
}
.clip-banner{
	-webkit-clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	clip-path: polygon(0 94%, 0 0, 100% 0, 100% 100%, 4% 100%);
	position: relative;
	background-size: cover;
	background-position: center;
	height: 450px;
	background-color: #aeaeae;
	background-blend-mode: multiply;
}

.titulo{
	font-size: 38px;
	line-height: 38px;
}
.subtitulo{
	font-family: 'Oxanium', cursive;
	color: var(--calipso);
	letter-spacing: 2px;
	font-weight: 300;
}
.text-color{
	color: var(--calipso);
}
a.text-color:is(:hover,:focus){
	color: #0BB9B6;
}

.categorias-inicio a img{
	opacity: .6;
	transition: all .2s ease-in-out;
}
.categorias-inicio a:is(:hover, :focus) img{
	opacity: 1;
}

.categorias-titulo{
	border-bottom: 1px solid var(--calipso);
	position: relative;
}
.categorias-titulo::after{
	content:'';
	display: block;
	width: 90px;
	height: 0px;
/*    border-right: 60px solid transparent;*/
    border-left: 5px solid transparent;
    border-bottom: 5px solid var(--calipso);
	position: absolute;
	right: 0;
	bottom: 0;
}
.gradiente-gris{
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(125,125,125,.05) 10%, rgba(125,125,125,.15) 50%, rgba(125,125,125,.1) 90%, rgba(0,0,0,0) 100%);
}
.gradiente-calipso{
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%,rgba(11,204,201,.05) 10%, rgba(11,204,201,.15) 50%, rgba(11,204,201,.1) 90%, rgba(0,0,0,0) 100%);
}

.owl-carousel.productos {
	position: relative;
}
.owl-carousel.productos .owl-nav{
	display: inline-flex!important;
	position: absolute;
	top: -60px;
	right: 0;
}
.owl-carousel.productos .owl-nav button{
	color: var(--calipso)!important;
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 22px!important;
	transition: all .2s ease-in-out;
}
.owl-carousel.productos .owl-nav button:is(:hover,:focus){
	color: #fff!important;	
}
.productos .item figure img{
	aspect-ratio: .7;
	object-fit: cover;
}
.productos .item .texto-producto{
	background: linear-gradient(to bottom, rgba(255, 255, 255, .2), 50%, rgba(255, 255, 255, .12));
	padding-top: 6rem;
	padding-bottom: 1rem;
	margin-top: -4.5rem;
}
.productos .item .texto-producto a h6{
	height: 38px!important;
	overflow: hidden;
}

.quantity{
	height: 40px;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 5px;
}
.quantity input{
	height: 100%;
	background-color: transparent;
	border-color: transparent;
	color: #fff;
}
.quantity input:focus{
	background-color: transparent;
	border-color: transparent;
	color: #fff;
}
.quantity .input-group-text{
/*	width: 15px;*/
	height: 100%;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	border-color: transparent;
}
.quantity .input-group-text button{
	height: 50%;
	aspect-ratio: 1;
	color: #fff;
	font-size: 12px;
	line-height: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.quantity .input-group-text button:is(:hover,:focus){
	background-color: rgba(255, 255, 255, .3);
}

.inicio-destacados figure{
}
.inicio-destacados figure img{
	aspect-ratio: 1.8;
	object-fit: cover;
}
.inicio-destacados figure .gradiente{
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), 50%, rgba(0, 0, 0, .8));
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.inicio-destacados figure .contenedor-texto{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
}

.owl-carousel.clientes .item{
	clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
}
.owl-carousel.clientes .item .foto-usuario{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid var(--calipso);
	overflow: hidden;
}
.owl-carousel.clientes .item .foto-usuario img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.owl-carousel.clientes .owl-dots{
	justify-content: center;
	text-align: center;
}
.owl-carousel.clientes .owl-dots button{
	background-color: var(--calipso);
	height: 15px!important;
	width: 15px!important;
	border-radius: 50%!important;
	margin:0 .2rem;
	opacity: .5;
}
.owl-carousel.clientes .owl-dots button.active{
	background-color: var(--calipso);
	opacity: 1;
}

.destacados-borde{
	clip-path: polygon(3% 0, 100% 0, 100% 90%, 97% 100%, 0 100%, 0 10%);
	background-color: var(--calipso);
	padding: 2px;
}
.destacados{
	clip-path: polygon(3% 0, 100% 0, 100% 90%, 97% 100%, 0 100%, 0 10%);
	background-color: #254A49;
}
/*.contacto .form-control{
	background-color: rgba(255, 255, 255, .2)!important;
	color: #fff;
	border-color: #555;
}*/
[data-bs-theme=dark] .form-floating > .form-control~label{
	color: rgba(173,181,189, .65);
}
.form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after{
	background-color: transparent;
}
/*.contacto .form-floating > .form-control:focus~label::after{
	background-color: transparent!important;
	color: #fff;
}*/

.breadcrumb{
	font-family: 'Oxanium', cursive;
	letter-spacing: 1px;
}
.bg-gradiente{
    background: linear-gradient(to bottom, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
}

.medios-pago{
/*	color: #333;*/
	border-radius: 15px;
	background-color: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .3);
}
.medios-pago .form-check{
	display: flex;
	flex-direction: row;
}
.medios-pago .form-check input{
	aspect-ratio: 1;
}

.wsp{
    font-size: 11px;
    font-weight: 400;
    font-family: sans-serif;
    letter-spacing: 0;
    line-height: 1px;
    padding: 3px 7px;
    letter-spacing: 0;
    text-transform: none;
}

.whatsapp {
    position: fixed;
    z-index: 9999!important;
    border-radius: 50% 50% 50% 0%;
    width: 62px;
    height: 62px;
    bottom: 15px;
    left: 15px;
    background-color: #25d366;
    padding: 8px 8px 8px 10px;
    animation: 1s infinite alternate shimmy;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
.whatsapp i {
    font-size: 42px;
    color: #fff;
}
@keyframes shimmy{
    0%{
        transform:translate(0,0)
    }
    100%{
        transform:translate(5px, -5px)
    }
}

@media screen and (max-width: 768px){
	.titulo-slide{
		font-size:48px;
		line-height:48px;
	}
}
@media screen and (max-width: 576px){
	.titulo-slide{
		font-size: 38px;
		line-height: 38px;
	}
}