html {
    scroll-behavior: smooth;
} 

/*---------------------------------------------------- INICIO ESTILO DE LETRA DEL SLIDER -----------------------------------------------------------------*/

.forjador-text {
    font-family: 'Great Vibes', cursive;
    font-size: 60px; /* Ajusta el tamaño según lo necesites */
    font-weight: normal;
    color: #fcf8f8; /* Color del texto */
    
    font-style: italic; /* Opcional, para darle un estilo más elegante */
}
/* --------------------------------------------------------FIN ESTILO DE LETRA DEL SLIDER------------------------------------------------------------------ */


/* ------------------------------------------------INICIO ESTILO DE AUTORIDADES MILITARES *------------------------------------------------------------------/
/* Contenedor de la imagen */
.mapa-conceptual {
    text-align: center;
    position: relative;
}

.nodo {
    margin: 20px auto;
    width: 100%;
    max-width: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cargo {
    font-size: 13px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 10px;
    text-align: center;
}

.nodo img {
    max-width: 250px;
    border-radius: 10px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.nodo img:hover {
    transform: scale(1.05);
}

.info {
    text-align: center;
    margin-top: 10px;
}

.nombre {
    font-size: 13px;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 0;
}

.gestion {
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    margin-top: 2px;
}

.conector {
    width: 4px;
    height: 50px;
    background: linear-gradient(to bottom, #d4af37, transparent);
    margin: 0 auto;
    position: relative;
    animation: fadeInDown 0.8s ease-in-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        height: 0;
    }
    to {
        opacity: 1;
        height: 50px;
    }
}

/* Estilos del card optimizados para móviles */
.card {
    width: 100%; /* Cambia de 350px a 100% para adaptarse al contenedor */
    max-width: 350px; /* Limita el ancho máximo en pantallas grandes */
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    margin: 0 auto; /* Centra horizontalmente */
    display: block;
}

.card-img {
    width: 100%; /* Asegura que la imagen no se desborde */
    height: auto;
    border-bottom: 3px solid yellow;
    object-fit: cover; /* Mantiene la proporción de la imagen */
}

.card-body {
    padding: 5px;
    background: linear-gradient(to bottom, white, #f8f8f8);
}

.card-title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-subtitle {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-text {
    font-size: 13px;
    color: #333;
    margin: 0;
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.year {
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
    display: block;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .nodo img {
        max-width: 200px; /* Reducir tamaño de imágenes en nodos */
    }

    .card {
        max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
        margin: 0 auto; /* Centrado en móviles */
    }

    .card-img {
        max-width: 100%; /* Evita que la imagen sobresalga */
    }
}
/* ---------------------------------------------------------FIN ESTILO DE AUTORIDADES MILITARES --------------------------------------------------------*/

/* -----------------------------------------------INICIO ESTILO DE INFOGRAFIAS -------------------------------------------------------------------*/
/* Contenedor del producto */
.item-thumbnail {
                        width: 100%; /* Ocupa todo el ancho disponible */
                        max-width: 250px; /* Tamaño máximo de cada contenedor */
                        height: 250px; /* Altura fija para un diseño uniforme */
                        border: 1px solid #ddd; /* Borde opcional */
                        border-radius: 8px; /* Esquinas redondeadas */
                        overflow: hidden; /* Oculta contenido que sobresalga */
                        margin: 0 auto; /* Centra horizontalmente */
                        display: flex; /* Flex para centrar contenido */
                        justify-content: center;
                        align-items: center;
                    }
                    
                    /* Imagen dentro del contenedor */
                    .item-thumbnail img {
                        width: 100%; /* Ajusta la imagen al ancho del contenedor */
                        height: 100%; /* Ajusta la imagen al alto del contenedor */
                        object-fit: cover; /* Mantiene la proporción sin deformación */
                        border-radius: 8px; /* Esquinas redondeadas como el contenedor */
                    }

    /* Contenedor general */
.section-containerdos {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    background: #f9f9f9; /* Fondo claro */
}

/* Wrapper con desplazamiento horizontal */
.row-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.row-space-10dos {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth; /* Desplazamiento suave */
    flex-wrap: nowrap; /* Asegura que los productos estén en una fila */
    width: 100%;
    padding: 10px 0;
}

/* Producto */
.item {
    flex: 0 0 auto;
    width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

/* Botones de desplazamiento */
.scroll-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0 10px;
    position: relative;
}

#scroll-left {
    margin-right: -50px; /* Ajusta la posición */
}

#scroll-right {
    margin-left: -50px; /* Ajusta la posición */
}

/* -----------------------------------------------FIN ESTILO DE INFOGRAFIAS -------------------------------------------------------------------*/



/* -----------------------------------------------INICIO ESTILO DE LAS REVISTAS -------------------------------------------------------------------*/
/* Contenedor general */
.book-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente fila */
    justify-content: center; /* Centra los elementos */
    gap: 20px; /* Espaciado entre elementos */
    padding: 20px;
}

/* Contenedor de cada libro */
.book {
    position: relative;
    width: 200px; /* Ajusta el tamaño del libro */
    height: 260px;
    border-radius: 10px;
    background-color: whitesmoke;
    box-shadow: 1px 1px 12px #000;
    transform-style: preserve-3d;
    perspective: 2000px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Imagen de tapa */
.book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Portada interactiva */
.cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: lightgray;
    cursor: pointer;
    transition: transform 0.5s;
    transform-origin: left;
    box-shadow: 1px 1px 12px #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book:hover .cover {
    transform: rotateY(-80deg);
}

/* 📱 Responsive: Mostrar en columnas en móviles */
@media (max-width: 768px) {
    .book-container {
        flex-direction: column; /* Poner los libros uno debajo del otro */
        align-items: center; /* Centrar los libros */
    }
    
    .book {
        width: 90%; /* Ajustar el ancho al 90% para ocupar toda la pantalla */
        height: auto; /* Mantener la proporción */
        max-width: 300px; /* Limitar el tamaño en pantallas grandes */
    }
}

@media (max-width: 480px) {
    .book {
        width: 100%; /* Ocupar todo el ancho disponible */
        max-width: 250px;
    }
}

/* -----------------------------------------------FIN ESTILO DE LAS REVISTAS MILITARES -------------------------------------------------------------------*/


/* -----------------------------------------------INICIO ESTILO DE VIDEOS INSTITUCIONALES -------------------------------------------------------------------*/

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Opcional: fondo negro mientras se carga */
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -----------------------------------------------FIN ESTILO DE VIDEOS INSTITUCIONALES -------------------------------------------------------------------*/

/* -----------------------------------------------INICIO DE NOTICIAS 4 FOTOS -------------------------------------------------------------------*/

#noticias-container .noticia-item {
    max-width: 130px;
}

#noticias-container .noticia-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 5px;
}

#noticias-container.single-image .noticia-item {
    max-width: 100%;
}

#noticias-container.single-image .noticia-img {
    height: auto;
    max-height: 300px; /* Ajusta el tamaño grande */
}




/* -----------------------------------------------FIN DE NOTICIAS 4 FOTOS -------------------------------------------------------------------*/


/* -----------------------------------------------INICIO REDES SOCIALES -------------------------------------------------------------------*/


    /* Contenedor uniforme para los widgets de redes sociales */
    .social-embed {
        width: 340px; /* Ancho fijo para todos */
        height: 600px; /* Altura aumentada para que sea más largo */
        overflow-y: auto; /* Scroll vertical si el contenido excede */
        overflow-x: hidden; /* Evitar scroll horizontal */
        border: 1px solid #444; /* Borde sutil */
        border-radius: 8px;
        background: #fff; /* Fondo blanco para contraste */
        margin: 0 auto; /* Centrar horizontalmente */
    }

    /* Ajustar el widget de TikTok */
    .tiktok-embed {
        width: 100% !important;
        min-width: 340px !important;
        max-width: 340px !important;
        height: 100%;
        margin: 0 !important;
    }

    /* Ajustar el widget de Facebook */
    .fb-page {
        width: 340px !important;
        height: 600px !important; /* Altura aumentada */
    }

    /* Ajustar el widget de Twitter/X */
    .twitter-tweet {
        width: 100% !important;
        max-width: 340px !important;
        height: auto;
        margin: 0 auto !important;
    }

    /* Asegurar que el contenedor sea responsivo */
    @media (max-width: 768px) {
        .social-embed {
            width: 100%; /* En móviles, ocupar todo el ancho disponible */
            max-width: 340px;
            height: 600px; /* Mantener la altura aumentada */
        }

        .tiktok-embed, .fb-page, .twitter-tweet {
            width: 100% !important;
            max-width: 100% !important;
        }
    }

/* -----------------------------------------------FIN REDES SOCIALES-------------------------------------------------------------------*/

/* --------------------------------------------INICIO DE INCORPORATE.PHP -----------------------------------------------------------*/

    .institute-section {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* Fondo degradado suave */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        transition: transform 0.3s ease; /* Animación al pasar el mouse */
    }

    .institute-section:hover {
        transform: translateY(-5px); /* Elevación ligera al hover */
    }

    .text-content {
        flex: 1; /* Permite que el texto ocupe el espacio disponible */
    }

    .title-incorporate {
        font-size: 2.5rem; /* Tamaño grande para el título */
        color: #1a3c34; /* Verde militar oscuro */
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 1px; /* Espaciado elegante */
    }

    .subtitle {
        font-size: 1.25rem; /* Tamaño moderado para el subtítulo */
        color: #495057; /* Gris oscuro */
        margin-bottom: 10px;
        font-style: arial; /* Cursiva para diferenciar */
    }

    .glosa {
        font-size: 1.1rem; /* Tamaño legible para la glosa */
        color: #212529; /* Negro suave */
        line-height: 1.6; /* Espaciado para mejor lectura */
        font-family: 'Georgia', serif; /* Fuente elegante y clásica */
    }

    .sombra-3d {
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); /* Sombra 3D para la imagen */
        transition: transform 0.3s ease;
    }

    .sombra-3d:hover {
        transform: scale(1.05); /* Zoom sutil al pasar el mouse */
    }
    /* --------------------------------------------FIN DE INCORPORATE.PHP -----------------------------------------------------------*/