@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');

html {
    overflow: auto;
    scrollbar-width: none;
}

body {
    font-family: 'Maven Pro', sans-serif;
    overflow-x: hidden;
}

#header {
    transition: transform 0.3s ease;
}

.img-blanco-negro {
    filter: grayscale(100%);
}

.filter-azul {
    filter: hue-rotate(67deg) saturate(500%) brightness(100%);
}

.logo_create, .logo_create_footer {
    font-size: 2.5em;
    letter-spacing: -4.5px;
    line-height: inherit;
    text-shadow: 0 2px 1px rgb(0 0 0 / 40%), 0 4px 2px rgb(0 0 0 / 10%), 0 6px 3px rgb(0 0 0 / 10%);
    color: #377dff;

}

.logo_create_footer {
    font-size: 3.75em
}

.bg_img_card_nexus {
    background-repeat: no-repeat;
    background-position: center;
}

.logo-slider {
    overflow: hidden;
    position: relative;
    height: 100px;
}

.logo-track {
    display: flex;
    width: calc(250px * 10);
    /* ajusta según el número de logos */
    animation: scroll 30s linear infinite;
}

.logo-item {
    flex: 0 0 auto;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
}

.logo-item img {
    max-height: 400px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.bg-pagos {
    width: 100%;
    height: 80px;
}

/* Evitamos problemas con la pagina de inscripcion */
/* .card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
} */

.boton-opacity{
    background-color: rgb(238 238 238 / 75%);
}
/*
==================================================================
  CUSTOM NAVIGATION & MEGA MENU STYLES
==================================================================
*/

/* ===== 1. MAIN NAVIGATION ACTIVE/HOVER STYLES ===== */

/* A. For Dark Header (white underline/text) */
.border_bottom_whithe.active,
.border_bottom_whithe:hover {
    border-bottom: 1px solid #fff;
}

.border_bottom_whithe.active a {
    color: #fff !important;
}

/* B. For Light Header (blue underline/text) */
.border_bottom_dark.active,
.border_bottom_dark:hover {
    border-bottom: 1px solid #377dff;
}

.border_bottom_dark.active a.nav-link {
    color: #377dff !important;
}


/* ===== 2. SCROLLED HEADER OVERRIDE STYLES ===== */
/* Fixes invisible links when the dark header becomes white on scroll. */

/* Fix for ACTIVE link text and underline */
.border_bottom_whithe.active a.nav-link {
    color: #fff !important;
}
#header.bg-white .border_bottom_whithe.active {
    border-bottom-color: #377dff;
}

/* This is the missing rule that turns the active text blue on scroll */
#header.bg-white .border_bottom_whithe.active a.nav-link {
    color: #377dff !important;
}

/* Fix for HOVER underline */
#header.bg-white .border_bottom_whithe:hover {
    border-bottom: 1px solid #377dff;
}


/* ===== 3. "SERVICIOS" MEGA MENU STYLES ===== */

/* A. General Hover & Transition for Cards */
.navbar-dropdown-menu-promo-link {
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out;
}
.navbar-dropdown-menu-promo-link:hover {
    background-color: #f5f5f5; /* Light grey hover */
}

/* B. Active Card State (blue highlight with border) */
.navbar-dropdown-menu-promo-link.active-card {
    background-color: #f0f7ff !important;
    border: 1px solid rgba(55, 125, 255, 0.5) !important;
}
.navbar-dropdown-menu-promo-link.active-card:hover {
    background-color: #e6f2ff !important; /* Slightly darker blue on hover */
}

/* C. Disabled Card State */
.navbar-dropdown-menu-promo-link.disabled-link {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/*
  --- FIX FOR MOBILE MENU LOGIN BUTTON ---
  This rule applies only on screen sizes smaller than the 'lg' breakpoint (992px).
*/
@media (max-width: 991.98px) {
  /* Targets the login button inside the collapsed mobile menu */
  #navbarNavDropdown .boton-opacity {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    width: 100%;
    text-align: center;
  }
}

/*
  --- FIX FOR MOBILE BUTTON ON LIGHT HEADER ---
  This adds blue text and border to the button in the white mobile menu.
*/
@media (max-width: 991.98px) {
  #header.navbar-light #navbarNavDropdown .boton-opacity {
    border-color: #377dff !important;
    color: #377dff !important;
  }
}

/*
  --- HOVER EFFECT FOR MOBILE MENU LOGIN BUTTON ---
*/
@media (max-width: 991.98px) {
  /*
   * Hover effect for the button in the WHITE mobile menu
   * (Fills with blue, text becomes white)
  */
  #header.navbar-light #navbarNavDropdown .boton-opacity:hover {
    background-color: #377dff !important;
    color: #fff !important;
  }

  /*
   * Hover effect for the button in the DARK BLUE mobile menu
   * (Fills with white, text becomes blue)
  */
  #header.navbar-dark #navbarNavDropdown .boton-opacity:hover {
    background-color: #fff !important;
    color: #377dff !important;
  }

  /* Add a smooth transition to both buttons */
  #navbarNavDropdown .boton-opacity {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  }
}

/*
  --- FIX FOR NEXUS CARD TEXT COLOR ---
  Overrides the default white text for the Nexus card in the features section.
*/
.card.card-transition.bg-img-hero h4,
.card.card-transition.bg-img-hero p {
    color: #77838f !important; /* A nice, readable grey color */
}

.card.card-transition.bg-img-hero .card-link {
    color: #377dff !important; /* Your primary blue color */
}

/*
  --- FIX FOR SCROLLED HEADER ® SYMBOL COLOR ---
  This forces the (R) symbol to also turn blue.
*/
#header.bg-white .navbar-brand sub {
    color: #377dff !important;
}
/*
  --- DEFINITIVE FIX FOR INVISIBLE SCROLLED LINKS ---
*/
#header.bg-white .border_bottom_whithe .nav-link {
    color: #377dff !important;
}
/* FIX: Main logo text color on scrolled header */
#header.bg-white .logo_create {
  color: #377dff !important; /* Added !important to override .text-white */
  text-shadow: none;
}

/* --- Global fix for focus outlines, from original site --- */
a:active,
a:focus,
button,
button:active,
button:focus {
    outline: none !important;
}

  /* This adds a dark gradient overlay to each hero slider image */
  .js-swiper-blog-journal-hero .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* You can adjust the opacity here. 0.5 is 50%, 0.6 is 60%, etc. */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    z-index: 1; /* Places the overlay above the image */
  }

  /* This ensures your text and buttons stay on top of the new overlay */
  .js-swiper-blog-journal-hero .swiper-slide .container {
    position: relative; 
    z-index: 2;
  }