/* Navbar */
.dark #mainMenu nav > ul > li > a, #mainMenu.dark nav > ul > li > a {
    color: #000000;
}

.dark #mainMenu nav > ul > li:hover > a {
    color: #fff;
}
/*==============================
/ Button styles
/*==============================*/
/* Botón dark */
.btn-dark {
    color: #fff !important;
    background-color: #212529 !important;
    border: 1px solid #212529 !important;
}

/* Hover */
.btn-dark:hover {
    color: #fff !important;
    background-color: #424649 !important;
    border-color: #373b3e !important;
}

/* Focus */
.btn-dark:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5) !important;
}

/* Active */
.btn-dark:active {
    color: #fff !important;
    background-color: #4d5154 !important;
    border-color: #373b3e !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

/* Botón estilo outline dark sin Bootstrap */
.btn-outline-dark {
    color: #212529 !important;
    background-color: transparent !important;
    border: 1px solid #212529 !important;
}

/* Hover */
.btn-outline-dark:hover {
    color: #fff !important;
    background-color: #212529 !important;
    border-color: #212529 !important;
}

/* Focus */
.btn-outline-dark:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25) !important;
}

/* Active */
.btn-outline-dark:active {
    color: #fff !important;
    background-color: #212529 !important;
    border-color: #212529 !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

/* Tipografía responsiva para heros */
#hero-title {
  font-size: clamp(2rem, 6vw + 0.75rem, 5rem) !important;
}

/* Subtítulo más pequeño, también fluido */
#hero-subtitle {
  font-size: clamp(1rem, 3vw + 0.25rem, 2rem) !important;
}

/* Ajustes para pantallas muy pequeñas si quieres forzar tamaños */
@media (max-width: 380px) {
  #hero-title { font-size: 1.8rem !important; }
  #hero-subtitle { font-size: 0.95rem !important; }
}

/* Opcional: centrar texto en pantallas pequeñas */
@media (max-width: 768px) {
  #hero-title { margin-top: 0.5rem !important; }
}