/* =============================================================
   theme-wharton.css
   Rediseño de Mente Corporativa inspirado en Wharton Executive
   Education (navy institucional + carmesí, tarjetas con banda
   fotográfica diagonal).

   Este archivo se SUMA a studio.css, no lo reemplaza. Todas las
   clases aquí usan el prefijo "mc-" para no chocar con las clases
   "st-" que ya usan otras páginas del sitio (catálogo, dashboard,
   foro, etc.). Los IDs que necesita el JavaScript existente en
   base_studio.html (menú móvil, notificaciones, mega menú) no se
   tocan: siguen siendo st-* y funcionan igual que antes.
   ============================================================= */

:root{
  --mcw-crimson:#9E1B32;
  --mcw-crimson-dark:#6b1220;
  --mcw-navy:#0B1220;
  --mcw-navy2:#0A3169;
  --mcw-navy3:#123A6E;
  --mcw-ink:#14213D;
  --mcw-muted:#5C6B85;
  --mcw-line:#E2E5EC;
  --mcw-bg-alt:#F5F7FA;
  /* Estados (mismos colores que ya usaban las páginas; aquí, en un solo lugar) */
  --mcw-ok:#0B7A5C;
  --mcw-ok-bg:#E4F6EF;
  --mcw-info-bg:#EAF1FC;
  --mcw-lock:#5F6878;
  --mcw-lock-bg:#F0F1F4;
  --mcw-warn:#8A6212;
  --mcw-warn-bg:#FBF3E3;
  --mcw-bad:#B42318;
  --mcw-bad-bg:#FDECEA;
  --mcw-crimson-bg:#FBEAEE;
  --ok:var(--mcw-ok,#0B7A5C);
  --ok-bg:var(--mcw-ok-bg,#E4F6EF);
  --lock:var(--mcw-lock,#5F6878);
  --lock-bg:var(--mcw-lock-bg,#F0F1F4);
  --info:var(--mcw-navy2,#0A3169);
  --info-bg:var(--mcw-info-bg,#EAF1FC);
}

/* ===================== TOPLINE =====================
   Barra eliminada a pedido (quedaba sobre el navbar sin sentido). Estilos retirados;
   si se reutiliza el patrón "utility bar" más adelante, se puede recuperar del historial. */

/* ===================== FONDO BASE DEL SITIO =====================
   studio.css define ".st-root" (aplicada a <body>) con fondo oscuro (var(--st-navy-900)),
   porque ese era el tema original de todo el sitio. Las páginas ya migradas al diseño
   nuevo (.mc-home / .mc-admin / .mc-auth) pintan su propio contenido de blanco, pero ese
   contenido casi siempre tiene un ancho máximo centrado (ej. ".st-page{max-width:1240px}"),
   así que en pantallas anchas los márgenes seguían mostrando el fondo oscuro de <body> —
   "pintábamos encima" en vez de cambiar la base. Aquí SÍ cambiamos la base directamente,
   pero solo para páginas que de verdad ya están migradas (detectamos que contienen un
   contenedor .mc-home/.mc-admin/.mc-auth). Header, footer y el hero de inicio siguen
   oscuros porque ellos mismos definen su propio fondo oscuro explícito, así que no les
   afecta. Las páginas que TODAVÍA no se han migrado (perfil, cursos, exámenes, lección,
   certificados, legal, etc. — quedan como tarea aparte) conservan su fondo oscuro actual,
   para no dejarlas con texto invisible mientras no tengan su propio rediseño claro. */
body.st-root:has(.mc-home),
body.st-root:has(.mc-admin),
body.st-root:has(.mc-auth),
body.st-root.st-claro{ /* st-claro: lo pone base-studio.js en navegadores sin :has() (WebView de Android antiguas) */
  background:#fff;
}

/* ===================== NAVBAR (contenido nuevo dentro de .st-header) ===================== */
.mc-navrow{display:flex; align-items:center; gap:24px; padding:14px 32px; max-width:1240px; margin:0 auto;}
.mc-brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.mc-brand__logo{height:40px; width:auto; display:block; border-radius:6px;}

.mc-navlinks{display:flex; align-items:center; gap:24px; font-size:13.5px; font-weight:600; color:#cfd9ec; flex:1;}
.mc-navlinks a, .mc-navlinks button{color:#cfd9ec; padding:6px 0; border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;}
.mc-navlinks a:hover, .mc-navlinks button:hover{color:#fff; border-bottom-color:var(--mcw-crimson);}
.mc-navright{display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0;}
.mc-btn{padding:10px 19px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:8px; border-radius:2px; border:none; cursor:pointer; font-family:inherit; white-space:nowrap;}
/* Especificidad: hay varias reglas "ambientales" tipo "<contenedor> a{color:inherit}"
   (".st-root a" en studio.css, ".mc-home a" aquí mismo más abajo, y lo mismo aplicaría a
   futuros ".mc-admin a"/".mc-auth a"). Todas pesan igual o más que una sola clase como
   ".mc-btn-crimson", así que el texto del botón heredaba el color de letra ambiental
   (azul oscuro) en vez del blanco que definíamos aquí — esto hacía ilegible "Reservar mi
   cupo". En vez de perseguir cada regla ambiental una por una, usamos !important en estos
   botones de acción: son componentes de marca (fondo de color sólido) que SIEMPRE deben
   verse igual sin importar dónde se coloquen, así que no deben depender del texto que los
   rodea — es el uso correcto de !important, no un parche. */
.mc-btn-crimson{background:var(--mcw-crimson); color:#fff !important;}
.mc-btn-crimson:hover{background:var(--mcw-crimson-dark);}
.mc-btn-outline-w{border:1.5px solid rgba(255,255,255,.4); color:#fff !important; background:transparent;}
.mc-btn-outline-w:hover{border-color:#fff;}

.mc-btn-block{width:100%; justify-content:center;}

/* ===================== DRAWER MÓVIL =====================
   Reglas antiguas del menú desplegable "empuja contenido" retiradas: quedaban muertas
   (sobrescritas por el panel superpuesto definido más abajo, sección "MENÚ MÓVIL"). */

/* ===================== FOOTER (contenido nuevo dentro de .st-footer) ===================== */
.mc-footer-grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12);}
.mc-footer-grid h5{color:#fff; font-size:13px; margin:0 0 16px; letter-spacing:.02em; font-weight:700;}
.mc-footer__logo{height:34px; width:auto; display:block; margin-bottom:16px; border-radius:5px;}
.mc-footer-grid p{font-size:12.5px; line-height:1.6; color:#a9b6cf; max-width:280px; margin:0;}
.mc-footer-grid ul{list-style:none; margin:0; padding:0;}
.mc-footer-grid ul li{margin-bottom:10px;}
.mc-footer-grid ul a{font-size:12.5px; color:#c3ccdf;}
.mc-footer-grid ul a:hover{color:#fff;}
.mc-footer-bottom{max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; padding-top:18px; font-size:11.5px; color:#8fa3c4; flex-wrap:wrap; gap:10px;}

/* ===================== HOME: fondo claro aislado ===================== */
.mc-home{background:#fff; color:var(--mcw-ink); font-family:'Plus Jakarta Sans',sans-serif;}
.mc-home a{text-decoration:none; color:inherit;}
.mc-wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

/* ===================== HERO ===================== */
.mc-hero{position:relative; color:#fff; overflow:hidden; background:linear-gradient(120deg, rgba(1,31,68,.95), rgba(1,31,68,.82)), linear-gradient(135deg,#274b7a,var(--mcw-navy2,#0A3169) 60%,var(--mcw-navy3,#123A6E));}
.mc-hero .mc-wrap{padding:56px 32px 0;}
.mc-herotop{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;}
.mc-herotext{max-width:600px;}
.mc-eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9fb3d6; margin-bottom:16px;}
.mc-hero h1{font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(26px,3.6vw,44px); line-height:1.18; margin:0 0 20px;}
.mc-hero .mc-lead{font-size:15.5px; color:#dbe4f2; line-height:1.65; max-width:520px; margin:0 0 26px;}
.mc-herocta{display:flex; gap:14px; flex-wrap:wrap;}
.mc-herostats{display:flex; gap:34px; margin-top:38px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16); flex-wrap:wrap;}
.mc-herostat b{display:block; font-family:'Sora',sans-serif; font-size:24px;}
.mc-herostat span{font-size:12px; color:#9fb3d6;}
.mc-heropanel{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:var(--r,2px); padding:0; width:340px; flex-shrink:0; overflow:hidden;}
.mc-heropanel .mc-th{aspect-ratio:16/10; background:linear-gradient(135deg,#3a5a8c,#0e2b57 60%,#1c4a7a); position:relative; display:flex; align-items:center; justify-content:center;}
.mc-onair{position:absolute; top:14px; left:14px; background:var(--mcw-crimson); color:#fff; font-size:12px; font-weight:800; letter-spacing:.03em; padding:6px 11px; border-radius:2px; display:flex; align-items:center; gap:6px;}
.mc-onair .mc-p{width:6px; height:6px; background:#fff; border-radius:50%; animation:mcpulse 1.3s infinite;}
@keyframes mcpulse{0%,100%{opacity:1;} 50%{opacity:.25;}}
.mc-playbtn{width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--mcw-navy2); display:flex; align-items:center; justify-content:center; font-size:20px;}
.mc-heropanel .mc-body{padding:16px 18px 18px;}
.mc-heropanel h4{font-size:14.5px; margin:0 0 4px; font-weight:700;}
.mc-heropanel p{font-size:12px; color:#c3ccdf; margin:0;}
.mc-heropanel-idle{padding:30px 20px; text-align:center;}
.mc-heropanel-idle h4{font-size:14.5px; margin-bottom:6px;}
.mc-heropanel-idle p{font-size:12.5px; color:#c3ccdf;}
/* Pantallas grandes: dos columnas reales. La tarjeta de la próxima clase crece
   (antes quedaba fija en 340 px, arriba y con un hueco grande al lado) y se
   centra a la altura del texto. */
@media (min-width:981px){
  .mc-herotop{display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,460px); align-items:center; gap:56px;}
  .mc-herotext{max-width:640px;}
  .mc-heropanel{width:auto;}
  .mc-heropanel .mc-body{padding:20px 22px 22px;}
  .mc-heropanel h4{font-size:17px; margin-bottom:6px;}
  .mc-heropanel p{font-size:13.5px;}
  .mc-heropanel-idle{padding:44px 28px;}
}
.mc-heroend{height:34px;}

/* ===================== WELCOME (usuario autenticado) ===================== */
.mc-welcome{background:linear-gradient(120deg, rgba(11,18,32,.96), rgba(11,18,32,.86)), linear-gradient(135deg,#274b7a,var(--mcw-navy2,#0A3169) 60%,var(--mcw-navy3,#123A6E)); color:#fff; padding:48px 0;}
.mc-welcometop{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:30px;}
.mc-welcometop h2{font-family:'Sora',sans-serif; font-size:26px; margin:0 0 6px;}
.mc-welcometop p{font-size:14px; color:#c3ccdf; margin:0;}
.mc-mycourses{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.mc-mycard{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:8px; overflow:hidden;}
.mc-mycard .mc-th{aspect-ratio:16/10; background:linear-gradient(140deg,var(--mcw-navy3),#1c4a7a); background-size:cover; background-position:center;}
.mc-mycard .mc-body{padding:14px 16px 16px;}
.mc-mycard .mc-title{font-size:13.5px; font-weight:700; margin:0 0 10px; line-height:1.35;}
.mc-progress-track{height:6px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden; margin-bottom:6px;}
.mc-progress-fill{height:100%; background:var(--mcw-crimson);}
.mc-progress-label{font-size:11px; color:#c3ccdf; margin:0;}
.mc-empty-courses{font-size:14px; color:#dbe4f2;}
.mc-empty-courses a{color:#fff; font-weight:700; border-bottom:2px solid var(--mcw-crimson);}

/* ===================== LIVE BAR ===================== */
.mc-livebar{background:var(--mcw-bg-alt); border-bottom:1px solid var(--mcw-line);}
.mc-livebar .mc-row{display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:0 auto; padding:15px 32px; flex-wrap:wrap; gap:14px;}
.mc-livebar .mc-l{display:flex; align-items:center; gap:12px;}
.mc-dotp{width:9px; height:9px; background:var(--mcw-crimson); border-radius:50%; animation:mcpulse 1.3s infinite; flex-shrink:0;}
.mc-livebar strong{font-size:13.5px; color:var(--mcw-ink);}
.mc-livebar span.mc-sub{font-size:12px; color:var(--mcw-muted);}

/* ===================== SECCIONES ===================== */
.mc-section{padding:56px 0;}
.mc-section.mc-alt{background:var(--mcw-bg-alt);}
.mc-sectionhead{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px;}
.mc-sectionhead .mc-k{color:var(--mcw-crimson); font-weight:800; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
.mc-sectionhead h2{font-family:'Sora',sans-serif; font-size:25px; color:var(--mcw-ink); margin:0;}
.mc-sectionhead .mc-viewall{font-size:13px; font-weight:700; color:var(--mcw-ink); border-bottom:2px solid var(--mcw-crimson); padding-bottom:2px;}
.mc-rowcontrols{display:flex; align-items:center; gap:14px;}
.mc-rowbtns{display:flex; gap:8px;}
.mc-rowbtn{width:36px; height:36px; border:1px solid var(--mcw-line); background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--mcw-ink); font-size:14px;}
.mc-rowbtn:hover{background:var(--mcw-ink); color:#fff; border-color:var(--mcw-ink);}
.mc-empty-row{font-size:13.5px; color:var(--mcw-muted); padding:20px 0;}

/* ===================== SCROLLER / TARJETAS ===================== */
.mc-scroller{display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px; scrollbar-width:none;}
.mc-scroller::-webkit-scrollbar{display:none;}
.mc-ccard{flex:0 0 280px; border:1px solid var(--mcw-line); background:#fff;}
.mc-ccard .mc-th{aspect-ratio:16/11; position:relative; overflow:hidden; clip-path:polygon(0 0,100% 0,100% 82%,0 100%); background-size:cover; background-position:center;}
.mc-ccard .mc-th .mc-badge{position:absolute; top:13px; left:13px; background:var(--mcw-navy,#0B1220); color:#fff; font-size:10px; font-weight:800; letter-spacing:.03em; padding:5px 10px; border-radius:2px; box-shadow:0 2px 8px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);}
.mc-ccard .mc-th .mc-badge.mc-soon{background:var(--mcw-crimson);}
.mc-ccard .mc-th .mc-badge.mc-badge-sub{left:auto; right:13px; background:var(--mcw-crimson);}
.mc-ccard .mc-body{padding:16px 16px 18px;}
.mc-ccard .mc-cat{font-size:12px; font-weight:700; color:var(--mcw-crimson); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;}
.mc-ccard h4{font-family:'Sora',sans-serif; font-size:15.5px; color:var(--mcw-ink); margin:0 0 8px; line-height:1.3; font-weight:700;}
.mc-ccard .mc-meta{font-size:12px; color:var(--mcw-muted); line-height:1.5; margin:0 0 10px;}
.mc-history-toggle{text-align:left; padding:6px 0 8px;}
.mc-history-toggle .mc-chip{display:inline-block; text-decoration:none;}
.mc-ccard .mc-foot{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--mcw-line); padding-top:10px; font-size:12.5px;}
.mc-ccard .mc-price{font-weight:800; color:var(--mcw-ink);}
.mc-ccard .mc-goto{font-weight:700; color:var(--mcw-crimson);}

.mc-th-live1{background-image:linear-gradient(140deg,var(--mcw-navy2),var(--mcw-navy3,#123a6e));}
.mc-th-live2{background-image:linear-gradient(140deg,var(--mcw-navy3,#123a6e),#1c4a7a);}
.mc-th-live3{background-image:linear-gradient(140deg,#274b7a,var(--mcw-navy2,#0A3169));}
.mc-th-rec1{background-image:linear-gradient(140deg,var(--mcw-crimson-dark,#6b1220),var(--mcw-navy2,#0A3169));}
.mc-th-rec2{background-image:linear-gradient(140deg,var(--mcw-navy2,#0A3169),var(--mcw-crimson,#9E1B32));}
.mc-th-rec3{background-image:linear-gradient(140deg,var(--mcw-navy3,#123a6e),var(--mcw-crimson-dark,#6b1220));}
.mc-th-sim1{background-image:linear-gradient(140deg,var(--mcw-crimson),var(--mcw-crimson-dark,#6b1220));}
.mc-th-sim2{background-image:linear-gradient(140deg,var(--mcw-crimson-dark,#6b1220),#3a0a10);}

/* ===================== CHIPS (filtro grabados) ===================== */
.mc-chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.mc-chip{padding:9px 17px; border:1.5px solid var(--mcw-line); font-size:12.5px; font-weight:700; color:var(--mcw-ink); cursor:pointer; background:#fff;}
.mc-chip.mc-on{background:var(--mcw-ink); color:#fff; border-color:var(--mcw-ink);}

/* ===================== GRID (grabados) ===================== */
.mc-grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.mc-grid4 .mc-ccard.mc-hide{display:none;}

/* ===================== SUSCRIPCIÓN ===================== */
.mc-subbanner{background:var(--mcw-navy); color:#fff;}
.mc-subrow{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:42px 0; flex-wrap:wrap;}
.mc-subrow h3{font-family:'Sora',sans-serif; font-size:22px; margin:0 0 8px;}
.mc-subrow p{font-size:13.5px; color:#c3ccdf; max-width:460px; margin:0;}

/* ===================== VENTAJAS ===================== */
.mc-featgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--mcw-line);}
.mc-featitem{padding:24px 22px 24px 0; border-right:1px solid var(--mcw-line);}
.mc-featitem:last-child{border-right:none; padding-right:0;}
.mc-featitem .mc-num{font-family:'Sora',sans-serif; font-size:13px; color:var(--mcw-crimson); font-weight:800; margin-bottom:10px;}
.mc-featitem h4{font-size:14.5px; color:var(--mcw-ink); margin:0 0 8px;}
.mc-featitem p{font-size:12.5px; color:var(--mcw-muted); line-height:1.55; margin:0;}

/* ===================== FAQ ===================== */
.mc-faq{max-width:820px;}
.mc-faqitem{border-bottom:1px solid var(--mcw-line);}
.mc-faqq{display:flex; justify-content:space-between; align-items:center; padding:20px 0; cursor:pointer; font-weight:700; font-size:14.5px; color:var(--mcw-ink);}
.mc-faqq .mc-chev{font-size:13px; color:var(--mcw-crimson); transition:transform .2s; flex-shrink:0; margin-left:20px;}
.mc-faqitem.mc-open .mc-chev{transform:rotate(180deg);}
.mc-faqa{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.mc-faqitem.mc-open .mc-faqa{max-height:220px;}
.mc-faqa p{font-size:13.5px; color:var(--mcw-muted); line-height:1.6; padding-bottom:20px; max-width:640px; margin:0;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:980px){
  .mc-navlinks{display:none;}
  .mc-navdesktoponly{display:none;}
  .mc-herotop{flex-direction:column;}
  .mc-heropanel{width:100%; max-width:560px;}
  .mc-mycourses{grid-template-columns:repeat(2,1fr);}
  .mc-featgrid{grid-template-columns:repeat(2,1fr);}
  .mc-featitem:nth-child(2n){padding-right:0; border-right:none;}
  .mc-grid4{grid-template-columns:repeat(2,1fr);}
  .mc-footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .mc-wrap{padding:0 18px;}
  .mc-navrow{padding:14px 18px;}
  .mc-hero .mc-wrap{padding:36px 18px 0;}
  .mc-section{padding:42px 0;}
  .mc-mycourses{grid-template-columns:1fr;}
  .mc-featgrid{grid-template-columns:1fr;}
  .mc-featitem{border-right:none !important; border-bottom:1px solid var(--mcw-line); padding:18px 0;}
  .mc-grid4{display:flex; grid-template-columns:none; gap:22px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px; scrollbar-width:none;}
  .mc-grid4::-webkit-scrollbar{display:none;}
  .mc-ccard{flex:0 0 250px;}
  .mc-footer-grid{grid-template-columns:1fr; gap:26px;}
  .mc-subrow{flex-direction:column; align-items:flex-start;}
}

/* =============================================================
   PÁGINAS INTERNAS: catálogo, detalle de curso, panel del alumno
   (misma familia visual que el home, componentes nuevos con el
   mismo prefijo mc-)
   ============================================================= */

/* ===================== PAGEHERO (catálogo y páginas simples) ===================== */
.mc-pagehero{background:linear-gradient(120deg, rgba(1,31,68,.95), rgba(1,31,68,.82)), linear-gradient(135deg,#274b7a,var(--mcw-navy2,#0A3169) 60%,var(--mcw-navy3,#123A6E)); color:#fff; padding:44px 0 34px;}
.mc-pagehero h1{font-family:'Sora',sans-serif; font-size:clamp(24px,3vw,34px); margin:0 0 10px; font-weight:800;}
.mc-pagehero p{font-size:14.5px; color:#dbe4f2; max-width:560px; margin:0 0 22px;}
.mc-searchbar{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:var(--r,2px); padding:11px 18px; max-width:420px;}
.mc-searchbar input{background:none; border:0; outline:0; color:#fff; font-size:13.5px; width:100%; font-family:inherit;}
.mc-searchbar input::placeholder{color:#b9c6e2;}

/* ===================== SUGERENCIAS DE BÚSQUEDA (autocompletado) ===================== */
.mc-suggest-wrap{position:relative;}
.mc-suggest{display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--mcw-line); border-radius:2px; box-shadow:0 10px 28px rgba(0,0,0,.16); z-index:60; overflow:hidden;}
.mc-suggest--open{display:block;}
.mc-suggest__item{display:flex; flex-direction:column; gap:2px; padding:10px 14px; text-decoration:none; border-bottom:1px solid var(--mcw-line);}
.mc-suggest__item:last-child{border-bottom:none;}
.mc-suggest__item:hover{background:var(--mcw-bg-alt,#F5F7FA);}
.mc-suggest__title{font-size:13.5px; font-weight:700; color:var(--mcw-ink); line-height:1.3;}
.mc-suggest__meta{font-size:11.5px; color:var(--mcw-muted);}

.mc-chiprow{display:flex; gap:8px; flex-wrap:wrap; padding:20px 0;}
.mc-chiprow + .mc-chiprow{padding-top:0;}
.mc-resultsnote{font-size:13px; color:var(--mcw-muted); padding:0 0 10px;}

/* ===================== CATÁLOGO / GRID DE RESULTADOS ===================== */
.mc-catgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:24px 0 60px;}
.mc-catgrid .mc-ccard{flex:none;}
.mc-catgrid .mc-th{clip-path:none; aspect-ratio:16/10;}
.mc-empty{text-align:center; padding:60px 20px; border:1px dashed var(--mcw-line);}
.mc-empty h4{font-family:'Sora',sans-serif; font-size:17px; margin:14px 0 8px; color:var(--mcw-ink);}
.mc-empty p{font-size:13.5px; color:var(--mcw-muted); max-width:420px; margin:0 auto 20px;}

/* ===================== DETALLE DE CURSO (hero + tabs + sidebar) ===================== */

/* ===================== PANEL DEL ALUMNO (dashboard) ===================== */

.mc-quicklinks{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:6px 0 60px;}

@media(max-width:980px){
  
  .mc-catgrid{grid-template-columns:repeat(2,1fr);}
  .mc-quicklinks{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .mc-catgrid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .mc-catgrid .mc-ccard .mc-body{padding:11px 11px 13px;}
  .mc-catgrid .mc-ccard .mc-cat{font-size:12px; margin-bottom:4px;}
  .mc-catgrid .mc-ccard h4{font-size:13px; margin:0 0 6px;}
  .mc-catgrid .mc-ccard .mc-meta{font-size:12px; margin:0 0 8px;}
  .mc-catgrid .mc-ccard .mc-foot{font-size:11px; padding-top:8px;}
  .mc-catgrid .mc-ccard .mc-th .mc-badge{font-size:9px; padding:4px 8px; top:8px; left:8px;}
  .mc-catgrid .mc-ccard .mc-th .mc-badge.mc-badge-sub{left:auto; right:8px;}
  
  .mc-pagehero{padding:34px 0 26px;}
  .mc-sectionhead h2{font-size:20px;}
}
@media(max-width:380px){
  .mc-catgrid{grid-template-columns:1fr;}
}

/* =============================================================
   PANELES INTERNOS (administrador, profesor, vendedor)
   Reusa las clases st-admin/st-stat-box/st-panel/st-tag/etc. que
   ya existen (misma estructura y JS), pero con .mc-admin puesto
   ADEMÁS de .st-admin en el contenedor, este bloque sobreescribe
   sus colores de oscuro a claro. Va después de las reglas .st-admin
   en la cascada, así que gana con la misma especificidad.
   ============================================================= */
.mc-admin{background:#fff; color:var(--mcw-ink);}
.mc-admin h1,.mc-admin h2,.mc-admin h3,.mc-admin h4,.mc-admin h5,.mc-admin h6{font-family:'Plus Jakarta Sans',sans-serif; color:var(--mcw-ink); font-weight:700;}
.mc-admin a{color:var(--mcw-crimson);}
.mc-admin p{color:var(--mcw-ink);}
.mc-admin small,.mc-admin .small,.mc-admin .text-muted{color:var(--mcw-muted)!important;}
.mc-admin code{background:var(--mcw-bg-alt); color:var(--mcw-crimson-dark);}
.mc-admin hr{border-color:var(--mcw-line);}

.mc-admin .btn{border-radius:2px;}
.mc-admin .btn-aula-primary{background:var(--mcw-crimson); color:#fff; border:none;}
.mc-admin .btn-aula-primary:hover{background:var(--mcw-crimson-dark); color:#fff;}

.mc-admin .btn-outline-danger{color:var(--mcw-crimson); border-color:rgba(158,27,50,.4); background:#fff;}
.mc-admin .btn-outline-danger:hover{background:rgba(158,27,50,.06); color:var(--mcw-crimson-dark);}

.mc-admin .form-control,.mc-admin .form-select{background:#fff; border:1px solid var(--mcw-line); color:var(--mcw-ink);}
.mc-admin .form-control::placeholder{color:var(--mcw-muted);}
.mc-admin .form-control:focus,.mc-admin .form-select:focus{background:#fff; border-color:var(--mcw-crimson); color:var(--mcw-ink); box-shadow:0 0 0 .2rem rgba(158,27,50,.12);}
.mc-admin .form-check-input{background-color:#fff; border-color:var(--mcw-line);}
.mc-admin .form-check-input:checked{background-color:var(--mcw-crimson); border-color:var(--mcw-crimson);}

.mc-admin select option{background:#fff; color:var(--mcw-ink);}

.mc-admin .table{color:var(--mcw-ink);}
.mc-admin .table > :not(caption) > * > *{background:transparent; color:var(--mcw-ink); border-bottom-color:var(--mcw-line); box-shadow:none;}
.mc-admin .table thead th{color:var(--mcw-muted); font-weight:700; border-bottom-color:var(--mcw-line);}

.mc-admin .badge{font-weight:700; border-radius:999px;}
.mc-admin .card{background:#fff; border:1px solid var(--mcw-line); color:var(--mcw-ink);}

/* ===================== VISOR DE LECCIÓN (dentro de .mc-home) ===================== */

.mc-home .st-alert-warning, .mc-home .st-alert-info{background:var(--mcw-bg-alt); border:1px solid var(--mcw-line); color:var(--mcw-ink);}
.mc-home .st-btn{border-radius:2px;}
.mc-home .st-btn-outline{border:1.5px solid var(--mcw-line); color:var(--mcw-ink); background:#fff;}
.mc-home .st-btn-teal{background:var(--mcw-crimson); color:#fff; border:none; box-shadow:none;}
.mc-home .st-btn-teal:hover{background:var(--mcw-crimson-dark); box-shadow:none;}

/* =============================================================
   REMAPEO DE VARIABLES "st-" DENTRO DE ZONAS CLARAS
   Cualquier componente de studio.css que use var(--st-muted),
   var(--st-teal-glow), var(--st-coral-300), var(--st-line), etc.
   (pensadas para fondo oscuro) recibe automáticamente el valor
   claro equivalente dentro de .mc-home / .mc-admin / .mc-auth,
   sin tener que sobreescribir cada selector uno por uno. Los
   navy-900/950/800/700 NO se tocan: siguen sirviendo para
   insignias, degradados de marca y el header/footer oscuros.
   ============================================================= */
.mc-home, .mc-admin, .mc-auth{
  --st-ink:var(--mcw-ink);
  --st-muted:var(--mcw-muted);
  --st-muted-2:var(--mcw-muted);
  --st-line:var(--mcw-line);
  --st-teal-glow:var(--mcw-crimson);
  --st-teal-600:var(--mcw-crimson);
  --st-coral-300:var(--mcw-crimson);
  --st-coral-500:var(--mcw-crimson-dark);
}

/* Alertas genéricas (formularios con errores/éxito), reutilizadas
   en varias plantillas nuevas dentro de zonas claras */
.mc-home .st-alert-danger, .mc-admin .st-alert-danger, .mc-auth .st-alert-danger{
  background:rgba(158,27,50,.08); border:1px solid rgba(158,27,50,.25); color:var(--mcw-crimson);
}
.mc-home .st-alert-success, .mc-admin .st-alert-success, .mc-auth .st-alert-success{
  background:rgba(12,133,101,.1); border:1px solid rgba(12,133,101,.28); color:#0c6b4f;
}
.mc-home .st-alert-info, .mc-admin .st-alert-info, .mc-auth .st-alert-info,
.mc-home .st-alert-warning, .mc-admin .st-alert-warning, .mc-auth .st-alert-warning{
  background:var(--mcw-bg-alt); border:1px solid var(--mcw-line); color:var(--mcw-ink);
}
.mc-home .st-field-error, .mc-admin .st-field-error, .mc-auth .st-field-error{color:var(--mcw-crimson);}

/* ===================== PANTALLA DE AUTENTICACIÓN (login, registro, recuperar clave) ===================== */
.mc-auth.st-auth-wrap{background:#fff;}
.mc-auth .st-auth-side{
  background:
    radial-gradient(circle at 18% 20%, rgba(158,27,50,.28), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(10,49,105,.4), transparent 40%),
    linear-gradient(160deg, var(--mcw-navy3), var(--mcw-navy));
  border-right:1px solid rgba(255,255,255,.08);
}
.mc-auth .st-auth-content{background:#fff;}
.mc-auth .st-auth-title{color:var(--mcw-ink); font-family:'Sora',sans-serif;}
.mc-auth .st-auth-subtitle{color:var(--mcw-muted);}
.mc-auth .st-form-group label, .mc-auth .st-auth-card label, .mc-auth .st-auth-card .form-label{color:var(--mcw-muted);}
.mc-auth .st-auth-card input[type="text"],
.mc-auth .st-auth-card input[type="email"],
.mc-auth .st-auth-card input[type="password"],
.mc-auth .st-auth-card input[type="tel"],
.mc-auth .st-auth-card .form-control{
  background:#fff; color:var(--mcw-ink); border:1px solid var(--mcw-line);
}
.mc-auth .st-auth-card input::placeholder{color:#A9B3C4;}
.mc-auth .st-auth-card input:focus, .mc-auth .st-auth-card .form-control:focus{
  border-color:var(--mcw-crimson); background:#fff; box-shadow:0 0 0 3px rgba(158,27,50,.12);
}
.mc-auth .st-auth-forgot-link{color:var(--mcw-crimson);}
.mc-auth .st-auth-divider{color:#A9B3C4;}
.mc-auth .st-auth-divider::before, .mc-auth .st-auth-divider::after{background:var(--mcw-line);}
.mc-auth .st-btn-google{background:#fff; color:#3c4043; border:1px solid var(--mcw-line);}
.mc-auth .st-btn-teal{background:var(--mcw-crimson); color:#fff; box-shadow:none;}
.mc-auth .st-btn-teal:hover{background:var(--mcw-crimson-dark);}
.mc-auth .st-auth-switch{color:var(--mcw-muted);}
.mc-auth .st-auth-switch a{color:var(--mcw-crimson);}
.mc-auth .st-auth-footer-note{color:#A9B3C4;}
.mc-auth .st-auth-footer-note a{color:var(--mcw-muted);}

/* ===================== PERFIL DE USUARIO (dentro de .mc-home) ===================== */

/* ===================== PÁGINAS SIMPLES (un último paso, clave temporal, etc.) ===================== */

/* ===================== CERTIFICADOS, EXÁMENES, ESTADOS VACÍOS (dentro de .mc-home) ===================== */
.mc-home .st-empty h4{color:var(--mcw-ink);}
.mc-home .st-empty p{color:var(--mcw-muted);}

.mc-home .st-dash-hero{background:linear-gradient(160deg,var(--mcw-navy3),var(--mcw-navy)); border:1px solid var(--mcw-line); color:#fff;}

.mc-home .st-cert-card{background:#fff; border:1px solid var(--mcw-line); box-shadow:0 1px 3px rgba(20,33,61,.05);}
.mc-home .st-cert-card__cover{background-color:var(--mcw-navy);}
.mc-home .st-cert-card__title{color:var(--mcw-ink);}
.mc-home .st-cert-card__verify{background:rgba(12,133,101,.1); border:1px solid rgba(12,133,101,.25);}
.mc-home .st-cert-card__verify strong, .mc-home .st-cert-card__verify span.st-strong{color:#0c6b4f;}

/* ===================== COMPONENTES REUTILIZADOS "st-" (hero, tarjetas, FAQ, panel, sin-acceso)
   EN PÁGINAS SECUNDARIAS QUE NO SE REESCRIBIERON A MARKUP mc- NUEVO
   (suscripción, resultado de pago, solicitar asesoría, sin acceso, etc.)
   ============================================================= */

.mc-home .st-row-head h2{color:var(--mcw-ink);}

.mc-home .st-card{background:#fff; border:1px solid var(--mcw-line); box-shadow:0 1px 3px rgba(20,33,61,.06);}
.mc-home .st-card:hover{border-color:var(--mcw-crimson); box-shadow:0 6px 16px rgba(20,33,61,.1);}
.mc-home .st-card-title{color:var(--mcw-ink);}

/* ===================== FORO (dentro de .mc-home, dentro de las páginas de curso) ===================== */
.mc-home .st-forum-subtitle{color:var(--mcw-ink);}
.mc-home .st-forum-card{background:#fff; border:1px solid var(--mcw-line); box-shadow:0 1px 3px rgba(20,33,61,.05);}
.mc-home .st-forum-card strong{color:var(--mcw-ink);}
.mc-home .st-forum-answer{background:var(--mcw-bg-alt);}
.mc-home .st-forum-answer h6{color:var(--mcw-ink);}
.mc-home .st-forum-textarea, .mc-home .st-forum-card textarea, .mc-home .st-forum-card input[type="url"]{
  background:#fff; color:var(--mcw-ink); border:1px solid var(--mcw-line);
}
.mc-home .st-forum-card textarea:focus, .mc-home .st-forum-card input:focus{border-color:var(--mcw-crimson); background:#fff;}

/* ===================== HOJA DE ALUMNOS DE UN CURSO (tabla + panel deslizable) ===================== */

/* ===================== DETALLE DE CURSO: pestañas, acordeón y panel lateral
   (dentro de .mc-home, sistema st- que usan course_detail.html y
   live_course_detail.html — no se reescribió a markup mc- nuevo) ===================== */

/* Insignia genérica sobre miniaturas de curso (distinta de .mc-badge, que es la versión
   nueva usada en el home) — la usan las tarjetas "también te puede interesar" y
   "cursos incluidos en la suscripción". */
.mc-home .st-badge{background:rgba(255,255,255,.85); color:var(--mcw-ink); text-shadow:none;}

/* Textos secundarios DENTRO de franjas que siguen oscuras a propósito (hero de curso,
   hero del panel de alumno): estos NO deben tomar el var(--st-muted) ya remapeado a un
   tono pensado para fondo claro, porque aquí el fondo sigue siendo navy. */

.mc-home .st-dash-hero__sub, .mc-home .st-dash-hero__label{color:#c7d3ec;}
.mc-home .st-dash-hero__title, .mc-home .st-dash-hero__num{color:#fff;}

/* ===================== DETALLE DE CURSO DEL PROFESOR (módulos y sesiones) ===================== */

/* ===================== CORRECCIONES DE CONTRASTE (botones con color fijo pensado para fondo oscuro) ===================== */
/* .st-btn-ghost trae color:#fff fijo (no variable) porque nació para el header/hero oscuro.
   Dentro de una página clara (mc-home/mc-admin/mc-auth) eso queda blanco sobre blanco. */

/* .st-btn-outline usa var(--st-teal-glow) para el texto, que en tema claro ya remapeamos a crimson,
   pero el borde seguía en verde fijo: lo alineamos al mismo tono. */
.mc-home .st-btn-outline, .mc-admin .st-btn-outline, .mc-auth .st-btn-outline{
  border-color:rgba(158,27,50,.35);
}

/* ===================== MENÚ MÓVIL: panel deslizante con fondo oscuro (antes empujaba el contenido) ===================== */
.mc-mobile-backdrop{
  position:fixed; inset:0; background:rgba(7,13,28,.55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:490;
}
.mc-mobile-backdrop.st-open{opacity:1; pointer-events:auto;}

.mc-mobile-drawer{
  display:flex !important; flex-direction:column; gap:0;
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--mcw-navy, #0B1220); background:linear-gradient(180deg,var(--mcw-navy,#0B1220),#0A1730);
  border-top:none; border-left:1px solid rgba(255,255,255,.08);
  padding:0; margin:0;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:500; overflow-y:auto; box-shadow:-24px 0 60px rgba(0,0,0,.4);
}
.mc-mobile-drawer.st-open{transform:translateX(0);}
/* Cerrado, el menú queda fuera de la pantalla: sin sombra (si no, se ve
   una franja gris en el borde derecho de todas las páginas del celular). */
.mc-mobile-drawer:not(.st-open){box-shadow:none; visibility:hidden; transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;}
.mc-mobile-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.mc-mobile-drawer__brand{font-weight:800; font-size:15px; color:#fff; display:flex; align-items:center; gap:8px;}
.mc-mobile-drawer__logo{height:28px; width:auto; display:block; border-radius:5px;}
.mc-mobile-drawer__close{
  width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; cursor:pointer; flex-shrink:0;
}
.mc-mobile-drawer__body{padding:10px 20px 24px; display:flex; flex-direction:column; gap:2px;}
.mc-mobile-drawer a{color:#cfd9ec !important; font-size:15px; font-weight:600; padding:13px 2px !important; border-bottom:1px solid rgba(255,255,255,.08);}
.mc-mobile-drawer .mc-mdrawer-btns{display:flex; gap:10px; padding-top:16px;}

@media (min-width:981px){
  .mc-mobile-backdrop, .mc-mobile-drawer{display:none !important;}
}

body.mc-noscroll{overflow:hidden;}

/* ===================== ANIMACIÓN DE ENTRADA AL CARGAR CADA PÁGINA ===================== */
@keyframes mcw-page-in{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.st-main{animation:mcw-page-in .4s cubic-bezier(.2,.7,.3,1) both;}

@media (prefers-reduced-motion: reduce){
  .st-main{animation:none;}
}

/* ===================== SUBMENÚS DEL HEADER (Explorar, notificaciones, perfil) =====================
   Estos paneles viven FUERA de .mc-home/.mc-admin/.mc-auth (el header es hermano del wrapper),
   así que el remapeo de variables de esos wrappers no los alcanza. El header se queda
   intencionalmente oscuro (navy), pero AQUÍ NO SOLO CAMBIAMOS COLOR: el diseño nuevo (Wharton)
   usa esquinas rectas/casi rectas (ver .mc-btn, .mc-ccard, .mc-chip — radios de 0 a 4px, nunca
   los 12-16px "burbuja" del tema viejo), tipografía Sora en mayúsculas para encabezados de
   sección, bordes finos en vez de sombras difusas grandes, y una franja superior de acento en
   vez de textos sueltos en verde/carmesí. Reconstruimos estos tres paneles con ese lenguaje. */
:root{
  --mcw-crimson-bright:#FF6B7D; /* carmesí vivo, pensado para texto/acentos sobre navy */
}

.st-mega, .st-dd{
  border-radius:4px;
  border:1px solid rgba(255,255,255,.10);
  border-top:2px solid var(--mcw-crimson);
  box-shadow:0 16px 40px rgba(3,7,18,.5);
  background:#111B33;
}

/* --- Mega menú "Explorar" --- */
.st-mega-col h5{
  color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-family:'Sora',sans-serif; border-bottom:1px solid rgba(255,255,255,.10); padding-bottom:8px;
}
.st-mega-col a{border-radius:0; padding:6px 2px;}
.st-mega-col a:hover{color:#fff; background:rgba(255,255,255,.04);}
.st-mega-foot{border-top-color:rgba(255,255,255,.10); text-align:right;}
.st-mega-foot a{color:var(--mcw-crimson-bright); font-family:'Sora',sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;}

/* --- Dropdown de perfil / notificaciones --- */

/* Banner "nuevo" dentro del dropdown de perfil: esquinas rectas + acento carmesí en vez
   del verde-menta y las esquinas muy redondeadas del tema viejo. */

/* =====================================================================
   CURSO EN VIVO — rediseño completo de la página de detalle
   (courses/live_course_detail.html). Prefijo lv- para no interferir con
   el detalle de curso grabado (course_detail.html), que sigue usando las
   clases st- de siempre.
   ===================================================================== */

/* --- Hero: imagen real del curso (misma que la miniatura), nítida,
   con degradado solo abajo para que el título se lea. --- */
.lv-hero{position:relative; padding:64px 32px 40px; color:#fff; background-color:var(--mcw-navy); background-size:cover; background-position:center; min-height:280px; display:flex; align-items:flex-end;}
.lv-hero::before{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,10,22,.94) 0%, rgba(6,10,22,.72) 32%, rgba(6,10,22,.22) 65%, rgba(6,10,22,.05) 100%);}
.lv-hero__inner{position:relative; max-width:1320px; margin:0 auto; width:100%;}
.lv-hero__badges{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.lv-badge{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:5px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);}
.lv-badge--live{background:rgba(255,93,115,.2); border-color:rgba(255,93,115,.4); color:#FFC2C9; display:inline-flex; align-items:center; gap:6px;}
.lv-badge--live .lv-dot{width:6px; height:6px; border-radius:50%; background:#FF6B7D; display:inline-block; animation:lv-pulse 1.6s infinite;}
@keyframes lv-pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.lv-hero h1{font-size:30px; line-height:1.2; max-width:760px; margin-bottom:10px; color:#fff; font-family:'Sora',sans-serif; font-weight:800; overflow-wrap:anywhere;}
.lv-hero__sub{color:#D9E1F2; font-size:14px; max-width:640px; line-height:1.6; margin-bottom:16px; overflow-wrap:anywhere;}
.lv-hero__meta{display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:#D9E1F2;}
.lv-hero__meta span{display:flex; align-items:center; gap:7px;}
.lv-hero__meta i{color:#FF8B98;}

/* --- Layout de 2 columnas (sin sidebar izquierdo: se quitó por no aportar,
   el contenido ahora ocupa todo el ancho disponible a la izquierda) --- */

/* --- Sesión (acordeón) --- */

/* Foro: en la página de curso en vivo el formulario de "Haz una pregunta"
   pasa a ocupar todo el ancho en vez de ir en una columna angosta. */
.lv-foro-full .st-forum-layout{grid-template-columns:1fr;}

/* --- Panel derecho --- */

/* =============================================================
   CURSO GRABADO — temario + reproductor (rediseño, inspirado en
   "Propuesta 2": árbol de temario a la izquierda + reproductor fijo
   arriba a la derecha). Prefijo "cg-" para no chocar con "lv-"
   (curso en vivo) ni con "st-" (usado todavía en course_detail.html
   y otras páginas). Aplica solo a lesson_view.html.
   ============================================================= */

/* Los campos de texto largos usan la misma letra del sistema (el
   navegador, por defecto, les pone una letra tipo máquina de escribir). */
textarea{font-family:inherit;}
/* Paneles plegables (data-bs-toggle="collapse"): el sitio carga el JS de
   Bootstrap pero no su CSS, así que sin estas reglas quedaban siempre abiertos. */
.collapse:not(.show){display:none;}

/* Ingreso, registro y recuperación de contraseña: esquinas rectas y botones
   sin borde, como el resto del sistema. */
.mc-auth .st-auth-card input[type="text"],
.mc-auth .st-auth-card input[type="email"],
.mc-auth .st-auth-card input[type="password"],
.mc-auth .st-auth-card input[type="tel"],
.mc-auth .st-auth-card .form-control{border-radius:2px;}
.mc-auth .st-btn, .mc-auth .st-btn-google, .mc-auth .st-alert{border-radius:2px;}
.mc-auth .st-btn-google{border:none; background:var(--mcw-bg-alt); font-weight:700;}
.mc-auth .st-btn-google:hover{background:#e9ecf2;}
.mc-auth .st-auth-side{border-right:3px solid var(--mcw-crimson);}
.st-auth-side__logo-img, .st-auth-logo-mobile__img, .mc-brand__logo, .mc-footer__logo, .mc-mobile-drawer__logo{border-radius:2px !important;}
/* Etiquetas de la tarjeta del catálogo: una fila que se acomoda sola, así
   en el celular «A tu ritmo» e «Incluido en suscripción» ya no se enciman. */
.mc-ccard .mc-th .mc-badges{position:absolute; top:13px; left:13px; right:13px; display:flex; flex-wrap:wrap; gap:6px; z-index:1;}
.mc-ccard .mc-th .mc-badges .mc-badge{position:static; box-shadow:none;}
@media (max-width:640px){ .mc-catgrid .mc-ccard .mc-th .mc-badges{top:8px; left:8px; right:8px; gap:4px;} }
/* Botones claros sobre fondo oscuro, sin borde; paneles y tarjetas rectos */
.mc-btn-outline-w{border-color:transparent !important; background:rgba(255,255,255,.12);}
.mc-btn-outline-w:hover{background:rgba(255,255,255,.2);}
.mc-heropanel{border-radius:2px;}
.mc-home .st-card{border-radius:2px;}

/* ==========================================================================
   Registro rápido, bienvenida y verificación en dos pasos (.mc-auth)
   ========================================================================== */
.mc-auth .rg-side{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;max-width:380px}
.mc-auth .rg-side li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.86);line-height:1.5}
.mc-auth .rg-side .bi{color:#fff;background:var(--mcw-crimson);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px}
.mc-auth .rg-google{margin-top:6px}
.mc-auth .rg-pass{position:relative}
.mc-auth .rg-pass input{padding-right:46px !important}
.mc-auth .rg-ver{position:absolute;top:0;right:0;bottom:0;width:44px;border:none;background:none;color:var(--mcw-muted);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mc-auth .rg-ver:hover{color:var(--mcw-ink)}
.mc-auth .rg-ver:focus-visible{outline:3px solid rgba(158,27,50,.25);outline-offset:-3px}
.mc-auth .rg-reglas{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.mc-auth .rg-reglas li{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--mcw-muted);transition:color .15s}
.mc-auth .rg-reglas li.ok{color:var(--mcw-ok,#0B7A5C)}
.mc-auth .rg-reglas .bi{font-size:12px}
.mc-auth .rg-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mc-auth .rg-legal{font-size:12px;color:var(--mcw-muted);line-height:1.55;margin:12px 0 0;text-align:center}
.mc-auth .rg-legal a{color:var(--mcw-muted);text-decoration:underline}
.mc-auth .st-field-error a{color:var(--mcw-crimson);font-weight:700}
.mc-auth .rg-enviar[disabled]{opacity:.75;cursor:progress}

.mc-auth .bv-ok{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9FE3CB;margin-bottom:14px}
.mc-auth .bv-ok .bi{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:#0F9D77;color:#fff;font-size:14px}
.mc-auth .bv-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mc-auth .bv-prog i{display:block;height:4px;background:var(--mcw-bg-alt);transition:background .25s}
.mc-auth .bv-prog i.on{background:var(--mcw-crimson)}
.mc-auth .bv-paso-txt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mcw-muted);margin:10px 0 18px}
.mc-auth .bv:not(.js) .bv-prog,.mc-auth .bv:not(.js) .bv-paso-txt{display:none}
.mc-auth .bv:not(.js) .bv-paso{margin-bottom:28px}
.mc-auth .bv.js .bv-paso{animation:bv-in .25s ease}
@keyframes bv-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mc-auth .bv.js .bv-paso{animation:none}}
.mc-auth .bv-opc{font-weight:600;color:#A9B3C4;text-transform:none;letter-spacing:0;margin-left:4px}
.mc-auth .bv-ayuda{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mcw-muted);margin-top:7px}
.mc-auth .bv-ayuda .bi{color:#25D366}
.mc-auth .bv-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.mc-auth .bv-chips--lista{grid-template-columns:minmax(0,1fr)}
.mc-auth .bv-chip{position:relative;display:block;margin:0 !important;cursor:pointer}
.mc-auth .bv-chip input{position:absolute;opacity:0;width:1px;height:1px}
.mc-auth .bv-chip>span{display:flex;gap:10px;align-items:center;min-height:52px;box-sizing:border-box;padding:12px 14px;background:var(--mcw-bg-alt);color:var(--mcw-ink);font-family:'Sora',sans-serif;font-size:13px;font-weight:700;line-height:1.3;border-radius:2px;transition:background .15s,color .15s}
.mc-auth .bv-chip>span>.bi:first-child{font-size:17px;color:var(--mcw-crimson);flex-shrink:0}
.mc-auth .bv-chip:hover>span{background:#e9ecf2}
.mc-auth .bv-tick{margin-left:auto;font-size:16px;opacity:0;transition:opacity .15s}
.mc-auth .bv-chip input:checked+span{background:var(--mcw-navy);color:#fff}
.mc-auth .bv-chip input:checked+span>.bi:first-child{color:#fff}
.mc-auth .bv-chip input:checked+span .bv-tick{opacity:1}
.mc-auth .bv-chip input:focus-visible+span{outline:3px solid rgba(158,27,50,.3);outline-offset:2px}
.mc-auth .bv-acts{display:flex;gap:10px;align-items:center;margin-top:26px}
.mc-auth .bv-sig{flex:1;justify-content:center;text-align:center}
.mc-auth .bv-atras[hidden]{display:none}
.mc-auth .bv-atras{border:none;background:var(--mcw-bg-alt);color:var(--mcw-ink);padding:12px 14px;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;border-radius:2px}
.mc-auth .bv-saltar{display:block;margin:16px auto 0;border:none;background:none;color:var(--mcw-muted);font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mc-auth .bv-saltar:hover{color:var(--mcw-ink)}

.mc-auth .dp-codigo{font-size:22px !important;letter-spacing:.3em;text-align:center;font-family:'Sora',sans-serif;font-weight:700}
.mc-auth .dp-ayuda{margin-top:18px;font-size:13px;color:var(--mcw-muted)}
.mc-auth .dp-ayuda summary{cursor:pointer;font-weight:700;color:var(--mcw-ink)}
.mc-auth .dp-ayuda p{margin:8px 0 0;line-height:1.55}
.mc-auth .dp-salir{margin-top:18px;text-align:center}
.mc-auth .dp-salir button{border:none;background:none;color:var(--mcw-muted);font-size:12.5px;cursor:pointer;text-decoration:underline}
@media (max-width:420px){.mc-auth .bv-chips{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Últimos detalles de la regla de diseño: esquinas rectas (2px) y botones
   sin borde en el menú del celular, el buscador del catálogo y los filtros.
   ========================================================================== */
.st-burger{border-radius:2px; border:0; background:rgba(255,255,255,.08);}
.st-burger:hover{background:rgba(255,255,255,.14);}
.mc-mobile-drawer__close{border-radius:2px; border:0; background:rgba(255,255,255,.08);}
.st-mobile-search input{border-radius:2px !important;}
.mc-searchbar{border-radius:2px; border:0; background:rgba(255,255,255,.12);}
.mc-searchbar:focus-within{background:rgba(255,255,255,.18); box-shadow:inset 0 -2px 0 var(--mcw-crimson);}
.mc-chip{border:0; background:var(--mcw-bg-alt); border-radius:2px;}
.mc-chip:hover{background:#e6e9ef;}
.mc-chip.mc-on{background:var(--mcw-navy); color:#fff;}
.st-search{border-radius:2px !important;}
.st-badge{border-radius:2px !important;}
/* Menú del celular: buscador dentro del ancho del menú y botones de acceso */
.mc-mobile-drawer .st-mobile-search{padding:12px 0 4px;}
.mc-mobile-drawer .st-mobile-search input{box-sizing:border-box; width:100%; font-family:inherit; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);}
.mc-mobile-drawer .mc-mdrawer-btns a{flex:1; display:flex; align-items:center; justify-content:center; padding:12px 10px !important; border:0 !important; border-radius:2px; font-family:'Sora',sans-serif; font-size:13px; font-weight:700; text-decoration:none;}
.mc-mobile-drawer .mc-mdrawer-btns a.mc-btn-outline-w{background:rgba(255,255,255,.1); color:#fff !important;}
.mc-mobile-drawer .mc-mdrawer-btns a.mc-btn-crimson{background:var(--mcw-crimson); color:#fff !important;}

/* iPhone (Safari) agranda la página sola al tocar un campo con letra de
   menos de 16 px, y el alumno tiene que alejar el zoom con los dedos. En
   celulares todos los campos de texto usan 16 px para evitarlo. */
@media (max-width: 820px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ===================== CELULAR Y TABLET (táctil) =====================
   - Campos de 16 px: con menos, iPhone y iPad hacen zoom al tocar un campo
     y la página queda desencuadrada.
   - Botones del encabezado de 44 px (tamaño mínimo cómodo para el dedo).
   - Barras fijas inferiores por encima de la barra de gestos del iPhone
     (zona segura; requiere viewport-fit=cover en la plantilla base).
   - Botones que antes solo aparecían al pasar el ratón: visibles en tablet. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea{font-size:16px !important;}
  .st-icon-btn, .st-avatar, .st-burger{min-width:44px; min-height:44px;}
}
@media (hover:none){
  .cu-cover__btn{opacity:1 !important;}
}
.ar-mbar, .ar-lbar, .cv-sticky-live{
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
.st-header .st-nav{
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width:981px){
  .st-header .st-nav{padding-left:32px; padding-right:32px;}
}


/* ============ CELULAR Y TABLET, PARTE 2 (octubre 2026) ============ */

/* Alto del encabezado fijo. Las columnas laterales «pegajosas» se ubican
   debajo de él; dentro del aplicativo no hay encabezado y no queda hueco. */
:root{--hdr:64px; --r:2px; /* esquinas de la marca */}
.modo-app{--hdr:0px;}

/* Portada del curso como <img> (ver course_detail.html): detrás del degradado y del texto. */
.lv-hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.lv-hero::before{z-index:1;}
.lv-hero__inner{z-index:2;}

/* Preguntas frecuentes y filtros como botones de verdad (se pueden usar con
   el teclado y los lectores de pantalla los anuncian). */
button.mc-faqq{width:100%; background:none; border:0; text-align:left; font-family:inherit; cursor:pointer;}
button.mc-chip{font-family:inherit; line-height:inherit;}

/* Foco visible al navegar con el teclado (Tab). */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--mcw-crimson, #9E1B32); outline-offset:2px;
}

/* «Saltar al contenido»: invisible hasta que se llega con Tab. */
.st-saltar{position:absolute; left:12px; top:-60px; z-index:1000; background:#fff; color:var(--mcw-ink, #14213D);
  padding:10px 16px; font-weight:700; font-size:14px; border:2px solid var(--mcw-crimson, #9E1B32); border-radius:2px; text-decoration:none;}
.st-saltar:focus{top:12px;}
.st-main:focus{outline:none;}

/* Tamaños mínimos legibles en el celular: metadatos de 12 px, etiquetas de
   11 px (antes 9-11 px). */
@media (max-width:640px){
  .mc-catgrid .mc-ccard .mc-foot{font-size:12px;}
  .mc-catgrid .mc-ccard .mc-th .mc-badge{font-size:11px;}
}
/* Celulares angostos: una tarjeta por fila, horizontal (portada a la
   izquierda). En dos columnas de 160 px el texto quedaba diminuto. */
@media (max-width:480px){
  .mc-catgrid{grid-template-columns:minmax(0,1fr); gap:10px;}
  .mc-catgrid .mc-ccard{display:grid; grid-template-columns:38% minmax(0,1fr);}
  .mc-catgrid .mc-ccard .mc-th{aspect-ratio:auto; min-height:118px; height:100%; clip-path:none;}
  .mc-catgrid .mc-ccard .mc-th .mc-badges{top:6px; left:6px; right:6px;}
  .mc-catgrid .mc-ccard .mc-th .mc-badge-sub{display:none;}
  .mc-catgrid .mc-ccard .mc-body{display:flex; flex-direction:column; padding:10px 12px;}
  .mc-catgrid .mc-ccard h4{font-size:14px;}
  .mc-catgrid .mc-ccard .mc-foot{margin-top:auto;}
}

/* Menú del celular: grupo «Explorar cursos» desplegable y accesos de la cuenta. */
.mc-mobile-drawer__body{overflow-y:auto;}
.mc-mdrawer-grupo{border-bottom:1px solid rgba(255,255,255,.08);}
.mc-mdrawer-grupo summary{list-style:none; cursor:pointer; color:#cfd9ec; font-size:15px; font-weight:600; padding:13px 2px; display:flex; justify-content:space-between; align-items:center;}
.mc-mdrawer-grupo summary::-webkit-details-marker{display:none;}
.mc-mdrawer-grupo summary::after{content:'+'; font-size:18px; color:#8fa0bf;}
.mc-mdrawer-grupo[open] summary::after{content:'−';}
.mc-mobile-drawer .mc-mdrawer-grupo a{padding:11px 2px 11px 14px !important; font-size:14px; border-bottom:0;}
.mc-mdrawer-titulo{margin-top:16px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8fa0bf; padding:0 2px 4px;}
.mc-mdrawer-salir{margin:14px 0 0;}
.mc-mdrawer-salir button{width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,.18); border-radius:2px; background:transparent; color:#fff; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;}

/* Impresión (Ctrl+P de un temario, una página legal o un certificado
   verificado): sin encabezado, menús, Menti ni pie; texto oscuro. */
@media print{
  .st-header, .st-footer, .mc-mobile-drawer, .mc-mobile-backdrop, .mc-menti, .nt-toasts, .st-saltar,
  .ar-mbar, .ar-lbar, .cv-sticky-live{display:none !important;}
  body.st-root{background:#fff !important; color:#000;}
  a{color:#000; text-decoration:underline;}
  .lv-hero{min-height:0; padding:16px 0; color:#000; background:none !important;}
  .lv-hero::before, .lv-hero__img{display:none;}
  .lv-hero h1{color:#000;}
}

/* «Seguir viendo» en el inicio del alumno. */
.mc-seguir{display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:14px 16px; background:#fff; border:1px solid var(--mcw-line); border-left:3px solid var(--mcw-crimson); border-radius:var(--r,2px); color:var(--mcw-ink); text-decoration:none;}
.mc-seguir:hover{border-color:var(--mcw-crimson);}
.mc-seguir__ic{width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--mcw-crimson); color:#fff; border-radius:50%; font-size:20px;}
.mc-seguir__t{flex:1; min-width:0; display:grid; gap:3px;}
.mc-seguir__t small{font-size:12px; font-weight:700; color:var(--mcw-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mc-seguir__t b{font-family:'Sora',sans-serif; font-size:15px; overflow-wrap:anywhere;}
.mc-seguir__bar{display:block; height:4px; background:#e3e6ec; margin-top:4px;}
.mc-seguir__bar i{display:block; height:100%; background:var(--mcw-crimson);}
.mc-seguir__go{font-weight:800; font-size:13px; color:var(--mcw-crimson); flex-shrink:0;}
@media (max-width:480px){ .mc-seguir__go{display:none;} }

/* Barra inferior de pestañas (solo celular, con sesión iniciada). */
.st-tabbar{display:none;}
@media (max-width:700px){
  .st-tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150; background:#fff; border-top:1px solid var(--mcw-line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -6px 18px rgba(11,18,32,.06);}
  .st-tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:48px;
    font-size:11px; font-weight:700; color:var(--mcw-muted); text-decoration:none;}
  .st-tabbar a i{font-size:19px;}
  .st-tabbar a.on{color:var(--mcw-crimson);}
  .st-tabbar ~ .st-footer{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));}
}
@media print{ .st-tabbar{display:none !important;} }
@media (max-width:700px){
  body:has(.st-tabbar) .pp-app .ed-bar{bottom:72px;}
}

/* Menti en los estados vacíos y en las páginas de error. */
.mc-menti-vacio{display:block; width:96px; height:auto; margin:0 auto 10px;}
.mc-menti-vacio--error{width:84px; margin:0; flex-shrink:0;}

/* Testimonios del inicio y cuenta atrás a la próxima clase en vivo. */
.mc-testimonios{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;}
.mc-testimonio{margin:0; padding:20px; background:#fff; border:1px solid var(--mcw-line); border-top:3px solid var(--mcw-crimson); border-radius:var(--r,2px); display:grid; gap:14px;}
.mc-testimonio blockquote{margin:0; font-size:14.5px; line-height:1.6; color:var(--mcw-ink);}
.mc-testimonio figcaption{display:grid; gap:2px; font-size:13px;}
.mc-testimonio figcaption span{color:var(--mcw-muted);}
.mc-testimonio figcaption small{font-size:12px; color:var(--mcw-crimson); font-weight:700;}
.mc-cuenta{color:var(--mcw-crimson); font-weight:800; white-space:nowrap;}

/* Detalles de marca: subrayado carmesí en el menú y tarjetas que suben 2 px
   al pasar el ratón (no en celulares ni para quien prefiere menos movimiento). */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mc-navlinks > a, .mc-navlinks button{background-image:linear-gradient(var(--mcw-crimson),var(--mcw-crimson)); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .2s ease;}
  .mc-navlinks > a:hover, .mc-navlinks button:hover{background-size:100% 2px;}
  .mc-ccard, .mc-mycard, .mc-seguir{transition:transform .18s ease, box-shadow .18s ease;}
  .mc-ccard:hover, .mc-mycard:hover, .mc-seguir:hover{transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(11,18,32,.35);}
}

/* Portada en celular (visitantes): la tarjeta de la próxima clase en vivo,
   lo más atractivo, va justo después de los botones, antes de las cifras; y
   el título ocupa menos, para que se vea sin bajar tanto. */
@media (max-width:600px){
  .mc-herotop{gap:0;}
  .mc-herotext{display:contents;}
  .mc-hero h1{font-size:24px; line-height:1.22; margin-bottom:12px;}
  .mc-hero .mc-lead{margin-bottom:18px;}
  .mc-heropanel{order:1; margin-top:24px;}
  .mc-heropanel .mc-th{aspect-ratio:16/8;}
  .mc-herostats{order:2; margin-top:22px; padding-top:16px; gap:22px;}
  .mc-heroend{height:24px;}
}

/* ===== Portada: cursos en vivo y a tu ritmo en cuadrícula (octubre 2026) =====
   Hasta dos filas de 4 en computadora (2 columnas en tablet); en celular,
   fila que se desliza con el dedo (regla de .mc-grid4 a 640 px).
   «Ver todos» cierra la cuadrícula ocupando el espacio libre de la última fila. */
.mc-grid-portada .mc-extra{display:none;}
.mc-grid-portada.mc-filtrando .mc-extra{display:block;}
.mc-grid-portada.mc-filtrando .mc-extra.mc-hide,.mc-grid-portada.mc-filtrando .mc-vertodos{display:none;}
.mc-vertodos{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; padding:24px 22px; min-height:220px; background:#fff; border-top:3px solid var(--mcw-crimson); color:var(--mcw-ink); text-decoration:none;}
.mc-vertodos__ic{width:42px; height:42px; display:grid; place-items:center; background:var(--mcw-navy,#0B1220); color:#fff; font-size:19px; margin-bottom:6px;}
.mc-vertodos b{font-family:'Sora',sans-serif; font-size:16px; line-height:1.3;}
.mc-vertodos > span:not([class]){font-size:12.5px; color:var(--mcw-muted); line-height:1.5;}
.mc-vertodos__go{margin-top:8px; font-size:13px; font-weight:700; color:var(--mcw-crimson); display:inline-flex; align-items:center; gap:6px;}
.mc-vertodos:hover .mc-vertodos__go i{transform:translateX(3px);}
.mc-vertodos__go i{transition:transform .15s;}
@media(min-width:981px){
  .mc-span4-2{grid-column:span 2;} .mc-span4-3{grid-column:span 3;} .mc-span4-4{grid-column:span 4;}
  .mc-span4-2,.mc-span4-3,.mc-span4-4{align-items:center; text-align:center;}
}
@media(min-width:641px) and (max-width:980px){
  .mc-span2-2{grid-column:span 2;}
}
@media(max-width:640px){
  .mc-vertodos{min-height:0; align-self:stretch;}
}

/* Página «Simuladores» (/simuladores/): todos en cuadrícula; en celular, uno debajo de otro. */
.mc-lista-h1{font-family:'Sora',sans-serif; font-size:28px; margin:0; color:var(--mcw-ink);}
.mc-lista-sub{margin:8px 0 0; color:var(--mcw-muted); font-size:14px; max-width:70ch; line-height:1.55;}
@media(max-width:640px){
  .mc-grid4.mc-grid-lista{display:grid; grid-template-columns:minmax(0,1fr); overflow:visible;}
  .mc-grid-lista .mc-ccard{flex:none;}
  .mc-lista-h1{font-size:23px;}
}

/* Inicio con sesión: «tus cursos» (home.html, .mc-mycourses) en lista compacta en
   el celular. Antes cada curso ocupaba el ancho completo con portada 16:10 (~300 px
   de alto); ahora es una fila de ~80 px: miniatura a la izquierda, título en dos
   líneas, barra y «% completado». Mismo HTML, solo cambia a 640 px o menos. */
@media(max-width:640px){
  .mc-mycourses{gap:10px;}
  .mc-mycard{display:grid; grid-template-columns:96px minmax(0,1fr);}
  .mc-mycard .mc-th{aspect-ratio:auto; min-height:80px;}
  .mc-mycard .mc-body{min-width:0; padding:11px 14px; display:flex; flex-direction:column; justify-content:center;}
  .mc-mycard .mc-title{font-size:13px; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .mc-mycard .mc-progress-track{height:5px; margin-bottom:5px;}
}