/* <style> */
/* ========================================
           CONFIGURACIÓN GLOBAL Y TIPOGRAFÍA
        ======================================== */

body {
    font-family: 'Inter', sans-serif;
    /* Fuente principal: Inter - moderna y legible */
}

/* ========================================
           BARRA DE NAVEGACIÓN PRINCIPAL
        ======================================== */

.navbar {
    padding: 12px 0;
    /* Espaciado vertical del navbar */
    background: white !important;
    /* Fondo blanco forzado */
}


.navbar-brand img {
    height: 80px;
    /* Altura compacta del logo para el navbar */
    width: auto;
    /* Mantener proporción automáticamente */
}

/* BARRA DE BÚSQUEDA */
.search-container {
    position: relative;
    /* Necesario para posicionar el icono absolutamente */
    max-width: 350px;
    /* Limitar ancho máximo */
    flex: 1;
    /* Tomar todo el espacio disponible en flexbox */
    margin: 0 20px;
    /* Separación horizontal del resto de elementos */
}

.search-container input {
    padding-left: 40px;
    /* Espacio para el icono de búsqueda */
    padding-right: 15px;
    /* Espacio interno derecho */
    border-radius: 20px;
    /* Bordes suavemente redondeados */
    border: 1px solid #e0e0e0;
    /* Borde sutil gris claro */
    background-color: #f8f9fa;
    /* Fondo gris muy claro */
    height: 40px;
    /* Altura consistente con otros elementos */
    width: 100%;
    /* Ocupar todo el ancho del contenedor */
}

.search-container .search-icon {
    position: absolute;
    /* Posicionado sobre el input */
    left: 12px;
    /* Distancia desde el borde izquierdo */
    top: 50%;
    /* Centrado verticalmente */
    transform: translateY(-50%);
    /* Ajuste preciso del centrado */
    color: #666;
    /* Color gris medio para el icono */
}

/* BOTONES DE AUTENTICACIÓN */
.btn-register {
    /* background: linear-gradient(135deg, #e91e63, #9c27b0); */
    /* Gradiente corporativo rosa-morado */
    background: linear-gradient(135deg, #CD02C8, #7A17AB);
    /* Gradiente corporativo rosa-morado */
    /* border: none; */
    border: 1px solid #ffffff;
    /* Sin borde para diseño limpio */
    border-radius: 8px;
    /* Bordes suaves y modernos */
    color: white;
    /* Texto blanco para contraste */
    padding: 8px 24px;
    /* Espaciado interno generoso */
    font-weight: 500;
    /* Peso medio para legibilidad */
    font-size: 14px;
    /* Tamaño estándar para botones */
    transition: 900ms;
}

.btn-register:hover {
    /*  background: linear-gradient(135deg, #CD02C8, #7A17AB); */
    /* Gradiente corporativo rosa-morado */
    /* border: none; */
    border: 1px solid #7A17AB;
    background: white;
    /* Sin borde para diseño limpio */
    border-radius: 8px;
    /* Bordes suaves y modernos */
    color: rgb(0, 0, 0);
    /* Texto blanco para contraste */
    padding: 8px 24px;
    /* Espaciado interno generoso */
    font-weight: 500;
    /* Peso medio para legibilidad */
    font-size: 14px;
    /* Tamaño estándar para botones */
    transition: 900ms;
}

.btn-login {
    /* border: 1px solid #ddd; */
    /* Borde sutil para definir el botón */
    border: 1px solid #7A17AB;
    /* Borde sutil para definir el botón */
    border-radius: 8px;
    /* Consistente con btn-register */
    color: #333;
    /* Texto oscuro para contraste con fondo claro */
    padding: 8px 20px;
    /* Ligeramente menos padding que register */
    background: white;
    /* Fondo blanco limpio */
    font-weight: 500;
    /* Peso consistente con register */
    font-size: 14px;
    /* Tamaño consistente */
    text-decoration: none;
    /* Eliminar subrayado de enlace */
    transition: 900ms;
}

.btn-login:hover {
    transition: 900ms;
    background: linear-gradient(135deg, #CD02C8, #7A17AB);
    /* Fondo ligeramente gris al hover */
    color: #fff;
    /* Mantener color del texto */
    text-decoration: none;
    /* Mantener sin subrayado */
}

/* ENLACES DE NAVEGACIÓN */
.navbar-nav .nav-link {
    color: #333 !important;
    /* Texto oscuro para buena legibilidad */
    font-weight: 500;
    /* Peso medio para destacar */
    font-size: 14px;
    /* Tamaño consistente con botones */
    text-decoration: none;
    /* Sin subrayado */
}

.navbar-nav .nav-link:hover {
    color: #9c27b0 !important;
    /* Color corporativo al hover */
}

/* ESTILOS PARA FLECHAS DE NAVEGACIÓN EN SECONDARY NAV */
.nav-arrow {
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    opacity: 0.8;
    padding: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-arrow:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.nav-arrow-left {
    margin-right: 15px;
}

.nav-arrow-right {
    margin-left: 15px;
}

/* CONTENEDOR DE CURSOS CENTRADO */
.courses-container {
    overflow: hidden;
    white-space: nowrap;
}

.course-link {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    padding: 0 15px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.course-link:hover {
    opacity: 0.8;
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* ESTILOS PARA DROPDOWN MULTINIVEL */
.dropdown {
    position: relative;
}

.dropdown-menu {
    /* border: none; */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px 0;
    margin-top: 8px;
    min-width: 220px;
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-item {
    /* padding: 12px 20px; */
    padding: 0.5rem;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 0;
    white-space: nowrap;
}

/* .dropdown-item:hover {
    background: linear-gradient(135deg, #CD02C8, #7A17AB);
    color: white;
} */

/* SUBMENU STYLES - DESKTOP */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-submenu-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 8px;
    display: none;
    min-width: 200px;
    z-index: 1051;
    background-color: white;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px 0;
}

/* Submenú controlado por JavaScript tanto en desktop como mobile */

.dropdown-submenu .dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-submenu .dropdown-item i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* ANIMACIONES PARA EL DROPDOWN */
.dropdown-menu {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    /* display: block !important; */
    display: none;
    overflow-y: auto;
    min-height: max-content;
}
.course-li:hover{
    background-color: #7A17AB;
    color: white;
}
.dropdown.show .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* display: block !important; */
}

/* RESPONSIVE PARA DROPDOWN - TABLETS Y MÓVILES */
@media (max-width: 991px) {
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: none;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-top: 10px;
        width: 100%;
        max-width: none;
    }

    .dropdown-submenu .dropdown-submenu-menu {
        position: static !important;
        display: none;
        margin-left: 20px;
        margin-top: 5px;
        box-shadow: none;
        border-left: 3px solid #CD02C8;
        border-radius: 0;
        background-color: #f8f9fa;
        width: calc(100% - 20px);
    }

    .dropdown-submenu .dropdown-item:hover {
        transform: none;
    }

    .dropdown-item {
        white-space: normal;
        word-wrap: break-word;
    }

    /* Remover hover effects en móvil */
    .dropdown-submenu:hover .dropdown-submenu-menu {
        display: none;
    }

    .dropdown-item:hover {
        transform: none;
    }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 576px) {
    .dropdown-menu {
        font-size: 14px;
        min-width: 180px;
    }

    .dropdown-item {
        padding: 10px 15px;
        font-size: 14px;
    }

    .dropdown-submenu .dropdown-submenu-menu {
        margin-left: 15px;
        font-size: 13px;
    }

    .dropdown-submenu .dropdown-submenu-menu .dropdown-item {
        padding: 8px 12px;
    }
}

/* ========================================
           BARRA DE NAVEGACIÓN SECUNDARIA
        ======================================== */

.secondary-nav {
    background: linear-gradient(135deg, #CD02C8, #7A17AB);
    /* Gradiente corporativo */
    /* background: linear-gradient(135deg, #e91e63, #9c27b0); */
    /* Gradiente corporativo */
    padding: 12px 0;
    /* Espaciado vertical cómodo */
    font-size: 16px;
}

.secondary-nav a {
    color: white;
    /* Texto blanco para contraste con gradiente */
    text-decoration: none;
    /* Enlaces limpios sin subrayado */
    font-weight: 500;
    /* Peso medio para legibilidad */
    padding: 0 15px;
    /* Espaciado horizontal entre enlaces */
    transition: opacity 0.3s;
    /* Transición suave para efectos hover */
    transition: 350ms;
}

.secondary-nav a:hover {
    opacity: 0.8;
    /* Efecto sutil de transparencia al hover */
    color: white;
    /* Mantener color blanco */
    background-color: #80027d;
    transition: 350ms;
}

/* ========================================
           SECCIÓN HERO PRINCIPAL
        ======================================== */

.hero-section {
    /* Gradiente de fondo con colores corporativos */
    background: linear-gradient(135deg, #3f51b5 0%, #9c27b0 50%, #e91e63 100%);
    /* background-image: url('{{ asset("images/fondo.png") }}'); */
    /* Imagen de fondo decorativa */
    background-image: url("../images/fondo.png");
    /* Imagen de fondo decorativa */
    background-size: cover;
    /* Cubrir toda la sección sin distorsión */
    background-position: center;
    /* Centrar la imagen de fondo */
    background-repeat: no-repeat;
    /* Evitar repetición de la imagen */
    min-height: 500px;
    /* Altura mínima para impacto visual */
    position: relative;
    /* Necesario para elementos posicionados absolutamente */
    overflow: hidden;
    /* Ocultar elementos que se desborden */
}

.hero-content {
    position: relative;
    /* Posicionamiento para z-index */
    z-index: 2;
    /* Capa superior a elementos decorativos */
    padding: 80px 0;
    /* Espaciado vertical generoso */
}

.hero-title {
    font-size: 3.5rem;
    /* Tamaño grande para impacto visual */
    font-weight: 700;
    /* Peso extra bold para destacar */
    color: white;
    /* Blanco para contraste con fondo oscuro */
    margin-bottom: 20px;
    /* Separación del subtítulo */
}

.hero-subtitle {
    font-size: 1.3rem;
    /* Tamaño mediano, legible */
    color: white;
    /* Consistente con el título */
    margin-bottom: 30px;
    /* Separación del botón */
    font-weight: 400;
    /* Peso normal para contraste con título */
}

.btn-explore {
    background-image: linear-gradient(to right, #7A17AB 0%, #CD02C8 50%, #7A17AB 100%);
    /* Gradiente corporativo */
    border: none;
    /* Diseño limpio sin borde */
    border-radius: 0px;
    /* Bordes más redondeados que otros botones */
    box-shadow: 0px 0px 25px 3px #00000088;
    /* Bordes más redondeados que otros botones */
    color: white;
    /* Texto blanco para contraste */
    padding: 12px 30px;
    /* Padding generoso para botón principal */
    font-weight: 600;
    /* Peso semi-bold para destacar */
    font-size: 1.1rem;
    /* Ligeramente más grande que botones normales */
    text-decoration: none;
    /* Sin subrayado de enlace */
    display: inline-block;
    /* Permitir transformaciones */
    transition: transform 0.3s;
    /* Animación suave para hover */
    margin-top: 2rem;
    width: 300px;
    max-width: max-content;
}

.btn-explore:hover {
    transform: translateY(-2px);
    /* Efecto de elevación al hover */
    color: white;
    /* Gradiente corporativo*/
    /*background-color: #000; /* Gradiente corporativo */
    animation: bg-explore 3.5s infinite linear;
}

@keyframes bg-explore {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: 200px;
    }
}


/* ELEMENTOS VISUALES DEL HERO */
.student-image {
    max-width: 100%;
    /* Responsive: no exceder contenedor */
    height: auto;
    /* Mantener proporción automáticamente */
    position: relative;
    /* Para z-index */
    z-index: 2;
    /* Sobre elementos decorativos */
    object-fit: cover;
    /* Cubrir toda la sección sin distorsión */
}

.hero-decoration {
    position: absolute;
    /* Posicionamiento libre */
    top: 0;
    /* Alineado arriba */
    right: 0px;
    /* Ligeramente fuera del contenedor */
    max-width: 100px;
    /* Tamaño controlado */
    height: auto;
    /* Mantener proporción */
    z-index: 1;
    /* Detrás de la imagen principal */
}

.logo-hero {
    max-width: 400px;
    /* Limitar ancho del logo */
    margin-bottom: 30px;
    /* Separación del contenido siguiente */
}

/* ELEMENTOS DECORATIVOS CON PSEUDO-ELEMENTOS */
.hero-section::before {
    content: '';
    /* Pseudo-elemento vacío */
    position: absolute;
    /* Cubrir toda la sección */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Patrón SVG inline para textura sutil */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    /* Textura muy sutil */
}

/* ========================================
           SECCIÓN DE PRINCIPALES CURSOS
        ======================================== */

.principales-cursos {
    padding: 80px 0;
    /* Espaciado vertical generoso */
    background-color: #f8f9fa;
    /* background-image: url("../images/ICONO APP_ACADEMIA  SUCRENET.png"); */
    /* Fondo gris muy claro */
    position: relative;
    /* Para pseudo-elemento decorativo */
    /* background-image: url("../images/ICONO APP_ACADEMIA  SUCRENET.png"); */
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        /* Capa blanca semitransparente */
        url("../images/ICONO APP_ACADEMIA  SUCRENET.png") no-repeat center center / cover;
    /* El color de los RGBA determina el tinte de la opacidad (ej: blanco para atenuar, negro para oscurecer) */
    background-size: contain;
    /* Mantener proporción de la imagen */
    background-position: center right;
    /* Posicionar a la derecha */
    background-repeat: no-repeat;
    /* No repetir */
    /* opacity: 0.1; */
    /* Muy sutil, solo decorativo */
    z-index: 1;
    /* Detrás del contenido */
}

/*.principales-cursos::before {
    content: '';
    /* Pseudo-elemento para imagen de fondo */
/*position: absolute;
    /* Cubrir toda la sección */
/* top: 0; */
/* right: 0; */
/* width: 100%; */
/* height: 100%; */
/* background-image: url('{{ asset("images/ICONO APP_ACADEMIA  SUCRENET.png") }}'); */
/* background-image: url("../images/ICONO APP_ACADEMIA  SUCRENET.png");
    background-size: contain; */
/* Mantener proporción de la imagen */
/* background-position: center right; */
/* Posicionar a la derecha */
/* background-repeat: no-repeat; */
/* No repetir */
/* opacity: 0.1; */
/* Muy sutil, solo decorativo */
/* z-index: 1; */
/* Detrás del contenido */
/* } */

/* TÍTULOS DE SECCIÓN */
.section-title {
    font-size: 2.5rem;
    /* Tamaño grande para jerarquía visual */
    font-weight: 700;
    /* Peso bold para destacar */
    color: #333;
    /* Gris oscuro para buena legibilidad */
    text-align: center;
    /* Centrado para simetría */
    margin-bottom: 60px;
    /* Amplia separación del contenido */
}

/* TARJETAS DE CURSOS */
.course-card {
    background: white;
    /* Fondo blanco limpio */
    border-radius: 15px;
    /* Bordes suavemente redondeados */
    padding: 40px 20px;
    /* Padding generoso vertical y horizontal */
    text-align: center;
    /* Contenido centrado */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para profundidad */
    transition: transform 0.3s, box-shadow 0.3s;
    /* Animaciones suaves */
    margin-bottom: 30px;
    /* Separación entre tarjetas */
    border: 1px solid #e9ecef;
    /* Borde muy sutil */
    min-height: 250px;
}

.course-card:hover {
    transform: translateY(-5px);
    /* Efecto de elevación */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Sombra más pronunciada */
}

.course-icon-type {
    width: 100px;
    height: 100px;
    padding-bottom: 10px;
}

.course-icon {
    width: 80px;
    /* Tamaño fijo para consistencia */
    height: 80px;
    margin: 0 auto 20px;
    /* Centrado y separación inferior */
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    /* Gradiente corporativo */
    border-radius: 50%;
    /* Círculo perfecto */
    display: flex;
    /* Flexbox para centrar icono */
    align-items: center;
    /* Centrado vertical */
    justify-content: center;
    /* Centrado horizontal */
    font-size: 2rem;
    /* Tamaño grande para el icono */
    color: white;
    /* Icono blanco para contraste */
    /* padding-bottom: 500px; */
}

.course-title {
    font-size: 1.2rem;
    /* Tamaño apropiado para títulos de tarjeta */
    font-weight: 600;
    /* Semi-bold para destacar */
    color: #333;
    /* Gris oscuro para legibilidad */
    margin: 0; 
    /* Sin márgenes por defecto */
}

.btn-all-categories {
    /* background: linear-gradient(135deg, #CD02C8, #7A17AB); */
    background-image: linear-gradient(to right, #7A17AB 0%, #CD02C8 50%, #7A17AB 100%);
    /* Consistente con otros botones */
    border: none;
    /* Diseño limpio */
    border-radius: 0px;
    /* Bordes redondeados */
    color: white;
    /* Texto blanco */
    padding: 12px 30px;
    /* Padding cómodo */
    font-weight: 600;
    /* Semi-bold */
    text-decoration: none;
    /* Sin subrayado */
    display: inline-block;
    /* Para transformaciones */
    margin-top: 40px;
    /* Separación del contenido superior */
    transition: transform 0.3s;
    /* Animación suave */
}

.btn-all-categories:hover {
    transform: translateY(-2px);
    /* Efecto de elevación */
    color: white;
    /* Mantener color blanco */
    animation: bg-explore 3.5s infinite linear;
}

/* ========================================
           SECCIÓN DE INSTRUCTORES
        ======================================== */

.instructores-section {
    padding: 80px 0;
    /* Espaciado vertical consistente */
    /* Gradiente suave con tonos pastel que complementan la paleta corporativa */
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #fce4ec 100%);
    position: relative;
    /* Para pseudo-elemento */
    overflow: hidden;
    /* Ocultar desbordamientos */
}

.instructores-section::before {
    content: '';
    /* Pseudo-elemento para imagen de fondo */
    position: absolute;
    /* Cubrir toda la sección */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*  background-image: url('{{ asset("images/focus.png") }}'); */
    /* Imagen decorativa */
    background-image: url("../images/focus.png");
    /* Imagen decorativa */
    background-size: cover;
    /* Cubrir toda la sección */
    background-position: center;
    /* Centrar imagen */
    background-repeat: no-repeat;
    /* No repetir */
    opacity: 0.3;
    /* Transparencia para no interferir con el contenido */
    z-index: 1;
    /* Detrás del contenido */
}

/* TARJETAS DE INSTRUCTORES */
.instructor-card {
    background: white;
    /* Fondo blanco limpio */
    border-radius: 20px;
    /* Bordes más redondeados que course-card */
    padding: 30px 20px;
    /* Padding vertical generoso */
    text-align: center;
    /* Contenido centrado */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    /* Sombra más pronunciada */
    transition: transform 0.3s, box-shadow 0.3s;
    /* Animaciones suaves */
    margin-bottom: 30px;
    /* Separación entre tarjetas */
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* Borde semi-transparente */
    position: relative;
    /* Para z-index */
    z-index: 2;
    /* Sobre el fondo decorativo */
    min-height: 250px;
}

.instructor-card:hover {
    transform: translateY(-8px);
    /* Elevación más pronunciada que course-card */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    /* Sombra más dramática */
}

.instructor-photo {
    width: 100px;
    /* Tamaño fijo para consistencia */
    height: 100px;
    border-radius: 50%;
    /* Círculo perfecto */
    margin: 0 auto 20px;
    /* Centrado y separación inferior */
    overflow: hidden;
    /* Ocultar partes de imagen que excedan el círculo */
    border: 4px solid white;
    /* Borde blanco para destacar */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

.instructor-photo img {
    width: 100%;
    /* Llenar contenedor */
    height: 100%;
    object-fit: cover;
    /* Mantener proporción y llenar círculo */
}

.instructor-name {
    font-size: 1.3rem;
    /* Ligeramente más grande que course-title */
    font-weight: 600;
    /* Semi-bold */
    color: #333;
    /* Gris oscuro para legibilidad */
    margin: 0;
    /* Sin márgenes por defecto */
}

/* ========================================
           SECCIÓN DE PREGUNTAS FRECUENTES (FAQ)
        ======================================== */

.faq-section {
    padding: 80px 0;
    /* Espaciado vertical consistente */
    /* Gradiente gris neutro para sección informativa */
    background-color: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: relative;
    overflow: hidden;
    /* Ocultar desbordamientos */
}

.faq-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-image: url('http://products.test/images/icono_aprende de expertos.png'); */
    background-image: url("../images/icono_aprende de expertos.png");
    background-size: auto 45vw;
    background-position: bottom -15vw left -25vw;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: 1;

}

.faq-container {
    position: relative;
    /* Para z-index */
    z-index: 2;
    /* Sobre el fondo decorativo */
}

.faq-accordion {
    max-width: 800px;
    /* Limitar ancho para legibilidad */
    margin: 0 auto;
    /* Centrar horizontalmente */
    padding: 2rem;
    background: #ffffff88;
    border-radius: 1rem;
}

/* ELEMENTOS DEL ACORDEÓN FAQ */
.faq-item {
    background: white;
    /* Fondo blanco para contraste */
    border-radius: 15px;
    /* Bordes redondeados */
    margin-bottom: 15px;
    /* Separación entre preguntas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    overflow: hidden;
    /* Para bordes redondeados limpios */
    border: 1px solid #e9ecef;
    /* Borde muy sutil */
}

.faq-header {
    padding: 20px 25px;
    /* Padding generoso para área de click */
    background: white;
    /* Fondo blanco */
    border: none;
    /* Sin borde de botón */
    width: 100%;
    /* Ancho completo */
    text-align: left;
    /* Alineación izquierda */
    font-size: 1.2rem;
    /* Tamaño legible */
    font-weight: 600;
    /* Semi-bold */
    color: #333;
    /* Gris oscuro */
    cursor: pointer;
    /* Indicar interactividad */
    display: flex;
    /* Flexbox para layout */
    justify-content: space-between;
    /* Separar texto e icono */
    align-items: center;
    /* Centrado vertical */
    transition: background-color 0.3s;
    /* Transición suave */
}

.faq-header:hover {
    background-color: #f8f9fa;
    /* Fondo gris claro al hover */
}

.faq-header.active {
    background-color: #f8f9fa;
    /* Mismo fondo cuando está activo */
}

.faq-icon {
    font-size: 1rem;
    /* Tamaño del icono */
    transition: transform 0.3s;
    /* Animación de rotación */
}

.faq-header.active .faq-icon {
    transform: rotate(180deg);
    /* Rotar cuando está activo */
}

.faq-content {
    padding: 0 25px 25px;
    /* Padding consistente con header */
    color: #666;
    /* Gris medio para texto secundario */
    line-height: 1.6;
    /* Espaciado de línea para legibilidad */
    display: none;
    /* Oculto por defecto */
}

.faq-content.show {
    display: block;
    /* Mostrar cuando tiene clase 'show' */
}

/* ========================================
           SECCIÓN FOOTER
        ======================================== */

.footer-section {
    /* background: linear-gradient(135deg,rgba(241, 224, 241, 0.1) , rgba(201, 126, 238, 0.1) ); */
    /* background-image: linear-gradient(to bottom right, rgba(181, 148, 243, 0.5), rgba(219, 200, 240, 0.1)); */
    /* background: white; */
    /* Fondo blanco limpio */
    padding: 60px 0 40px;
    /* Padding vertical generoso */
    border-top: 1px solid #e9ecef;
    /* Separador sutil del contenido */
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(112, 97, 167, 0.5)),
        /* Capa blanca semitransparente */
        url("../images/icono_certificado.png") no-repeat center center / cover;
    /* El color de los RGBA determina el tinte de la opacidad (ej: blanco para atenuar, negro para oscurecer) */
    background-size: contain;
    /* Mantener proporción de la imagen */
    background-position: center right;
    /* Posicionar a la derecha */
    background-repeat: no-repeat;
    /* No repetir */
    /* opacity: 0.1; */
    /* Muy sutil, solo decorativo */
    z-index: 1;
    /* Detrás del contenido */
}

.footer-content {
    background: white;
    /* Fondo blanco */
    border-radius: 20px;
    /* Bordes redondeados */
    padding: 40px;
    /* Padding generoso */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Sombra para profundidad */
    margin-bottom: 40px;
    /* Separación del contenido inferior */
    opacity: 0.8;
}

.footer-logo {
    max-width: 120px;
    /* Tamaño compacto para footer */
    margin-bottom: 20px;
    /* Separación del texto */
}

.footer-description {
    color: #666;
    /* Gris medio para texto descriptivo */
    line-height: 1.6;
    /* Espaciado de línea cómodo */
    margin-bottom: 30px;
    /* Separación del contenido siguiente */
}

.footer-column h5 {
    font-weight: 600;
    /* Semi-bold para títulos de columna */
    color: #333;
    /* Gris oscuro */
    margin-bottom: 20px;
    /* Separación de la lista */
    font-size: 1.2rem;
    /* Tamaño apropiado para subtítulos */
}

.footer-column ul {
    list-style: none;
    /* Sin viñetas */
    padding: 0;
    /* Sin padding por defecto */
}

.footer-column ul li {
    margin-bottom: 10px;
    /* Separación entre elementos de lista */
}

.footer-column ul li a {
    color: #666;
    /* Gris medio para enlaces */
    text-decoration: none;
    /* Sin subrayado */
    transition: color 0.3s;
    /* Transición suave de color */
}

.footer-column ul li a:hover {
    color: #9c27b0;
    /* Color corporativo al hover */
}

.government-badge {
    text-align: center;
    /* Centrar contenido */
    margin-top: 30px;
    /* Separación del contenido superior */
}

.government-badge img {
    max-width: 300px;
    /* Limitar tamaño máximo */
    height: auto;
    /* Mantener proporción */
}

.government-text {
    font-weight: 600;
    /* Semi-bold */
    color: #333;
    /* Gris oscuro */
    margin-bottom: 15px;
    /* Separación de la imagen */
}

/* ========================================
           MEJORAS RESPONSIVE PARA NAVBAR
        ======================================== */

.navbar-toggler {
    border: none;
    /* Sin borde para diseño limpio */
    padding: 4px 8px;
    /* Padding mínimo */
}

.navbar-toggler:focus {
    box-shadow: none;
    /* Eliminar outline por defecto */
}

.navbar-collapse {
    margin-top: 15px;
    /* Separación en vista móvil */
}

/* LAYOUT DESKTOP Y MOBILE */
.desktop-nav {
    display: flex;
}

.mobile-nav {
    display: none;
    flex-direction: column;
    width: 100%;
}

/* ESTILOS PARA MOBILE NAV */
.search-container-mobile {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    order: 1;
}

.search-container-mobile input {
    padding-left: 40px;
    padding-right: 15px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    height: 40px;
    width: 100%;
}

.search-container-mobile .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.navbar-nav-mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
    order: 2;
}

.navbar-nav-mobile .nav-link {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.auth-buttons-mobile {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    order: 3;
}

.auth-buttons-mobile .btn {
    flex: 1;
    text-align: center;
    max-width: 150px;
}

/* ========================================
            MEDIA QUERIES PARA DISEÑO RESPONSIVE
            ======================================== */

/* Pantallas medianas (hasta 1200px) */
@media (max-width: 1200px) {
    .secondary-nav a {
        font-size: 14px;
    }
    .course-card {
        min-height: 250px;
    }
    .course-title {
        font-size: 1rem;
    }
}


/* Tablets y pantallas medianas (hasta 991px) */
@media (max-width: 991px) {

    /* Ocultar layout desktop y mostrar mobile */
    .desktop-nav {
        display: none !important;
    }

    .mobile-nav {
        display: flex !important;
    }

    .secondary-nav {
        display: none;
        /* Ocultar navegación secundaria */
    }

    .student-image {
        display: none;
    }

    /* Ajustes específicos para dropdown mobile */
    .navbar-nav-mobile .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: none;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-top: 10px;
        width: 100%;
        max-width: none;
    }
    .course-card {
        min-height: 150px;
    }
    .course-title {
        font-size: 1rem;
    }
}


/* Móviles y tablets pequeñas (hasta 768px) */
@media (max-width: 768px) {
    .btn-login {
        font-size: 12px;
        padding: 10px 10px;
    }

    .btn-register {
        font-size: 12px;
        padding: 10px 10px;
    }

    .btn-login:hover {
        font-size: 12px;
        padding: 10px 10px;
    }

    .btn-register:hover {
        font-size: 12px;
        padding: 10px 10px;
    }

    .search-container {
        max-width: 100%;
        /* Ancho completo */
    }

    .hero-title {
        font-size: 2.5rem;
        /* Reducir tamaño para móviles */
    }

    .hero-subtitle {
        font-size: 1.1rem;
        /* Ajustar subtítulo */
    }

    .section-title {
        font-size: 2rem;
        /* Reducir títulos de sección */
    }

    .course-card,
    .instructor-card {
        margin-bottom: 20px;
        /* Menos separación entre tarjetas */
        /* min-height: 250px; */
    }

    /*.secondary-nav {
                display: none; /* Ocultar navegación secundaria 
            /*}*/

    .faq-accordion {
        padding: 0 15px;
        /* Padding lateral para móviles */
    }

    .footer-content {
        padding: 30px 20px;
        /* Reducir padding del footer */
    }
}

/* Móviles pequeños (hasta 576px) */
@media (max-width: 576px) {
    .government-badge img {
        max-width: -webkit-fill-available;
    }
    
    .navbar-nav .nav-link {
        font-size: 10px;
        /* Tamaño consistente con botones */

    }

    .btn-login {
        font-size: 10px;
        padding: 4px 4px;
    }

    .btn-login:hover {
        font-size: 10px;
        padding: 4px 4px;
    }

    .btn-register {
        font-size: 10px;
        padding: 4px 4px;
    }

    .btn-register:hover {
        font-size: 10px;
        padding: 4px 4px;
    }

    .hero-title {
        font-size: 2rem;
        /* Título más pequeño para pantallas muy pequeñas */
    }

    .hero-subtitle {
        font-size: 1rem;
        /* Subtítulo más compacto */
    }

    .btn-explore,
    .btn-all-categories {
        padding: 10px 20px;
        /* Botones más compactos */
        font-size: 1rem;
        /* Texto más pequeño */
    }

    .course-icon {
        width: 60px;
        /* Iconos más pequeños */
        height: 60px;
        font-size: 1.5rem;
        /* Iconos internos más pequeños */
    }

    .instructor-photo {
        width: 80px;
        /* Fotos más pequeñas */
        height: 80px;
    }

    .faq-header {
        font-size: 1rem;
        /* Texto más pequeño en FAQ */
        padding: 15px 20px;
        /* Menos padding */
    }

    .faq-content {
        padding: 0 20px 20px;
        /* Ajustar padding del contenido */
    }

    .hero-decoration {
        display: none;
        /* Ocultar decoraciones en pantallas pequeñas */
    }

    /* Ajustar imágenes de fondo decorativas para móviles */
    .principales-cursos::before {
        background-size: 60%;
        /* Imagen más pequeña */
        background-position: bottom right;
        /* Reposicionar */
    }

    .instructores-section::before {
        background-size: cover;
        /* Mantener cobertura */
        opacity: 0.2;
        /* Más sutil en móviles */
    }

    .faq-section::before {
        background-size: 80%;
        /* Imagen más pequeña */
        background-position: bottom left;
        /* Reposicionar */
    }
}


/* ========================================
           FIN DE ESTILOS PERSONALIZADOS
        ======================================== */
/* </style> */





/*ESTILOS PARA EL MENU DEL LOS CURSOS Y SUBMENU*/
/* Estilos para dropdown desktop */
.dropdown-menu {
    z-index: 1050 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

/* Estilos específicos para desktop dropend */
.desktop-nav .btn-group.dropend {
    position: relative;
}

.desktop-nav .btn-group.dropend .dropdown-menu {
    position: absolute;
    top: 0 !important;
    left: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    display: none;
    min-width: 200px;
    z-index: 1051;
    transform: translateY(0);
}

.desktop-nav .btn-group.dropend:hover .dropdown-menu {
    display: block !important;
}

/* Asegurar que cada elemento li mantenga su posición relativa */
.desktop-nav .dropdown-menu > li.btn-group.dropend {
    position: relative;
}

/* Asegurar que el contenedor principal tenga overflow visible */
.desktop-nav .dropdown-menu.overflow-visible {
    overflow: visible !important;
}

/* Estilos para mobile */
@media (max-width: 991px) {
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        display: none !important;
        box-shadow: none;
        border: none;
        padding-left: 20px;
        background-color: #f8f9fa;
    }
    
    .dropdown-submenu .dropdown-menu.show {
        display: block !important;
    }
}

/* Indicador de submenú */
.dropdown-submenu > a::after {
    content: "▶";
    float: right;
    margin-top: 2px;
}

@media (max-width: 991px) {
    .dropdown-submenu > a::after {
        content: "▼";
    }
    
    .dropdown-submenu.open > a::after {
        content: "▲";
    }
}

.arrow a {
    min-width: max-content;
}






/* Estilos generales del menú */
.main-menu {
    font-family: Arial, sans-serif;
  }
  
  .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .main-menu > ul {
    display: flex;
  }
  
  .main-menu li {
    position: relative;
  }
  
  .main-menu a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
  }
  
  /* Estilos de los submenús */
  .submenu, .sub-submenu {
    /* display: none; */ /* Se oculta por defecto */
    border-radius: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
  }
  
  /* Posición del sub-submenú en cascada */
  .sub-submenu {
    top: 0;
    left: 100%;
  }
  
  /* Clases para mostrar los menús con JavaScript */
  .submenu.active, .sub-submenu.active {
    display: block;
  }
  
  /* Estilos de los enlaces */
  .submenu a, .sub-submenu a {
    padding: 10px 15px;
    /* border-bottom: 1px solid #eee; */
  }
  
  .submenu a:hover, .sub-submenu a:hover {
    background-color: #f1f1f1;
  }
  
  /* Estilos de los indicadores de submenú */
  .submenu-toggle:after {
    /* content: '▶'; */
    font-size: 10px;
    margin-left: 10px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
  }
  
  .submenu-toggle.active:after {
    transform: rotate(90deg);
  }

/* ========================================
           MENÚ DE USUARIO AUTENTICADO - CSS PERSONALIZADO
        ======================================== */

/* Contenedor principal del dropdown */
.user-dropdown-container {
    position: relative;
    display: inline-block;
}

/* Botón toggle del usuario */
.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid #dee2e6;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 14px;
    color: #495057;
    text-decoration: none;
    outline: none;
}

.user-dropdown-toggle:hover {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-color: #007bff;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Avatar del usuario */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #007bff;
    transition: all 0.3s ease;
}

.user-dropdown-toggle:hover .user-avatar {
    border-color: white;
    transform: scale(1.1);
}

/* Nombre del usuario */
.user-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Flecha del dropdown */
.dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.user-dropdown-toggle.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Menú desplegable */
.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e9ecef;
    min-width: 280px;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.user-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header con información del usuario */
.user-info-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    padding: 20px;
    color: white;
}

.user-info-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.user-info-text {
    flex: 1;
}

.user-info-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: white;
}

.user-info-email {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

/* Separador */
.dropdown-separator {
    height: 1px;
    background: #e9ecef;
    margin: 8px 0;
}

/* Enlaces del menú */
.dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #495057;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.dropdown-link:hover {
    background: rgba(0, 123, 255, 0.08);
    color: #CD02C8;
    transform: translateX(5px);
}

.dropdown-link i {
    width: 18px;
    font-size: 14px;
    color: #6c757d;
    transition: color 0.3s ease;
}

.dropdown-link:hover i {
    color: #7A17AB;
}

/* Enlace de cerrar sesión */
.dropdown-link.logout-link {
    color: #dc3545;
    border-top: 1px solid #e9ecef;
    margin-top: 8px;
}

.dropdown-link.logout-link:hover {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.dropdown-link.logout-link:hover i {
    color: #dc3545;
}

/* Estilos para móvil */
.user-dropdown-container.mobile {
    width: 100%;
}

.user-dropdown-toggle.mobile {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    margin: 10px 0;
}

.user-avatar.mobile {
    width: 28px;
    height: 28px;
}

.user-name.mobile {
    max-width: 150px;
}

.user-dropdown-menu.mobile {
    left: 0;
    right: 0;
    min-width: auto;
    width: 100%;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .user-dropdown-menu {
        min-width: 260px;
        max-width: 90vw;
    }
    
    .user-name {
        display: none;
    }
    
    .user-dropdown-toggle {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .user-dropdown-menu {
        left: -100px;
        min-width: 240px;
    }
    
    .user-info-header {
        padding: 15px;
    }
    
    .user-info-name {
        font-size: 15px;
    }
    
    .user-info-email {
        font-size: 12px;
    }
}

/* ========================================
           FIN DE ESTILOS PERSONALIZADOS
        ======================================== */
/* </style> */



/*ESTILOS PARA EL MENU DEL LOS CURSOS Y SUBMENU*/
/* Estilos para dropdown desktop */
.dropdown-menu {
    z-index: 1050 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

/* Estilos específicos para desktop dropend */
.desktop-nav .btn-group.dropend {
    position: relative;
}

.desktop-nav .btn-group.dropend .dropdown-menu {
    position: absolute;
    top: 0 !important;
    left: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    display: none;
    min-width: 200px;
    z-index: 1051;
    transform: translateY(0);
}

.desktop-nav .btn-group.dropend:hover .dropdown-menu {
    display: block !important;
}

/* Asegurar que cada elemento li mantenga su posición relativa */
.desktop-nav .dropdown-menu > li.btn-group.dropend {
    position: relative;
}

/* Asegurar que el contenedor principal tenga overflow visible */
.desktop-nav .dropdown-menu.overflow-visible {
    overflow: visible !important;
}

/* Estilos para mobile */
@media (max-width: 991px) {
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        display: none !important;
        box-shadow: none;
        border: none;
        padding-left: 20px;
        background-color: #f8f9fa;
    }
    
    .dropdown-submenu .dropdown-menu.show {
        display: block !important;
    }
}

/* Indicador de submenú */
.dropdown-submenu > a::after {
    content: "▶";
    float: right;
    margin-top: 2px;
}

@media (max-width: 991px) {
    .dropdown-submenu > a::after {
        content: "▼";
    }
    
    .dropdown-submenu.open > a::after {
        content: "▲";
    }
}

.arrow a {
    min-width: max-content;
}




/* Estilos generales del menú */
.main-menu {
    font-family: Arial, sans-serif;
  }
  
  .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .main-menu > ul {
    display: flex;
  }
  
  .main-menu li {
    position: relative;
  }
  
  .main-menu a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
  }
  
  /* Estilos de los submenús */
  .submenu, .sub-submenu {
    display: none; /* Se oculta por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
  }
  
  /* Posición del sub-submenú en cascada */
  .sub-submenu {
    top: 0;
    left: 100%;
  }
  
  /* Clases para mostrar los menús con JavaScript */
  .submenu.active, .sub-submenu.active {
    display: block;
  }
  
  /* Estilos de los enlaces */
  .submenu a, .sub-submenu a {
    padding: 10px 15px;
    /* border-bottom: 1px solid #eee; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* .submenu a:hover, .sub-submenu a:hover {
    background-color: #f1f1f1;
  } */
  
  .submenu a:hover, .sub-submenu a:hover {
    background: rgba(0, 123, 255, 0.08);
    color: #CD02C8;
    transform: translateX(5px);
}
  /* Estilos de los indicadores de submenú */
  /* .submenu-toggle:after {
   
    font-size: 10px;
    margin-left: 10px;
    float: right;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
  } */
  
  .submenu-toggle.active:after {
    transform: rotate(90deg);
  }
  
  i-white {
    color: #333;
  }

  .especial {
    /* text-decoration: underline; */
    background-color: #d0f3fd;
    border-radius: 0 0px 8px 8px;
    text-align: center;
  }



  .search-results-card {
    position: absolute; /* Permite que el elemento "flote" */
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background-color: #f8f9fa; /* Un color de fondo muy claro para la "carta" */
    border: 1px solid #e0e0e0; /* Un borde sutil */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Una sombra suave para un efecto 3D */
    z-index: 1000;
    display: none;
    top: 110%; /* Se posiciona justo debajo del input */

}

@media (min-width: 992px) {
    .search-results-card {
        width: calc(100% - 40px);
        margin: 0 20px;
         /* Opcional: ajusta al ancho del contenedor padre */
    }
}

.search-results-card ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margen por defecto */
}

.search-results-card li {
    padding: 12px 15px; /* Aumenta el padding para que sea más fácil hacer clic */
    font-family: Arial, sans-serif; /* Usa una fuente similar a la del ejemplo */
    color: #495057; /* Un color de texto gris oscuro */
    cursor: pointer;
    display: flex; /* Para alinear el texto y el ícono */
    justify-content: space-between; /* Mueve el ícono al final */
    align-items: center; /* Centra verticalmente los elementos */
    border-bottom: 1px solid #f0f0f0; /* Una línea divisoria sutil */
}

.search-results-card li:last-child {
    border-bottom: none; /* Elimina la línea divisoria del último elemento */
}

.search-results-card li:hover {
    background-color: #e9f0fe; /* El color azul claro al pasar el mouse, similar al de la imagen */
    color: #007bff; /* El color de texto azul al pasar el mouse */
}