/* ============================================================================
   tarjeta-curso.css — LA TARJETA DE CURSO (1.10.42, vitrina nueva).
   Global: la carga la cabecera en todas las páginas, porque la tarjeta sale en la portada, el catálogo, la página
   del curso («También te puede interesar»), el pago y la landing de empresas.
   Tal cual la referencia del dueño (tarjeta-07): normal, en promoción, en alianza y al pasar el ratón.
   Medidas tomadas de la referencia a 1440 px (tarjeta de ~338 px): imagen de 150 px, cuerpo con 20 px de margen,
   título de 17 px, pie de 70 px con el precio de 21 px, el carrito de 42 × 42 y «Ver curso» azul marino.
   store.css (de todos) no se edita: lo que estorba de allí se anula aquí, que carga después.
   La letra es Plus Jakarta Sans en toda la tarjeta, como en la referencia.
   ========================================================================== */

.course-card {
  --cc-tinta: #0F172A;
  --cc-gris: #64748B;
  --cc-gris-2: #94A3B8;
  --cc-linea: #DDE2E8;
  --cc-verde: #16A34A;
  --cc-verde-osc: #15803D;
  --cc-navy: #1D3A6B;
  --cc-amarillo: #FACC15;
  --cc-amarillo-pie: #FEFCE8;
  --cc-pad: 20px;
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--cc-linea);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  font-family: var(--font-display);
  color: var(--cc-tinta);
  container-type: inline-size;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* AL PASAR EL RATÓN (o con el foco del teclado dentro): borde verde, sombra y un levantamiento mínimo. La imagen ya
   no se agranda: en una rejilla que se filtra, lo que se mueve distrae. */
.course-card:hover, .course-card:focus-within {
  border-color: var(--cc-verde);
  box-shadow: 0 0 0 .5px var(--cc-verde), 0 14px 30px -14px rgba(15, 23, 42, .28);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .course-card, .course-card:hover, .course-card:focus-within { transform: none; transition: none; }
}
/* La de las sugerencias del pago no se levanta (pages.css lo pedía así). */
.ck-carrusel .course-card:hover { transform: none; }

/* ------------------------------------------------------------------ la imagen */
.course-card .course-card__media {
  position: relative; display: block; flex: none;
  height: 150px;   /* fijo, como en la referencia (150 px con la tarjeta de 324 y con la de 338) */
  aspect-ratio: auto; overflow: hidden; background: #0E2245;
}
.course-card .course-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: none; transition: none;
}
.course-card:hover .course-card__media img { transform: none; }

/* «Más vendido» y «Nuevo»: una pastilla blanca arriba a la izquierda. */
.course-card .course-card__sello {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 4px; border-radius: 999px;
  background: #fff; color: var(--cc-tinta);
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.course-card .course-card__sello.is-der { left: auto; right: 12px; }
.course-card .course-card__sello i {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #F59E0B; color: #fff;
}
.course-card .course-card__sello i svg { width: 12px; height: 12px; }
.course-card .course-card__sello--nuevo { padding-left: 8px; gap: 6px; }
.course-card .course-card__sello--nuevo i {
  width: 12px; height: 12px; background: #fff;
  box-shadow: inset 0 0 0 3.5px var(--cc-verde);
}

/* «OFERTA −25 %»: la etiqueta amarilla pegada al borde izquierdo, con el canto derecho en diagonal. */
.course-card .course-card__oferta {
  position: absolute; top: 15px; left: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 20px 0 13px;
  background: var(--cc-amarillo); color: #1E293B;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  line-height: 1; white-space: nowrap;
}
.course-card .course-card__oferta small { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.course-card .course-card__oferta b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ el cuerpo */
.course-card .course-card__body {
  display: flex; flex-direction: column; gap: 0; flex: 1 1 auto;
  padding: 17px var(--cc-pad) 14px;
}
.course-card .course-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 18px;
}
.course-card .course-card__cat {
  align-self: center; min-width: 0;
  font-family: var(--font-display); font-size: 11px; font-weight: 800; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cc-verde);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «★ 4,9 (9)» */
.course-card .course-card__nota { flex: none; display: inline-flex; align-items: center; gap: 4px; line-height: 1; white-space: nowrap; }
.course-card .course-card__nota svg { width: 13px; height: 13px; color: #F59E0B; }
.course-card .course-card__nota b { font-size: 12.5px; font-weight: 800; color: var(--cc-tinta); }
.course-card .course-card__nota small { font-size: 12px; font-weight: 500; color: var(--cc-gris-2); }
/* La pastilla «Nuevo» */
.course-card .course-card__nuevo {
  flex: none; display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  background: #EAF7EF; color: var(--cc-verde-osc);
  font-size: 10.5px; font-weight: 700; line-height: 1.2;
}

.course-card .course-card__title {
  margin: 8px 0 0;
  font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.27;
  letter-spacing: -.005em; color: var(--cc-tinta);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty;
  /* El título reserva SIEMPRE dos líneas (como en la referencia): la línea de beneficio y el recuadro de la alianza
     quedan a la misma altura en todas las tarjetas de una fila, tenga el título una línea o dos. */
  min-height: calc(2 * 1.27em);
}
/* TODA la tarjeta lleva a la ficha: el enlace del título se estira sobre ella. El carrito, «Ver curso» y el
   contador de cupos quedan por encima (z-index) y siguen siendo lo suyo. */
/* Con alianza, la alianza va justo debajo del título (ajuste-18): ahí no se reserva la segunda línea. */
.course-card .course-card__title:has(+ .course-card__alianza) { min-height: 0; }
.course-card .course-card__title a { color: inherit; transition: color .15s ease; }
.course-card .course-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.course-card .course-card__title a:hover { color: inherit; }
.course-card .course-card__title a:focus-visible { outline: none; }
.course-card:has(.course-card__title a:focus-visible) { outline: 3px solid var(--cc-verde); outline-offset: 2px; }

/* EN ALIANZA CON — 1.10.42 (pedido del dueño, ajuste-18): EN LÍNEA bajo el título y SIN caja: el logo pequeño a la
   izquierda y, a su lado, «EN ALIANZA CON» en mayúsculas pequeñas grises encima del nombre en negrita. (El marcado es
   de curso_alianza_html().) */
.course-card .course-card__alianza {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 12.5px; line-height: 1.2; color: var(--cc-gris);
}
.course-card .course-card__alianza img {
  flex: none; width: auto; height: 26px; max-width: 64px; padding: 0;
  object-fit: contain; object-position: left center; background: none; border: 0; border-radius: 0;
}
.course-card .course-card__alianza span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.course-card .course-card__alianza small {
  font-size: 9.5px; font-weight: 600; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-gris-2);
}
.course-card .course-card__alianza b {
  font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--cc-tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La línea de beneficio, con su ✓ verde. */
.course-card .course-card__outcome {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 9px 0 0;
  font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--cc-gris);
}
.course-card .course-card__alianza + .course-card__outcome { margin-top: 10px; }
.course-card .course-card__outcome svg { flex: none; width: 13px; height: 13px; margin-top: 3px; color: var(--cc-verde); }
.course-card .course-card__outcome span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* «En línea | 4 horas | Certificado»: abajo del cuerpo, alineada entre tarjetas de la misma fila y repartida a lo
   ancho, como en la referencia. */
.course-card .course-card__specs {
  list-style: none; margin: auto 0 0; padding: 16px 0 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0;
}
.course-card .course-card__specs li {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--cc-gris); white-space: nowrap;
}
/* El separador va dentro del elemento: el espacio queda repartido entre los tres datos. */
.course-card .course-card__specs li + li::before {
  content: ""; flex: none; width: 1px; height: 13px; margin: 0 10px 0 0; background: #E2E8F0;
}
.course-card .course-card__specs svg { flex: none; width: 14px; height: 14px; color: var(--cc-gris); }

/* ------------------------------------------------------------------ las franjas */
/* «Ahorras $20» (y «Oferta hasta el 31 oct» cuando la oferta trae fecha de fin): amarillo a lo ancho. */
.course-card .course-card__franja {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 28px; margin: 0; padding: 5px var(--cc-pad);
  background: var(--cc-amarillo); color: #1E293B;
  font-size: 12px; font-weight: 700; line-height: 1.3;
}
.course-card .course-card__hasta { text-align: right; }
/* «Renovar»: la razón, en ámbar (es un plazo que se cumple, no una oferta). */
.course-card .course-card__franja--renov {
  justify-content: flex-start; gap: 7px;
  background: var(--renov-50, #FFF6DC); color: var(--renov, #7A5200);
  border-top: 1px solid var(--renov-100, #F1DC9E);
}
.course-card .course-card__franja--renov svg { flex: none; width: 14px; height: 14px; }

/* ------------------------------------------------------------------ el pie */
.course-card .course-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: nowrap; row-gap: 10px;
  min-height: 69px; padding: 15px var(--cc-pad) 12px;
  border-top: 1px solid #EDF0F4; background: #FAFBFD;
  grid-template-columns: none;
}
.course-card--oferta .course-card__foot { background: var(--cc-amarillo-pie); }
.course-card .course-card__franja + .course-card__foot { border-top-color: #EDF1FA; }

.course-card .course-card__price {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-width: 0; flex: none;   /* 1.10.53 · el precio nunca se recorta: si no cabe, el pie se parte (ver «tarjetas angostas») */
  font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1;
  color: var(--cc-tinta);
}
.course-card .course-card__price::after { content: none; }   /* el «/ cupo» viejo (store.css) ahora lo escribe la tarjeta */
.course-card .course-card__price-now { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.course-card .course-card__price-now.is-largo { font-size: 17px; }
.course-card .course-card__cupo { font-size: 11px; font-weight: 600; color: var(--cc-gris); letter-spacing: 0; }
.course-card .course-card__price-ref { font-size: 11px; font-weight: 600; color: var(--cc-gris); margin: 0; }
.course-card .course-card__antes {
  font-size: 11.5px; font-weight: 500; line-height: 1.1; color: var(--cc-gris-2);
  text-decoration: line-through; white-space: nowrap;
}

.course-card .course-card__acciones {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none;
}

/* El carrito: cuadrado, blanco, con borde; al pasar el ratón solo se «levanta». */
.course-card .cc-add { display: contents; }
.course-card .cc-add__b {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; margin: 0; padding: 0;
  border: 1px solid #E2E8F0; border-radius: 10px;
  background: #fff; color: #334155; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.course-card .cc-add__b svg { width: 17px; height: 17px; }
.course-card .cc-add__b:hover { background: #F1F5F9; border-color: #CBD5E1; color: var(--cc-tinta); }
.course-card .cc-add__b:active { transform: scale(.95); }
.course-card .cc-add__b:focus-visible { outline: 3px solid var(--cc-verde); outline-offset: 2px; }
.course-card .cc-add__b.is-ok { background: var(--cc-verde); border-color: var(--cc-verde); color: #fff; }

/* «Ver curso» (y «Ver fechas», «Renovar»): azul marino; verde cuando la tarjeta está bajo el ratón. */
.course-card .course-card__cta {
  grid-column: auto; width: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--cc-navy); color: #fff;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: none; transform: none;
  transition: background .15s ease;
}
.course-card .course-card__cta:hover { background: var(--cc-verde); color: #fff; box-shadow: none; transform: none; }
.course-card:hover .course-card__cta, .course-card:focus-within .course-card__cta { background: var(--cc-verde); }
.course-card .course-card__cta:focus-visible { outline: 3px solid var(--cc-verde); outline-offset: 2px; }
.course-card .course-card__cta svg { width: 15px; height: 15px; }

/* «Ya lo tienes»: índigo (lo suyo no se vende). La pastilla va donde iría el precio; el botón es de contorno. */
.course-card .course-card__mio {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 32px; padding: 0 12px 0 9px; border-radius: 999px;
  background: var(--mio-50, #EEF0FF); border: 1px solid var(--mio-100, #D9DDFB); color: var(--mio-700, #3730A3);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
}
.course-card .course-card__mio svg { width: 16px; height: 16px; flex: none; }
.course-card--mio:hover, .course-card--mio:focus-within {
  border-color: var(--mio-100, #D9DDFB);
  box-shadow: 0 0 0 .5px var(--mio-100, #D9DDFB), 0 14px 30px -14px rgba(15, 23, 42, .28);
}
.course-card .course-card__cta.btn--mio,
.course-card:hover .course-card__cta.btn--mio,
.course-card:focus-within .course-card__cta.btn--mio {
  background: #fff; color: var(--mio, #4338CA); border: 1.5px solid var(--mio, #4338CA); padding: 0 14px;
}
.course-card .course-card__cta.btn--mio:hover { background: var(--mio-50, #EEF0FF); color: var(--mio-700, #3730A3); }
.course-card--renov:hover, .course-card--renov:focus-within {
  border-color: var(--renov-100, #F1DC9E);
  box-shadow: 0 0 0 .5px var(--renov-100, #F1DC9E), 0 14px 30px -14px rgba(15, 23, 42, .28);
}

/* Modo empresa: el contador de cupos ocupa el sitio de los botones. */
.course-card .cc-cupos { position: relative; z-index: 2; border-radius: 10px; }
.course-card .cc-cupos__b { width: 36px; height: 40px; }

/* ------------------------------------------------------------------ tarjetas angostas
   Las rejillas no siempre dan 338 px: a 1366 px la tarjeta mide ~310; «También te puede interesar» y el carrusel del
   pago son más angostos. De 271 a 330 px se aprieta un poco (menos aire) y todo sigue en una línea; por debajo de
   271 px el pie se parte en dos —el precio arriba; el carrito y el botón, a todo el ancho, debajo— en vez de apretarse. */
@container (min-width: 269px) and (max-width: 328px) {
  .course-card .course-card__body, .course-card .course-card__franja, .course-card .course-card__foot { padding-left: 16px; padding-right: 16px; }
  .course-card .course-card__foot { gap: 8px; }
  .course-card .course-card__cta { padding: 0 16px; }
  .course-card .course-card__specs li { font-size: 12.5px; }
  .course-card .course-card__specs li + li::before { margin-right: 7px; }
  .course-card .course-card__specs svg { width: 13px; height: 13px; }
}
/* 1.10.53 · Con «Ver la formación» (más largo que «Ver curso») y «Ir a la capacitación», el pie de una línea ya no cabe por
   debajo de ~344 px: el botón tapaba el precio («$49.9») y «Ir a la capacitación» se salía de la tarjeta. Desde ahí el pie
   se parte en dos: el precio (o «Ya lo tienes») arriba; el carrito y el botón, a todo el ancho, debajo. */
@container (max-width: 344px) {
  .course-card .course-card__body { padding-left: 15px; padding-right: 15px; }
  .course-card .course-card__franja { padding-left: 15px; padding-right: 15px; }
  .course-card .course-card__foot { flex-wrap: wrap; padding: 14px 15px; }
  .course-card .course-card__price { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; }
  .course-card .course-card__acciones { flex: 1 1 100%; }
  .course-card .course-card__cta { flex: 1 1 auto; padding: 0 14px; }
  .course-card .course-card__specs li { font-size: 11.5px; }
  .course-card .course-card__specs li + li::before { margin-right: 6px; }
  .course-card .course-card__specs svg { display: none; }
  .course-card .course-card__oferta { height: 32px; padding: 0 18px 0 11px; }
  .course-card .course-card__oferta b { font-size: 17px; }
}