@import url('https://fonts.cdnfonts.com/css/cooper-black');


.botones-paginacion {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  top: 50%;

  position: fixed;

  z-index: 100;

  width: 100%;

}



body,

html {

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  /* Evitar el desbordamiento horizontal */

}



.navbar-brand img {

  width: 150px;

}



.newtyp {

  font-family: 'Cooper Black', sans-serif;

}



.text-custom {

  color: var(--color_fuente_principal);

}



.banner {

  width: 100%;

  height: 400px;

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #4081FF;

  text-align: center;

}





.banner::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5); /* Capa negra con transparencia */

  z-index: 1;

}





.banner-text {

  font-size: 2rem;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}





.user-icon {

  margin-left: 10px;

  font-size: 1.5rem;

}



.navbar-large {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

}



/* Estilos generales */

.navbar .form-select {

  width: 250px;

  color: green;

}



.navbar .input-group {

  width: 600px;

}



.btn-haz-pedido {

  background-color: #28a745;

  font-size: 1.1rem;

  padding: 0.5rem 1.5rem;

}



.btn-carrito {

  margin-right: 20px;

}



.iniciar-sesion {

  margin-right: 20px;

}



/* Margen entre elementos */

.navbar-logo-center {

  margin: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* Pantallas medianas */

@media (min-width: 768px) and (max-width: 991.98px) {

  .navbar {

      display: flex;

      justify-content: space-between;

      align-items: center;

      width: 100%;

  }



  .navbar .form-select {

      order: 1;

  }



  .navbar-logo-center {

      order: 2;

      justify-content: center;

      flex-grow: 1;

      /* Forzamos el logo a ocupar el espacio del medio */

  }



  .iconos-der {

      order: 3;

      display: flex;

      align-items: center;

      margin-right: 30px;

  }



  .cmn-divfloat {

      order: 4;

      display: flex;

      align-items: center;

  }

}



/* Pantallas pequeñas */

@media (max-width: 767.98px) {

  .menu_tipo_entrega{

      position: initial;

      width: 50%;

  }

  .navbar {

      display: flex;

      justify-content: space-between;

      align-items: center;

      width: 100%;

  }



  .navbar-toggler {

      order: 1;

  }



  .navbar-logo-center {

      order: 2;

      justify-content: center;

      flex-grow: 1;

      /* Centramos el logo */

  }



  .iconos-der {

      order: 3;

      display: flex;

      align-items: center;

      margin-right: 20px;

      

  }



  .cmn-divfloat {

      order: 4;

      display: flex;

      align-items: center;

  }

}































@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600&display=swap');









.image-box {

  height: 250px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

}



.image-box {

  background-color: #FFF;

}



.image-box img {

  max-width: 100%;

  max-height: 100%;

}



.image-boxb {

  max-height: 200px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

}



.image-boxb {

  background-color: #FFF;

}



.image-boxb a img {

  max-width: 100%;

  max-height: 180px;

}

.image-boxd {

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

}



.image-boxd {

  background-color: #FFF;

}



.image-boxd a img {

  max-width: 100%;

  max-height: 180px;

}

.image-boxd img {

  max-width: 100%;

  max-height: 180px;

}

.max_img {

  max-width: 100%;

  max-height: 180px;

}



.image-boxa {

  height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

}



.image-boxa {

  background-color: #FFF;

}



.image-boxa img {

  max-width: 100%;

  max-height: 100%;

}





@media (max-width: 1200px) {

  h1 {

    font-size: 3vw;

    /* Disminuye el tamaño en pantallas medianas */

  }



  h3 {

    font-size: 2vw;

  }

}



@media (max-width: 768px) {

  h1 {

    font-size: 5vw;

    /* Disminuye aún más en pantallas pequeñas */

  }



  h3 {

    font-size: 3vw;

  }



  h6 {

    font-size: 2vw;



  }

}



@media (max-width: 560px) {

  h1 {

    font-size: 5vw;

    /* Disminuye aún más en pantallas pequeñas */

  }



  h3 {

    font-size: 5vw;

  }



  h6 {

    font-size: 4vw;



  }

}



.content-boxci {

  padding: 10px;

  max-width: 250px;

  border-radius: 25px;

  background-color: #ffffffa0;

  margin: 0 auto;

}







@media (max-width: 768px) {

  .banner {

    height: 300px;

  }



  .navbar-brand img {

    width: 120px;

  }



  .navbar-nav {

    text-align: center;

  }



  .content-box {

    padding: 15px;

  }



  .content-boxci {

    padding: 15px;

  }



  .banner-text {

    font-size: 1.5rem;

  }



  .image-box {

    height: auto;

  }



  .image-boxa {

    height: auto;

  }





}



@media (max-width: 576px) {

  .banner {

    height: 200px;

  }



  .navbar-brand img {

    width: 100px;

  }



  .content-box {

    padding: 10px;

  }



  .content-boxci {

    padding: 10px;

  }





  .banner-text {

    font-size: 1.2rem;

  }

}



.navbar-custom .nav-link {

  color: var(--color_fuente_principal);

  transition: color 0.3s ease;

}



.navbar-custom .nav-link:hover {

  color: #FAA6F4;

}









.cmn-btncircle {

  width: 60px;

  /* Tamaño del botón del carrito */

  height: 60px;

  padding: 6px 0;

  border-radius: 50%;

  /* Circular */

  font-size: 30px;

  /* Tamaño del ícono del carrito */

  text-align: center;

  background-color: #28a745;

  /* Color de fondo */

  color: white;

  /* Color del ícono */

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.cantidad-bubble {

  position: absolute;

  bottom: -5px;

  /* Posición de la burbuja en relación al botón */

  left: -5px;

  background-color: red;

  /* Color de fondo de la burbuja */

  color: white;

  /* Color del texto de la burbuja */

  width: 25px;

  height: 25px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  /* Tamaño del texto de la cantidad */

  font-weight: bold;

  border: 2px solid white;

  /* Para destacar la burbuja */

}





#toast-container {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}



.toast-notification {

  background-color: #333;

  color: white;

  padding: 15px 20px;

  border-radius: 5px;

  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

  font-size: 16px;

  text-align: center;

  animation: fadeInOut 2.5s ease-in-out forwards;

}



.toast-notification.success {

  background-color: #28a745; /* Verde */

}



.toast-notification.error {

  background-color: #dc3545; /* Rojo */

}



@keyframes fadeInOut {

  0% {

      opacity: 0;

      transform: translateY(-20px);

  }

  10% {

      opacity: 1;

      transform: translateY(0);

  }

  90% {

      opacity: 1;

      transform: translateY(0);

  }

  100% {

      opacity: 0;

      transform: translateY(-20px);

  }

}



.link-custom1 {

  color: red;          /* Cambia el color del texto a rojo */

  text-decoration: none; /* Elimina la línea subrayada */

}

























.btn-transparent {

  background-color: transparent;

  border: 2px solid var(--color_fuente_principal);

  color: var(--color_fuente_principal);

  padding: 10px 20px;

  text-transform: uppercase;

  transition: background-color 0.3s ease;

  display: block;

  /* Asegura que el margen automático funcione */

  text-align: center;

  /* Centra el texto dentro del botón */

  width: 200px;

  /* Ancho fijo para el botón */

  margin: 0 auto;

  /* Centra el botón horizontalmente */



}



@media (max-width: 1200px) {



  .btn-transparent {

    background-color: transparent;

    border: 2px solid var(--color_fuente_principal);

    color: var(--color_fuente_principal);

    padding: 10px 20px;

    text-transform: uppercase;

    transition: background-color 0.3s ease;

    width: auto;

  }

}



@media (max-width: 768px) {

  .btn-transparent {

    background-color: transparent;

    border: 2px solid var(--color_fuente_principal);

    color: var(--color_fuente_principal);

    padding: 10px 20px;

    text-transform: uppercase;

    transition: background-color 0.3s ease;

    width: auto;

  }

}



.btn-transparent:hover {

  background-color: var(--color_fuente_principal);

  color: #fff;

}

.btn-div-active {

  color: #fff;

  background-color: var(--color_fuente_principal);

  /* border-radius: 5px; */

}



.btn-div {

  color: #333;

  transition: background-color 0.3s, color 0.3s;

  cursor: pointer;

}



.btn-div:hover {

  background-color: var(--color_fondo_principal);

  color: #fff;

}



.btn-div,

.btn-div-active {

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

}



@media (max-width: 768px) {



  .btn-div,

  .btn-div-active {

    font-size: 14px;

    padding: 8px;

  }

}



@media (max-width: 576px) {



  .btn-div,

  .btn-div-active {

    font-size: 12px;

    padding: 6px;

  }

}

.container_card .card {

  text-align: center;

  font-size: 18px;

  min-height: 200px;

  /* Altura mínima */

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  cursor: pointer;

  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s ease;

  color: #333;

  flex: 1 1 calc(20% - 15px);

  /* Ocupa el 25% del ancho, restando el espacio entre tarjetas */

  box-sizing: border-box;

  margin-bottom: 15px;

  /* Separación inferior entre tarjetas */

}



.container_card .card:hover {

  transform: scale(1.01);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

  color: var(--color_fuente_principal);

}





.container_cardP .card {

  text-align: center;

  font-size: 18px;

  min-height: 200px;

  /* Altura mínima */

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s ease;

  color: #333;

  flex: 1 1 calc(20% - 15px);

  /* Ocupa el 25% del ancho, restando el espacio entre tarjetas */

  box-sizing: border-box;



  margin-bottom: 15px;

  /* Separación inferior entre tarjetas */

}



.container_cardP .card:hover {

  transform: scale(1.01);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);

  color: var(--color_fuente_principal);

}









.custom-btn {

  background-color: transparent;

  color: #000;

  border: 2px solid #3F8F4A;

  transition: background-color 0.3s, color 0.3s;

}



.custom-btn:hover {

  background-color: #3F8F4A;

  color: white;

  border-color: #3F8F4A;

}



.custom-btn-2 {

  background-color: transparent;

  color: #000;

  border: 2px solid #3F8F4A;

  transition: background-color 0.3s, color 0.3s;

}



.custom-btn-2:hover {

  background-color: #3F8F4A;

  color: white;

  border-color: #3F8F4A;

}



.custom-btn-inf {

  background-color: transparent;

  color: #000;

  border: 2px solid #3F8F4A;

  transition: background-color 0.3s, color 0.3s;

}



.custom-btn-inf:hover {

  background-color: #3F8F4A;

  color: white;

  border-color: #3F8F4A;

}





.green{

  color: rgb(42, 143, 42);

}

.red{

  color: rgb(124, 8, 8);

}

.gray{

  color: rgb(87, 87, 87);

}



.btn-back {

  background-color: #fff;

  color: var(--vdt-color-500);

  line-height: 1px;

  font-size: 25px;

  position: fixed;

  text-align: center;

  bottom: 50px;

  left: 25px;

  padding: 10px 10px;

  border: 1px solid #3F8F4A;

  border-radius: 15px;

  cursor: pointer;

  transition-duration: .3s;

  z-index: 99;

}



.btn-back:hover {

  background-color: #3F8F4A;

  color: #fff;

}