body {
    background-color: #fff;
    color: #000;
    font-family: 'Open Sauce One', sans-serif;

}


@media (min-width: 1024px) {
    .contenido-principal{
        margin-top:108px;
    }
    .menu-tienda .navbar-nav a.nav-link{
        color: #fff;
        padding:25px 30px;
        font-size: 11pt;
    }
    .menu-tienda .navbar-expand-lg{
        top:36px;
    }
    .comocomprar-titulo{
        color:#23346A;font-size:40pt;
    }
    .columna-tiendacotizar .column2 .card h2.nctz-titulo{
        font-size:40pt;color:#fff;
    }
    .columna-tiendacotizar .column2 .card{
        background: none;border:none;min-height: 355px;padding: 85px 0 0 0;
    }
    .columna-tiendacotizar .column2{
    padding:30px;
}
    .columna-tiendacotizar .column2 p{
        font-size:16pt !important;
        color:#fff;text-align:left;
    }
.columna-tiendacotizar .column1 .card{
    background:#A9E7ED; border: none; margin-right:50px; border-radius:20px 0px 0px 20px; box-shadow: -15px 15px 0px silver;
}
  }

  @media (max-width: 1023px) {
    .contenido-principal{
        margin-top:77px;
    }
    .menu-tienda .navbar-nav a.nav-link{
        color: #fff;
        padding:5px 15px;
        font-size: 11pt;
    }
    .menu-tienda .navbar-expand-lg{
        top:36px;
    }
    .comocomprar-titulo{
        color:#23346A;font-size:30pt;
    }
    .columna-tiendacotizar .column2 .card h2.nctz-titulo{
        font-size:30pt;color:#fff;
        padding-top:65px;
    }
    .columna-tiendacotizar .column2 .card{
        background: none;border:none;min-height: 355px;padding: 5px 0 0 0;
    }
    .columna-tiendacotizar .column2{
    padding-top:15px;
    }
    .columna-tiendacotizar .column2 p{
        font-size:14pt !important;
        color:#fff;text-align:left;
    }
.columna-tiendacotizar .column1 .card{
    background:#A9E7ED; border: none;border-radius:20px 0px 0px 20px; box-shadow: -15px 15px 0px silver;
}
}

.columna-tiendacotizar{
    background:url('/images/bg-tienda-cotizar.png') no-repeat center;
    padding:50px 0;
    margin-top:50px;
}
.columna-tiendacotizar .column1{
    padding:50px 30px 0 30px;
}




.columna-tiendacotizar .column1 .card .cotiza-link{
    background: #fff; color:#000; font-weight:bold; font-size:25pt; text-align:right; padding:15px;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

.navbar {
    background-color: white;
}

.navbar a,
.navbar a:hover {
    color: #000;
}

.hero {
    position: relative;
    text-align: left;
    padding: 50px;
}

.hero img {
    max-width: 100%;
}

.menu {
    top: 100px;
    padding: 45px 20px;
    width: 240px;
    text-align: center;
}

.menu li {
    padding: 20px 0;
}

.menu li a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

.carousel-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.brand-carousel img {
    max-width: 150px;
    margin: auto;
    padding: 10px;
}

.search-box {
    position: relative;
    width: 350px;
    margin-top: 10px;
}

.search-box input {
    width: 100%;
    padding: 10px 100px 10px 15px;
    border: 2px solid #ccc;
    border-radius: 25px;
    outline: none;
    font-size: 13px;
    height: 35px;
}

.search-box button {
    position: absolute;
    right: 3px;
    margin-top: 17px;
    transform: translateY(-50%);
    background: #000;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
}

.search-box button:hover {
    background: #0056b3;
}

.boton-cotizar {
    border-radius: 20px;
    color: #fff;
    width: 100px;
    font-size: 13px;
}

.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    width: 190px;
    height: 216px;
    margin: 100px 20px 20px 20px;
    opacity: 0.6;
    transition: transform 0.5s, opacity 0.5s;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.slide.active {
    width: 300px;
    height: 365px;
    opacity: 1;
    margin-top: 0;
    transform: scale(1.2);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 50%;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

.carousel-container {
    width: 100%;
    padding: 100px 0;
    background: #fff;
}

.carousel img {
    width: 100%;
    height: auto;
    margin: 5px;
}


.btn-contacto {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #02B9CA;
    color: #fff;
    font-size: 10pt;
    padding: 25px 10px 25px 15px;
    border-radius: 15px 0 0px 15px;
    text-decoration: none;
    font-weight: normal;
    writing-mode: sideways-lr;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
    z-index: 999;
  }

.btn-contacto:hover {
    background-color: #02B9CA;
    color:#fff;
  }

.text-main {
    position: absolute;
    top: 40px;
    right: 0px;
    color: white;
    text-align: center;
    padding: 35px 70px 35px 35px;
}

li.nav-item a {
    padding: 30px 30px;
}

a.nav-link,
a:hover.nav-link {
    color: #fff;
    font-weight: bold;
}

.social-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    text-decoration: none;
    color: #333;
    font-size: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/*tienda*/
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.circle {
    width: 90px;
    height: 90px;
    border: 2px solid #0a192f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    font-weight: bold;
    color: #0a192f;
}

.line {
    flex-grow: 1;
    height: 2px;
    background-color: #0a192f;
    margin-top: 0;
}

@media (max-width: 768px) {
    .line {
        display: none;
    }
}
.menu-tienda{
    background: #123C53; 
    padding:0; 
    color:#fff; 
    text-align:right;
}
.menu-tienda .navbar-expand-lg{
    background: #061C31;
    padding: 0;
}


.menu-tienda .navbar-nav a:hover.nav-link{
    color: #123C53;
    background: #fff;
}
.menu-tienda a.nav-link.active{
    color: #123C53;
    background: #fff;
}

.menu-tienda li.nav-item a.dropdown-item{
    padding: 5px 15px;
}

.categoria-list{
    background: #fff;
    padding:150px 0 0 0;
}
.categoria-list .buscador{
    padding-top: 5px;height:40px;
}
.categoria-list .ordprod{
    display: flex; gap: 10px; align-items: center;
}
.categoria-list .ordprod .orden{
    border-radius: 20px; width: 200px;
}
.categoria-list .columna-producto{
    margin:20px 0;
}
.categoria-list .columna-producto .card{
    border:1px solid #3FC4E0;border-radius: 20px;
    margin-bottom: 20px;
}
.categoria-list .columna-producto .card-header{
    padding:15px;border: none;background: none;min-height:250px;
}
.categoria-list .columna-producto .card-body{
    min-height: 105px;

}


.menu-tienda .dropdown-menu.show{
    background:#061C31;
    border-radius: 0;
}
.menu-tienda .dropdown-menu.show a{
    color:#fff;
    background:#061C31;
}
.menu-tienda .dropdown-menu.show a:hover{
    background:#fff;
    color:#061C31;
}
.menu-tienda .cart{
    padding-top: 20px;
    width:100%;
}

.paginador a{
  color:#000;
  text-decoration: none;
  font-size: 20pt;
}
.paginador .number{
    color: #A4A4A4;
    font-size: 20pt;
} 

/*FOOTER*/
.columna-tecno .ondas{
    font-size:18pt;margin:auto;padding:85px 0 35px 0;background:url('/images/bg-vanguardia.png') no-repeat center;    background-size: cover;}
  footer{
    font-size:14pt;border-radius:45px;  margin-bottom:30px;  background: linear-gradient(to right, #3FC4E0, #061C31);
  }
  footer .contenedor{
    padding:50px 50px 0px 50px;
  }
  footer .social-media-container{
    border-top: 1px solid #fff;
  }
  footer .social-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    text-decoration: none;
    color: #333;
    font-size: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  footer .social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  }
  button.add-to-cart,  button.add-to-cart-2{
    border-radius:30px;
    background:#061C31;
    font-size:9pt;width:100%;
    margin:auto;
    letter-spacing: 3px;
  }

  button.add-to-cart:hover,   button.add-to-cart-2:hover{
    color: #fff;
    background: #02B9CA;
    border: 1px solid #02B9CA;
  }
  
  @media (max-width: 767px) {
    .btn-contacto {
        display: none;
    }
}
  
.header-tienda{
    background: #ccc;
}
.tienda-show{
    background: #fff;padding:150px 0 0 0;
}

.tienda-show .contain1er {
    margin: auto;
    display: flex;
    align-items: flex-start; 
}

.tienda-show .thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-right: 10px;
}

.tienda-show .thumbnails img {
    width: 118px;
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 3px;
}

.tienda-show .thumbnails img:hover {
    border-color: #333;
}

.tienda-show .main-image {
    width: 79%;
    border: 1px solid #ddd;
    padding: 5px;
}
.tienda-show .main-image2 {
    width: 100%;
    border: 1px solid #ddd;
    padding: 5px;
}
.tienda-show .thumb {
width: 118px;        /* o cualquier tamaño deseado */
height: 118px;
object-fit: cover;
border-radius: 4px;  /* opcional, para esquinas redondeadas */
}

.tienda-show nav button {
    color: #fff !important;
}

.tienda-show nav button.active {
    background-color: #02B9CA !important;
    color: #fff !important;
}
.tienda-show .nav-tabs button{
    background: #A8E6ED;padding:15px;font-weight:bold;
      font-size: 10pt !important;
}
.tienda-show .menosmas {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tienda-show .menosmas button {
    border: none;
    background: none;
    padding: 0;
}

.tienda-show .menosmas input {
    width: 50px;
    text-align: center;
}
.tienda-show .column-descripcion .producto-nombre{
    font-size:30pt;font-weight:bold;
}
.tienda-show .column-descripcion .producto-precio{
    color:#01B9CA;font-weight:bold;font-size:24pt;padding:15px 0;
}

.btn-nostock {
    padding:12px;
    border-radius: 30px;
    font-size: 9pt;
    width: 100%;
    margin: auto;
    letter-spacing: 3px;
}
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }

  .column-ventas-insumos{
    background:#fff;
  }
  .column-ventas-insumos .ventas{
    border-radius:50px; 
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    padding:60px 80px;  
    background: linear-gradient(to bottom right, #DDE1EF, #CCEAF9);
    min-height:400px;
  }
    .column-ventas-insumos .ventas h2{
        color:#23346A; font-size:40pt;padding-bottom:30px;
    }
 .column-ventas-insumos .ventas p.texto{
    font-size:16pt;text-align: justify;font-weight:normal;
 }
.column-ventas-insumos .insumos{
    border-radius:50px; 
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    padding:60px 80px;  
    background: linear-gradient(to bottom right, #DDE1EF, #CCEAF9);min-height:400px;
}
.column-ventas-insumos .insumos h2{
    color:#23346A; font-size:40pt;padding-bottom:30px;
}

 .column-ventas-insumos .insumos p.texto{
    font-size:16pt;text-align: justify;font-weight:normal;
 }
 @media (max-width:1024px) {
    .column-ventas-insumos .ventas h2{
font-size: 25pt !important;
    }
    .column-ventas-insumos .insumos h2{
font-size: 25pt !important;
    }
.column-ventas-insumos .ventas{
    padding: 50px !important;
}
.column-ventas-insumos .insumos{
        padding: 50px !important;

}
}