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

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Montserrat-Regular.woff') format('woff'),
       url('fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Montserrat-Italic.woff') format('woff'),
       url('fonts/Montserrat-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-Bold.woff') format('woff'),
       url('fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-BoldItalic.woff') format('woff'),
       url('fonts/Montserrat-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Montserrat-Black.woff') format('woff'),
       url('fonts/Montserrat-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Montserrat-BlackItalic.woff') format('woff'),
       url('fonts/Montserrat-BlackItalic.ttf') format('truetype');
}

html, body {margin: 0;}
body {
	padding:0;
	font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
	color: #181818;
}
@media (max-width:768px) {
    body {font-size: 0.85rem;}
}

h1 {font-size: 2rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.2rem;}

.h1 {font-size: 2rem;}
.h2 {font-size: 1.6rem;}
.h3 {font-size: 1.4rem;}
.h4 {font-size: 1.2rem;}

.display-1 {font-size: 4em;}
.display-2 {font-size: 3em;}
.display-3 {font-size: 2.5em;}

strong {font-weight: 700;}
.extrabold {font-weight: 900;}
em, i {font-style: italic;}

.text-shadow {text-shadow: 3px 3px rgba(0, 0, 0, 0.3);}


.hr-white {border: 0; border-bottom: solid 2px #FFF;}
.hr-grey {border: 0; border-bottom: solid 2px rgba(0,0,0,0.2);}

/*containers*/
.container-1200 {max-width: 1200px; margin: auto;}
.container-1000 {max-width: 1000px; margin: auto;}
.container-900 {max-width: 900px; margin: auto;}
.container-800 {max-width: 800px; margin: auto;}
.container-600 {max-width: 600px; margin: auto;}
.container-400 {max-width: 600px; margin: auto;}

/*textos*/
.text-primary {color: #db1093!important;}
.text-primary-light {color: #ff6bb5;}
.text-secondary {color: #591ecc!important;}
.text-secondary-light {color: #b08bff;}
.text-tertiary {color: #00d9ff;}
.text-dark {color: #181818!important;}


a.text-black {color: #181818;}
a.text-black:hover {color: #000;}

/*fondos*/
.bg-primary {background-color: #db1093!important;}
.bg-primary-light {background-color: #ff6bb5;}
.bg-secondary {background-color: #591ecc!important;}
.bg-secondary-light {background-color: #d2bcff;}
.bg-tertiary {background-color: #00d9ff;}
.bg-tertiary-light {background-color: #80ecff;}

.bg-gradient {
	background: #591ecc;
	background: -webkit-linear-gradient(left, rgba(103, 40, 207, 1) 0%, rgba(255, 0, 156, 1) 100%);
	background: -o-linear-gradient(left, rgba(103, 40, 207, 1) 0%, rgba(255, 0, 156, 1) 100%);
	background: linear-gradient(to right, rgba(103, 40, 207, 1) 0%, rgba(255, 0, 156, 1) 100%);
}

.bg-image {
	background-size: cover;
	background-position: center center;
}

/*IMAGES FIT*/
.img-fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*iconos home info*/
.icons-home .box {padding: 1px;}
.box {overflow: hidden;}
.box a {color: #591ecc;}
.box a span {color: #181818!important;}
.box * {transition: all 0.3s linear;}
.box a:hover {background-color: #00d9ff;}
.box a:hover {color: #fff!important;}

.box a:hover .up {transform: scale(0.9) rotate(-15deg);}
.box a:hover .down {transform: scale(1.2);}

/*cuadros botones home*/
.square-btn {overflow: hidden;}
.square-btn * {transition: all 0.3s linear;}
.square-btn:hover .up {transform: scale(1.2);}
.square-btn:hover .down {transform: scale(0.9);}

/*contador home*/
#Countdown div {display: inline-block; padding: 0.2rem 0 0 0; margin: 0 0.2rem; border-right: solid 1px #fff;}
#Countdown div:last-child {border: 0;}
#Countdown div:last-child strong {color: #00d9ff;}
#Countdown strong, #Countdown span {display: block;}
#Countdown strong {font-size: 2rem; width: 70px;}


/* Rotador de banners home */
#banner-rotator {position: relative; width: 100%; aspect-ratio: 5 / 2; overflow: hidden; display: flex; align-items: center;}

/*rotador de banners*/
.banner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out;}

.banner.active {opacity: 1; z-index: 1;}
.banner img {width: 100%; height: 100%; object-fit: contain;}
.progress-bar {position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background-color: white; transform: scaleX(0); transform-origin: left;}

.banner-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 50px;
  height: 50px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; font-size: 24px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.3s ease;}

.banner-nav:hover {background-color: rgba(0, 0, 0, 0.8);}

.banner-prev { left: 0; }
.banner-next { right: 0; }
/*Rotador de banners home fin*/


/*boton flotante inscripciones*/
.inscribete {bottom: 40px; left: 40px; width: 24%; max-width: 220px; z-index: 10;}
.inscribete img {width: 100%; height: auto; animation: pulse 1s infinite ease-in-out;}

/* Pantallas medianas y pequeñas */
@media (max-width: 970px) {
  .inscribete {bottom: 20px; left: 20px; width: 20%; max-width: 130px;}
}
/* Muy pequeñas o móviles en vertical */
@media (max-width: 768px) and (orientation: portrait) {
  .inscribete {bottom: 30%; left: 10px; width: 30%; max-width: 120px;}
}

/* animación */
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}


/*menu ppl*/
#main-nav {background-color: #591ecc; font-weight: 700;}
#main-nav .navbar-nav .nav-link {color: #fff!important; transition: all 0.15s linear;}
#main-nav .navbar-nav .nav-link:hover {color: #00d9ff!important; transform: scale(1.1); }
#main-nav .navbar-toggler {color: #FFF; border: 0;}
#main-nav .dropdown {margin-top: 0;}
#main-nav .dropdown:hover .dropdown-menu {display: block;}


/*slider*/
img.img-desk {display: block;}
img.img-mob {display: none;}
@media (max-width:768px) and (orientation:portrait) {
	img.img-desk {display: none;}
	img.img-mob {display: block;}
}

/*header*/
header {position: relative; background-color: #b08bff;}

.logo {width: 56%; max-width: 350px;}
.patrocinadores-cont {position: absolute; z-index: 10; margin-top: 2rem;}
.wa-label {width: 7%; max-width: 98px;}

/*BOTONES*/
.btn {border-radius: .75rem;}
.btn-primary {background-color: #db1093!important; border: solid 3px #db1093!important; color: #FFF;}
.btn-primary:hover {background-color: #bf0878!important; border: solid 3px #bf0878!important; color: #FFF;}

/*pastilla patrocinadores*/
.logos {display: -ms-flexbox!important; display: flex!important; -ms-flex-pack: justify!important; justify-content: space-between!important;}
.patrocinan {width: 25%; max-width: 360px;}
.pastilla {
	width: 100%;
	background-color: #591ecc;
    border: solid 1px #fff;
    border-radius: 1rem;
}

@media (max-width:768px) and (orientation:portrait) {
    .patrocinadores-cont {position: relative; margin-top: 0.5rem;}
    .patrocinan {width: 50%;}
	.wa-label {width: 16%;}
}


/*transiciones generales*/
.scale-up, .scale-down, .scale-rotate {transition: all 0.3s linear;}
.scale-up:hover {transform: scale(1.2); z-index: 10;}
.scale-down:hover {transform: scale(0.9);}
.scale-rotate:hover {transform: scale(1.2) rotate(-15deg);}

/*testimonios*/
#testimonials .carousel-inner {width: 80%; min-height: 130px;}
#testimonials span {display: block; color: #413e3b;}
#testimonials button {width: 10%;}
#testimonials .carousel-item div {font-size: 1.3rem;}
#testimonials .custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #313131;
  border-radius: 50%;
  padding: 8px;
}

#testimonials .custom-icon svg {
  width: 20px;
  height: 20px;
  fill: white;
}

/*BLOG***/
.article-link {margin-bottom: 7px;}
.article-link small {display: block;}

/*SECCION PATROCINADORES*/
.logos-patro img {width: 100%;}
.logo-box {border: solid 1px #CCC; background: #FFF;}
.logo-box:hover {transform: translateY(-4px); box-shadow: 2px 0 5px rgba(0,0,0,0.2);}
.cycle-controls {cursor: pointer; padding: 3px 8px;}
.cycle-controls:hover {background-color: #545657;}
.d-34 {width: 34,375%;}
.d-31 {width: 31,25%;}
.d-50 {width: 50%;}


/*footer*/
.roadrace-label {width:25%; max-width:80px; height: auto;}
.jk-credit{width: 36%; max-width: 130px;}

footer {font-size: 0.8rem;}
footer .footer_data {font-size: 0.9rem;}
footer .logos_footer img {width: 65%; max-width: 100px; height: auto;}
footer .footer_data i {margin-right: 3px;}
footer a, footer a:hover {color: #181818;}
footer a:hover {text-decoration: underline;}
@media (max-width:768px) {footer .footer_data span {display: block;}}

.social-icon {display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #451c9c; border-radius: 50%; font-size: 30px; transition: background-color 0.3s ease; text-decoration: none;}
@media (max-width:768px) {.social-icon {width: 40px; height: 40px; font-size: 20px;}}

.social-icon:hover {background-color: #b08bff; text-decoration: none;}
.social-icon i {pointer-events: none;}