.aviso-button {
     color: #017fff;
     text-decoration: underline;
 }

 .promo-card {
     margin-bottom: 0;
 }

 .card-footer-promo {
     padding: 15px;
     background: #fff;
     border: 1px solid #ddd;
 }

 .btn-gac {
     background: #000;
     color: #fff;
     text-transform: uppercase;
     padding: 10px 20px;
 }

 .fecha-expira {
     font-size: 12px;
     color: #666;
     margin-top: 10px;
 }

 /* Grid responsivo con gap uniforme: 1 col mobile, 2 tablet, 3 desktop */
 #promociones-container {
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
     margin-left: 0;
     margin-right: 0;
     align-items: start;
 }

 #promociones-container::before,
 #promociones-container::after {
     display: none;
 }

 .promo-col {
     display: flex;
     min-width: 0;
     width: 100%;
     float: none;
     padding-left: 0;
     padding-right: 0;
 }

 @media (min-width: 768px) {
     #promociones-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 992px) {
     #promociones-container {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* Contenedor de la tarjeta */
 .promo-card-wrapper {
     background: #fff;
     margin-bottom: 0;
     border: 1px solid #e0e0e0;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     /* Animaci¨®n suave */
     overflow: hidden;
     display: flex;
     flex-direction: column;
     width: 100%;
     height: auto;
 }

 /* Efecto Hover */
 .promo-card-wrapper:hover {
     transform: translateY(-5px);
     /* Se eleva un poco */
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     /* Sombra m¨¢s profunda */
     border-color: #b11116;
     /* Cambio sutil de borde al color de la marca */
 }

 /* Imagen a ancho completo: la card adopta la proporci¨®n natural de la imagen */
 .promo-image-container {
     width: 100%;
     overflow: hidden;
     line-height: 0;
 }

 .promo-image-container img,
 .promo-card__image {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease;
 }

 .promo-card-wrapper:hover .promo-image-container img {
     transform: scale(1.03);
     /* Zoom muy ligero a la imagen */
 }

 /* Estilos de contenido */
 .promo-content {
     padding: 18px 20px 20px;
     text-align: left;
     display: flex;
     flex-direction: column;
     flex: 1;
     min-width: 0;
 }

 .promo-card__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: auto;
     padding-top: 4px;
 }

 .promo-card__btn {
     margin: 0;
     flex: 1 1 auto;
     min-width: 0;
     text-align: center;
     white-space: normal;
 }

 .promo-title {
     font-weight: bold;
     font-size: 22px;
     margin: 0 0 15px 0;
     color: #333;
 }

 .promo-card__title {
     font-weight: bold;
     font-size: 20px;
     margin: 0 0 10px 0;
     color: #333;
     letter-spacing: 0.01em;
 }

 .promo-card__subtitle {
     font-size: 14px;
     line-height: 1.5;
     color: #444;
     margin: 0 0 12px 0;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.02em;
 }

 .promo-expire {
     margin: 0 0 12px 0;
     font-size: 13px;
     color: #888;
     font-weight: 600;
 }

 .promo-card__terms {
     margin: 0 0 16px 0;
     font-size: 11px;
     line-height: 1.55;
     color: #777;
     word-wrap: break-word;
     overflow-wrap: break-word;
 }

 .promo-card__btn--outline {
     border: 2px solid #000;
     color: #000;
     background: #fff;
     font-weight: bold;
     text-transform: uppercase;
     padding: 8px 20px;
     border-radius: 4px;
 }

 .promo-card__btn--outline:hover,
 .promo-card__btn--outline:focus {
     background: #000;
     color: #fff;
     border-color: #000;
 }

 .btn-gac-promo {
     background-color: #000;
     color: #fff;
     border-radius: 4px;
     padding: 8px 25px;
     font-weight: bold;
     text-transform: uppercase;
     transition: background 0.3s;
 }

 .btn-gac-promo:hover {
     background-color: #b11116;
     /* Color GAC al pasar el mouse */
     color: #fff;
 }

 .thumbnail {
     display: block;
     padding: 4px;
     margin-bottom: 20px;
     line-height: 1.42857143;
     background-color: #fff;
     border: 1px #6b6b6b;
     border-radius: 4px;
     -webkit-transition: border .2s ease-in-out;
     -o-transition: border .2s ease-in-out;
     transition: border .2s ease-in-out;
 }

 .model-buttons-container {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .section-title {     
     font-weight: bold;
     font-size: 24px;
     margin: 0 0 15px 0;
     color: #333;

 }

 /* Fix para Bootstrap 3 si las alturas de texto var¨ªan */
 @media (min-width: 768px) {
     .row-flex-promo {
         display: grid;
         gap: 30px;
     }
 }