/* Fondo de toda la página */
body {
    background-color: #FFFF !important; /* Cambia el color aquí */
}
        
        
        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            padding-bottom: 1rem;
        }
        .horizontal-scroll::-webkit-scrollbar {
            height: 8px;
        }
        .horizontal-scroll::-webkit-scrollbar-thumb {
            background-color: #15cae2;
            border-radius: 10px;
        }
        .horizontal-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #c5099c;
        }
        .horizontal-scroll .item {
            flex-shrink: 0;
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .arrow-container {
            display: flex;
            align-items: center;
            margin-top: -80px; /* Ajusta este valor para cambiar la posición vertical */
        }
        .arrow-body {
            width: 80px; /* Ajusta el ancho de la cola */
            height: 60px; /* Ajusta la altura de la cola */
            background-color: black; /* Color de la cola */
        }
        .arrow-head {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 80px solid transparent;
            border-bottom: 80px solid transparent;
            border-left: 70px solid black; /* Color del triángulo */
        }

        .img-normalizada {
            max-width: 180%;
            max-height: 350px; /* Ajusta esta altura según tus necesidades */
            object-fit: cover; /* Esto asegura que la imagen se escale y recorte proporcionalmente */
            width: auto;
            height: auto;
        }


        .custom-title {
            color: #ff5733; /* Cambia este código por el color que prefieras */
        }

        .custom-bg {
            background: linear-gradient(to right, #ff7e5f, #feb47b); /* Degradado */
            color: #ffffff; /* Texto blanco */
            padding: 0.5rem;
            border-radius: 8px; /* Bordes redondeados */
            display: inline-block;
        }


        nav ul {
            list-style-type: none; /* Quita los puntos de la lista */
            margin: 0;
            padding: 0;
        }
        
        nav ul li {
            display: inline; /* Hace que los elementos de la lista estén en línea */
        }
        
        nav ul li a {
            text-decoration: none; /* Elimina el subrayado */
            color: white; /* Color del texto */
            padding: 8px 16px; /* Espaciado dentro de los enlaces */
            border-radius: 4px; /* Bordes redondeados */
        }
        
        nav ul li a:hover {
            background-color: #05f8f8; /* Color azul más oscuro al pasar el mouse */
        }


            /* Asegurarse de que los enlaces no se rompan en varias líneas */
        #nav-container ul li a {
            display: inline-block; /* Asegura que cada enlace ocupe el espacio adecuado */
            white-space: nowrap;  /* Evita que el texto se divida en varias líneas */
            overflow: hidden;     /* Evita que el texto se desborde */
            text-overflow: ellipsis; /* Muestra '...' si el texto es demasiado largo */
        }

        /* Establecer que el contenedor tenga desplazamiento horizontal cuando sea necesario */
        #nav-container {
            overflow-x: auto;  /* Permite desplazamiento horizontal */
            -webkit-overflow-scrolling: touch;  /* Mejora el desplazamiento en dispositivos táctiles */
            padding: 0;  /* Elimina el relleno que podría estar afectando el tamaño */
        }




        /* Contenedor principal de navegación */
        #nav-container {
            border-radius: 50px;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); /* Sombra suave */
            background: linear-gradient(to right, #0077b6, #00b4d8); /* Degradado */
            padding: 10px 20px; /* Espaciado para un toque más limpio */
            transition: all 0.3s ease; /* Transición suave para cuando el usuario interactúa */
        }

        /* Efecto al hacer hover sobre los enlaces */
        #nav-container a {
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        /* Efecto de hover para enlaces */
        #nav-container a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: scale(1.05); /* Escala un poco el enlace */
            border-radius: 10px;
        }

        /* Barra lateral para el scroll (sombra) */
        #nav-container div {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.2); /* Sombra sutil */
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
            transition: opacity 0.3s ease;
        }

        /* Barras de desplazamiento (cuando el mouse pasa) */
        #nav-container div:hover {
            opacity: 0.3;
        }

        /* Asegurar que los enlaces no se desborden */
        #nav-container ul {
            display: flex;
            flex-wrap: nowrap;
        }


        
        /* Modificar la barra de desplazamiento */
        #nav-container::-webkit-scrollbar {
            width: 5px; /* Establecer el ancho de la barra de desplazamiento */
            height: 5px; /*  modificar la barra horizontal */
        }

        /* Modificar el fondo de la barra de desplazamiento */
        #nav-container::-webkit-scrollbar-track {
            background: #f1f1f1; /* Color de fondo de la pista del scrollbar */
            border-radius: 10px; /* Bordes redondeados para la pista */
        }

        /* Modificar el control deslizante */
        #nav-container::-webkit-scrollbar-thumb {
            background: #08c7e0; /* Color del control deslizante */
            border-radius: 10px; /* Bordes redondeados para el control */
        }

        /* Cambiar el color del control cuando el usuario pasa el mouse */
        #nav-container::-webkit-scrollbar-thumb:hover {
            background: #c5099c; /* Color cuando se pasa el mouse */
        }



        
        /* Estilo para el encabezado */
        .main-header {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f4f4f4; /* Cambia según tu diseño */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Estilo del logo */
        .logo-boton img {
            width: 160px; /* Tamaño ajustable */
            height: auto;
            margin-right: 20px; /* Espaciado entre logo y navegación */
            cursor: pointer;
        }

        /* Ajusta la barra de navegación si es necesario */
        .main-header nav {
            flex-grow: 1; /* Ocupa el espacio restante del encabezado */
        }



        .navbar-item.selected {
            background-color: #ce317a !important; /* Color de fondo para el seleccionado */
            color: white !important;             /* Texto en blanco para mejor contraste */
            border-radius: 8px;       /* Opcional: para redondear las esquinas */
        }



        .zoom {
            transition: transform 0.3s ease; /* Animación suave */
          }
          
          .zoom:hover {
            transform: scale(1.1); /* Agranda la imagen un 20% */
          }
          




          /* Ajustar tamaños de fuente para pantallas pequeñas */
            @media (max-width: 768px) {
                body {
                    font-size: 14px; /* Cambia según el tamaño deseado */
                }

                h1 {
                    font-size: 1.5rem;
                }

                h2 {
                    font-size: 1.25rem;
                }
            }

            /* Imágenes responsivas */
            img {
                max-width: 100%; /* No exceder el ancho del contenedor */
                height: auto;    /* Mantener la proporción de aspecto */
            }


            /* Contenedores responsivos */
            .container {
                max-width: 100%;
                padding-left: 1rem;  /* Ajustar márgenes y padding */
                padding-right: 1rem;
                margin: 0 auto;
            }


            /*Estilo de presentacion del disclaimer*/
            .disclaimer {
                max-width: 1600px; /* Limitar el ancho */
                margin: 20px auto; /* Centrar horizontalmente */
                padding: 15px; /* Espaciado interno */
                border: 2px solid #ccc; /* Borde suave */
                border-radius: 10px; /* Bordes redondeados */
                background-color: #c552a8; /* Fondo suave */
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
                text-align: justify; /* Justificar el texto */
                font-family: Arial, sans-serif; /* Fuente agradable */
                color: #333; /* Color de texto */
                line-height: 1.6; /* Espaciado entre líneas */
            }