/* ============================================
   VENDEMÁS — Cursos (v3.1)
   Réplica EXACTA de contenido/nueva_estructura/cursos/Cursos.html +
   contenido/nueva_estructura/cursos/cursos.css (Tailwind compilado del
   cliente) — valores de sombra/padding tomados 1:1 de ese archivo, no
   aproximados. Excepción documentada en CLAUDE.md (misma que
   /maestria-en-ventas/): degradados, blur y foto en el hero, prohibido
   en el resto del sitio. Todo vive bajo #cursos-page / clases cur-*,
   no se toca base.css ni components.css.
   ========================================== */

#cursos-page.cur-page {
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
}

.cur-wrap { max-width: 1152px; margin: 0 auto; padding: 0 1rem; }
.cur-wrap--md { max-width: 1024px; }
.cur-wrap--sm { max-width: 768px; }
.cur-center { text-align: center; }

@media (min-width: 640px) {
  .cur-wrap { padding: 0 1.5rem; }
}

/* -- Sombras: valores exactos de Tailwind (shadow-sm/md/lg/xl/2xl) -- */
:root {
  --cur-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cur-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --cur-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --cur-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --cur-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --cur-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* -- Botón compartido (glow-btn: box-shadow:0 10px 25px -5px #f2652266;
   hover: translateY(-2px) + 0 15px 30px -5px #f265228c — valores exactos
   del cursos.css original, mapeados a --color-orange-deep) -- */
.cur-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-white);
  background: var(--color-orange-deep);
  border-radius: 999px;
  padding: 1rem 2rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.cur-btn--glow { box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--color-orange-deep) 40%, transparent); }
.cur-btn--glow:hover { background: #e05512; transform: translateY(-2px); box-shadow: 0 15px 30px -5px color-mix(in srgb, var(--color-orange-deep) 55%, transparent); }

/* Bundle CTA: px-10 py-4, text-sm, uppercase, tracking-wide */
.cur-btn--wide { padding: 0.85rem 2.25rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.025em; width: 100%; }
/* Comparativa CTA: px-7 py-4, text-xs, uppercase */
.cur-btn--compact { padding: 0.65rem 1.5rem; font-size: 0.68rem; text-transform: uppercase; width: 100%; }

@media (min-width: 640px) {
  .cur-btn--wide, .cur-btn--compact { width: auto; }
}

/* CTA final: bg-white text-blue, px-8 py-4, text-xs sm:text-sm uppercase,
   shadow-xl, hover:scale-105 (sin glow, sin lift) */
.cur-btn--white {
  background: var(--color-white);
  color: #0077b6;
  padding: 0.65rem 1.5rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  box-shadow: var(--cur-shadow-xl);
  transition: all 0.2s ease;
}
.cur-btn--white:hover { background: #f1f5f9; transform: scale(1.05); }

@media (min-width: 640px) {
  .cur-btn--white { font-size: 0.78rem; }
}

/* ==========================================
   01. HERO — bg #072136, py-16 md:py-24
   ========================================== */
.cur-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 6rem 0 4rem;
}

@media (min-width: 768px) {
  .cur-hero { padding: 6rem 0; }
}

.cur-hero__inner { position: relative; z-index: 1; }

.cur-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2rem;
  align-items: center;
}

.cur-hero__content { display: flex; flex-direction: column; gap: 1.5rem; }

.cur-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--color-white);
  margin: 0;
}

.cur-hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.625;
  color: #cbd5e1;
  max-width: 42rem;
  margin: 0;
}

.cur-hero__note {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: #94a3b8;
  margin: 0;
}

.cur-hero__image-wrap { display: flex; justify-content: center; }

.cur-hero__image {
  width: 100%;
  max-width: 24rem;
  object-fit: contain;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
  border-radius: 1rem;
}

@media (min-width: 1024px) {
  .cur-hero__image { max-width: 28rem; }
  .cur-hero__image-wrap { justify-content: flex-end; }
}

@media (max-width: 1023px) {
  .cur-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .cur-hero__content { align-items: center; }
  .cur-hero__subtitle { margin: 0 auto; }
  .cur-hero__image { max-width: 280px; margin-top: 1rem; }
}

/* ==========================================
   02. SELECTOR DE PROBLEMA — py-16 (sin escalón md)
   ========================================== */
.cur-selector { background: #f8fafc; padding: 2.5rem 0; border-bottom: 1px solid rgba(226, 232, 240, 0.8); }

.cur-selector__eyebrow {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-orange-deep);
  margin-bottom: 0.5rem;
}

.cur-selector__title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 2rem;
  white-space: nowrap;
}

.cur-selector__pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; max-width: 62rem; margin: 0 auto; }

.cur-pill {
  box-sizing: border-box;
  flex: 0 0 auto;
  white-space: normal;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-white);
  color: #334155;
  border: 1px solid #e2e8f0;
  box-shadow: var(--cur-shadow-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.cur-pill:hover { border-color: var(--color-orange-deep); color: var(--color-orange-deep); }
.cur-pill.active { border-color: var(--color-ink); color: var(--color-white); background: var(--color-ink); box-shadow: var(--cur-shadow-md); transform: scale(1.05); }

@media (min-width: 640px) {
  .cur-pill { font-size: 0.85rem; padding: 0.65rem 1.15rem; }
}

@media (max-width: 480px) {
  .cur-selector__title { white-space: normal; }
}

/* ==========================================
   03. TARJETAS DE PROGRAMAS — py-16 sm:py-20
   ========================================== */
.cur-cards-section { background: var(--color-white); padding: 3rem 0; }

@media (min-width: 640px) {
  .cur-cards-section { padding: 3.5rem 0; }
}

.cur-cards-stack { display: flex; flex-direction: column; gap: 2.25rem; }

.cur-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

@media (min-width: 768px) {
  .cur-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cur-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

.cur-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-white);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--cur-shadow-sm);
  transition: box-shadow 0.3s ease;
}
.cur-card:hover { box-shadow: var(--cur-shadow-lg); transform: none; }
.cur-card.course-card--highlight,
.cur-card.course-card--highlight:hover {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--color-orange-deep), var(--cur-shadow-xl);
  transform: scale(1.02);
}

.cur-card__body { padding: 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.cur-card__footer { padding: 0 1.15rem 1.15rem; }

.cur-card__header { display: flex; align-items: center; gap: 0.75rem; }

.cur-card__icon { width: 40px; height: 40px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cur-card__icon--amber { background: color-mix(in srgb, var(--color-orange) 15%, white); color: var(--color-orange); }
.cur-card__icon--blue { background: color-mix(in srgb, var(--color-blue) 12%, white); color: var(--color-blue); }
.cur-card__icon--orange { background: color-mix(in srgb, var(--color-orange-deep) 12%, white); color: var(--color-orange-deep); }

.cur-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--color-ink); margin: 0; }

.cur-card__price { display: block; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; }
.cur-card__price--amber { color: var(--color-orange); }
.cur-card__price--blue { color: var(--color-blue); }
.cur-card__price--orange { color: var(--color-orange-deep); }

.cur-card__meta { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin: 0.125rem 0 0; }

.cur-card__label { font-size: 0.7rem; font-weight: 700; color: #1e293b; margin: 0 0 0.4rem; }

.cur-card__list { margin: 0; padding-left: 1rem; list-style: disc; display: flex; flex-direction: column; gap: 0.4rem; }
.cur-card__list li { font-size: 0.7rem; color: #475569; line-height: 1.3; }

.cur-card__desc { font-size: 0.7rem; color: #334155; line-height: 1.3; padding-top: 0.4rem; border-top: 1px solid #f1f5f9; margin: 0; }

.cur-card__highlight { font-size: 0.7rem; font-weight: 600; color: var(--color-orange-deep); margin: 0; }

.cur-card__btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.65rem 0.6rem; border-radius: 999px; font-family: var(--font-heading); font-weight: 700; font-size: 0.6rem; text-transform: uppercase; white-space: nowrap; color: var(--color-white); text-decoration: none; box-shadow: var(--cur-shadow-sm); transition: all 0.2s ease; }
.cur-card__btn:hover { box-shadow: var(--cur-shadow); }
.cur-card__btn--blue { background: var(--color-blue); }
.cur-card__btn--blue:hover { background: #005f92; }
.cur-card__btn--amber { background: var(--color-orange); }
.cur-card__btn--amber:hover { background: #e09512; }
.cur-card__btn--orange { background: var(--color-orange-deep); }
.cur-card__btn--orange:hover { background: #e05512; }

/* ==========================================
   Bundle — Ventas que Transforman (shadow-xl → hover shadow-2xl,
   neutro; el color solo va en el glow del CTA y en los orbes)
   ========================================== */
.cur-bundle {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 2px solid color-mix(in srgb, var(--color-orange-deep) 30%, transparent);
  box-shadow: var(--cur-shadow-xl);
  background: linear-gradient(135deg, var(--color-ink), color-mix(in srgb, var(--color-ink) 90%, var(--color-blue) 10%));
  transition: box-shadow 0.3s ease;
}
.cur-bundle:hover { box-shadow: var(--cur-shadow-2xl); transform: none; }
.cur-bundle.course-card--highlight,
.cur-bundle.course-card--highlight:hover {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--color-orange-deep), var(--cur-shadow-2xl);
  transform: scale(1.02);
}

.cur-bundle__ribbon-wrap { position: absolute; top: 0; right: 0; width: 9rem; height: 9rem; overflow: hidden; z-index: 2; pointer-events: none; }
.cur-bundle__ribbon {
  position: absolute;
  top: 1.5rem;
  right: -2.5rem;
  transform: rotate(45deg);
  background: var(--color-orange-deep);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 2.5rem;
  box-shadow: var(--cur-shadow-lg);
}

.cur-bundle__glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(64px); }
.cur-bundle__glow--tl { top: -5rem; left: -5rem; width: 16rem; height: 16rem; background: color-mix(in srgb, var(--color-orange-deep) 10%, transparent); }
.cur-bundle__glow--br { bottom: -5rem; right: -5rem; width: 16rem; height: 16rem; background: color-mix(in srgb, var(--color-blue) 10%, transparent); }

.cur-bundle__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }

.cur-bundle__image-wrap { position: relative; overflow: hidden; min-height: 280px; border-radius: 1rem 0 0 1rem; }
.cur-bundle__image { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cur-bundle__image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 60%, transparent), transparent); display: none; }

.cur-bundle__content { padding: 1.15rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }

@media (min-width: 640px) {
  .cur-bundle__content { padding: 1.5rem; }
}
@media (min-width: 1024px) {
  .cur-bundle__content { padding: 2rem; }
  .cur-bundle__image-wrap { min-height: auto; }
}

.cur-bundle__header { display: flex; align-items: center; gap: 0.7rem; }
.cur-bundle__icon { width: 48px; height: 48px; border-radius: 0.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-orange-deep) 20%, transparent); color: var(--color-orange-deep); border: 1px solid color-mix(in srgb, var(--color-orange-deep) 30%, transparent); backdrop-filter: blur(4px); }

.cur-bundle__title { font-family: var(--font-heading); font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 800; color: var(--color-white); line-height: 1.15; margin: 0; }
.cur-bundle__price { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, var(--color-orange-light) 90%, white 10%); margin: 0.2rem 0 0; }

.cur-bundle__desc { font-size: 0.8rem; color: #e2e8f0; line-height: 1.3; margin: 0; }

.cur-bundle__label { font-size: 0.7rem; font-weight: 700; color: var(--color-orange-light); margin: 0 0 0.4rem; }
.cur-bundle__list { margin: 0; padding-left: 1rem; list-style: disc; display: flex; flex-direction: column; gap: 0.3rem; }
.cur-bundle__list li { font-size: 0.7rem; color: #cbd5e1; line-height: 1.3; }

.cur-bundle__cta-wrap { padding-top: 0.6rem; }

@media (max-width: 1023px) {
  .cur-bundle__grid { grid-template-columns: 1fr; }
  .cur-bundle__image-wrap { min-height: 220px; border-radius: 1rem 1rem 0 0; }
  .cur-bundle__image-overlay { display: block; }
}

/* ==========================================
   04. COMPARATIVA DEL BUNDLE — py-16 sm:py-20
   ========================================== */
.cur-compare { background: #f8fafc; padding: 4rem 0; border-top: 1px solid rgba(226, 232, 240, 0.8); border-bottom: 1px solid rgba(226, 232, 240, 0.8); }

@media (min-width: 640px) {
  .cur-compare { padding: 5rem 0; }
}

.cur-compare__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: center; }

.cur-compare__intro { display: flex; flex-direction: column; gap: 1.25rem; }
.cur-compare__intro .cur-selector__eyebrow { margin-bottom: 0; text-align: left; }
.cur-compare__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; color: var(--color-ink); margin: 0; }
.cur-compare__text { font-size: 0.8rem; color: #475569; line-height: 1.5; margin: 0; text-align: left; }
.cur-compare__strong { font-size: 0.8rem; font-weight: 600; color: #1e293b; line-height: 1.5; margin: 0; text-align: left; }
.cur-compare__accent { font-weight: 800; font-size: 1.125rem; color: var(--color-orange-deep); }
.cur-compare__cta-wrap { padding-top: 0.5rem; }

.cur-table-card { background: var(--color-white); border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; box-shadow: var(--cur-shadow-md); }
.cur-table-scroll { overflow-x: auto; }

.cur-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.68rem; }
.cur-table thead { background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-weight: 700; color: #334155; }
.cur-table thead th { white-space: nowrap; }
.cur-table tbody { color: #334155; }
.cur-table th, .cur-table td { padding: 0.5rem 0.65rem; }
.cur-table tbody tr + tr { border-top: 1px solid #f1f5f9; }
.cur-table tbody tr:not(.cur-table__total) td:first-child { font-weight: 500; }
.cur-table__center { text-align: center; }
.cur-table__accent-head { color: var(--color-orange-deep); }
.cur-table__muted { color: #64748b; }
.cur-table__na { color: #94a3b8; font-style: italic; }
.cur-table__check { color: var(--color-blue); font-weight: 700; }
.cur-table__check svg { display: inline-block; vertical-align: -2px; margin-right: 0.25rem; }
.cur-table__accent-cell { color: var(--color-orange-deep); font-weight: 700; }
.cur-table__total { background: color-mix(in srgb, var(--color-orange) 8%, white); font-weight: 700; border-top: 2px solid #e2e8f0; }
.cur-table__total-label { color: var(--color-ink); font-weight: 800; text-transform: uppercase; }
.cur-table__strike { color: var(--color-orange-deep); text-decoration: line-through; }
.cur-table__total-price { color: var(--color-orange-deep); font-weight: 800; }
.cur-table__savings { display: block; font-size: 0.6875rem; font-weight: 400; color: #475569; }

@media (min-width: 640px) {
  .cur-table { font-size: 0.78rem; }
  .cur-table th, .cur-table td { padding: 0.65rem 0.85rem; }
}

@media (max-width: 1023px) {
  .cur-compare__grid { grid-template-columns: 1fr; }
}

/* ==========================================
   05. CTA MAESTRÍA — py-16 sm:py-20, space-y-5
   ========================================== */
.cur-cta-final { background: #0077b6; color: var(--color-white); padding: 2.5rem 0; }

@media (min-width: 640px) {
  .cur-cta-final { padding: 3rem 0; }
}

.cur-cta-final .cur-wrap--sm { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

.cur-cta-final__eyebrow { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-orange-light); margin: 0; }
.cur-cta-final__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--color-white); margin: 0; line-height: 1.2; }
.cur-cta-final__text { font-size: 0.8rem; line-height: 1.4; color: #f1f5f9; max-width: 36rem; margin: 0; }
.cur-cta-final__cta-wrap { padding-top: 0.35rem; }

@media (min-width: 640px) {
  .cur-cta-final__text { font-size: 0.9rem; }
}