:root {
    --hue: 320; /* change me */
    --bg: oklch(35% .3 var(--hue));
    --text: oklch(85% .1 var(--hue));
    --shadow: oklch(25% .2 var(--hue));
    --highlight: oklch(98% .05 var(--hue));
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }


.nuevo{
  width: 100%;
  min-height: 100px;
  min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
    place-content: center;
    gap: 10vh;
  background: rgb(195,59,128);
  background: linear-gradient(114deg, rgba(195,59,128,1) 0%, rgba(255,105,180,1) 45%, rgba(0,212,255,1) 100%);
  border-radius: 10px;
  perspective: 700px;
   font-size: clamp(10px, 2vw, 20px);
}
.highlighted-text-shadow {
  text-align: center;
    color: var(--text);
    text-shadow:
      /* regular text-shadow */
      0 .15ch 15px var(--shadow),
      /* text-shadow highlight */
      0 -2px 0 var(--highlight);
      font-size:5em;
    letter-spacing: -.15ch;
    line-height: .75;
  }
  @media screen and (min-width: 768px) {
    .highlighted-text-shadow {
        font-size: 3.5em;
      }}

.imagen_pre_prod{
    background-color: var(--color-light);
    /*background-size: 100% 300px;
    background-repeat:no-repeat;
    background-repeat: no-repeat;
    background-size: cover;*/
    background-position: center;
    background-image: center;
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   width: 100%;
   height: 300px;
   text-align: center;
    /*background-size: 100% 300px, auto, 100% 300px;  */
}
.imagen_pre_prod2{
    background-color: var(--color-light);
    background-position: center;
    background-image: center;
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   text-align: center;
   min-height: 60vh;
}
.imagen_pre_prod:hover, .imagen_pre_prod2:hover{
    filter: opacity(.5);
}
.pprod{
    color: var(--color-brand);
}
.ctnvermas{
    display:flex;
    justify-content: center;
    align-items: center;
}
.vermascat{
	display: block;
	background-color:#fff;
	color:var(--color-brand);
	border-radius:10px;
	text-align:center;
    font-size:20px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
    text-decoration: none;
    padding: 15px;
    font-weight:bold;
}
.vermascat:hover{
    box-shadow: inset 2px 2px 3px #999;
}
.mas_buscados{
    background: rgb(255,105,180);
    background: linear-gradient(145deg, rgba(255,105,180,1) 0%, rgba(255,224,255,1) 45%, rgba(255,255,255,1) 100%);
}


#myCarousel {
    margin-top: 50px;
}
.card-text{
    color: #2E2E2E;
    font-size: 16px;
}
.card-text strong{
    color: var(--color-brand);
}

@media (max-width: 768px) {
    #myCarousel .carousel-inner .carousel-item>div {
        display: none;
    }

    #myCarousel .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
}

#myCarousel .carousel-inner .carousel-item.active,
#myCarousel .carousel-inner .carousel-item-start,
#myCarousel .carousel-inner .carousel-item-next,
#myCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

@media (min-width: 768px) {

    #myCarousel .carousel-inner .carousel-item-right.active,
    #myCarousel .carousel-inner .carousel-item-next,
    #myCarousel .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(25%) !important;
    }

    #myCarousel .carousel-inner .carousel-item-left.active,
    #myCarousel .carousel-item-prev:not(.carousel-item-end),
    #myCarousel .active.carousel-item-start,
    #myCarousel.carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }

    #myCarousel .carousel-item-next.carousel-item-start,
    #myCarousel .active.carousel-item-end {
        transform: translateX(0) !important;
    }

    #myCarousel .carousel-inner .carousel-item-prev,
    #myCarousel .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }
}
.categorias_c .col-md-3{
    padding: 10px;
}
.categorias_c .col-md-3 .card-body{
    border: 0px;
    border-radius: 10px;
    width: 264px;
    height: 159px;

   /* background-color: rgba(255,105,180,0);
    background-position: center;
    background-image: center;
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   text-align: center;*/
}
.imgcat{
    width: 90px;
    height: 90px;
    background-color: var(--color-brand-bg-lg);
    border-radius: 50%;
    margin-bottom: 10px;
    background-position: center;
    background-image: center;
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   border: 5px solid #fefafa;
   box-shadow: 2px 2px 3px #f6d2d6;
}
.categorias_c .col-md-3 .card-body h1{
    display: block;
    font-size: 16px;
    color:var(--color-brand);
    text-align: center;
}
.carousel-control-prev-icon, .carousel-control-next-icon{
    background-color: var(--color-brand-bg-lg);
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 3px;
}
.rgister{
    min-height: 80vh;
}
.imagen_register{
    width: 100%;
    height: 80vh;
  /* background-color: var(--color-brand-bg-lg);
    background-position: center;
    background-image: center;
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 80vh;*/
}

@media screen and (max-width: 600px) {
    .categorias_c .col-md-3 .card-body{
        width: 409px;
        height: 230px;
    }
    .imgcat{
        width: 150px;
        height: 150px;
    
    }
    .categorias_c .col-md-3 .card-body h1{
        font-size: 20px;
    }
}
.quantity {
    position: relative;
  }
  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button
  {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type=number]
  {
    -moz-appearance: textfield;
  }
  
  .quantity input {
    width: 150px;
    height: 42px;
    line-height: 1.65;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    border: 1px solid #eee;
  }
  
  .quantity input:focus {
    outline: 0;
  }
  
  .quantity-nav {
    float: left;
    position: relative;
    height: 42px;
  }
  
  .quantity-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #eee;
    width: 20px;
    text-align: center;
    color: #333;
    font-size: 13px;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.7;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  
  .quantity-button.quantity-up {
    position: absolute;
    height: 50%;
    top: 0;
    border-bottom: 1px solid #eee;
  }
  
  .quantity-button.quantity-down {
    position: absolute;
    bottom: -1px;
    height: 50%;
  }
  .imgcarr{
    width: 80px;
  }

  .iconodir{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 130px;
    color: var(--color-brand);

  }