/* ============================================================================
   store.css — Tienda: tarjetas de curso, catálogo, filtros, barra CTA pegajosa.
   ============================================================================ */

/* ------------------------------ Grid de cursos ------------------------------ */
.course-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Exactamente cuatro por fila en escritorio (auto-fill daria cinco al ampliar
   el contenedor, y cinco tarjetas se leen apretadas). Lo usan las filas CORTAS
   —destacados de la vitrina, cursos relacionados— donde se enseña una tanda,
   no un catalogo. */
@media (min-width: 1080px) { .course-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1079px) { .course-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- El CATALOGO va a tres por fila, no a cuatro ---
   La tarjeta de aqui no es la de una tienda de ropa —imagen, nombre, precio—
   sino una ficha: categoria, titulo, «lo que vas a poder hacer», descripcion,
   tres datos, sello y precio. A cuatro por fila cada una se queda en ~330px,
   el titulo se parte en tres lineas y la descripcion se corta a mitad de idea.
   A tres pasa a ~450px: titulo en dos lineas, descripcion legible y los tres
   datos en una sola fila. Las tiendas que usan cuatro son las que ponen poco
   texto por producto; esta no es una de esas. */
@media (min-width: 1080px) { .course-grid--catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1079px) { .course-grid--catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------ Tarjeta de curso ---------------------------- */
.course-card {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--dur) var(--ease-suave), box-shadow var(--dur) var(--ease-suave), border-color var(--dur);
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); border-color: var(--verde-100); }

/* Media protagonista (imagen = clic) */
.course-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--azul-900); }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--ease-suave); }
.course-card:hover .course-card__media img { transform: scale(1.06); }
.course-card__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,18,40,.42), transparent 28%, transparent 60%, rgba(9,18,40,.58)); }

/* Chip de categoría (arriba-izq, sobre la imagen) */
.course-card__tag {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase; color: #fff;
  padding: .34em .72em; border-radius: var(--radio-pill);
  background: rgba(9,18,40,.5); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.22);
}
/* ============================ CURSO EN PROMOCIÓN ============================
   El descuento tiene que verse ANTES de leer el título: en una rejilla de doce
   tarjetas, quien busca una oferta la barre con la vista, no la lee.
   El color de la promoción es el DORADO de la casa —el del certificado y el de
   la insignia— y no el rojo. El rojo de este sistema está reservado para lo que
   tiene consecuencias (cerrar sesión, acceso vencido); gastarlo en vender le
   quita el significado el día que de verdad haga falta.
   Y no se inventa urgencia («¡últimas horas!»): en la base no hay fecha de fin
   de promoción, y una cuenta atrás falsa es lo único que puede salir más caro
   que no vender.
   ========================================================================== */
.course-card--oferta { position: relative; }
/* (Aquí iba una cinta dorada en el canto superior. Fuera a petición del dueño:
   con el sello del porcentaje sobre la portada y el chip de ahorro junto al
   precio, la oferta ya se distingue de sobra, y la cinta añadía una tercera
   señal para lo mismo. Tres avisos del mismo hecho no avisan tres veces: hacen
   ruido.) */
.course-card--oferta:hover { border-color: #E5C88A; }

/* Sello del porcentaje (arriba-der, sobre la portada) */
.course-card__off {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--font-display); color: #2A1D05;
  padding: .42em .6em .38em; border-radius: 11px;
  background: linear-gradient(155deg, #FBD87F, #E7AE3B 55%, #C9932C);
  box-shadow: 0 6px 18px rgba(120, 80, 10, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.course-card__off b { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.course-card__off span { font-weight: 700; font-size: .54rem; letter-spacing: .14em; opacity: .78; }
/* Cinta de confianza (abajo-izq): certificado + demanda */
.course-card__ribbon {
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--space-2); pointer-events: none;
}

.course-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.course-card__cat {
  align-self: flex-start; font-family: var(--font-display); font-weight: var(--peso-medio);
  font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-inst);
}
.course-card__title { font-size: 1.16rem; line-height: 1.28; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card__title a { color: inherit; transition: color var(--dur-rapida); }
.course-card__title a:hover { color: var(--verde-700); }
.course-card__outcome { font-size: 0.92rem; color: var(--color-texto-suave); line-height: 1.5; }
.course-card__outcome b { display: block; font-family: var(--font-display); font-weight: var(--peso-medio); font-size: 0.68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-inst); margin-bottom: 2px; }
.course-card__outcome span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Specs escaneables con icono (formato, duración, certificado) */
.course-card__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.course-card__specs li { display: inline-flex; align-items: center; gap: .4em; font-size: .82rem; font-weight: 500; color: var(--color-texto-suave); }
.course-card__specs svg { width: 15px; height: 15px; color: var(--verde-inst); flex: none; }

.course-card__rating { display: flex; align-items: center; gap: .4rem; min-height: 20px; margin-top: auto; }
.course-card__new { font-size: .78rem; font-weight: 600; color: var(--verde-700); background: var(--verde-50); padding: .28em .7em; border-radius: var(--radio-pill); }

.course-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-borde); background: var(--nube);
}
.course-card__price {
  display: flex; flex-direction: column; align-items: flex-start; gap: .28rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem;
  color: var(--color-texto); line-height: 1;
}
.course-card__price-fila { display: flex; align-items: baseline; gap: .45rem; }
.course-card__price-now { font-weight: 800; }
.course-card__price-old { font-family: var(--font-cuerpo); font-weight: 500; font-size: 0.9rem; color: var(--color-texto-suave); text-decoration: line-through; }
/* «Ahorras $10» encima del precio: el dato que decide. Un porcentaje hay que
   calcularlo mentalmente; una cifra en dólares ya está calculada. */
.course-card__ahorro {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  letter-spacing: .01em; color: #8A5D08;
  background: #FDF4DF; border: 1px solid #EBD5A0;
  padding: .18rem .5rem; border-radius: var(--radio-pill);
}
.course-card__ahorro svg { width: 12px; height: 12px; }
.course-card__cta { gap: .35rem; }

/* ------------------------------ Catálogo / filtros -------------------------- */
.catalog-controls { margin-bottom: var(--space-6); }

/* Pills de categoría (filtro principal, visual) */
.cat-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.cat-pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5rem 1rem; border-radius: var(--radio-pill);
  background: #fff; border: 1.5px solid var(--color-borde); color: var(--color-texto);
  font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .92rem;
  cursor: pointer;
  transition: color var(--dur-rapida), border-color var(--dur-rapida), background var(--dur-rapida), box-shadow var(--dur-rapida);
}
.cat-pill:hover { border-color: var(--verde); color: var(--verde-700); }
.cat-pill.is-active { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: var(--sombra-verde); }
.cat-pill__n { font-size: .76rem; line-height: 1; padding: .25em .5em; border-radius: var(--radio-pill); background: var(--verde-50); color: var(--verde-700); }
.cat-pill:hover .cat-pill__n { background: var(--verde-50); color: var(--verde-700); }
.cat-pill.is-active .cat-pill__n { background: rgba(255,255,255,.22); color: #fff; }

.catalog-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end;
  padding: var(--space-5);
  background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
}
.catalog-toolbar .campo { gap: var(--space-1); }
.catalog-toolbar .campo > span { font-size: 0.78rem; font-weight: var(--peso-medio); letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }

/* Búsqueda de cursos (filtra en vivo junto con área/rol) */
.campo--buscar { flex: 1 1 240px; min-width: 220px; }
.catalog-search { position: relative; display: flex; align-items: center; }
.catalog-search svg {
  position: absolute; left: .8rem; width: 17px; height: 17px;
  color: var(--color-texto-suave); pointer-events: none;
}
.catalog-search input {
  width: 100%; height: 48px; padding: 0 .9rem 0 2.45rem;
  border: 1.5px solid var(--color-borde-fuerte); border-radius: var(--radio);
  background: #fff; color: var(--color-texto);
  font-family: var(--font-cuerpo); font-size: .95rem;
  transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.catalog-search input::placeholder { color: var(--color-texto-suave); }
.catalog-search input:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-50);
}
.catalog-toolbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.catalog-clear {
  display: inline-flex; align-items: center; gap: .4em; padding: .55rem .9rem;
  border-radius: var(--radio); border: 1.5px solid var(--color-borde-fuerte); background: #fff;
  color: var(--color-texto-suave); font-family: var(--font-cuerpo); font-weight: var(--peso-medio); font-size: .88rem;
  cursor: pointer; transition: color var(--dur-rapida), border-color var(--dur-rapida);
}
.catalog-clear:hover { border-color: var(--rojo); color: var(--rojo-700); }
.catalog-count { color: var(--color-texto); font-size: 0.9rem; font-weight: var(--peso-medio); white-space: nowrap; }
.catalog-empty { padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-texto-suave); display: grid; place-items: center; gap: var(--space-3); }
.catalog-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-50); color: var(--verde-inst); }
.catalog-empty__icon svg { width: 28px; height: 28px; }
.course-card.is-hidden { display: none; }

/* Píldoras de categoría (franja) */
.cat-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cat-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0.7rem 1.1rem; border-radius: var(--radio-pill);
  background: #fff; border: 1.5px solid var(--color-borde); font-weight: var(--peso-medio);
  transition: border-color var(--dur-rapida), color var(--dur-rapida), transform var(--dur-rapida);
}
.cat-pill:hover { border-color: var(--verde); color: var(--verde-700); transform: translateY(-2px); }
.cat-pill.is-soon { opacity: .6; cursor: default; pointer-events: none; }
.cat-pill__soon { font-size: .7rem; color: var(--gris); border: 1px solid var(--color-borde); padding: 0 .45em; border-radius: var(--radio-pill); }

/* ------------------------------ Detalle de curso ---------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; color: var(--color-texto-suave); margin-bottom: var(--space-5); }
.breadcrumb a:hover { color: var(--verde-700); }
.course-detail__grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr 360px; align-items: start; }
.course-detail__title { font-size: var(--fs-h1); margin: var(--space-2) 0 var(--space-3); }
.course-detail__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: var(--space-5); }
.course-detail__media { position: relative; border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--color-borde); background: var(--azul-900); aspect-ratio: 16/9; }
.course-detail__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,26,56,.34), transparent 36%); }
.course-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.tabs { margin-top: var(--space-6); }
/* Nav con INDICADOR DESLIZANTE (lección 5): una sola barra que se mueve al tab activo */
.tabs__nav { position: relative; display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--color-borde); margin-bottom: var(--space-5); }
.tabs__btn { padding: .7rem 1.1rem; font-family: var(--font-display); font-weight: var(--peso-medio); color: var(--color-texto-suave); border-bottom: 0; margin-bottom: 0; transition: color var(--dur-rapida); }
.tabs__btn:hover { color: var(--color-texto); }
.tabs__btn.is-active { color: var(--verde-700); }
.tabs__btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.tabs__ind { position: absolute; bottom: -2px; left: 0; height: 3px; width: 0; background: var(--verde); border-radius: 999px;
  transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1); }
.tabs__panel { display: none; line-height: 1.7; color: var(--color-texto); }
/* Panel activo con FADE suave (el contenido cambia con transición, no de golpe) */
.tabs__panel.is-active { display: block; animation: tabFade .34s var(--ease-suave); }
@keyframes tabFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabs__panel.is-active { animation: none; } .tabs__ind { transition: none; } }
.tabs__panel p + p { margin-top: var(--space-3); }
/* Cada bloque (Objetivos, Dirigido a, Instructor…) es una TARJETA diferenciada:
   tarjeta blanca con CABECERA entintada (banda verde suave) que titula la sección. */
.cd-block {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  padding: 0 0 var(--space-6);
}
.cd-block + .cd-block { margin-top: var(--space-5); }
.cd-block__head {
  display: flex; align-items: center; gap: .85rem;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
  background: linear-gradient(90deg, var(--verde-50), rgba(236, 253, 243, 0) 78%);
  border-bottom: 1px solid var(--color-borde);
}
.cd-block__ic {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, var(--verde), var(--verde-700)); color: #fff; border: 0;
  box-shadow: 0 5px 12px rgba(22, 163, 74, .25);
}
.cd-block__ic svg { width: 20px; height: 20px; }
.cd-block__h { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--color-texto); margin: 0; }
.cd-block > :not(.cd-block__head) { margin-left: var(--space-6); margin-right: var(--space-6); }
.cd-block > p { color: var(--color-texto-suave); line-height: 1.7; max-width: 68ch; }
.cd-block__cta { display: inline-flex; margin-top: var(--space-4); }
/* Vista previa en video (YouTube, click-to-play) */
.cd-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio-lg); overflow: hidden; background: var(--azul-900); border: 1px solid var(--color-borde); }
.cd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cd-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cd-video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-video__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,56,.10), rgba(14,26,56,.50)); transition: background var(--dur); }
.cd-video__play:hover::after { background: linear-gradient(180deg, rgba(14,26,56,.18), rgba(14,26,56,.58)); }
.cd-video__btn { position: relative; z-index: 1; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; box-shadow: var(--sombra-verde); transition: transform var(--dur) var(--ease-suave); }
.cd-video__play:hover .cd-video__btn { transform: scale(1.08); }
.cd-video__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.cd-video__cap { margin-top: var(--space-3); color: var(--color-texto-suave); font-size: .9rem; }

/* Línea de valor bajo el título (la promesa, escaneable de inmediato) */
.course-detail__lead { font-size: 1.12rem; line-height: 1.6; color: var(--color-texto-suave); margin: 0 0 var(--space-5); max-width: 62ch; }
/* Tira de datos rápidos: duración · nivel · modalidad · idioma · certificado */
.course-detail__glance { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.course-detail__glance li { display: inline-flex; align-items: center; gap: .45em; padding: .42rem .85rem; border: 1px solid var(--color-borde); border-radius: var(--radio-pill); background: #fff; font-size: .86rem; font-weight: 500; color: var(--color-texto); }
.course-detail__glance svg { width: 16px; height: 16px; color: var(--verde-inst); flex: none; }

/* «Este curso incluye» — deliverables destacados, fuera de las pestañas (alto en conversión) */
.cd-includes { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); border: 1px solid var(--verde-100); border-radius: var(--radio-lg); background: var(--verde-50); }
.cd-includes__h { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 var(--space-4); color: var(--color-texto); }
.cd-includes__h svg { width: 20px; height: 20px; color: var(--verde-700); flex: none; }
.cd-includes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .55rem 1.5rem; }
.cd-includes li { position: relative; padding-left: 1.7rem; font-size: .95rem; line-height: 1.5; color: var(--color-texto); }
.cd-includes li::before { content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") no-repeat center / contain; }
.cd-includes p { color: var(--color-texto-suave); line-height: 1.6; margin: 0; }

/* Temario real — acordeón de módulos (nativo <details>, sin JS) */
.cd-block--flush { padding-bottom: 0; }
.cd-block--flush > .cd-mods { margin-left: 0; margin-right: 0; }
.cd-mod__count { font-family: var(--font-cuerpo); font-weight: 600; font-size: .78rem; color: var(--verde-700); background: var(--verde-50); padding: .2em .6em; border-radius: var(--radio-pill); margin-left: .4rem; vertical-align: middle; }
.cd-mods { border-top: 1px solid var(--color-borde); }
.cd-mod { border-bottom: 1px solid var(--color-borde); }
.cd-mod:last-child { border-bottom: 0; }
.cd-mod__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .9rem; padding: var(--space-4) var(--space-6); font-family: var(--font-display); font-weight: var(--peso-medio); color: var(--color-texto); transition: background var(--dur-rapida); }
.cd-mod__sum::-webkit-details-marker { display: none; }
.cd-mod__sum:hover { background: var(--nube); }
.cd-mod__sum:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.cd-mod__n { flex: none; font-size: .82rem; font-weight: 700; color: var(--verde-700); background: var(--verde-50); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.cd-mod__t { flex: 1; line-height: 1.35; }
.cd-mod__chev { flex: none; width: 18px; height: 18px; color: var(--color-texto-suave); transition: transform var(--dur) var(--ease-suave); }
.cd-mod[open] .cd-mod__chev { transform: rotate(180deg); }
.cd-mod__body { padding: 0 var(--space-6) var(--space-5) calc(var(--space-6) + 30px + .9rem); color: var(--color-texto-suave); line-height: 1.65; }
.cd-mod__body p { color: var(--color-texto-suave); margin: 0; }
.cd-mod__body .cd-list { margin: 0; padding-left: 1.1rem; }
.cd-mod:not([open]) .cd-mod__body { display: none; } /* colapso robusto ante cualquier override del UA */
.cd-mod--flat .cd-mod__sum { cursor: default; }
.cd-mod--flat .cd-mod__sum:hover { background: none; }

/* Encabezado de sección (reseñas / FAQ) */
.cd-sec__h { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); text-align: center; margin: 0 0 var(--space-6); letter-spacing: -.01em; }

/* Reseñas reales de alumnos */
.cd-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.cd-review { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: var(--space-5); box-shadow: var(--sombra-sm); display: flex; flex-direction: column; gap: var(--space-3); }
.cd-review__stars { color: #F5B301; letter-spacing: 2px; font-size: 1rem; }
.cd-review__txt { font-size: 1rem; line-height: 1.6; color: var(--color-texto); margin: 0; }
.cd-review__by { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.cd-review__av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--verde), var(--verde-700)); color: #fff; font-family: var(--font-display); font-weight: 700; }
.cd-review__meta { display: flex; flex-direction: column; line-height: 1.3; }
.cd-review__meta strong { font-family: var(--font-display); font-size: .95rem; color: var(--color-texto); }
.cd-review__meta > span { font-size: .78rem; color: var(--verde-700); display: inline-flex; align-items: center; gap: .3em; }

/* FAQ (acordeón nativo) */
.cd-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.cd-faq__item { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); overflow: hidden; }
.cd-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: var(--peso-medio); font-size: 1.02rem; color: var(--color-texto); }
.cd-faq__q::-webkit-details-marker { display: none; }
.cd-faq__q svg { flex: none; width: 20px; height: 20px; color: var(--verde-700); transition: transform var(--dur) var(--ease-suave); }
.cd-faq__item[open] .cd-faq__q svg { transform: rotate(135deg); }
.cd-faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--color-texto-suave); line-height: 1.65; }
.cd-faq__a p { margin: 0; max-width: none; }
.cd-faq__item:not([open]) .cd-faq__a { display: none; } /* colapso robusto (consistente con módulos) */

/* «Lo que aprenderás» — objetivos como checklist en 2 columnas */
.cd-block--learn ol, .cd-block--learn ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: .5rem 1.5rem; }
.cd-block--learn li { position: relative; padding-left: 1.7rem; line-height: 1.5; color: var(--color-texto); }
.cd-block--learn li::before { content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") no-repeat center / contain; }

/* Cross-sell: cursos relacionados (reusa .course-grid + .course-card) */
.cd-related__head { margin-bottom: var(--space-6); }
.cd-related__head .seccion__titulo { margin-top: var(--space-2); }

/* Barra de compra pegajosa — SOLO móvil (el aside deja de seguir a <=900px) */
.cd-buybar, .cd-buybar__spacer { display: none; }
@media (max-width: 900px) {
  .cd-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky, 60);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem clamp(1rem, 4vw, 1.5rem); background: #fff;
    border-top: 1px solid var(--color-borde); box-shadow: 0 -8px 24px rgba(9,18,40,.14); }
  .cd-buybar__info { display: flex; flex-direction: column; line-height: 1.15; }
  .cd-buybar__price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--color-texto); }
  .cd-buybar__old { font-family: var(--font-cuerpo); font-weight: 500; font-size: .82rem; color: var(--color-texto-suave); }
  .cd-buybar__cap { font-size: .72rem; color: var(--color-texto-suave); }
  .cd-buybar form { margin: 0; }
  .cd-buybar .btn { flex: none; white-space: nowrap; }
  .cd-buybar__spacer { display: block; height: 76px; }
}

/* ------------------------------ PANEL ADMIN (placeholder) ------------------- */
.admin-wrap { max-width: 1000px; margin-inline: auto; }
.admin-card { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--space-6); }
.admin-login { max-width: 420px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; align-items: center; }
.admin-nav a { padding: .5rem .9rem; border-radius: var(--radio-pill); border: 1.5px solid var(--color-borde); font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .9rem; color: var(--color-texto); transition: color var(--dur-rapida), border-color var(--dur-rapida), background var(--dur-rapida); }
.admin-nav a:hover { border-color: var(--verde); color: var(--verde-700); }
.admin-nav a.is-active { background: var(--verde); border-color: var(--verde); color: #fff; }
.admin-nav__out { margin-left: auto; border-color: transparent; color: var(--color-texto-suave); }
.admin-nav__out:hover { border-color: transparent; color: var(--rojo-700); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-borde); vertical-align: top; }
.admin-table th { font-family: var(--font-display); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }
.admin-name { font-family: var(--font-display); font-weight: var(--peso-medio); }
.admin-name small { display: block; color: var(--color-texto-suave); font-weight: 400; font-size: .8rem; }
.admin-field { display: flex; flex-direction: column; gap: .25rem; min-width: 260px; }
.admin-field span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-texto-suave); }
.admin-state { font-size: .78rem; white-space: nowrap; }
.admin-state.ok { color: var(--verde-inst); }
.admin-state.off { color: var(--color-texto-suave); }
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.admin-help { background: var(--verde-50); border: 1px solid var(--verde-100); border-radius: var(--radio); padding: var(--space-4) var(--space-5); color: var(--color-texto); font-size: .92rem; margin-bottom: var(--space-5); }
@media (max-width: 720px) {
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
  .admin-table thead { display: none; }
  .admin-table td { border: 0; padding: .35rem 0; }
  .admin-table tr { border-bottom: 1px solid var(--color-borde); padding: var(--space-4) 0; }
}

/* ---- Dashboard del admin: stats, secciones, badges, tarjetas de pago/mensaje ---- */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.admin-stat { display: flex; flex-direction: column; gap: .25rem; padding: var(--space-5); background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); transition: border-color var(--dur-rapida), transform var(--dur-rapida); }
.admin-stat:hover { border-color: var(--verde); transform: translateY(-2px); }
.admin-stat__n { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--color-texto); }
.admin-stat__l { font-weight: var(--peso-medio); color: var(--color-texto); }
.admin-stat__s { font-size: .8rem; color: var(--color-texto-suave); }
.admin-stat.is-alert { border-color: var(--rojo); background: #FFF5F6; }
.admin-stat.is-alert .admin-stat__n { color: var(--rojo-700, #C81E2B); }

.admin-section { margin-top: var(--space-7); }
.admin-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.admin-h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-texto); }
.admin-link { font-weight: var(--peso-medio); color: var(--verde-700); font-size: .9rem; white-space: nowrap; }
.admin-link:hover { color: var(--verde); }
.admin-empty { padding: var(--space-5); background: var(--nube, #F8FAFC); border: 1px dashed var(--color-borde); border-radius: var(--radio); color: var(--color-texto-suave); }
.admin-note { font-size: .85rem; color: var(--color-texto-suave); }
.admin-tools { display: flex; gap: .7rem; flex-wrap: wrap; }

.admin-tag { display: inline-block; padding: .15rem .55rem; border-radius: var(--radio-pill); background: #EAF0FB; color: var(--azul, #1C3984); font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .72rem; letter-spacing: .04em; }
.admin-badge { display: inline-block; padding: .18rem .6rem; border-radius: var(--radio-pill); font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.admin-badge.is-pendiente { background: #FEF3C7; color: #92660C; }
.admin-badge.is-verificado { background: var(--verde-50); color: var(--verde-700); }
.admin-badge.is-rechazado { background: #FFE4E6; color: var(--rojo-700, #C81E2B); }

.admin-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--space-5); }
.admin-filters a { padding: .4rem .85rem; border-radius: var(--radio-pill); border: 1.5px solid var(--color-borde); font-size: .85rem; font-weight: var(--peso-medio); color: var(--color-texto-suave); transition: color var(--dur-rapida), border-color var(--dur-rapida), background var(--dur-rapida); }
.admin-filters a:hover { border-color: var(--azul, #1C3984); color: var(--azul, #1C3984); }
.admin-filters a.is-active { background: var(--azul, #1C3984); border-color: var(--azul, #1C3984); color: #fff; }

.admin-pay { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--space-5); margin-bottom: var(--space-4); }
.admin-pay__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-borde); }
.admin-pay__id { font-family: var(--font-display); font-weight: 700; }
.admin-pay__date { color: var(--color-texto-suave); font-size: .85rem; }
.admin-pay__amount { margin-left: auto; text-align: right; }
.admin-pay__amount strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-texto); }
.admin-pay__amount small { display: block; color: var(--color-texto-suave); }
.admin-pay__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3) var(--space-5); }
.admin-pay__f { display: flex; flex-direction: column; gap: .1rem; }
.admin-pay__f span { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-texto-suave); }
.admin-pay__f strong { font-weight: var(--peso-medio); color: var(--color-texto); word-break: break-word; }
.admin-pay__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-borde); }

.admin-act { padding: .5rem .9rem; border-radius: var(--radio); border: 1.5px solid var(--color-borde); background: #fff; color: var(--color-texto); font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .85rem; cursor: pointer; transition: color var(--dur-rapida), border-color var(--dur-rapida), background var(--dur-rapida); }
.admin-act--ok { border-color: var(--verde); color: var(--verde-700); }
.admin-act--ok:hover { background: var(--verde); color: #fff; }
.admin-act--no { border-color: #FBC9CE; color: var(--rojo-700, #C81E2B); }
.admin-act--no:hover { background: var(--rojo); color: #fff; }
.admin-act--muted { color: var(--color-texto-suave); }
.admin-act--muted:hover { border-color: var(--color-texto-suave); color: var(--color-texto); }

.admin-msg { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--space-5); margin-bottom: var(--space-4); }
.admin-msg.is-new { border-left: 3px solid var(--verde); }
.admin-msg__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.admin-msg__from { font-family: var(--font-display); font-weight: var(--peso-medio); }
.admin-msg__date { margin-left: auto; color: var(--color-texto-suave); font-size: .82rem; }
.admin-msg__subject { color: var(--color-texto-suave); font-size: .9rem; margin-bottom: .5rem; }
.admin-msg__body { line-height: 1.6; white-space: pre-wrap; color: var(--color-texto); }
.admin-msg__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--space-4); }
/* Contenido enriquecido del admin (objetivos, instructor, términos…) */
.cd-rich { max-width: 72ch; color: var(--color-texto); line-height: 1.7; }
.cd-rich p { margin: 0 0 .85em; }
.cd-rich p:last-child { margin-bottom: 0; }
.cd-rich ul, .cd-rich ol { margin: 0 0 1em; padding-left: 1.35em; display: flex; flex-direction: column; gap: .45em; }
.cd-rich ul li::marker { color: var(--verde); }
.cd-rich ol li::marker { color: var(--verde-700); font-weight: 600; }
.cd-rich h2, .cd-rich h3, .cd-rich h4 { font-family: var(--font-display); color: var(--color-texto); line-height: 1.25; margin: 1.4em 0 .5em; }
.cd-rich h2:first-child, .cd-rich h3:first-child { margin-top: 0; }
.cd-rich h2 { font-size: 1.25rem; font-weight: 700; }
.cd-rich h3 { font-size: 1.05rem; font-weight: 700; }
.cd-rich h4 { font-size: .95rem; font-weight: 600; }
.cd-rich strong { color: var(--color-texto); }
.cd-rich a { color: var(--verde-700); text-decoration: underline; text-underline-offset: 2px; }
.cd-rich a:hover { color: var(--verde); }
.cd-rich hr { border: 0; border-top: 1px solid var(--color-borde); margin: 1.25em 0; }
.cd-rich img { max-width: 100%; height: auto; border-radius: var(--radio); }
.cd-rich blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 3px solid var(--verde); background: var(--verde-50); border-radius: 0 var(--radio) var(--radio) 0; }

.cd-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .7rem; max-width: 68ch; }
.cd-list li { position: relative; padding-left: 2rem; line-height: 1.6; color: var(--color-texto);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ECFDF3'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23187E0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 .12em; background-size: 21px 21px; }

.course-detail__aside { position: sticky; top: calc(var(--header-h) + 16px); }
.course-detail__card { padding: var(--space-6); background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); }
.cd-card__seal {
  display: inline-flex; align-items: center; gap: .45em; margin-bottom: var(--space-4);
  padding: .35rem .8rem; border-radius: var(--radio-pill);
  background: var(--verde-50); border: 1px solid var(--verde-100); color: var(--verde-700);
  font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .8rem;
}
.cd-card__seal svg { width: 15px; height: 15px; }
.course-detail__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-5); }
.cd-price__num { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--color-texto); line-height: 1; }
.cd-price__cap { flex-basis: 100%; font-family: var(--font-cuerpo); font-weight: var(--peso-medio); font-size: .82rem; color: var(--color-texto-suave); }
.course-detail__facts { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--space-5); }
.course-detail__facts li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; padding: .45rem 0; border-bottom: 1px solid var(--color-borde); }
.course-detail__facts li:last-child { border-bottom: 0; }
.cd-fact__ic { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--verde-50); color: var(--verde-inst); }
.cd-fact__ic svg { width: 17px; height: 17px; }
.cd-fact__k { color: var(--color-texto-suave); }
.cd-fact__v { margin-left: auto; text-align: right; font-family: var(--font-display); }
.course-detail__card .btn { margin-top: var(--space-3); }
/* ul.cd-assure: gana al reset ul[role="list"] (padding quedaba en 0) */
ul.cd-assure { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-borde); display: flex; flex-direction: column; gap: .6rem; }
.cd-assure li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--color-texto); }
.cd-assure svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--verde-inst); }
.course-detail__note { margin-top: var(--space-4); font-size: .8rem; color: var(--color-texto-suave); text-align: center; line-height: 1.5; }
.course-detail__instructor { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-borde); }
.course-detail__facts-h { display: block; font-family: var(--font-display); font-weight: var(--peso-medio); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-inst); margin-bottom: .4rem; }
.course-detail__instructor p { font-size: .9rem; color: var(--color-texto-suave); line-height: 1.55; }
@media (max-width: 900px) {
  .course-detail__grid { grid-template-columns: 1fr; }
  .course-detail__aside { position: static; }
}

/* ------------------------------ Barra CTA pegajosa -------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: var(--azul-900); color: #fff;
  transform: translateY(110%); transition: transform var(--dur) var(--ease-suave);
  box-shadow: 0 -8px 24px rgba(14,26,56,.35);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .contenedor { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.sticky-cta__text { font-weight: var(--peso-medio); font-size: 0.95rem; }
.sticky-cta__text small { display: block; color: #9AA8C7; font-weight: 400; }
.sticky-cta .btn { margin-left: auto; white-space: nowrap; }
.sticky-cta__close { color: #9AA8C7; width: 34px; height: 34px; border-radius: var(--radio); }
.sticky-cta__close:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 560px) {
  .sticky-cta__text small { display: none; }
  .sticky-cta__close { display: none; }
}

/* --- Compartir curso (caja de compra) --- */
.cd-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cd-share {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .4rem .8rem; cursor: pointer;
  background: #fff; border: 1.5px solid var(--color-borde-fuerte); border-radius: var(--radio-pill);
  color: var(--color-texto-suave); font-family: var(--font-cuerpo); font-weight: 600; font-size: .8rem;
  transition: border-color var(--dur-rapida), color var(--dur-rapida);
}
.cd-share:hover { border-color: var(--verde); color: var(--verde-700); }
.cd-share:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.cd-share.is-ok { border-color: var(--verde); color: var(--verde-700); background: var(--verde-50); }
.cd-share svg { width: 15px; height: 15px; flex: none; }

/* --- Reseñas (/resenas): aire entre el filtro y la rejilla --- */
.rev-toolbar { margin-bottom: var(--space-6); }

/* El atributo hidden debe ganarle al display propio del estado vacío */
.catalog-empty[hidden] { display: none; }

/* --- Paginación de reseñas --- */
.pager { display: flex; justify-content: center; align-items: center; gap: .45rem; margin-top: var(--space-6); flex-wrap: wrap; }
.pager__btn {
  min-width: 42px; height: 42px; padding: 0 .55rem;
  display: inline-grid; place-items: center; cursor: pointer;
  background: #fff; border: 1.5px solid var(--color-borde-fuerte); border-radius: 11px;
  color: var(--color-texto); font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  transition: border-color var(--dur-rapida), color var(--dur-rapida), background var(--dur-rapida);
}
.pager__btn:hover { border-color: var(--verde); color: var(--verde-700); }
.pager__btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.pager__btn.is-active { background: var(--verde); border-color: var(--verde); color: #fff; }
.pager__btn[disabled] { opacity: .35; pointer-events: none; }
.pager__btn svg { width: 16px; height: 16px; }
.pager__dots { color: var(--color-texto-suave); padding: 0 .15rem; }

/* --- Cupón promocional (resumen del checkout) --- */
.ck-cupon { margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px dashed var(--color-borde); }
.ck-cupon__label { display: block; font-size: .85rem; font-weight: 600; color: var(--color-texto-suave); margin-bottom: .4rem; }
.ck-cupon__row { display: flex; gap: .5rem; align-items: stretch; }
.ck-cupon__row .btn { height: 44px; margin: 0; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.ck-cupon__row .input { height: 44px; flex: 1; min-width: 0; }
.ck-cupon__err { margin-top: .45rem; font-size: .82rem; color: var(--rojo-700); }
.ck-cupon__on { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ck-cupon__tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; background: var(--verde-50); border: 1px solid var(--verde-100);
  border-radius: var(--radio-pill); color: var(--verde-700); font-size: .88rem;
}
.ck-cupon__tag svg { width: 15px; height: 15px; flex: none; }
.ck-cupon__quitar { background: none; border: 0; padding: 0; color: var(--color-texto-suave); font-size: .82rem; cursor: pointer; text-decoration: underline; font-family: inherit; }
.ck-cupon__quitar:hover { color: var(--rojo-700); }
.ck-lineas { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .4rem; }
.ck-linea { display: flex; justify-content: space-between; font-size: .92rem; color: var(--color-texto-suave); }
.ck-linea--desc { color: var(--verde-700); font-weight: 600; }

/* -------- Carrito en modo EMPRESA -------- */
.cart-b2b--destacado {
  border-color: var(--verde-100, #D1FADF);
  background: var(--verde-50, #ECFDF3);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .07);
}
.cart-b2b--destacado .cart-b2b__txt strong { font-size: 1.02rem; }
.cart-b2b__acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.cart-b2b__sec { font-size: .86rem; color: var(--verde-700, #0F7A34); text-decoration: underline; text-underline-offset: 3px; }
.cart-b2b__sec:hover { text-decoration: none; }

/* El descuento por volumen, visible en el resumen. */
/* El porcentaje iba como bloque aparte y partia la fila en dos renglones: el
   signo menos arriba y el precio abajo. Todo en una linea. */
.cart-summary__row--desc { align-items: baseline; }
.cart-summary__row--desc[hidden] { display: none; }
.cart-summary__row--desc > span {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  color: var(--verde-700, #0F7A34);
}
.cart-summary__row--desc i {
  font-style: normal;
  font-weight: 700;
  font-size: .72rem;
  padding: .1rem .35rem;
  border-radius: 99px;
  background: var(--verde-50, #ECFDF3);
  color: var(--verde-700, #0F7A34);
}
.cart-summary__row--desc strong {
  color: var(--verde-700, #0F7A34);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cart-vol {
  margin: .1rem 0 .9rem;
  padding: .5rem .7rem;
  background: var(--verde-50, #ECFDF3);
  border-radius: var(--radio-sm, 6px);
  font-size: .8rem;
  color: #3F7A56;
  line-height: 1.5;
}


/* -------- "Ya lo tienes": la regla de un certificado por persona --------
   Comprar dos veces el mismo curso no le da a nadie un segundo certificado.
   La regla se aplica en el servidor; esto es lo que la hace entendible. */
.cd-tuyo { display: grid; gap: .75rem; padding: 1.1rem 1.2rem; border-radius: 14px;
  background: var(--verde-50); border: 1px solid var(--verde-100); }
.cd-tuyo__sello { display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em; color: var(--verde-700); }
.cd-tuyo__sello svg { width: 15px; height: 15px; }
.cd-tuyo__x { margin: 0; font-size: .95rem; color: var(--color-texto); }
.cd-tuyo__n { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--color-texto-suave); }

/* El aviso de que SI se puede volver a comprar: va en ambar, no en verde —
   no es una felicitacion, es un plazo que se cumplio. */
.cd-otravez { display: grid; gap: .15rem; margin: 0 0 .8rem; padding: .7rem .9rem;
  border-radius: 11px; background: #FDF7E3; border-left: 3px solid #E0A800;
  font-size: .9rem; line-height: 1.5; color: #6B5200; }
.cd-otravez span { font-size: .8rem; opacity: .85; }

.cd-aviso-ya { margin: 1rem auto; max-width: 760px; padding: .8rem 1.1rem;
  border-radius: 11px; background: var(--verde-50); border: 1px solid var(--verde-100);
  color: var(--verde-700); font-size: .92rem; text-align: center; }

.zc-buybar__cta--tuyo { background: var(--verde-700, #15803D); }

/* En la tarjeta del catalogo basta un sello: el precio y el boton siguen ahi
   porque la ficha sigue siendo util (temario, instructor, horas). */
.course-card__mio { display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px; background: var(--verde-50);
  color: var(--verde-700); font-size: .72rem; font-weight: 800; }
.course-card__mio svg { width: 12px; height: 12px; }

/* ================= Catálogo en MODO EMPRESA =================
   Quien entró como empresa no compra "un curso": compra CUPOS. La página es la
   misma; lo que cambia es que cada tarjeta lleva contador y que el presupuesto
   no se pierde de vista. */

/* El contador sustituye a «Ver curso». La ficha sigue a un clic en el título:
   quien equipa una cuadrilla no entra en doce fichas, va poniendo cantidades. */
.cc-cupos { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--color-borde);
  border-radius: 999px; overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .2s; }
.cc-cupos.is-on { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
.cc-cupos__b { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none;
  font-size: 1.15rem; line-height: 1; color: var(--color-texto-suave); cursor: pointer; }
.cc-cupos__b:hover { background: var(--verde-50); color: var(--verde-700); }
.cc-cupos__n { width: 44px; height: 34px; border: 0; text-align: center; font-weight: 800;
  font-size: .95rem; color: var(--color-texto); font-variant-numeric: tabular-nums; background: none; }
.cc-cupos__n::-webkit-outer-spin-button, .cc-cupos__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc-cupos__n { -moz-appearance: textfield; appearance: textfield; }
.cc-cupos__n:focus { outline: none; }
/* El precio pasa a decir de qué es: en B2B «$49.99» a secas no dice si es por
   cupo o por el curso entero, y esa duda frena la compra. */
.course-grid--emp .course-card__price::after { content: " / cupo"; font-size: .68rem; font-weight: 600;
  color: var(--color-texto-suave); letter-spacing: 0; }
html[lang="en"] .course-grid--emp .course-card__price::after { content: " / seat"; }

/* -------- La burbuja del presupuesto --------
   Flotante y siempre a la vista. Quien compra por volumen no decide curso a
   curso: decide con el total delante — y sobre todo con el SIGUIENTE TRAMO
   delante, porque saber que a tres cupos más el descuento sube cambia el
   pedido. Por eso la línea del próximo tramo va destacada y no en la letra
   pequeña. */
.cb { position: fixed; right: clamp(12px, 2vw, 26px); bottom: clamp(12px, 2vw, 26px); z-index: 60;
  width: min(340px, calc(100vw - 24px)); padding: 1rem 1.1rem 1.1rem;
  background: #0F2039; color: #C9D8EC; border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(6, 15, 30, .6), 0 2px 8px rgba(6, 15, 30, .3);
  display: grid; gap: .7rem; }
.cb__min { position: absolute; top: .55rem; right: .6rem; width: 28px; height: 28px; display: grid;
  place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .07);
  color: #9FB3CE; cursor: pointer; transition: transform .25s, background .2s; }
.cb__min:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.cb__min svg { width: 16px; height: 16px; }
.cb.is-min .cb__min { transform: rotate(180deg); }
.cb.is-min > *:not(.cb__cab):not(.cb__min) { display: none; }

.cb__k { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: #7E95B5; }
.cb__tot { display: block; font-family: var(--font-display); font-size: 1.85rem; line-height: 1.1;
  color: #fff; font-variant-numeric: tabular-nums; margin: .12rem 0 .1rem; }
.cb__sub { font-size: .82rem; color: #8FA5C2; }

.cb__desc { display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .7rem; border-radius: 9px; background: rgba(34, 197, 94, .14);
  font-size: .82rem; color: #86EFAC; }
.cb__desc b { font-variant-numeric: tabular-nums; }

/* El empujón al siguiente tramo: es la información que más cambia el pedido. */
.cb__next { margin: 0; padding: .5rem .7rem; border-radius: 9px;
  background: rgba(244, 194, 51, .12); border-left: 3px solid #F4C233;
  font-size: .8rem; line-height: 1.45; color: #F0D89A; }

.cb__lineas { list-style: none; margin: 0; padding: .55rem 0 0; display: grid; gap: .3rem;
  max-height: 8.5rem; overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, .09); }
.cb__lineas li { display: flex; justify-content: space-between; gap: .7rem; font-size: .8rem; }
.cb__lineas span { color: #A7BAD4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb__lineas b { color: #E3ECF8; font-variant-numeric: tabular-nums; flex: none; }

.cb__cta { display: block; padding: .7rem; border-radius: 11px; background: var(--verde);
  color: #fff; font-weight: 800; font-size: .92rem; text-align: center; text-decoration: none; }
.cb__cta:hover { background: var(--verde-600, #15913F); }
.cb__nota { margin: 0; font-size: .74rem; line-height: 1.5; color: #7E95B5; text-align: center; }
.cb__nota a { color: #6FE49B; }

@media (max-width: 640px) {
  .cb { right: 8px; left: 8px; width: auto; bottom: 8px; }
  .cb__lineas { max-height: 5.5rem; }
}


/* -------- Botones de la tienda: la misma píldora que el resto --------
   «Ver curso», el CTA de la ficha y la barra pegajosa comparten forma con el
   buscador de la cabecera y con los botones del hero. Antes cada zona tenía su
   propio radio y su propio halo, y el conjunto se leía como tres sistemas
   pegados. */
.course-card__cta, .zc-buybar__cta, .cd-cta, .cart-sticky .btn {
  border-radius: var(--radio-pill);
  box-shadow: 0 1px 2px rgba(15, 32, 57, .12);
}
.course-card__cta:hover, .zc-buybar__cta:hover {
  box-shadow: 0 3px 8px rgba(15, 32, 57, .16);
}
/* El contador de cupos ya era una píldora: se le iguala el grosor del borde. */
.cc-cupos { border-width: 1.5px; }