/* Portal de Alumnos IDIP · promociones para alumnos (propuesta de Claude). Usa las variables de styles.css. */

.promos { display: grid; grid-template-columns:minmax(0,1fr); gap: .85rem; margin: 0 0 1.5rem; }
.promos--despues-cursos { margin-top:1.5rem; }
.promos[hidden] { display: none; }

@media (min-width: 860px) {
  .promos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

.promo {
  min-width:0;
  position: relative;
  background:
    linear-gradient(90deg, var(--amarillo, #f2b705) 0 6px, transparent 6px),
    var(--amarillo-100, #fff3cc);
  border: 1px solid #e8cf7a;
  border-radius: var(--radius, 14px);
  padding: 1rem 1.1rem 1rem 1.4rem;
  color: var(--texto, #1b2a2e);
}

.promo__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }

.promo__tag {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #5c3f00;
}

.promo__cerrar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: #5c3f00;
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.promo__cerrar:hover { background: rgb(92 63 0 / 10%); }

.promo__titulo {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.2rem; color: var(--petroleo-900, #06343d); margin: 0 0 .3rem;
}

.promo__texto { margin: 0 0 .8rem; overflow-wrap: anywhere; }

.promo__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

.promo__cta {
  min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center;
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem;
  border-radius: 10px; background: var(--petroleo, #0b4f5c); color: #fff;
  font-weight: 650; text-decoration: none;
}
.promo__cta:hover { background: var(--petroleo-900, #06343d); color: #fff; }

.promo__vence { font-size: .87rem; color: #4d3a0a; }
.promo__top, .promo__pie, .promo__titulo, .promo__tag { min-width:0; overflow-wrap:anywhere; }

.promos--curso { margin-top: 1.5rem; }

.promo__image{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;border-radius:10px;margin:12px 0}