body {
    
    background: -webkit-linear-gradient(360deg, #f0f0f0,#283358);/* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(360deg, #f0f0f0,#56679c);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */                                             
}

.barradebusqueda{
    background-color: #0056b3;
}
/*carusel hero*/
.carousel-item img{
    width: 10%;       /* Ocupa todo el ancho del contenedor */
    height: 60vh;     /* Ajusta la altura deseada */
    object-fit: cover;
}

/* En pantallas medianas (≥768px) */
@media (min-width: 768px) {
  .carousel-image {
    height: 70vh;        /* Aumenta altura a 70% del viewport */
  }
}

/* En pantallas grandes (≥992px) */
@media (min-width: 992px) {
  .carousel-image {
    height: 80vh;        /* Aumenta altura a 80% del viewport */
  }
}

/* En pantallas extra grandes (≥1200px) */
@media (min-width: 1200px) {
  .carousel-image {
    height: 90vh;        /* Altura aún mayor para pantallas muy grandes */
  }
}

/*Enfoque*/
.features-section{
    padding: 60px 0;
    background-color: #f8f9fa; /* Fondo suave para la sección, puedes cambiarlo si prefieres */
}
.section-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
     /* Usamos el ROJO OSCURO para el borde inferior */
    border-bottom: 2px solid rgb(174, 43, 37);
    padding-bottom: 10px;
}
.section-header h2 {
    font-weight: bold;
    color: #333;
    margin: 0;
}
.section-header a {
    /* Usamos el ROJO OSCURO para el enlace */
    color: rgb(174, 43, 37);
    text-decoration: none;
    font-weight: 500;
}
.section-header a:hover {
    /* Puedes oscurecer un poco el rojo al pasar el mouse si quieres */
    /* text-decoration: underline; */
     color: rgb(140, 35, 30); /* Rojo ligeramente más oscuro */
}

.feature-card {
     /* Usamos el AZUL OSCURO para el fondo */
    background-color: rgb(28, 33, 58);
    color: #ffffff; /* Texto blanco para contraste */
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    height: 100%; /* Para que todas las tarjetas tengan la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.feature-card .icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    /* Usamos el ROJO OSCURO para el icono */
    color: rgb(174, 43, 37);
}
.feature-card h4 {
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff; /* Mantenemos títulos blancos sobre fondo oscuro */
}
.feature-card p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #e0e0e0; /* Un gris claro para el texto descriptivo */
}
/*Lo Mejor de M*/
.best-features {
    background-color: rgb(28, 33, 58);
    padding: 40px 0;
}

.best-features h2 {
    color: rgb(174, 43, 37);
}

.best-features .feature-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border-top: 4px solid rgb(174, 43, 37);
}

.best-features .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.best-features .feature-card i {
    font-size: 2.5rem;
    color: rgb(174, 43, 37);
    margin-bottom: 10px;
}

.best-features .feature-card h5 {
    font-weight: bold;
    margin-bottom: 8px;
    color: rgb(28, 33, 58);
}

.best-features .feature-card p {
    margin: 0;
    font-size: 0.95rem;
    color: rgb(28, 33, 58);
}




/* Productos destacados */
.productos-destacados .card{
    border: 10px solid #000;
}
.productos-destacados .product-card {
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: none;
}

.productos-destacados .product-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.productos-destacados .card-title {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

@media (max-width: 576px) {
    .productos-destacados .card-title {
    font-size: 0.9rem;
    }
}


/*barra de categoria de productos*/
/* Barra de categorías */
.categoria-scroll {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0.75rem 0;
    position: relative;
    width: 100%;
}

/* Botones */
.categoria-scroll .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
}

.categoria-scroll .btn-group .btn {
    min-width: 11em;
    white-space: nowrap;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: #fff;
    border: 2px solid #0d6efd;
    color: #0d6efd;
    margin-right: 0.75rem;
}

.categoria-scroll .btn-group .btn:hover,
.categoria-scroll .btn-group .btn:focus {
    background-color: #0d6efd;
    color: #fff;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.4);
    border-color: #0a58ca;
}

/* Mostrar scroll solo en PC */
@media (min-width: 768px) {
    .categoria-scroll {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin; /* Firefox */
    }

    .categoria-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .categoria-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .categoria-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
    }
}

/* Ocultar scroll en móviles y tablets */
@media (max-width: 768px) {
    .categoria-scroll::-webkit-scrollbar {
        display: none;
    }

    .categoria-scroll {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }
}

/* Estilos Bootstrap personalizados */
.productos button {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-bg: #e9ebec;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}


/*Quienes somos*/
.section-title-main {
    text-align: center;
    font-size: 2.8em;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 50px;
    color: #333;
}
.section-container {
    padding: 60px 0;
    border-bottom: 1px solid #eee; /* Separador visual ligero */
}
.section-container:last-child {
    border-bottom: none;
}
.section-container h2 {
    font-size: 2.2em;
    font-weight: bold;
    color: #0056b3; /* Un azul corporativo, ajústalo a tu marca */
    margin-bottom: 25px;
}
.section-container p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    text-align: justify;
}
.section-container ul {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    padding-left: 20px; /* Para alinear bien los bullets */
}
.section-container ul li {
    margin-bottom: 10px;
}
.img-fluid-custom {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    object-fit: cover; /* Para asegurar que la imagen cubra el espacio sin distorsionarse */
    min-height: 300px; /* Altura mínima para las imágenes, ajusta según tus imágenes */
}
.text-content-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
}

/* Para el orden en pantallas medianas y grandes */
@media (min-width: 768px) {
    .image-first {
        order: 1;
    }
    .text-first {
        order: 2;
    }
    .text-second {
        order: 2;
    }
    .image-second {
        order: 1;
    }
}


/*Productos*/
/* Estilos personalizados */
.product-card {
    background-color: rgb(28, 33, 58);
    border: 1px solid #dee2e6;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.product-image-container img {
    max-width: 100%;
    height: 150px; /* Altura fija para ejemplo */
    object-fit: contain;
    cursor: pointer; /* Indica que es interactivo */
    transition: transform 0.2s ease-in-out; /* Efecto suave al pasar el mouse */
}

.product-image-container img:hover {
    transform: scale(1.05); /* Agranda un poco la imagen al pasar el mouse */
}

.product-details {
    margin-top: 15px;
    border: 2px solid transparent; /* Borde inicial transparente */
    padding: 10px;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Transición suave */
}

/* --- La clase que afectará a la otra parte --- */
.highlight-details {
    background-color: rgb(174, 43, 37); /* Un fondo celeste suave */
    border-color: #0d6efd; /* Un borde azul Bootstrap */
}
/* --- Fin de la clase --- */

.product-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}