/* ============================================================
   Descuentos y banners de promoción (llegan de la API).
   El descuento va en dorado sobre bordó, los colores del banner del
   catálogo: que se note sin parecer de otro sitio.
   ============================================================ */

/* ---------- piezas comunes ---------- */
.ofr-chip {
  display: inline-block; font-style: normal; white-space: nowrap;
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: #FFD9A0; color: var(--bordo-800);
  padding: .18rem .5rem; border-radius: 999px; line-height: 1.3; vertical-align: middle;
}
/* precio de lista tachado: más chico y apagado que el precio que se cobra */
.ofr-antes {
  color: var(--tinta-3); font-weight: 500; text-decoration: line-through;
  text-decoration-color: var(--bordo); text-decoration-thickness: 2px;
}

/* ---------- tarjetas de aranceles (precios.js) ---------- */
.tier.ofr:not(.hot) { border-color: #EBC48A }
.tier .ofr-sello {
  position: absolute; top: -.72rem; right: 1.5rem;
  background: #FFD9A0; color: var(--bordo-800);
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  padding: .25rem .65rem; border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(125, 14, 40, .55);
}
.tier .ofr-leyenda { font-size: .78rem; font-weight: 700; color: var(--bordo); margin-top: .35rem }
.tier .ofr-lista { display: block; font-size: 1.05rem; line-height: 1.2 }
.tier .ofr-lista:empty { display: none }
.tier.ofr .price-main { color: var(--bordo) }
.tier.ofr.split .price-main { color: var(--tinta-3) }
.price-cuota b .ofr-antes { display: block; font-size: 1rem; line-height: 1.3 }

/* ---------- panel lateral del curso (financiacion.js) ---------- */
.cu-precio .ofr-antes { font-size: .85rem; margin-right: .15rem }
.cu-precio > .ofr-antes { display: block; margin-top: .1rem }
.cu-precio .ofr-panel { font-size: .8rem; font-weight: 700; color: var(--bordo); margin-top: .35rem }

/* ---------- wizard ---------- */
.pick .mini .ofr-chip { margin-left: .25rem; font-size: .6rem }
.chk-tot .val .ofr-antes { display: block; font-size: .85rem }
.ofr-ahorro {
  font-size: .84rem; color: var(--tinta-2); margin-top: .7rem;
  background: var(--bordo-050); border-radius: 10px; padding: .6rem .8rem;
}
.ofr-ahorro b { color: var(--bordo) }

/* ---------- tarjetas de idioma: selector de la home y "Más cursos" ---------- */
.sl-bandera { position: relative }
.sl-bandera .ofr-chip { position: absolute; top: -.55rem; right: -.35rem; font-size: .58rem }
.ofr-chip-foto { position: absolute; top: .7rem; right: .7rem; z-index: 2 }

/* ---------- cinta de promociones (promos.js) ---------- */
.promo {
  --promo-fondo: var(--bordo); --promo-tinta: #fff; --promo-acento: #FFD9A0;
  --promo-cta-fondo: #fff; --promo-cta-tinta: var(--bordo);
  position: relative; background: var(--promo-fondo); color: var(--promo-tinta);
  font-size: .9rem;
}
.promo[data-estilo="dorado"] {
  --promo-fondo: #FFD9A0; --promo-tinta: var(--tinta); --promo-acento: var(--bordo-800);
  --promo-cta-fondo: var(--bordo); --promo-cta-tinta: #fff;
}
.promo[data-estilo="oscuro"] { --promo-fondo: #1c0e12 }

.promo-in {
  display: flex; align-items: center; justify-content: center; gap: .5rem 1rem;
  min-height: 46px; padding: .55rem 2.6rem; text-align: center;
}
.promo-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .9rem }
.promo-item[hidden] { display: none }
.promo-item:not([hidden]) { animation: promo-entra .35s ease-out }
@keyframes promo-entra { from { opacity: 0; transform: translateY(4px) } }
.promo-tit { color: var(--promo-acento); font-weight: 800; margin-right: .2rem }
.promo-cuenta {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid currentColor; border-radius: 999px; padding: .1rem .55rem; opacity: .9;
}
.promo-cta {
  background: var(--promo-cta-fondo); color: var(--promo-cta-tinta);
  border-radius: 999px; padding: .32rem .95rem; font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.promo-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55) }
.promo-puntos { display: flex; gap: .3rem; flex: none }
.promo-puntos button {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  background: currentColor; opacity: .35;
}
.promo-puntos button[aria-current] { opacity: 1 }
.promo-x {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  color: inherit; opacity: .75;
}
.promo-x:hover { opacity: 1; background: rgba(255, 255, 255, .14) }
.promo-x svg { width: 14px; height: 14px; fill: none }

@media (max-width: 700px) {
  .promo { font-size: .82rem }
  .promo-in { padding: .5rem 2.4rem .5rem 1rem; flex-direction: column }
  .promo-txt span { display: block }
}
@media (prefers-reduced-motion: reduce) {
  .promo-item:not([hidden]) { animation: none }
}