body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}

header {
    background: #007bff;
    color: white;
}

/* Ajuste del menú futurista */
/* Fondo del menú */
.custom-navbar {
    background: linear-gradient(135deg, #ffffff, #e6f7ff); /* Fondo claro */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombras suaves */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Línea sutil */
    font-family: 'Poppins', sans-serif; /* Mantén la fuente moderna */
}
	

/* Logo y título */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #333333; /* Color oscuro para texto */
    text-shadow: none; /* Elimina sombras en texto */
}

.navbar-brand:hover {
    color: #00d4ff;
}

/* Botones del menú */
.nav-item {
    display: flex; /* Usa flexbox para alineación */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}


.custom-link {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #333333;
    text-align: center;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 10px;
    background: rgba(230, 247, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
    white-space: nowrap; /* Evita que el texto se corte en varias líneas */
    width: auto; /* Ajusta automáticamente el ancho al contenido */
    height: auto; /* Ajusta la altura automáticamente */
}



/* Hover y foco en los botones */
.custom-link:hover, .custom-link:focus {
    color: #ffffff; /* Texto blanco para resaltar */
    background: linear-gradient(135deg, #99ccff, #66b3ff); /* Gradiente claro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más destacada */
    transform: translateY(-2px); /* Efecto de elevación */
}


/* Botón hamburguesa */
.custom-toggler {
    border: none;
    outline: none;
}


.custom-toggler .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"%3E%3Cpath stroke="rgba%2851, 51, 51, 1%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E'); /* Color oscuro para líneas */
}


/* Sombras en la versión colapsada */
.collapse {
    background: rgba(255, 255, 255, 0.95); /* Fondo blanco */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    border-radius: 10px;
}

.collapse.show {
    animation: fadeIn 0.5s ease-in-out;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Estilo del logo */
.logo {
    height: 40px;
    width: auto;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
    .custom-link {
        width: 120px; /* Botones más pequeños */
        height: 40px;
        font-size: 0.9rem;
        line-height: 20px; /* Alineación vertical */
    }
}


/* Estilo del carrusel */
.carousel-item img {
    height: 400px;
    object-fit: cover;
}

.carousel-image {
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.text-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
    padding: 20px;
    border-radius: 10px;
}

.text-gradient h5,
.text-gradient p {
    color: #ffffff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.carousel-caption {
    bottom: 20%;
}

/* Chatbot */
#chatbot {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

#chatbot button {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 18px;
}

/* Colores gradientes para secciones */
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff, #6610f2);
    color: white;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
    color: white;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
}

.bg-gradient-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
}
/* Fondo de la sección Inclusión */
.section.bg-light {
    background: #f9f9f9; /* Fondo claro */
    border-top: 2px solid #e0e0e0; /* Línea sutil superior */
    padding: 60px 20px;
}

/* Bloques de contenido (Cards) */
.card {
    border-radius: 15px; /* Bordes suaves */
    background: #ffffff; /* Fondo blanco */
    transition: all 0.3s ease-in-out; /* Transición suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra inicial */
}

/* Efecto hover en los bloques */
.card:hover {
    transform: translateY(-5px); /* Elevación ligera */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Íconos */
.icon img {
    display: block;
    margin: 0 auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); /* Sombra para íconos */
}

/* Títulos dentro de los bloques */
.card h5 {
    font-size: 1.25rem;
    margin-top: 15px;
}

/* Textos descriptivos */
.card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666666;
}
/* Fondo azul claro */
.section.bg-blue-light {
    background: #e3f2fd; /* Azul claro */
    border-top: 2px solid #bbdefb; /* Línea decorativa más oscura */
    padding: 60px 20px;
}

/* Ícono */
.icon img {
    display: block;
    margin: 0 auto 15px auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

/* Título */
h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333333;
}

/* Frase descriptiva */
p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666666;
}

/* Video */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
#telegram-chat .btn-primary {
    background-color: #0088cc; /* Azul característico de Telegram */
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 1.2rem;
    transition: all 0.3s ease-in-out;
}

#telegram-chat .btn-primary:hover {
    background-color: #006699; /* Azul más oscuro al pasar el ratón */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05); /* Efecto de aumento */
}


/* Fondo blanco decorativo */
.section.bg-white-decor {
    background: #ffffff;
    background-image: url('images/decorative-pattern.png'); /* Imagen decorativa */
    background-repeat: repeat;
    background-size: 150px;
    border-top: 2px solid #e0e0e0;
}

/* Estilo de las tarjetas */
.article-card .card {
    border-radius: 15px; /* Bordes suaves */
    transition: all 0.3s ease-in-out; /* Transición para hover */
}

.article-card img {
    border-radius: 10px; /* Bordes suaves para imágenes */
    max-height: 150px;
    object-fit: cover;
}

/* Efecto hover en las tarjetas */
.article-card .card:hover {
    transform: translateY(-10px); /* Movimiento hacia arriba */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra destacada */
}

/* Títulos dentro de las tarjetas */
.article-card h5 {
    font-size: 1.2rem;
    margin-top: 15px;
}

/* Descripción en las tarjetas */
.article-card p {
    font-size: 0.9rem;
    color: #666666;
}
/* seccion tips de aprendizaje */
/* Fondo azul claro similar a Innovación */
.section.bg-blue-light {
    background: #e3f2fd;
    border-top: 2px solid #bbdefb;
    padding: 60px 20px;
}

/* Bloque Principal */
/* Bloque Principal con tamaño reducido */
.main-block {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    max-height: 300px; /* Altura máxima reducida */
    width: 75%; /* Ocupa el 75% del ancho del contenedor */
    margin: 0 auto; /* Centrado del bloque */
}

.main-block img {
    width: 100%; /* Imagen adaptativa */
    height: auto;
    object-fit: cover;
}

.main-block:hover {
    transform: scale(1.03); /* Efecto de zoom al pasar el cursor */
}


/* Bloques secundarios */
.secondary-block {
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background: #ffffff;
}

.secondary-block:hover {
    transform: translateY(-5px); /* Movimiento hacia arriba */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); /* Sombra pronunciada */
}

/* Botón atractivo */
.btn-success {
    background: linear-gradient(135deg, #28a745, #85e085); /* Gradiente verde atractivo */
    color: #ffffff;
    border: none;
    padding: 15px 20px;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.btn-success:hover {
    background: linear-gradient(135deg, #22863a, #58d058); /* Gradiente más oscuro */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

/* Botón aleatorio */
#randomTip {
    padding: 10px 15px;
    font-size: 1rem;
    border-radius: 15px;
    transition: background 0.3s ease-in-out;
}

#randomTip:hover {
    background-color: #0056b3;
    color: #ffffff;
}

/* Tip aleatorio */
#tipDisplay {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666666;
}



/* Botón flotante */
/* Contenedor del botón flotante */
#backToTopContainer {
    position: fixed;
    bottom: 20px; /* Distancia desde el borde inferior */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajusta el botón al centro exacto */
    z-index: 1000; /* Encima de otros elementos */
}

/* Botón flotante */
#backToTop {
    width: 50px; /* Tamaño del botón */
    height: 50px;
    display: none; /* Oculto inicialmente */
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Tamaño del icono o texto */
    background-color: #007bff; /* Color principal */
    color: #ffffff; /* Color del texto */
    border: none; /* Sin bordes */
    border-radius: 50%; /* Forma circular */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#backToTop:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el ratón */
    transform: scale(1.1); /* Efecto de zoom */
}




.telegram-icon {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #0088cc;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .telegram-icon img {
            width: 28px;
            height: 28px;
            vertical-align: middle;
        }

        .telegram-icon:hover {
            background-color: #006699;
            transform: scale(1.1);
        }