/*
 * Estos estilos se cargan de forma asíncrona después del renderizado inicial.
 * Los estilos críticos (fuentes, body, gradient-background) ahora están en línea en index.html.
 */

/* Sombra para inputs */
.form-input-shadow {
    box-shadow: 0px 0px 31px rgba(148, 211, 200, 0.6);
}

/* Efecto hover para "Conoce más" */
.conoce-mas-link:hover {
    text-decoration: underline;
    text-decoration-color: white;
    text-underline-offset: 0.2em;
}

/* Estilo del encabezado */
header {
    background-color: white;
}

/* Margen superior en el menú para pantallas pequeñas */
@media (max-width: 767px) {
    .servicios-content {
        margin-top: 0.5rem;
    }

    /* Estilos específicos para enlaces de navegación en móvil */
    /* Color negro por defecto en móvil */
    .nav-link {
        color: #000000;
        /* Color negro para todos los enlaces de navegación en móvil */
        font-weight: 400;
        /* Peso de fuente normal en móvil */
    }

    /* El enlace activo debe ser en negrita en móvil y tener su color específico */
    .nav-link.active-link {
        font-weight: 600;
    }

    /* Efecto hover en móvil: aplicar el color específico */
    .nav-link-inicio:hover {
        color: #005D59;
    }

    .nav-link-nosotros:hover {
        color: #46ADA2;
    }

    .nav-link-servicios:hover {
        color: #ACC64A;
    }

    .nav-link-contacto:hover {
        color: #94D3C8;
    }
}

/* Colores específicos para enlaces de navegación en estados activo y hover (escritorio y móvil activo/hover) */
.nav-link-inicio.active-link,
.nav-link-inicio:hover {
    color: #0097A7;
    /* Color para Inicio */
}

.nav-link-nosotros.active-link,
.nav-link-nosotros:hover {
    color: #1CA678;
    /* Color para Nosotros */
}

.nav-link-servicios.active-link,
.nav-link-servicios:hover {
    color: #38B449;
    /* Color para Servicios */
}

.nav-link-contacto.active-link,
.nav-link-contacto:hover {
    color: #0097A7;
    /* Color para Contacto */
}

/* Mantener estilos generales para enlaces activos (negrita) */
.nav-link.active-link {
    font-weight: 600;
    /* Mantener negrita para el enlace activo */
}

/* Mantener sin subrayado para hover si no está activo (solo escritorio, móvil se maneja arriba) */
@media (min-width: 768px) {
    .nav-link:not(.active-link):hover {
        text-decoration: none;
    }
}

/* Ajustes específicos para escritorio (min-width: 768px) */
@media (min-width: 768px) {

    /* Restablecer el color por defecto para enlaces no activos en escritorio */
    .nav-link {
        /* Aplicar a todos los enlaces de navegación, luego activo/hover anulará */
        color: #4b5563;
        /* text-gray-800 */
        font-weight: 500;
        /* font-medium */
    }
}