@font-face {
    font-family: 'Hartwell Regular';
    src: url('../fonts/Hartwell_Alt_Regular.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Hartwell Bold';
    src: url('../fonts/Hartwell_Alt_Bold.woff') format('woff'),
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: 'Hartwell Black';
    src: url('../fonts/Hartwell_Alt_Black.woff') format('woff'),
    font-weight: black;
    font-style: black;
}
body.bg-light {
    background-color: #fbf7da !important;
    color: #333; /* Color de texto principal */
}
.color-primary strong{
 color: #ffdb4f !important;   
}

/* —— Bloqueo global sin tocar 10 000 nodos —— */
#grid-cartones.limit-reached::after{
  /* tono gris + leve transparencia para dar sensación de “bloqueado” */
    content: '';
    filter: grayscale(.6) opacity(.5);
    cursor: not-allowed;
    background: white !important;
    top: 0px;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
}

/* Los cartones elegidos se mantienen al 100 % de opacidad */


#grid-cartones .bubble.active{
  filter:none;
  position: relative;
  z-index: 9;
}
#grid-cartones.conflict::after {
    top: 150px !important;
    height: 60% !important;
}
#grid-cartones .bubble.ocupado{
  filter: grayscale(.9) opacity(.4);
  cursor: not-allowed;
}

/* ==== Botones del modal selector (animación más sutil) ==== */
#modalSelectorSorteo {
 background: rgb(0 0 0 / 60%) !important;   
}
#btnDiario,
#btnLineaBlanca{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: pulseJump 2.8s ease-in-out infinite;
  width: 90% !important;
  margin: 0px auto;
  font-size: 18px;
}

/* salto + escala muy discreta */
@keyframes pulseJump{
  0%,100%{
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0,0,0,.0);
  }
  50%{
    transform: translateY(-2px) scale(1.04);   /* <-- escala reducida */
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
  }
}

/* realce ligero al pasar el ratón */
#btnDiario:hover,
#btnLineaBlanca:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* ==== Backdrop un poco más oscuro solo para ese modal ==== */
.backdrop-selector.show{
  opacity: .75 !important;                      /* default .5 → ahora .75 */
}


/* HEADER */

/* Solo en desktop (≥992 px) el logo se “cuelga” */
@media (min-width:1200px){
    
                .site-header:not(.shrink) .brand-float {
                position: absolute;
                top: 0;
            }
    /* Recuadro detrás del logo */
.brand-box{
  background:#6a2818;               /* mismo color del navbar            */
  padding:15px 45px;                /* deja aire alrededor del logo      */
  display:inline-block;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}
.brand-float {
    padding-top: 0px !important;
}

/* Tamaño del logo */
.logo-navbar{height:50px !important;width:auto;}   /* cámbialo a gusto */
  .brand-float{
    position:absolute;
    top:0;                           /* arranca en la parte superior del navbar */
  }
  /* Da espacio a los links para que no choquen con el logo */

}
.site-header.shrink .brand-float {
    position: static;
    transform: none;
}
.site-header.shrink .brand-box {
    padding: 0px;
    box-shadow: none;
}
.site-header.shrink .logo-navbar {
    height: 32px !important;
}
.site-header.shrink .navbar-nav {
    margin-left: 0 !important;
}
.shrink .navbar-collapse {
    flex-grow: 0 !important;
}
.navbar-toggler{
    border:2px solid #fff;            /* bordecito blanco (opcional) */
}
.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler:focus {
    box-shadow: inherit !important;
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
      --bs-offcanvas-width: 340px !important;  
}
.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) #7a2f1d !important;
    
}
.offcanvas .list-unstyled, .dropdown-menu-dark {
    background: #202020;
    border: 0px !important;
    border-radius: 0px !important;
}
.dropdown-menu-dark {
    padding: 0px !important;
}
.dropdown-menu-dark li:hover {
    background: #ffd74a;
    overflow: hidden;
}
.dropdown-toggle::after {
    position: relative;
    top: 1px;
}
.offcanvas .list-unstyled, .dropdown-menu-dark li a{
    font-weight: 700;
    font-size: 0.9rem;
}
.offcanvas .list-unstyled, .dropdown-menu-dark li:hover a{
    color: black;
}
.btn-close-white {
    opacity: 1 !important;
}
.btn-black {
    background: black !important;
}
button.btn-black-2 {
    background: black !important;
    color: white !important;
}
.btn-black:hover {
    transform: inherit !important;
    box-shadow: inherit !important;
}

.bg-madera {background:#6a2818!important;}
.navbar .nav-link{color:white!important;font-weight:700; font-size: 15px;}
.navbar .nav-link:hover,
.navbar .nav-link.active{color:#ffdb4f!important;}
.logo-navbar{height:40px;width:auto;}
body{padding-top:70px;}
.offcanvas-start{width:260px;background:#6a2818!important;color:#fff;}
.offcanvas .nav-link{color:white;font-weight:700;}
.offcanvas .nav-link:hover,
.offcanvas .nav-link.active{background:#ffdb4f;color:#000!important;}
.offcanvas .navbar-nav>li{border-bottom:1px solid #7a2f1d;}
.offcanvas #submenuCartones .nav-link{font-weight:700;font-size:.9rem;padding-left:0;}
.fa-chevron-down{transition:transform .3s;font-size:.75rem;}
.rotate{transform:rotate(180deg);}
.dropdown-item:active {
    background: #ffd74a !important;
}

.full-height {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60vh; /* Asegura que ocupe toda la altura */
}
/* Títulos y Texto - Mantenemos tipografías, ajustamos colores */
.font-1 { 
    color: black;  /* Rojo más oscuro, como madera envejecida */
    padding-top: 25px !important;
    margin-bottom: 10px !important;
    font-family: 'Hartwell Bold', sans-serif;
    font-size: 35px !important;
}
.paragraph {
    /* font-size: 1.1rem;  Mantenemos tamaño */
    /* font-family hereda del body */
    color: #444; /* Texto un poco más oscuro */
}
/* Tarjeta (Card) - Estilo Caricatura y Madera */
.card {
    border-radius: 5px !important; /* Bordes más redondeados */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4) !important; /* Sombra más pronunciada */
    overflow: hidden;
    background-color: #6a2818 !important; /* Fondo beige claro, como papel viejo */
    position: relative; /* Para los efectos de "madera" */
    border: 0px !important;
}
.pt-35 {
    padding-top: 35px !important;
}
/* Efecto de vetas de madera (sutil) */
.card-body {
    padding: 2.5rem !important;
}
.cd-body {
    /*background: linear-gradient(to bottom, white, #f8f9fa);  Quitamos este degradado */
   padding-left: 2.5rem !important; /* Más padding */ 
   padding-right: 2.5rem !important;
    position: relative; /* Importante para el z-index */
    z-index: 2;     /* Para que el contenido esté encima del ::before */
}
.cd-footer {
   padding-left: 2.5rem !important; /* Más padding */ 
   padding-right: 2.5rem !important;
   padding-bottom: 2.5rem !important;
}
.card-bd p, .card-body p {
    color: white !important;
}
.d-none {
    display: none;
}
/* Alertas */
.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
.alert-cartons {
    background-color: #ffd74a; /* Verde más caricaturesco */
    color: black; /* Verde más oscuro, pero no tanto */
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}
.cartons-available {
    top: 0px;
    left: 0px;
    width: 100% !important;
    z-index: 9;
}
.carton-price {
    font-size: 18px;
    margin-bottom: 30px !important;
}

/* Botones */
.btn-primary {
    background-color: #ffdb4f; /* Rojo más vivo, estilo botón de dibujos animados */
    border: 0px !important;
    border-radius: 5px !important;
    padding: 0.7rem 2rem !important; /* Más padding */
    color: black !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}
.btn:focus-visible {
  background-color: #ffdb4f !important; /* Rojo más vivo, estilo botón de dibujos animados */
  border: 0px !important; 
  box-shadow: none !important;
}
.btn-primary:hover {
    background-color: #f9cf26; /* Rojo más oscuro al hover */
    transform: translateY(-2px); /* Más desplazamiento */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* Sombra más grande al hover */
}
.btn-secondary {
  background-color: #6a2818; /* Rojo más vivo, estilo botón de dibujos animados */
  border: 0px;
  border-radius: 5px;
  padding: 0.7rem 2rem; /* Más padding */
  color: white !important;
  font-weight: bold;
  transition: all 0.3s ease;
}
.btn-secondary:focus-visible {
background-color: #6a2818 !important; /* Rojo más vivo, estilo botón de dibujos animados */
border: 0px !important; 
box-shadow: none !important;
}
.btn-secondary:hover {
  background-color: #581d0f; /* Rojo más oscuro al hover */
  transform: translateY(-2px); /* Más desplazamiento */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* Sombra más grande al hover */
}
/* style.css */
.btn-processing,
.btn-processing:disabled,
.btn-processing.btn-secondary:disabled{   /* +1 clase ==> más específica    */
  background-color:#000 !important;       /* usa background-color           */
  border: 0px !important;           /* evita borde gris               */
  color:#fff !important;
  opacity:.85 !important;
  pointer-events:none;                    /* sigue bloqueando el clic       */
}

 /* Botones de Operación (+ y -) */
 .quantity-input {
    text-align: center;
 }
 .label-cantidad {
    font-size: 20px;
    color: white !important;
 }
 .btn-operador {
    background-color: #fff4ca; 
    color: black;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 1.7rem;      /* Aumentamos un poco el tamaño */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;         /* Aumentamos ancho */
    height: 2.7rem;        /* Aumentamos altura */
}
.btn-operador:hover {
    background-color: #fad282; /* Verde más oscuro al pasar el ratón */
    transform: scale(1.1); /* Aumento de tamaño más notable */
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* Sombra más grande */
}
.cantidad-container {
    display: flex;
    align-items: center;
    gap: 0.7rem;  /* Aumentamos un poco el espacio */
    justify-content: center;
}
  .input-cantidad {
    width: 4.5rem; /* Aumentamos ancho */
    text-align: center;
    font-weight: bold;  /* Números en negrita */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra */
    padding: 0.4rem 0.2rem;
    text-align: center !important;
}
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;
}
.payment-total {
    line-height: 30px;
}
.payment-total strong{
    display: block;
    font-size: 30px;
}
/* Campos del formulario */
.form-label {
    font-weight: bold; /* Etiquetas en negrita */
    color: #ffdb4f !important;
}
.form-control {
  border-radius: 5px; /* Bordes más redondeados */
  padding: 0.6rem 1rem;  /* Más padding */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra */
}
.form-control:focus { 
    border-color: black;
}
/* Mensaje de error */
.form-text.text-danger {
    font-size: 0.9rem; /* Tamaño de fuente ligeramente más pequeño */
    margin-top: 0.25rem;
}
/* Datos de pago */
h5 {
  color: #9c4138 !important; /* Color madera para los títulos */
  margin-top: 2rem;
}

/* Imagen */

.main-img {
    max-width: 80%;
}

/* Datos del pago movil */
.datos_del_pago_movil{
    background: #fbf7da;
    padding: 10px 15px;
    margin-bottom: 1rem;
    border-radius: 5px;
    text-align: center;
}
.datos_del_pago_movil h5 {
    margin-top: 0px !important;
    color: black !important;
}
.datos_del_pago_movil p {
    color: black !important; 
    margin-bottom: 0px !important;
}
/* Contenedor para el file input personalizado */
.custom-file-container {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0px !important;
}
/* Ocultamos el input real */
.custom-file-container input[type="file"] {
    display: none;
}
/* Botón que reemplaza al input real */
.custom-file-label {
    background-color: #ffdb4f; /* Tonalidad café, acorde a tu tarjeta */
    color: #black;
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: background-color 0.3s;
    font-weight: 500;
    justify-content: center;
    width: 100%;
}
.custom-file-label:hover {
    background-color: #fad282;
}
/* Para el ícono del botón */
.custom-file-label i {
    margin-right: 8px;
}
.grass-footer {
    position: relative;
    background-color: #15463b; /* Verde del footer */
    color: #fff;
    text-align: center;
    padding: 2rem 1rem !important;
    overflow: visible; /* Ocultamos posible desbordamiento del ::before */
    margin-top: 80px;
}

.grass-footer::before {
    content: "";
    position: absolute;
    top: -48px; /* Ajusta según la altura de tu imagen */
    left: 0;
    width: 100%;
    height: 50px; /* Ajusta según la altura de tu imagen */
    background: url("../../uploads/system/grass_border.png") repeat-x center;
    /* Debes colocar en "public/img/grass-border.png" una imagen con borde que
        simule dientes de pasto (lo ideal es una imagen repetible horizontalmente). */
}
.grass-footer a{
  text-decoration: none !important;
}

/* Contenedor de la imagen principal y billetes */
.gocho-container {
    position: relative;
    display: inline-block;
    text-align: center;
  }
  
  /* Dólares flotantes (base) */
  .dollar-floating {
    position: absolute;
    width: 60px;      /* Ajusta al tamaño deseado */
    height: 60px;     /* Ajusta al tamaño deseado */
    background-image: url('../../uploads/system/dollar.png'); /* Usa tu imagen de billete */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 3;       /* Detrás de la imagen principal */
    opacity: 0.9;     /* Pequeña transparencia */
    /* Nueva animación “flotante” */
    animation: float-dollar 4s ease-in-out infinite;
  }
  
  /* Posiciones de cada billete */
  .dollar1 {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
  }
  
  .dollar2 {
    top: 40%;
    right: 3%;
    animation-delay: 1s;
  }
  
  .dollar3 {
    top: 3%;
    right: 15%;
    animation-delay: 2.5s;
  }
  
  /* Animación flotante con una ligera rotación */
  @keyframes float-dollar {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
    100% {
      transform: translateY(0) rotate(0deg);
    }
  }
  .logo {
    width: 200px !important;
  }
.text-danger {
  color: white !important;
  margin-top: 10px !important;
  font-weight: 700 !important;
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  background-color: #efefef !important;
}
.menu-footer {
  padding-top: 15px;
  padding-bottom: 15px;
}
footer a {
  font-weight: 700;
  color: #ffdb4f !important;
}
.modal-content {
  border-radius: 5px !important;
}
.modal-header {
  background: #6a2818 !important;
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
}
.modal-header h5 {
  margin-top: 0px !important;
  color: white !important;
}
.modal-header .btn-close {
  --bs-btn-close-color: white !important;
}
.modal-body label {
  color: black !important;
}
.tooltip-copiado {
  display: none;
  color: var(--bs-secondary-color) !important;
  font-size: 13px !important;
}
.font-h1-purchase-success {
  margin-top: 0px !important;
  color: #ffdb4f !important;
  padding-top: 0px !important;
}
.alert-purchase_success {
  color: black !important;
  background: white !important;
}
.button-carton-download {
  background: #ffdb4f;
  border: 0;
  color: black;
  font-weight: 600;
}
.button-carton-download:hover {
  background-color: #f9cf26; /* Rojo más oscuro al hover */
  color: black !important;
}
.text-carton {
  font-weight: 700 !important;
}
.btn-white {
  background: white !important;
  margin-top: 10px !important;
  color: black !important;
}
.info-consult-carton {
    margin-bottom: 5px !important;
}
.nota {
  font-size: 12px !important;;
}
div.card-success {
  padding-bottom: 1rem !important;
}
.text-whatsapp-group a{
  color: #ffdb4f !important;
  font-weight: 700;
  text-decoration: none !important;;
}
.logo-login img{
  width: 230px !important;
  margin-bottom: 25px !important;
}
body.background-dollar {
  background-image: url('../../uploads/system/background_dollar.png')
}
.btn-operador {
    user-select: none;
    touch-action: manipulation;
}
.n-desktop-none {
    display: none !important;
}
.mw-650 {
    max-width: 650px !important;
}
.link-wsp {
    text-decoration: none; 
    font-weight: 700; 
    color: #6a2818
}
.whatsapp-float {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 15px;
  background-color: #25d366; /* Verde de WhatsApp */
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  font-size: 27px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  z-index: 999; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.my-whatsapp-icon {
  margin-top: 2px;
}
.whatsapp-float:hover {
  background-color: #20b958; /* un poco más oscuro al hover */
  text-decoration: none;
  color: #FFF;
}
.carita-triste, .pronto {
    width: 75px !important;
}
.terminos-y-condiciones h3{
    font-size: 1rem !important;
}
.terminos-y-condiciones p {
    font-size: 13px !important;
}
.mt-15 {
    margin-top: 15px !important;
}

/* WINNERS */

.card-winner         { background:#fbf7da;border:none;border-radius:.75rem }
.card-winner h5      { font-size:1.1rem; margin-top: 0px !important;
}
.card-winner .card-body {
    padding-bottom: 15px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-top: 30px !important;
}
.card-winner .card-footer {
    padding-bottom: 30px !important;
}
.card-winner ul li {
    color: white !important;
}
#winnersContainer {
    padding-top: 20px !important;
}
.card-winner .btn-primary{
    width: 100% !important;
    z-index: 999;
    position: relative;
}
.card-winner ul li {
    margin-bottom: 7px !important;
}
.card-winner ul li i {
    width: 25px;
    height: 25px !important;
    background: #ffdb4f;
    color: black;
    border-radius: 100%;
    text-align: center;
    margin-right: 5px;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13px !important;
}
.container-winners {
    padding-top: 0px !important;
}
.card-winner h5 {
    margin-bottom: 10px !important;
}
.selecciona-tus-cartones {
    margin-bottom: 15px !important;
}
#btnConfirmar {
    margin-top: 15px !important;
    position: realtive;
    z-index:9;
}
#btnNext, #btnPrev {
    background: black !important;
    border: 0px !important;
    color: white;
    font-weight: 600;
    padding: 5px 15px;
}
#holdCountdown {
    text-align: center !important;
    background: #15463b !important;
    padding: 5px !important;
    color: white !important;
}
.fa-clock {
    margin-right: 3px !important;
}
.gp-title {
    display: none !important;
}
#gpConfirm {
    background: #6a2818 !important;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}
#gpCancel {
    background: black !important;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}
.arrow-down-buy {
    font-size: 25px;
    color: #ac0001;
}

/* VISOR Y SELECTOR DE CARTONES */

.bubble{min-width:54px; width: 54px; height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;user-select:none;transition:.15s;background:#fff}
.bubble.active{background:#000!important;color:#fff!important}
.modal-body{max-height:80vh;overflow-y:auto}
#grid-cartones{max-height:60vh;overflow-y:scroll}
.tooltip-copiado{display:none;font-size:.75rem}
#visorGrid{max-height:70vh;overflow-y:auto}
#visorGrid .bubble{width:53px;height:53px}
#visorImagen{max-height:70vh;width:auto;object-fit:contain}
#visorCartonesModal .modal-body{overflow-y:hidden}
footer .menu-footer {
    text-align: center;
}

@media (max-width: 512px){
.button-carton-download{
    width: 100% !important;
}
}
footer .menu-footer ul{
    list-style: none;
    padding-left: 0px;
    display: flex;
    margin: 0px auto;
    justify-content: center;
}
footer .menu-footer ul li {
    padding-right: 15px;
}
footer .menu-footer ul li:last-child {
    padding-right: 0px;
}
@media (max-width: 1400px){
    .pt-35 {
     padding-top: 0px !important;   
    }
}
@media (max-width: 1024px){
    .main-index .col-md-5, .main-index .col-md-7 {
        width: 100% !important;
    }
    .main-index form {
        margin-bottom: 30px;
    }
}
@media (max-width: 767px){
     .dollar1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s; 
  }
  .dollar2 {
    top: 40%;
    right: 3%;
    animation-delay: 1s;
  }
  .dollar3 {
    top: 0%;
    right: 11%;
    animation-delay: 2.5s;
  }
  .whatsapp-float {
      width: 55px !important;
      height: 55px !important;
  }
  .my-whatsapp-icon {
  margin-top: 0px !important;
    }
}
@media (max-width: 600px){
  footer .menu-footer ul{
    display: block;
    margin: 0px auto;
    }     
    footer .menu-footer ul li{
        padding-right: 0px !important;
        margin-bottom: 7px;
    }
    #winnersContainer {
    padding-top: 0px !important;
    }
    #noWinners {
        margin-top: 20px;
    }
}
@media (max-width: 512px){
    .font-1 {
        font-size: 30px !important;
        line-height: 36px !important;
    }
    .font-h1-purchase-success {
        font-size: 25px !important;
        line-height: 30px !important;
    }
    footer p {
        font-size: 12px !important;
    }
    .n-desktop-none {
        display: block !important;
    }
    .alert-cartons {
        padding: 1rem 0.5rem !important;
    }
}
@media (max-width: 414px){
    .font-1 {
        font-size: 26px !important;
        line-height: 31px !important;
    }
    .card-body {
        padding: 1.5rem !important;
    }
    .font-h1-purchase-success {
        font-size: 22px !important;
        line-height: 26px !important;
    }
    .dollar-floating {
        width: 50px;
        height: 50px;
    }
    .carton-price {
        font-size: 17px !important;
    }
    .text-purchase-success {
        font-size: 15px !important;
    }
    .alert-cartons {
        padding: 1rem 0.5rem !important;
    }
    footer .menu-footer a {
        width: 100% !important;
        padding: 0px !important;
        display: block !important;
    }
    footer .menu-footer a:first-child{
        border-right: 0px solid #ffdb4f;
        padding-right: 0px !important;
        margin-bottom: 7px;
    }
}

/* VISOR Y SELECTOR DE CARTONES RESPONSIVE */

@media (max-width: 1024px){
    #visorCartonesModal .col-12 {
        width: 50% !important;
    }
}
@media (max-width: 991px){
    #visorCartonesModal .col-12 {
        width: 100% !important;
    }
    #visorGrid {
        max-height: 35vh !important;
    }
    #visorImagen {
        max-height: 100% !important;
    }
    #visorCartonesModal .modal-body {
        max-height: 100% !important;
    }
}
@media (max-width: 426px){
    #visorGrid .bubble{width:44px;height:44px; min-width: 44px;}
}