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

body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #191919;
}

strong {font-weight: 800;}

@media (max-width: 767.98px) {
    h1, .h1 {font-size: 2rem;}
    h2, .h2 {font-size: 1.6rem;}
    h3, .h3 {font-size: 1.2rem;}
    h4, .h4 {font-size: 1.1rem;}
    h5, .h5 {font-size: 1rem;}
}

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

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding-right: 20px;
    padding-left: 20px;
}

/*COLOR DE TEXTOS*/
.text-azul {color: #406dc5;}
.text-verde {color: #265124;} /*Porvenir*/

.text-thin {font-weight: 300;}

/*COLORES DE FONDO*/
.bg-dark {background-color: #182433!important;}
.bg-light {background-color: #efefef!important;}
.bg-azul {background-color: #406dc5;}
.bg-naranja {background-color: #f98715;}
.bg-black {background-color: #000000;}

/*HORIZONTAL RULERS*/
hr.hr-dotted {
    border: 0;
    border-bottom: dotted 3px #cccccc;
}
hr.hr-dotted-dark {
    border: 0;
    border-bottom: dotted 3px #191919;
}
hr.hr-dotted-light {
    border: 0;
    border-bottom: dotted 3px #ffffff;
}

/*Dinamic border - separador columnas*/
.dinamic-border {border-left: dotted 1px #999; border-top: 0;}
@media (max-width: 767.98px) {
    .dinamic-border {border-left: 0; border-top: dotted 1px #999;}
}

/*REACTIONS*/
.grow-up {transition: all 0.2s linear 0.05s;}
.grow-up:hover { transform: scale(1.1);}



/***************MENU***************/
#main-menu .nav-container {
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    max-width: 1000px;
    padding: 0.8rem 1rem;
    transition: all 0.2s linear 0.05s;
}
#main-menu .navbar-toggler {border-color: #fff;}
#main-menu a.nav-link {color: #666; border-bottom: solid 2px #fff; transition: all 0.2s linear 0.05s;}
#main-menu a.nav-link:hover, #main-menu a.nav-link:focus {color: #5496f7;}

@media (min-width: 992px) {
    #main-menu .navbar-nav .nav-link {padding-right: .6rem; padding-left: .6rem;}
    #main-menu a.nav-link:hover, #main-menu a.nav-link:focus {transform: translateY(-.2rem); border-bottom: solid 2px #cccccc;}
}

/*LOGO NAV*/
.brand-logo {
    position: absolute;
    left: 20px;
    top: -10px;
    width: 30%;
    max-width: 160px;
    z-index: 10;
    transition: all 0.2s linear 0.05s;
}
@media (max-width: 767.98px) {
    .brand-logo {
        position: relative;
        left: 0;
        top: 0;
        width: 90px;
        height: auto;
    }
}


/***********HERO VIDEO FONDO***********/
.header-hero {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
.header-hero {height: 200px;}
}

.header-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.header-hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  height: 100%;
}


/***************HOME***************/
.card-event {
    position: relative;
    overflow: visible;
    border: none;
    transition: box-shadow 0.3s ease;
}

.card-event .card-img {
    display: block;
    width: 100%;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.4s ease;
}

.card-event .card-header, .card-event .card-footer {
    background-color: #406dc5;
    color: #ffffff;
    padding-top: .20rem;
    padding-bottom: .20rem;
}

.card-event .card-footer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    transform: translateY(-20px); /*offset inicial*/
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

.card-event .card-header {border-top-left-radius: .8rem; border-top-right-radius: .8rem;}
.card-event .card-footer {border-bottom-left-radius: .8rem; border-bottom-right-radius: .8rem;}

.card-event .card-header {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;

    transform: translateY(20px); /*offset inicial*/
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* Hover */
.card-event:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/*transformación logo*/
.card-event:hover .card-img {
    transform: scale(1.05);
    filter: grayscale(0%);
    opacity: 1;
}

/* Aparecen el header y el body */
.card-event:hover .card-footer, .card:hover .card-header {
    transform: translateY(0);
    opacity: 1;
}

/*slider*/
#mainslider .carousel-item {
  overflow: hidden;
}

#mainslider .carousel-item img {
  transform: scale(1);
  transition: transform 8s ease;
}

#mainslider .carousel-item.active img {
  transform: scale(1.1);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
  z-index: 2;
}


/*fondo de video*/
.hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  height: 100%;
}

.hero-logo {
    width: 100%;
    max-width: 300px;
}

@media (max-width: 767.98px) {
    .hero-logo {max-width: 200px;}
}



/***************FOOTER***************/
#footer-nav .nav-link {padding: .1rem 1rem;}
footer a, footer a:active, footer a:visited, footer a:hover, footer a:focus {color: #ffffff; transition: all 0.2s linear 0.05s;}
footer a:hover {transform: translateX(2px);}

/*SOCIAL MEDIA*/
.social-media p a {
    background: #f3f3f3;
    border: 1px solid #e6e6e6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 4px;
    transition: all 0.3s ease;
}
.social-media p a span {color: #4d4d4d;}
.social-media p a.facebook:hover {background: #406dc5; border-color: #406dc5;}
.social-media p a.instagram:hover {background: #ff33c2; border-color: #ff33c2;}
.social-media p a.twitter:hover {background: #000000; border-color: #000000;}
.social-media p a.youtube:hover {background: #ff0d0d; border-color: #ff0d0d;}
.social-media p a:hover span {color: #fff;}

/*********BOTON WHATSAPP FLOTANTE***********/
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #20b858;
    transform: scale(1.1);
    color: #fff;
}