/* ══════════════════════════════════════════════════════════════
   YENI INSPIRA — Masterclasses (listado + página individual)
   Depende de styles.css: tokens, header, menú, footer, botones.
   Los videos viven en YouTube: acá sólo se embeben, así la página
   no carga archivos pesados.
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1. HERO DEL LISTADO ─────────── */
.mc-hero {
  position: relative;
  padding: var(--s6) 0 var(--s4);
  overflow: hidden;
  isolation: isolate;
}
.mc-hero__glow {
  position: absolute; top: -170px; right: -140px;
  width: 330px; height: 330px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.3), rgba(151,110,220,0) 70%);
  filter: blur(70px); z-index: -2; pointer-events: none;
}
.mc-hero__filete {
  width: 34px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: var(--s3);
}
.mc-hero__titulo {
  font-size: clamp(2rem, 9.5vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
  /* "Masterclasses" es una palabra larga: sin esto desborda la caja
     en las pantallas más angostas en lugar de encogerse. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.mc-hero__bajada {
  margin-top: var(--s3);
  color: var(--ink-soft);
  font-size: 1rem; line-height: 1.72;
}

/* ─────────── 2. TARJETAS DEL LISTADO ─────────── */
.mc-cargando, .mc-vacio {
  list-style: none;
  margin-top: var(--s5);
  padding: var(--s4);
  text-align: center;
  color: var(--ink-soft);
  font-size: .95rem;
  background: var(--bg-tenue);
  border: 1px dashed var(--lavender);
  border-radius: var(--r-lg);
}

.mc-lista {
  list-style: none;
  /* El margen de abajo separa la última tarjeta del CTA: sin él
     quedaban prácticamente pegados. */
  margin: var(--s5) 0 var(--s7); padding: 0;
  display: flex; flex-direction: column; gap: var(--s4);
}

.mc-carta {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s ease, border-color .28s ease;
}
.mc-carta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: var(--violet-soft);
}
.mc-carta:active { transform: translateY(-1px) scale(.995); }

/* Miniatura + botón de play encima */
/* display:block explícito: como el marco es un <span>, quedaba en línea
   y el play (inset:0 + margin:auto) se calculaba contra una caja más
   angosta que la tarjeta, así que aparecía corrido a la izquierda. */
.mc-carta__marco {
  position: relative;
  display: block;
  width: 100%;
  background: #0f0d14;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.mc-carta__marco img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.mc-carta:hover .mc-carta__marco img { transform: scale(1.04); opacity: .88; }
.mc-carta__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(6px);
  color: var(--violet);
  box-shadow: 0 8px 24px rgba(15,8,34,.34);
  transition: transform .25s ease;
}
.mc-carta:hover .mc-carta__play { transform: scale(1.07); }
.mc-carta__play .icon { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }

/* Duración sobre la miniatura */
.mc-carta__duracion {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem;
  background: rgba(15,8,34,.74);
  backdrop-filter: blur(4px);
  border-radius: 7px;
  font-size: .74rem; font-weight: 600;
  color: #fff;
}

.mc-carta__cuerpo {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--s3) var(--s3) var(--s3);
}
.mc-carta__num {
  display: inline-block;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  color: var(--violet);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 8px;
  padding: .2rem .55rem;
  margin-bottom: var(--s2);
}
.mc-carta__titulo {
  display: block;
  font-size: 1.32rem;
  line-height: 1.16;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.mc-carta__titulo em { font-style: normal; color: var(--violet); }
/* Sin bajada en el listado: el título ya explica de qué va cada una. */
/* Joel lo pidió más a la derecha: se alinea al final de la columna.
   El flex-shrink de la flecha evita que se recorte cuando el texto
   ocupa todo el ancho disponible. */
.mc-carta__ver {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: var(--s3);
  font-size: .88rem; font-weight: 600;
  color: var(--violet);
  white-space: nowrap;
}
.mc-carta__ver .icon { flex-shrink: 0; transition: transform .25s ease; }
.mc-carta:hover .mc-carta__ver .icon { transform: translateX(4px); }

/* ─────────── 3. PÁGINA INDIVIDUAL ─────────── */
.mc-ver {
  position: relative;
  padding: var(--s5) 0 var(--s6);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #FBF8FE 0%, #F6F0FC 45%, var(--bg) 100%);
}
.mc-ver__glow {
  position: absolute; top: -150px; left: -130px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.26), rgba(151,110,220,0) 70%);
  filter: blur(65px); z-index: -2; pointer-events: none;
}
.mc-ver__eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: .73rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
  margin-bottom: var(--s3);
}
.mc-ver__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; flex-shrink: 0; }
.mc-ver__eyebrow::after  { content: ""; height: 1px; flex: 1; background: var(--gold); opacity: .45; }

.mc-ver__titulo {
  font-size: clamp(1.9rem, 8.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.mc-ver__titulo em { font-style: normal; color: var(--violet); }

/* Marco del video de YouTube — proporción fija para que no salte
   mientras carga el iframe. */
.mc-player {
  position: relative;
  margin-top: var(--s5);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0f0d14;
  border: 2px solid var(--lavender);
  box-shadow: var(--sombra-alta);
}
.mc-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

.mc-ver__pie {
  margin-top: var(--s4);
  font-size: .92rem; line-height: 1.6;
  color: var(--ink-soft);
}

/* Banda final: invita a la Sesión de Claridad sin robarle
   protagonismo al video. */
.mc-siguiente {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: var(--r-xl);
  text-decoration: none; color: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.mc-siguiente:hover { border-color: var(--violet-soft); transform: translateY(-2px); }
.mc-siguiente .icono-marca { --halo: var(--lavender-mist); }
.mc-siguiente__txt { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.mc-siguiente__que { font-size: .95rem; font-weight: 600; color: var(--ink); }
.mc-siguiente__dato { font-size: .82rem; color: var(--ink-soft); }
.mc-siguiente > .icon { color: var(--violet); transition: transform .25s ease; }
.mc-siguiente:hover > .icon { transform: translateX(4px); }

.mc-volver {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s5);
  font-size: .88rem; font-weight: 600;
  color: var(--violet); text-decoration: none;
}
.mc-volver .icon { transition: transform .25s ease; }
.mc-volver:hover .icon { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .mc-carta, .mc-carta__marco img, .mc-siguiente { transition: none; }
}