header {

            background-color: white;

            padding: 10px 20px;

            

        }



        .top-bar {

            display: flex;

            justify-content: space-between;

            align-items: center;

            font-size: 14px;

            max-width: 1400px;

            margin: auto;

        }



        .top-bar .contact-info {

            display: flex;

            gap: 20px;

        }



        .top-bar .contact-info a {

            text-decoration: none;

            color: black;

            display: flex;

            align-items: center;

            gap: 5px;

            font-size: 16px;

        }



        .combined-section {

            display: flex;

            align-items: center;

            gap: 20px;

            margin-top: 10px;

        }



        .search-and-access {

            display: flex;

            gap: 10px;

            align-items: center;

        }



        .search-box {

            display: flex;

            align-items: center;

            border: 1px solid #ccc;

            border-radius: 20px;

            padding: 2px 10px;

            background-color: white;

        }



        .search-box input {

            border: none;

            outline: none;

            width: 120px;

            font-size: 16px;

        }



        .search-box button {

            background: none;

            border: none;

            cursor: pointer;

            color: #c41f27;

            font-size: 16px;

        }



        .access-distributors {

            display: flex;

            align-items: center;

            gap: 5px;

            background-color: #444;

            color: white;

            border-radius: 20px;

            padding: 5px 15px;

            font-size: 16px;

            text-decoration: none;

        }



        .social-links {

            display: flex;

            gap: 10px;

        }



        .social-links a {

            text-decoration: none;

            color: black;

        }



        .logo {

            text-align: center;

            margin: 20px 0;

            justify-content:center;

        }



        .logo img {

            max-width: 290px;

        }



        nav {

            background-color: #c41f27;

            display: flex;

            justify-content: center;

            

        }



        nav ul {

            list-style: none;

            display: flex;

            gap: 120px;

            height: 50px;

            align-items: center;

            max-width: 1500px;

            margin: auto;

            

        }



        nav ul li {

            color: white;

            font-weight: bold;

            cursor: pointer;

        }



        nav ul li a {

            text-decoration: none;

            color: white;

        }

        nav ul li a:hover,

        nav ul li a:focus,

        nav ul li a:active {

            text-decoration: none; /* Asegura que no haya subrayado */

            color: white; /* Mantiene el color blanco en todos los estados */

        }



        /* Responsivo */

        @media (max-width: 768px) {

            .top-bar {

                flex-direction: column;

                align-items: center;

                gap: 10px;

            }



            .combined-section {

                flex-direction: column;

                align-items: center;

                gap: 10px;

            }



            nav ul {

                flex-direction: column;

                align-items: center;

                gap: 10px;

                height: auto;

            }

            .access-distributors {

            display: flex;

            align-items: center;

            gap: 0px;

            background-color: #444;

            color: white;

            border-radius: 20px;

            padding: 5px 15px;

            font-size: 14px;

            text-decoration: none;

            }

            nav {

            background-color: #fff;

            display: flex;

            justify-content: center;

            

        }

        }

        

        /* Ajustar el tamaño del modal */

        .modal-dialog.modal-xl {

            max-width: 60%; /* Cambia este valor para ajustar el tamaño */

        }

        

        .modal-body img {

            max-height: 80vh; /* Limitar la altura de la imagen para que no exceda la pantalla */

            object-fit: cover;

        }

        

        /* Flechas de navegación personalizadas */

        .custom-arrow {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            z-index: 1055; /* Asegura que las flechas estén encima de la imagen */

            width: 50px; /* Ancho de la flecha */

            height: 50px; /* Alto de la flecha */

            background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */

            border-radius: 50%; /* Forma circular */

            display: flex;

            align-items: center;

            justify-content: center;

        }

        

        .carousel-control-prev.custom-arrow {

            left: -60px; /* Mueve la flecha izquierda fuera del modal */

        }

        

        .carousel-control-next.custom-arrow {

            right: -60px; /* Mueve la flecha derecha fuera del modal */

        }

        

        /* Personalizar los íconos de las flechas */

        .carousel-control-prev-icon,

        .carousel-control-next-icon {

            width: 20px;

            height: 20px;

            background-size: 100%;

            filter: invert(1); /* Cambia el color del ícono a blanco */

        }

        

        /* Estilo general para las flechas */

        .slick-prev, .slick-next {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            z-index: 1000;

            

            border: none;

            padding: 10px;

            border-radius: 50%;

            cursor: pointer;

        }

        

        /* Flecha izquierda */

        .slick-prev {

            left: -40px; /* Mueve la flecha a la izquierda fuera del carrusel */

        }

        

        /* Flecha derecha */

        .slick-next {

            right: -40px; /* Mueve la flecha a la derecha fuera del carrusel */

        }

        

        /* Íconos dentro de las flechas */

        .slick-prev i, .slick-next i {

            font-size: 20px; /* Tamaño del ícono */

        }

        

        /* Cambiar el color de las flechas al pasar el mouse */

        .slick-prev:hover, .slick-next:hover {

            background-color: rgba(0, 0, 0, 0.8);

        }

        

        

        .catalogo-section {

          background-color: #4e4e4e; /* Color de fondo oscuro */

          padding: 20px;            /* Espaciado interno */

          text-align: center;       /* Centra el contenido horizontalmente */

        }

        

        .catalogo-content {

          display: flex;

          align-items: center;

          justify-content: center;

          gap: 10px;                /* Espacio entre el icono y el texto */

          color: #fff;              /* Color del texto blanco */

          font-family: Arial, sans-serif;

          font-size: 18px;

        }

        

        .icono-libro {

          width: 120px;              /* Tamaño del icono */

          height: auto;

        }

        

        /* Ajustes para el texto */

        .catalogo-content p {

          margin: 0;                /* Elimina el margen por defecto del párrafo */

          text-transform: uppercase;

          line-height: 1.5;

        }

        

        .titulo-card{

            font-size:25px;

            font-weight:500;

            text-decoration: none;

        }


.btn-outline-dark2 {
    color: #212529 !important;
    border: 5px solid #2f5978 !important;
    border-radius: 13px !important;
}

.h2-titulo {
    font-family: 'Roboto', sans-serif;
    font-size: 30px !important;
    font-weight: 700 !important;
}

.inline-link {
    display: inline-flex; /* Coloca los elementos uno al lado del otro */
    align-items: center; /* Alinea verticalmente */
    text-decoration: none; /* Elimina la decoración del enlace */
    color: inherit; /* Mantiene el color heredado */
    gap: 8px; /* Espaciado entre la imagen y el texto */
}

.contact-desc p{
    margin: 0px;
}


        
.product-wap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-insumo {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-body {
    flex-grow: 1;
}

.titulo-card-insumo {
    font-size: 1.2rem; /* Ajusta según tu diseño */
    font-weight: bold;
}

img.card-img-insumo {
    max-height: 255px; /* Ajusta la altura máxima según el diseño */
    object-fit: cover; /* Mantiene proporción sin distorsionar */
}

img.card-img-insumo-rel {
    max-height: 320px; /* Ajusta la altura máxima según el diseño */
    object-fit: cover; /* Mantiene proporción sin distorsionar */
}

@media (max-width: 868px) {

    img.card-img-insumo {
        max-height: 500px;
        object-fit: cover; /* Mantiene proporción sin distorsionar */
    }
}


.card-insumo-rel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Garantiza que todas las tarjetas ocupen el mismo espacio */
    min-height: 130px; /* Ajusta según lo necesario */
    max-height: auto; /* Controla el límite máximo */
}

.card-body-rel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}



.card-body-rel ul {
    flex-grow: 1;
    display: flex;
    align-items: flex-start; /* Alinea al inicio si el contenido es corto */
    min-height: 60px; /* Altura mínima para descripciones */
}

.card-body-rel .d-flex.justify-content-end {
    margin-top: auto; /* Mueve el botón al final del contenedor */
}

.card-body-rel .btn {
    width: 95px; /* Tamaño uniforme para el botón */
    text-align: center;
}

.det-isumo p{
    font-size: 16px !important;
}