/* YAK Industry - Style V 0.1.0 - Main */

/* Mar - Variables*/

:root {
    --color-white: #fff;
    --color-red-ultimate: #F7040B;
    --color-white-gray: #ffff;
    --color-acero: #2C5364;
    --color-acero-dark: #1C3B53;
    --color-azul-light: #63B6EC;
    --color-azul-dark: #004F9F;
    --color-azul-medium: #0E5EAD;
    --color-gray-dark: #333333;
    --color-gray-light: var(--bs-gray-600);
    --color-gray-regular: var(--bs-gray-700);
    --color-rojo-dark: #b82133;
    --color-rojo-regular: var(--bs-danger);
    --color-green-regular: #39b54a;
}

/* Mar - Configure */

/* div,figure,li,a {
    border: 1px dashed red !important;
} */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el scroll horizontal */
}

body {
    background-color: var(--color-white-gray);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}
header{
    background-color: var(--color-white);
}
.container {
    display: flex;
    flex-direction: column; /* O row si están en fila */
}

.section1 {
    order: 2; /* Mueve esta sección al segundo lugar */
}

.section2 {
    order: 1; /* Mueve esta sección al primer lugar */
}



.mar-line-border{border-bottom: 1px solid var(--bs-secondary-border-subtle);}
.mar-bg-rojo{background: var(--color-red-ultimate) !important;}

/* Mar - Pomi */

.mar-pomi-logo img {width: 80px; margin-top: 5px;}
.mar-torrente-logo img {width: 120px; margin-top: 0px;}
/*.mar-pomi-food article{ width: 100%; max-width: 450px;}*/
.mar-pomi-food .mar-img-pomi img{max-width: 425px; max-height: 452px; width: 100%;}
/*.mar-pomi-food h2 {*/
/*    font-size: 2.6em;*/
/*    font-weight: 600;*/
/*    color: var(--color-rojo-dark);*/
/*}*/
#materia_prima {
    font-family: Roboto, sans-serif;
    font-weight: 900;
    font-size: 40px;
    color: var(--color-red-ultimate);
    position: relative; /* Necesario para posicionar el ::after */
    margin-bottom: 1em;
    text-align: justify;
}

.subtitulo_especial_page{
    font-family: Roboto, sans-serif;
    font-size: 35px;
    font-weight: 900;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--color-red-ultimate);
    margin-top:2em;
}
.parrafo_intermedio p {
    font-family: Roboto, sans-serif;
    font-size: 18px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.contenido_imagen{
    flex: 1; text-align: center;
}
.imagenes_fila1{
    display: flex; justify-content: space-between; align-items: center;
}
#imagen_entre_iconos{
    display: flex;
    justify-content: center;
    margin-top: 2em;
    margin-bottom: 3em;
}


#materia_prima::after {
    content: "";
    display: block;
    width: 50%; /* Línea hasta la mitad del título */
    height: 2px; /* Grosor de la línea */
    background-color: var(--color-red-ultimate); /* Color de la línea */
    position: absolute;
    bottom: -20px; /* Espacio entre el título y la línea */
    left: 0; /* Alineado al inicio del texto */

}

#parrafo_debajo {
    margin-top: 40px; /* Espacio entre el subrayado y el párrafo */
    font-size: 16px;

    font-family: Roboto, sans-serif;
    font-weight: 400;
    text-align: justify;
    line-height: 20px;
}
.cotizar-container {
    display: flex; /* Activa flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente (opcional) */
}
.cotizar-btn {
    background-color: #F7040B; /* Color de fondo rojo */
    color: #FFFFFF; /* Color del texto blanco */
    text-align: center; /* Centrar el texto */
    display: inline-block; /* Para comportarse como un botón */
    padding: 10px 20px; /* Espaciado interno del botón */
    text-decoration: none; /* Quitar subrayado */
    border: none; /* Sin bordes */
    font-family: Roboto, sans-serif; /* Fuente consistente */
    font-size: 16px; /* Tamaño de texto */
    cursor: pointer; /* Cambiar cursor al pasar sobre el botón */
    text-decoration: none;
}
.cotizar-btn-aqui {
    background-color: #F7040B; /* Color de fondo rojo */
    color: #FFFFFF; /* Color del texto blanco */
    text-align: center; /* Centrar el texto */
    display: inline-block; /* Para comportarse como un botón */
    padding: 10px 20px; /* Espaciado interno del botón */
    text-decoration: none; /* Quitar subrayado */
    border: none; /* Sin bordes */
    font-family: Roboto, sans-serif; /* Fuente consistente */
    font-size: 16px; /* Tamaño de texto */
    cursor: pointer; /* Cambiar cursor al pasar sobre el botón */
    text-decoration: none;
}
.lista {
    list-style: none; /* Elimina los estilos predeterminados de la lista */
    padding: 0;
    margin: 0;
}

.lista li {
    display: flex; /* Flexbox para alinear ícono y texto */
    align-items: center; /* Alineación vertical centrada */
    font-family: Roboto, sans-serif;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px; /* Reduce el espacio entre viñetas */
}

.lista li svg {
    flex-shrink: 0; /* Evita que el ícono se redimensione */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    width: 17px; /* Tamaño del ícono */
    height: 17px; /* Tamaño del ícono */
}
.regulaciones-productivas {
    display: flex;
    flex-direction: row; /* Asegura que los elementos crezcan uniformemente en vertical */
    align-items: stretch; /* Hace que los elementos internos tengan la misma altura */
    justify-content: space-between; /* Distribuye el contenido equitativamente */
    gap: 10px; /* Espaciado entre elementos */
    border: 2px solid var(--color-red-ultimate);
    border-radius: 10px;
    padding: 15px;
    height: 100%; /* Hace que todas las cajas tomen la misma altura dentro de col-3 */
}

.col-3 {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Asegura que las cajas ocupen la misma altura */
}

.regulaciones-productivas .texto {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que los textos ocupen el espacio disponible */
    justify-content: space-between; /* Acomoda el contenido */
}


.imagen {
    flex-shrink: 0; /* Evita que la imagen se reduzca */
    justify-content: flex-start; /* Asegura que el contenido comience arriba */
    align-self: flex-start; /* Alinea la imagen al inicio del contenedor padre */
}

.texto {
    flex: 1;
}

.titulo {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--color-red-ultimate);
    margin-bottom: .8em;
}

.parrafo p {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.mar-pomi-food h6 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-green-regular);
    display:flex;
    flex-direction: column;
}
.mar-pomi-food p {
    font-size: 1.0em;
    font-weight: normal;
    color: var(--color-gray-dark);
}
.mar-pomi-spect h4{
    font-size: 1.4em;
    font-weight: 600;
    color: var(--color-green-regular);
}
.mar-pomi-spect h6{
    font-size: 1.0em;
    font-weight: normal;
    color: var(--color-gray-dark);
}
.mar-pomi-spect p{
    font-size: 4.0em;
    font-weight: normal;
    color: var(--color-gray-light);
}
.mar-pomi-border{
    border-left: 1px solid var(--color-gray-light);
    border-right: 1px solid var(--color-gray-light);
}
.mar-pomi-product h3{
    font-size: 2.0em;
    font-weight: 600;
    color: var(--color-white);
}
.mar-pomi-product h6{
    font-family: Roboto, sans-serif;
    font-size: 1.2em;
    font-weight: 900;
    color: var(--color-white);
}

#carouselMaredusaPomi .carousel-caption{
    top: 6rem;
}

#carouselMaredusaPomi .carousel-caption h5{
    font-family: Roboto, sans-serif;
    font-size: 3.2em;
    text-align: left;
    width: 380px;
    font-weight: bold;
    line-height: 47px;
}
#carouselMaredusaPomi .carousel-caption span{
    display: block;
    font-family: Roboto, sans-serif;
    background-color: white;
    text-align: left;
}

#carouselMaredusaPomi .carousel-caption p {
    font-weight: bold;
    text-align: left;
    font-size: 25px;
    width: 600px;
    background-color: #006C2F; /* Fondo verde */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 20px;
    margin-bottom: 1.2em;
    margin-top: 1.2em;
    font-family: Roboto, sans-serif;
    line-height: 26px;
}

.contenedor-padre {
    display: flex; /* Hace que el contenedor sea flexible */
    align-items: center; /* Centra verticalmente los elementos */
}

.btn-cotizar {
    background-color: var(--color-red-ultimate);
    color: var(--color-white);
    font-size: 1.2em;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-right: auto; /* Alinea el botón a la izquierda */
    text-decoration: none;
}
.carousel-item img {
    object-fit: cover;
}


/* Mar - menus - navbar-nav  */

.navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}
.mar-logo {
    margin-left: auto; /* Empuja el logo al lado derecho */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.mar-logo img {
    margin: auto;
    display: block !important;
    width: 70px;
    background-color: var(--color-white);
}

.mar-border-rubro{
   border-left: 1px;
   border-right: 1px;
   border-bottom: 0px;
   border-top: 0px;
   border-color: var(--color-white-gray) !important;
   border-style: solid;
   margin-left: -1px;
}
.mar-header figure img{
    width: 30px;
    height: 30px;
    display: inline;
}
.mar-header a figure img:first-child{
    display: none;
}
.mar-limpieza-rubro figcaption,
.mar-alimento-rubro figcaption{
    font-size: 0.60em;
    font-weight: 600;
    text-align: center;
    color: var(--color-white);
}
.mar-option figcaption {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--color-white);
}
.mar-option:hover{
    opacity: 0.80;
}
#mar-header-id {
    position: relative; /* Hace que los elementos hijos con position absolute se posicionen en base a este div */
}

/* NOTA: se eliminaron aquí las reglas #imagen_logo { position:absolute; left:130px; ... }
   que eran del header anterior. El header nuevo posiciona el logo con flujo normal. */
.mar-limpieza-rubro:hover,
.mar-alimento-rubro:hover {background-color: var(--color-white);}
.mar-limpieza-rubro:hover figcaption {color: var(--color-azul-dark)}
.mar-alimento-rubro:hover figcaption {color: var(--color-rojo-dark)}
.mar-header a:hover figure img:first-child{
    display: inline-block;
}
.mar-header a:hover figure img:last-child{
    display: none;
}

.mar-header-alimento{background: rgb(248, 248, 248); background: linear-gradient(180deg, rgba(255,69,88,1) 0%, rgba(184,33,51,1) 100%);}
.mar-header-limpieza{background: rgb(99,182,236); background: linear-gradient(180deg, rgba(99,182,236,1) 0%, rgba(0,79,159,1) 100%);}
/* Asegurar que el contenido esté en una misma línea */
.alimento-contenedor {
    display: flex;
    align-items: center;
    gap: 4px; /* Espacio entre imagen y texto */
    font-size: 30px;
}

.mar-alimento-header{background-color: var(--color-white);}
.mar-alimento-header figcaption {color: var(--color-rojo-dark)}
.mar-alimento-header figure img:first-child{ display: inline-block !important;}
.mar-alimento-header figure img:last-child{ display: none;}


.mar-limpieza-header{background-color: var(--color-white);}
.mar-limpieza-header figcaption {color: var(--color-azul-dark)}
.mar-limpieza-header figure img:first-child{ display: inline-block !important;}
.mar-limpieza-header figure img:last-child{ display: none;}

.mar-barra-top{
    width: 100%;
    height: 1px;
    background-color : var(--bs-secondary-border-subtle);
}
.mar-barra-buttom{
    width: 100%;
    height: 2px;
    background: rgb(99,182,236);
    background: linear-gradient(90deg, rgba(99,182,236,1) 0%, rgba(0,79,159,1) 100%);
}
.mar-title-rubro{
    margin: 0px auto;
    padding: 11px 20px;
    width: 100%;
    background: rgb(99,182,236);
    background: linear-gradient(180deg, rgba(99,182,236,1) 0%, rgba(0,79,159,1) 100%);
    text-decoration: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.mar-title-rubro h5{
    font-size: 1.10rem;
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: 5px;
}
.mar-menu li a.nav-link{
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 0.90rem;
}
.mar-menu li a.nav-link:hover{
    color: var(--color-azul-dark);
    text-decoration: underline;
}
.mar-menu-icon{
    color: var(--color-gray-dark);
    font-size: 1.2rem;
    text-decoration: none;
    padding-left: 12px;
}
.mar-menu-icon span{
    font-size: 0.8rem;
    font-weight: 600;
}
.mar-promo{
    border-radius: 10px;
    font-size: 1.0rem;
    font-weight: 600;
    padding: 7px 20px;
    border: 0px;
    background: rgb(251,176,59);
    background: linear-gradient(180deg, rgba(251,176,59,1) 0%, rgba(255,147,30,1) 100%);
}
.mar-menu-category{
    background-color: var(--color-white);
    border: 1px solid var(--color-azul-light);
    margin-top: -1px;
}
.mar-menu-category ul li a.nav-link{
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--color-gray-dark);
}
.mar-menu-category ul li a.nav-link:hover{
    color: var(--color-azul-dark);
}
.mar-menu-category ul li.nav-item {
    border-bottom: 1px dashed var(--color-gray-dark);
    margin: 0px 15px;
}
.mar-menu-category ul li.nav-item:last-child {
    border-bottom: none;
}
.mar-menu-category ul li a figure img{
    width: 30px;
    height: 30px;
    display: inline;
}
.mar-menu-category ul li a figure img:first-child{
    display: none;
}
.mar-menu-category ul li a:hover figure img:first-child{
    display: inline-block;
}
.mar-menu-category ul li a:hover figure img:last-child{
    display: none;
}

.mar-filter{
    background-color: var(--color-white);
    margin-top: 15px;
    padding: 15px;
}
.mar-filter h5{
    font-size: 1.10rem;
    color: var(--color-gray-dark);
    margin-top: 15px
}
.mar-filter-row{
    border-bottom: 1px solid var(--color-azul-light);
}
.mar-filter h6,
.mar-filter ul li
{
    font-size: 0.87rem;
}
#searchInput{
    border: 1px solid var(--color-azul-light);
}
#searchResults .mar-search-item img{
    width: 45px;
    height: 45px;
}
#searchResults .mar-search-item span,
#searchResults .mar-search-item p{
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-gray-dark);
    text-decoration: none;
}
#searchResults .mar-search-item span{
    color: var(--color-gray-light);
}
#searchResults .mar-search-item{
    border: 1px solid var(--color-azul-light);
    border-top: 0px;
}
#searchResults .mar-search-item:hover{
    background-color: var(--color-white-gray);
}


/* Mar - Access */

/*.mar-access .card{*/
/*    background: var(--color-white);*/
/*    border: 1px solid var(--color-azul-light);*/
/*    border-radius: 10px;*/
/*    margin: 10px;*/
/*    padding: 10px;*/
/*    cursor: pointer;*/
/*    transition: background 0.3s;*/
/*}*/
/*.mar-access .card:hover{*/
/*    background: var(--color-azul-dark);*/
/*}*/
.mar-access .card h5.card-title{
    color: var(--color-white);
    font-size: 1.12rem;
    font-weight: 600;
}
.mar-access-client .modal-title{
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-gray-dark);
}
.mar-access-client .col-form-label,
.mar-access-client .form-control{
    font-size: 0.87rem;
    color: var(--color-gray-dark);
    font-weight: 600;
}
.mar-access-client .modal-footer .btn-primary{
    background-color: var(--color-azul-dark);
    border-color: var(--color-azul-dark);
    font-weight: 600;
}
.mar-access-client a{
    color: var(--color-azul-dark);
}

/* Mar - Products */

.mar-card-products .card .stock{
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--color-red-ultimate);
    font-family: Roboto, sans-serif;
}
.mar-cart-items .cart-item .card-text,
.mar-card-products .card .card-text {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--color-red-ultimate);
    font-family: Roboto, sans-serif;
    border-bottom: 2px solid var(--color-red-ultimate); /* Línea debajo */
    display: inline-block; /* Asegura que la línea solo cubra el texto */
    width: 100%; /* O ajusta según necesites */
}
.boton_productos{
    margin-top: 6em;
    margin-bottom: 6em;
}
.mar-cart-items .cart-item .card-title,
.mar-card-products .card .card-title,
.mar-card-products .card .card-subtitle{
    font-size: 16px;
    line-height: 19.2px;
    color: black;
    font-weight: bold;
    font-family: Roboto, sans-serif;

}
.mar-card-products .card .card-subtitle{
    font-size: 1.25rem;
}
.mar-card-product-title{
  display: -webkit-box;
  height: 40px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*.mar-card-products .card .card-footer{*/

/*    min-height: 55px;*/

/*}*/
.mar-card-products .card .btn-primary{
    background-color: var(--color-azul-dark);
    border-color: var(--color-azul-dark);
    font-weight: 600;
}
.mar-card-products .card .btn{

}

.mar-promos-price p{
    color: var(--color-rojo-dark) !important;
    font-size: 0.8rem;
}
.mar-promos-price p:last-child span{
    font-size: 1.25rem;
}

.mar-cart-items img{
    width: 80px;
    height: 80px;
}
.mar-product,
.mar-car{
    background-color: var(--color-white);
}
.mar-product .mar-product-head p,
.mar-product .mar-product-body p{
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--color-gray-regular);
}
.mar-product .mar-product-body p{
    font-size: 0.80rem;
    font-weight: normal;
}
.mar-product .mar-product-head h4{
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-dark);
}
.mar-product .mar-product-shop p{
    font-weight: 600;
    line-height: 1.2;
}
.mar-product .mar-product-shop p span{
    font-size: 2rem;
}
.mar-product .mar-product-shop p .mar-min-size{
    font-size: 1.6rem !important;
}
.mar-product .mar-product-shop .mar-promo-price{
    color: var(--color-rojo-dark)
}
.mar-summary .mar-price .btn-primary,
.mar-product .mar-product-shop .btn-primary,
.mar-data .btn-primary{
    background-color: var(--color-azul-dark);
    border-color: var(--color-azul-dark);
    font-weight: 600;
}
.mar-cart-items .cart-item .mar-price p{
    width: 150px;
    color: var(--color-gray-dark);
    font-size: 1.00rem;
    font-weight: 600;
}
.mar-summary .mar-price p{
    font-size: 1.00rem;
    font-weight: 600;
    color: var(--color-gray-dark);
}
.paginator p{
    font-size: 0.9em;
    font-style: italic;
    color: var(--color-gray-dark)
}
.mar-cart-items .cart-item .mar-cant{
    min-width: 124.6px;
}

/* Mar Checkout */

.mar-client-data label{
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-gray-dark);
}

.mar-client-data .mar-data-title{
    color: var(--color-gray-regular);
}

.mar-client-data .accordion .accordion-button{
    font-weight: 600;
}

/* Mar - Main */

.mar-title-main{
    background-color: var(--color-white);
}
.mar-title-main img{
    width: 30px;
    height: 30px;
    display: inline;
}
.mar-title-main h4{
   font-size: 1.25rem !important;
   font-weight: 600;
   color: var(--color-gray-dark);
}

/* Mar - Data */

.mar-data .form-label,
.mar-data .form-control,
.mar-data .form-check-label,
.mar-data .form-select{
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-gray-regular);
}

.mar-data .form-control,
.mar-data .form-select{
    border-color: var(--color-azul-light);
}

/* Mar - Info */

.mar-data-info,
.mar-data-info p{
    font-size: 0.8rem;
    color: var(--color-gray-dark);
}
.mar-data-info h4,
.mar-data-info h5,
.mar-data-info h6{
    font-weight: 600;
    color: var(--color-azul-dark);
}

/* Mar - Footer */

footer {
    background-color: var(--color-acero);
    color: var(--color-white);
}

footer h5 {
    font-size: 1.10rem;
    font-weight: 600;
}
footer p{
    font-size: 0.80rem;
}
footer .social-icons .icon {
    font-size: 2.4rem;
    color: var(--color-white);
}
footer .mar-bottom-bar {
    background-color: var(--color-acero-dark);
    padding: 12px 0;
    font-size: 0.75rem;
}
footer .mar-bottom-bar a {
    color: var(--color-white);
    margin: 0 12px;
}
footer .mar-bottom-bar a:hover {
    text-decoration: underline !important;
}

/* Mar - quitar flechas para los campos number*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


#icono_cuadros1{
    display: block;
}
#icono_cuadros2{
    display: none;
}

#cuadros_servicio2{
    display: none;
}
#cuadros_servicio1{
    display: flex;
}
#cuadros_servicio3{
    display: flex;
}
#house_icono{
    display: block;
}
.menu-container{
    display: none;
}
.mar-logo img {
    max-width: 60px;
    height: auto;
}
.usuario_login1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;  /* Ancho adecuado */
    max-width: 100%; /* Para que no desborde en pantallas pequeñas */
    padding: 10px;  /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Suaviza efectos */
}

/* Ajuste para el icono dentro de .usuario_login1 */
.usuario_login1 figure {
    display: flex;
    align-items: center;
    margin: 0;

}

.usuario_login1 img {
    width: 30px; /* Ajusta el tamaño del ícono */
    height: auto;
}

/* Ajuste para el texto "Iniciar Sesión" */
.usuario_login1 figcaption {
    font-size: 14px;
    font-weight: bold;
    color: white !important;
}
#usuario_login2{
    display: none !important;
}
#menu_mobiles{
    display: none !important;
}
#ver_mas{
    background-color: #F7040B; color: #FFFFFF; padding: 10px; text-align: right; border: none;

}

/* Ajusta la posición sin afectar el centrado */
.carousel-control-prev,
.carousel-control-next {
    background: rgba(255, 255, 255, 1.5); /* Fondo blanco difuminado */
    border-radius: 50%; /* Forma circular */
    width: 60px; /* Ajusta el tamaño */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Corrige el centrado */
    margin: 0 40px; /* Espaciado respecto a los lados */
}

/* Cambia el color de las flechas a negro */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%);
    width: 30px; /* Tamaño de la flecha */
    height: 30px;
}
.productos {
    border-radius: 10px;
    border: 1px solid rgba(44, 44, 44, 0.3); /* Borde sutil */
    padding: 5px;
}
/* Mar - Utility */
@media (max-width: 750px) {
    .cotizar-container {
        display: flex; /* Activa flexbox */
        justify-content: left; /* Centra horizontalmente */

    }
    #ver_mas{
        display: block !important;
    }
    #menu_mobiles{
        display: block !important;
    }
    .usuario_login1 {
        width: auto; /* Se adapta mejor en móviles */
        padding: 8px;
        display: none !important;
    }

    .usuario_login1 figcaption {
        font-size: 12px; /* Texto más pequeño en móviles */
    }
    #usuario_login2{
        display: block !important;
    }
    .mar-logo img {
        max-width: 50px;
    }
    /* Menú lateral */
    .menu-container {
        display: block;
        position: fixed;
        top: 0;
        left: -250px; /* Fuera de la pantalla por defecto */
        width: 250px;
        height: 100vh;
        background-color: red;
        color: white;
        padding: 20px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        transition: left 0.3s ease;
        z-index: 1000;
    }

    /* Header */
    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .menu-logo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .close-icon {
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
    }

    /* Título y divisor */
    .menu-title {
        font-size: 18px;
        font-weight: bold;
        margin: 0;
    }

    .menu-divider {
        border: 0;
        height: 1px;
        background: white;
        margin: 10px 0;
    }

    /* Lista del menú */
    .menu-list {
        list-style-type: disc;
        margin: 0;
        padding-left: 20px;
        font-size: 16px;
    }

    .menu-list li {
        margin: 10px 0;
        cursor: pointer;
    }

    .menu-list li:hover {
        text-decoration: underline;
    }
    #house_icono{
        display: none;
    }
    .parrafo_intermedio p {
        font-family: Roboto, sans-serif;
        font-size: 15px;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .subtitulo_especial_page{
        font-size: 25px;
    }
    #carouselMaredusaPomi .carousel-item .carousel-caption h5 {
        font-size: 30px; /* Ajusta el tamaño según tu necesidad */
        width: 82%;
        font-family: Roboto, sans-serif;
        font-weight: 900;
        line-height: 26px;

    }
    #carouselMaredusaPomi .carousel-item .carousel-caption p {
        font-size: 15px; /* Ajusta el tamaño según tu necesidad */
        width: 80%;
        font-weight: 900;
        line-height: 26px;
    }
    #materia_prima{
        font-size: 25px;
        width: 80%;
        margin-bottom: 2em;
    }

    #materia_prima::after {
        content: "";
        display: block;
        width: 50%; /* Línea hasta la mitad del título */
        height: 2px; /* Grosor de la línea */
        background-color: var(--color-red-ultimate); /* Color de la línea */
        position: absolute;
        left: 0; /* Alineado al inicio del texto */
    }

    .container {
        display: flex;
        flex-direction: column; /* O row si están en fila */
    }

    .section1 {
        order: 1; /* Mueve esta sección al segundo lugar */
    }

    .section2 {
        order: 2; /* Mueve esta sección al primer lugar */
    }
    .subtitulo_especial_page{
        font-size: 25px ;
    }
    #icono_cuadros1{
        display: none;
    }
    #icono_cuadros2{
        display: block;
        margin: 0 auto;
    }

    #cuadros_servicio2{
        display: block;
    }
    #cuadros_servicio1{
        display: none;
    }
    #cuadros_servicio3{
        display: none;
    }
    #imagen_entre_iconos{
        display: flex;
        justify-content: center;
        width: 14em;
    }
    /* NOTA: se eliminó aquí la regla #imagen_logo { position:absolute; left:288px; ... } del header anterior */
    .carousel-control-prev,
    .carousel-control-next {
        background: rgba(255, 255, 255, 1.5); /* Fondo blanco difuminado */
        border-radius: 50%; /* Forma circular */
        width: 60px; /* Ajusta el tamaño */
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%; /* Centra verticalmente */
        transform: translateY(-50%); /* Corrige el centrado */
        margin: 0 20px; /* Espaciado respecto a los lados */
    }

    /* Cambia el color de las flechas a negro */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(100%);
        width: 30px; /* Tamaño de la flecha */
        height: 30px;
    }
}
/* NOTA: se eliminaron aquí los 4 @media que sólo contenían reglas #imagen_logo
   (750-1280px, 1281-1366px, 1367-1440px, 1441-1680px) del header anterior. */