.btn-compra {
    background-color:#032154  !important;
    color: white !important;
}

.btn-compra:hover {
    background-color: #F5B50A !important;
    color: white !important;
}

.barra-popular-card {
    background-color: #F5B50A;
    color: #000;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 5px 5px 0 0;
    text-align: center;
}

.card-programa:hover {
    border: solid 2px #032154;
}
/* ESTILO NUEVO PARA CONTADOR */
.promo-bar {
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 0;
}

.promo span {
    display: inline-block;
}

.promo-icon {
    font-weight: bold;
    margin-right: 5px;
}

.promo-contador {
    font-weight: bold;
    display: inline-block;
}

.promo-expire-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clock-row {
  display: flex;
  align-items: baseline;
  font-weight: bold;
}
.number{
    background-color:#FFFFFF;
    border: solid 1px #000000;
    padding: 3px;
    color: #000000;
    line-height: 1;
}

.separator {
  margin: 0 5px;
}

.label-row {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  width: 100%;
  max-width: 240px;
}

.label {
  font-size: 0.6rem;
  width: 25%;
  text-align: center;
}

.spacer {
  display: none;
}

.banerDescripcion {
    font-size: 2rem !important;  /* Tamaño base */
    word-wrap: break-word; /* Permite que las palabras largas se rompan */
    overflow-wrap: break-word; /* Para asegurar que el texto largo se ajuste */
    width: 100%; /* Ajusta el ancho del contenedor al 100% */
    height: auto; /* Ajusta la altura automáticamente */
    max-width: 100%; /* Asegura que no se desborde del contenedor */
    padding: 0 15px; /* Opcional: Agrega un poco de espacio interno */
    text-align: center; /* Opcional: Centra el texto */
    color: #F5B50A !important;
}

/* -------- MEDIA QUERIES PARA RESPONSIVIDAD -------- */

/* Para pantallas muy pequeñas (menos de 576px) */
@media (max-width: 576px) {
    .btn-compra {
        font-size: 0.875rem;  /* Reducir tamaño de texto */
        padding: 10px 15px;   /* Reducir padding */
    }

    .promo-bar {
        font-size: 0.875rem;  /* Reducir tamaño de fuente */
        padding: 8px 0;       /* Reducir padding */
    }

    .banerDescripcion{
        font-size: 1rem !important;
    }
}

/* Para pantallas medianas */
@media (max-width: 768px) {
    .btn-compra {
        font-size: 1rem;     /* Tamaño de fuente más grande */
        padding: 12px 18px;  /* Aumentar padding */
    }

    .promo-bar {
        font-size: 1rem;     /* Aumentar tamaño de la fuente */
        padding: 10px 0;     /* Ajustar padding */
    }

    .banerDescripcion{
        font-size: 1.2rem !important;
    }
}

/* Para pantallas grandes (992px y más grandes) */
@media (min-width: 992px) {
    .btn-compra {
        font-size: 1.2rem;   /* Aumentar tamaño de fuente */
        padding: 14px 30px;  /* Padding más grande */
    }

    .promo-bar {
        font-size: 1.2rem;   /* Aumentar tamaño de la fuente */
        padding: 12px 0;     /* Padding más grande */
    }

    .banerDescripcion {
        font-size: 1.6rem;  /* Aumento del tamaño de fuente en pantallas más grandes */
    }
}

/* ===================================================================
   TEXTO DEL BANNER DE LOS CURSOS (TOEFL, IELTS, GRE, ...)
   - El texto queda en la mitad izquierda para no chocar con la imagen.
   - Maximo 4 lineas en escritorio; si se pasa, se corta con "…".
   - LIMITE PARA EDITAR: maximo 130 caracteres en total
     (titulo + descripcion, contando espacios).
   Se usa !important porque curso.php tiene estilos escritos dentro
   de las etiquetas (style="width: 90%" y style="width: 70%").
   =================================================================== */

/* Contenedor del texto */
#banner {
    width: 50% !important;          /* escritorio: solo la mitad izquierda */
    height: auto !important;
    padding-left: 2rem !important;
    padding-right: 1rem !important;
}

/* Parrafos del texto (version escritorio y version celular) */
#banner p {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Escritorio y tablet: maximo 4 lineas */
@media (min-width: 768px) {
    #banner p.d-md-block {
        display: -webkit-box !important;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
}

/* Tablet: un poco mas de ancho */
@media (min-width: 768px) and (max-width: 991.98px) {
    #banner {
        width: 65% !important;
    }
}

/* Celular: todo el ancho, maximo 5 lineas */
@media (max-width: 767.98px) {
    #banner {
        width: 100% !important;
        padding-left: 1rem !important;
    }
    #banner p.d-md-none {
        display: -webkit-box !important;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}