/* ══════════════════════════════════════════════════════════════════════════
   EGS TeK · TEMA v2 — PRUEBA DE DISEÑO (local, no productivo)
   Override sobre assets/css/styles.css. No modifica ningún archivo existente.

   Dirección: base CLARA de alto contraste (leer es la tarea principal) con
   BLOQUES OSCUROS puntuales como recurso de impacto. Mobile-first.
   Paleta y tipografías del Libro de Identidad; el sistema gráfico (retícula
   hexagonal, degradados Slate→Aqua, tintes de familia) es la sección que el
   libro deja «Pendiente».
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --bg:#e9edec;                 /* lienzo un punto más frío y oscuro → el blanco flota */
  --surface:#ffffff;
  --surface-2:#f1f5f4;
  --ink:#102931;                /* 15.2:1 sobre blanco */
  --muted:#4f6469;              /* 7.0:1 sobre blanco (antes 4.9:1) */
  --line:#dbe3e2;
  --line-2:#c2cfcd;             /* borde de énfasis */
  --accent:#2e6e69;
  --accent-2:#2bc4b2;
  --accent-ink:#1a5b56;         /* teal para TEXTO sobre blanco · 6.2:1 */
  --accent-soft:rgba(43,196,178,.13);
  --slate:#102931;

  --shadow:
    0 1px 1px rgba(16,41,49,.04),
    0 3px 8px -2px rgba(16,41,49,.07),
    0 14px 30px -12px rgba(16,41,49,.16);
  --shadow-lg:
    0 2px 4px rgba(16,41,49,.05),
    0 12px 26px -8px rgba(16,41,49,.12),
    0 34px 64px -26px rgba(16,41,49,.28);
  --shadow-dark:
    0 2px 6px rgba(8,26,32,.24),
    0 22px 48px -22px rgba(8,26,32,.72);

  --r-sm:12px;
  --radius:18px;
  --r-lg:24px;
  --bar-h:64px;
}
[data-theme="dark"]{
  --bg:#0f272e;
  --surface:#173741;
  --surface-2:#1e434d;
  --ink:#eaf4f2;
  --muted:#a3b6b7;
  --line:#2b444c;
  --line-2:#3a5860;
  --accent:#2bc4b2;
  --accent-ink:#4fd8c7;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 34px 64px -26px rgba(0,0,0,.75);
}

/* ── 2 · CORRECCIÓN: residuo del tema oscuro que aplasta TODAS las tarjetas ─
   styles.css:771 pone sombras negras y borde blanco translúcido en claro. */
.stat,.course,.lms-panel,.diploma,.post,.resume-card,.mat,.foto{
  box-shadow:var(--shadow);
  border-color:var(--line);
}
.course{box-shadow:var(--shadow)}
.course--link:hover{
  background-color:var(--surface);           /* era rgba(22,38,44,.6): oscurecía en claro */
  box-shadow:var(--shadow-lg);
  border-color:rgba(43,196,178,.45);
}
[data-theme="dark"] .course--link:hover{background-color:var(--surface-2)}
.foto{background:linear-gradient(140deg,#1b3c45,#102931);border:1px solid rgba(43,196,178,.16)}
.foto span{color:#dcecea;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}   /* era teal sobre slate: ilegible */

/* ── 3 · TIPOGRAFÍA Y RITMO ─────────────────────────────────────────────── */
h1,h2,h3,.brand__name,.curso-titulo,.foro-title{letter-spacing:-.4px}
#hello{
  font-size:clamp(30px,8.4vw,44px);font-weight:800;letter-spacing:-1.1px;
  line-height:1.05;margin:6px 0 0;text-wrap:balance;
}
.hero{margin-bottom:0}

/* Título de sección con filete de acento: da ritmo a un scroll largo. */
.section-title{
  display:flex;align-items:center;gap:10px;
  font-size:21px;font-weight:800;letter-spacing:-.4px;margin:0 0 14px;
}
.section-title::before{
  content:"";flex:0 0 auto;width:4px;height:19px;border-radius:99px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
}
.campus-cursos__head .section-title{font-size:21px}
.campus-cursos{margin:0 0 30px}
.lead{font-size:16px;line-height:1.6;color:var(--muted);margin:2px 0 20px}
a{color:var(--accent-ink)}
.cc-link,.feed-sec__more,.resume-more,.cat-card__more{color:var(--accent-ink);font-weight:700}

/* ── 4 · PRIMITIVAS ─────────────────────────────────────────────────────── */
.btn{border-radius:12px;padding:11px 18px;font-weight:700;letter-spacing:-.1px}
.btn--primary{
  background:linear-gradient(135deg,#35807a,#255f5a);
  color:#fff;border:0;
  box-shadow:0 1px 2px rgba(16,41,49,.18),0 8px 18px -10px rgba(46,110,105,.9);
}
.btn--primary:hover{
  background:linear-gradient(135deg,#3d918a,#2a6b66);
  box-shadow:0 2px 4px rgba(16,41,49,.2),0 12px 26px -12px rgba(46,110,105,1);
}
.btn--ghost{background:var(--surface);border-color:var(--line-2);font-weight:600}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--accent-2);color:var(--accent-ink)}
[data-theme="dark"] .btn--primary{background:linear-gradient(135deg,#2bc4b2,#1fa897);color:#06231f}

/* Superficies de tarjeta: un único lenguaje en todo el campus. */
.stat,.course,.lms-panel,.diploma,.post,.mat,.cat-card,.cc-row,.cnt-card,
.caso-card,.est-card,.mm-card,.pod-ep,.tablon-item,.foro-post,.inf-destacada,
.reco-card,.info-card,.qa-card,.medal,.fc-mazo,.test-row,.cuad-card,.mir-caso,
.profile-card,.agenda,.acceso,.accesos-mas,.comunidad-card,.herr-tcard{
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.empty{border-radius:var(--r-lg);border:1px dashed var(--line-2);background:var(--surface);box-shadow:var(--shadow)}

/* Badges y chips */
.badge,.evi-badge,.post__badge,.post__tag,.mat__tipo,.caso-nivel,.badge--cat{
  letter-spacing:.02em;font-weight:700;
}
.badge--activa{color:var(--accent-ink);background:var(--accent-soft);border:1px solid rgba(43,196,178,.35)}
.evi-badge{background:var(--accent-soft);color:var(--accent-ink);border:1px solid rgba(43,196,178,.28);border-radius:999px;padding:4px 11px;font-size:11.5px}

/* Progreso: más presente, en degradado de marca */
.progress{height:9px;border-radius:99px;background:rgba(16,41,49,.10)}
.progress__bar{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:none}

/* Control segmentado (Cursos, Estudio, Multimedia) → píldora */
.seg{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;display:inline-flex}
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font-weight:600;color:var(--muted);cursor:pointer;font:inherit;font-size:13.5px;transition:.18s}
.seg button.is-on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(16,41,49,.10),0 4px 10px -4px rgba(16,41,49,.18)}

/* Campos */
.field input,.mm-tools input,#catalogo-q,.foro-form textarea,#fb-texto,.cuad-input{
  border-radius:12px;border:1px solid var(--line-2);background:var(--surface);
}
.field input:focus{outline:2px solid var(--accent-2);outline-offset:0;border-color:var(--accent-2)}

/* ── 5 · TOPBAR · cabía justo en 375px (el botón «Salir» se recortaba) ───── */
.topbar{gap:7px;padding:calc(11px + env(safe-area-inset-top,0px)) 14px 11px;background:rgba(255,255,255,.88)}
[data-theme="dark"] .topbar{background:rgba(15,39,46,.88)}
.brand{gap:8px}
.brand__logo{height:26px;filter:none}
.brand__name{font-size:17px;font-weight:800;letter-spacing:-.3px}
.topbar-right{gap:7px}
.theme-toggle,.user-email,.topbar-back{width:34px;height:34px;box-shadow:none}
.theme-toggle svg,.user-email svg,.topbar-back svg{width:18px;height:18px}
.topbar-right .btn--ghost{height:34px;padding:0 13px;font-size:13px;box-shadow:none}
@media (min-width:520px){
  .topbar{gap:10px}
  .theme-toggle,.user-email,.topbar-back{width:38px;height:38px}
  .topbar-right{gap:10px}
}

/* ── 6 · BARRA INFERIOR ─────────────────────────────────────────────────── */
.bottom-bar{
  height:var(--bar-h);
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(16,41,49,.5);
}
[data-theme="dark"] .bottom-bar{background:rgba(15,39,46,.92)}
.bottom-bar .tab{font-size:10.5px;font-weight:600;gap:4px}
.bottom-bar .tab .bar-icon{width:23px;height:23px}
.bottom-bar .tab.is-active{color:var(--accent-ink);font-weight:700}
.bottom-bar .tab.is-active::after{top:0;width:26px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.ia-ring{width:50px;height:50px;background:linear-gradient(140deg,#2bc4b2,#1a5b56)}
.bar-ia{color:var(--accent-ink);font-weight:700}

/* ── 7 · FONDO DE MARCA · anclado arriba y desvanecido ──────────────────────
   Antes cubría la pantalla entera y competía con cada tarjeta blanca. */
#view-app::before{
  inset:0 0 auto;height:min(58vh,520px);
  background-position:center top;background-size:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
  opacity:.9;
}

/* ── 8 · INICIO · HÉROE «CONTINUAR» ────────────────────────────────────────
   El único bloque que grita: portada a sangre, velo Slate, entradilla Aqua,
   titular blanco grande y CTA Aqua. Todo lo demás baja de tono. */
.campus-resume{margin:26px 0 32px}
/* OJO: el contenedor real es <div id="campus-resume"> SIN clase — la regla .campus-resume de
   styles.css nunca se ha aplicado. De ahí que el héroe estuviese pegado al saludo. */
#campus-resume{margin:26px 0 32px}
.resume-card{
  display:block;
  background:linear-gradient(140deg,#173741 0%,#102931 52%,#0a2027 100%);
  border:1px solid rgba(43,196,178,.28);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-dark);
  color:#e6f2f0;
}
.resume-card--cover::before{
  inset:0;background-position:center;background-size:cover;
  -webkit-mask-image:none;mask-image:none;
  opacity:.9;
}
.resume-card--cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,32,39,.30) 0%,rgba(10,32,39,.72) 46%,rgba(10,32,39,.94) 100%),
    linear-gradient(100deg,rgba(10,32,39,.85) 0%,rgba(10,32,39,.25) 62%,transparent 100%);
}
.resume-card--cover:hover::before{background-position:center}
.resume-card--cover:hover{transform:translateY(-2px);box-shadow:var(--shadow-dark),0 0 0 1px rgba(43,196,178,.45)}
.resume-info{position:relative;z-index:1;min-width:0;padding-top:34px}
.resume-kicker{
  display:inline-block;color:#2bc4b2;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px;
}
.resume-card h3{
  color:#fff;font-size:clamp(21px,5.6vw,27px);line-height:1.15;
  letter-spacing:-.6px;font-weight:800;margin:0;
}
.resume-card .resume-meta{position:relative;z-index:1;color:rgba(230,242,240,.78);font-size:13px}
.resume-card .progress{position:relative;z-index:1;max-width:none;background:rgba(255,255,255,.16);height:7px;margin:14px 0 6px}
.resume-card .progress__bar{background:linear-gradient(90deg,#2bc4b2,#7defdc)}
.resume-card .btn{
  position:relative;z-index:1;display:block;width:100%;margin-top:16px;text-align:center;
  background:#2bc4b2;color:#06231f;border:0;font-weight:800;font-size:15px;padding:13px 18px;
  box-shadow:0 8px 22px -10px rgba(43,196,178,.9);
}
.resume-card .btn:hover{background:#48d9c8;box-shadow:0 10px 28px -10px rgba(43,196,178,1)}
@media (min-width:720px){
  .resume-card{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;padding:26px 28px}
  .resume-info{padding-top:52px}
  .resume-card .btn{width:auto;margin-top:0;flex:0 0 auto;padding:14px 26px}
}
.resume-more{color:var(--accent-ink)}

/* ── 9 · INICIO · ACCESOS · rejilla 2×N con tintes de familia ──────────────
   Antes: 9 filas idénticas apiladas (≈820px de scroll). Ahora: rejilla
   escaneable, iconos tintados por familia, mitad de alto. */
.accesos-grid{gap:11px}
@media (max-width:599px){
  .accesos-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .acceso{
    display:flex;flex-direction:column;align-items:flex-start;gap:5px;
    padding:14px 13px 15px;min-height:124px;
  }
  .acceso__ic{grid-row:auto;grid-column:auto;width:40px;height:40px;padding:9px;margin:0 0 3px}
  .acceso__t{grid-column:auto;grid-row:auto;font-size:14.5px;line-height:1.25}
  .acceso__d{
    grid-column:auto;grid-row:auto;font-size:11.5px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .acceso__nuevo{position:absolute;top:10px;right:10px;grid-column:auto;grid-row:auto}
}
.acceso{border-radius:var(--radius);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.acceso:hover{border-color:rgba(43,196,178,.5);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.acceso__t{font-weight:800;letter-spacing:-.2px}
.acceso__ic{
  border-radius:12px;border:1px solid rgba(43,196,178,.28);
  background:linear-gradient(140deg,rgba(43,196,178,.16),rgba(46,110,105,.22));
  color:#17635d;
}
/* Familia CONTENIDO (leer/ver/escuchar) → azul informativo */
.acceso[data-tab="infografias"] .acceso__ic,
.acceso[data-tab="tablon"] .acceso__ic,
.acceso[data-tab="multimedia"] .acceso__ic,
.acceso[data-tab="podcast"] .acceso__ic{
  border-color:rgba(47,134,179,.30);
  background:linear-gradient(140deg,rgba(47,134,179,.14),rgba(47,134,179,.26));
  color:#1e5f80;
}
/* Familia COMUNIDAD / meta → slate */
.acceso[data-tab="foros"] .acceso__ic,
.acceso--feedback .acceso__ic{
  border-color:rgba(16,41,49,.20);
  background:linear-gradient(140deg,rgba(16,41,49,.09),rgba(16,41,49,.17));
  color:#102931;
}
[data-theme="dark"] .acceso__ic{color:#7defdc}
[data-theme="dark"] .acceso[data-tab="infografias"] .acceso__ic,
[data-theme="dark"] .acceso[data-tab="tablon"] .acceso__ic,
[data-theme="dark"] .acceso[data-tab="multimedia"] .acceso__ic,
[data-theme="dark"] .acceso[data-tab="podcast"] .acceso__ic{
  color:#8ecdf0;background:linear-gradient(140deg,rgba(47,134,179,.20),rgba(47,134,179,.34));border-color:rgba(126,196,232,.34);
}
[data-theme="dark"] .acceso[data-tab="foros"] .acceso__ic,
[data-theme="dark"] .acceso--feedback .acceso__ic{
  color:#cfe0e2;background:linear-gradient(140deg,rgba(234,244,242,.07),rgba(234,244,242,.14));border-color:rgba(234,244,242,.18);
}
[data-theme="dark"] .resume-card{border-color:rgba(43,196,178,.42)}
.acceso__nuevo{background:var(--accent-2);color:#06231f;font-size:8.5px;padding:3px 7px;top:13px;right:11px;letter-spacing:.04em}
/* Rejilla impar: la última tarjeta huérfana ocupa el ancho completo como fila. */
.accesos-grid>.acceso:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:599px){
  .accesos-grid>.acceso:last-child:nth-child(odd){
    display:grid;grid-template-columns:40px 1fr;column-gap:13px;row-gap:2px;
    align-items:center;min-height:0;padding:13px 14px;
  }
  .accesos-grid>.acceso:last-child:nth-child(odd) .acceso__ic{grid-column:1;grid-row:1/3;margin:0}
  .accesos-grid>.acceso:last-child:nth-child(odd) .acceso__t{grid-column:2;grid-row:1}
  .accesos-grid>.acceso:last-child:nth-child(odd) .acceso__d{grid-column:2;grid-row:2;-webkit-line-clamp:1}
}
.accesos-mas{border-radius:var(--radius);font-weight:700;padding:13px 16px;box-shadow:var(--shadow)}
.accesos-mas:hover{border-color:var(--accent-2);background:var(--surface-2)}

/* ── 10 · INICIO · ARTÍCULOS / INFOGRAFÍAS ─────────────────────────────────
   Cada pieza ocupaba ~1,5 pantallas (4/5 a ancho completo). Rejilla de 2. */
.inf-destacadas{grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:720px){.inf-destacadas{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1000px){.inf-destacadas{grid-template-columns:repeat(4,1fr)}}
.inf-destacada{border-radius:var(--radius)}
.inf-destacada img{aspect-ratio:1/1;object-position:top center}  /* la pieza 1080×1350 tiene el
   cuerpo vacío: recortada al tercio superior (cabecera + titular + clave) rinde mucho más */
.inf-destacada__cap{padding:11px 12px 13px}
.inf-destacada__t{font-size:13px}

/* ── 11 · CATÁLOGO ─────────────────────────────────────────────────────── */
.catalogo-grid{gap:12px}
.cat-card__img{height:132px}
.cat-card__body h3{font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.cat-card__price{
  color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid rgba(43,196,178,.32);font-weight:800;padding:3px 12px;
}
.cat-card__img--ph{background:linear-gradient(140deg,#2e6e69,#102931);letter-spacing:.08em}
.cat-card__cta{padding:11px 16px}

/* ── 12 · CURSOS · tarjeta y detalle ───────────────────────────────────── */
.course{border-radius:var(--radius)}
.course__body{padding:15px 17px 17px}
.course__body h3{font-weight:800;letter-spacing:-.4px}
.course[data-state="enrolled"]{border-top:3px solid var(--accent-2)}
.course[data-state="pending"]{border-top:3px solid var(--gold)}
.course__img::after{background:linear-gradient(180deg,rgba(10,32,39,0) 40%,rgba(10,32,39,.72) 100%)}
#cursos-detalle .curso-titulo{font-size:clamp(22px,5.6vw,28px);font-weight:800;letter-spacing:-.6px}

/* ── 13 · LMS · lección ─────────────────────────────────────────────────── */
.lms-panel{border-radius:var(--r-lg);padding:20px}
.lms-rail{border-radius:var(--radius)}
.lms-tema-head h3{font-size:22px;font-weight:800;letter-spacing:-.5px}
.lms-mod,.lms-mod-tag,.lms-h{color:var(--accent-ink);letter-spacing:.12em}
.lms-tema.is-active{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 3px 0 0 var(--accent-2)}
.lms-lectura{font-size:16px;line-height:1.7}
.lms-lectura strong{color:var(--ink)}
.lms-op{border-radius:12px;padding:11px 13px;background:var(--surface);border-color:var(--line-2)}
.lms-op:hover{border-color:var(--accent-2);background:var(--surface-2)}
.lms-video{border-radius:var(--radius)}

/* ── 14 · FEED / NOVEDADES / TABLÓN · lectura larga ─────────────────────── */
.post{border-radius:var(--r-lg);padding:20px}
.post h3{font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.3}
.post p{font-size:16px;line-height:1.68;color:var(--ink)}
.post .date{color:var(--accent-ink);letter-spacing:.1em;font-size:11px}
.post__img{max-height:200px;border-radius:12px}
.post__attr{border-left:3px solid var(--accent-2);background:var(--surface-2)}
.tablon-item,.foro-post{border-radius:var(--radius);padding:16px}
.tablon-titulo,.foro-title{font-weight:800;letter-spacing:-.3px}

/* ── 15 · ESTUDIO / QUIZ / FLASHCARDS / MIR / PODCAST ──────────────────── */
.est-card,.caso-card,.fc-mazo,.test-row,.mir-caso,.pod-ep{border-radius:var(--radius)}
.quiz-op,.quiz-opt,.caso-op{border-radius:12px;border:1px solid var(--line-2);background:var(--surface);padding:12px 14px;font-size:15px}
.quiz-op:hover,.quiz-opt:hover,.caso-op:hover{border-color:var(--accent-2);background:var(--surface-2)}
.quiz-q,.caso-escenario{font-size:16.5px;line-height:1.55;font-weight:600}
.quiz-prog__bar,.cc-bar__fill,.mir-barra{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.flashcard,.fc-card{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.pod-play,.mm-play{background:linear-gradient(140deg,#2bc4b2,#1a5b56);color:#fff}

/* ── 16 · DIPLOMAS / PERFIL / VACÍOS ───────────────────────────────────── */
.diploma{border-radius:var(--radius);padding:16px 18px}
.diploma h3{font-size:15.5px;font-weight:700}
.medal__ic{filter:none}
.empty__icon{opacity:.45}
.empty h3{font-size:19px;font-weight:800;letter-spacing:-.4px}

/* ── 17 · MODALES Y SUPERPOSICIONES ────────────────────────────────────── */
.fb-modal,.ayuda-modal,.pw-modal,.privacy-card,.ia-overlay__card,.video-modal,.lec-modal{
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
}
.toast{border-radius:12px;box-shadow:var(--shadow-lg)}

/* ── 17b · ACCESO (login) ──────────────────────────────────────────────── */
.auth-card{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:30px 26px 32px;border-color:var(--line)}
.auth-card::before{height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));opacity:1}
.auth-logo{height:56px;filter:none;margin-bottom:16px}
.auth-card>#login-main>.muted{text-align:center;font-size:15px;line-height:1.55;margin:0 0 4px}
.auth-card .btn--primary{padding:14px 18px;font-size:15.5px;border-radius:12px;margin-top:14px}
.link-btn{color:var(--muted);text-decoration:none;font-weight:600;margin-top:14px}
.link-btn:hover{color:var(--accent-ink);text-decoration:underline}
.auth-promo__claim{font-size:19px;font-weight:800;letter-spacing:-.4px;opacity:1}

/* ── 18 · MOTION ───────────────────────────────────────────────────────── */
.panel{animation:fadeUp .28s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .acceso:hover,.resume-card--cover:hover,.course--link:hover{transform:none}
}

/* ── 19 · ICONOGRAFÍA PROPIA ────────────────────────────────────────────────
   SVG de marca (sólidos, caja 1024) sustituyendo a los emojis y a los iconos
   de trazo genéricos. Heredan currentColor, así que siguen al tema. */
.egs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.bar-icon,.theme-toggle svg,.user-email svg,.bar-ia .ia-ring svg{fill:currentColor;stroke:none}
.bottom-bar .tab .bar-icon{width:26px;height:26px}
.theme-toggle svg,.user-email svg{width:21px;height:21px}
#btn-theme{font-size:0;line-height:0}   /* solo el conmutador de tema; «?» sigue siendo texto */
.ia-ring svg{width:27px;height:27px;color:#fff}

/* ── 20 · SÍMBOLOS DE INTERFAZ (sustituyen a los emojis) ────────────────────
   Todos apuntan al sprite en línea de index.html y heredan currentColor. */
.i{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;flex:0 0 auto}
.i--lg{width:1.5em;height:1.5em;vertical-align:-.28em}
.foro-mod .i,.test-row__del .i,.fc-mazo__borrar .i,.reader-close .i,.video-close .i,
.foto-x .i,.pw-close .i,.foro-count .i,.pdflock__close .i{width:20px;height:20px;vertical-align:middle}
.mm-play .i,.pod-play .i{width:22px;height:22px;vertical-align:middle}
.cuad-card__ic .i{width:26px;height:26px;vertical-align:middle}
/* Índice de temas: el ●/○ pasa a punto dibujado */
.lms-dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.7px solid currentColor;opacity:.4;vertical-align:middle}
.lms-dot.is-now{background:currentColor;opacity:1}
.lms-ic .i{width:15px;height:15px;vertical-align:middle}
/* El check del gate de privacidad vivía como carácter tipográfico en styles.css:1121 */
.privacy-points li::before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6e69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px}
[data-theme="dark"] .privacy-points li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232bc4b2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E")}

/* EntrenaMIR: los chips de especialidad llevaban un emoji por materia (…).
   Retirados — no hay equivalente en la iconografía de marca. El chip queda con
   etiqueta + recuento, así que se le devuelve algo de cuerpo. */
.mir-cat{gap:4px;padding:16px 14px;min-height:78px;justify-content:center}
.mir-cat__lbl{font-size:14.5px}

/* ── 21 · FEED: fuera el semáforo rojo/amarillo/verde ──────────────────────
   Tres colores de «importancia» convertían la mitad del feed en «no urgente» y
   la otra mitad en alarma. Ahora solo se marca lo excepcional, en aqua de marca. */
.post__sem{
  display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--slate);color:var(--accent-2);vertical-align:middle;
}
[data-theme="dark"] .post__sem{background:var(--accent-2);color:#06231f}
.post__sem--rojo,.post__sem--amarillo,.post__sem--verde{background:var(--slate);color:var(--accent-2)}
.post--destacado{border-left:3px solid var(--accent-2);padding-left:17px}
.post--rojo{border-left:0;padding-left:20px}
.cc-dot,.cc-dot--rojo,.cc-dot--amarillo,.cc-dot--verde{display:none}
.art-row__title .post__sem{margin:0 8px 0 0}

/* ── 22 · «ARTÍCULOS DE HOY» · tarjeta nativa ──────────────────────────────
   Antes: miniatura del cartel 1080×1350. A ancho de móvil el texto quedaba a
   5 px (ilegible) y el titular se repetía en el pie. Ahora la tarjeta habla el
   mismo idioma que la infografía —cabecera Slate, antetítulo, titular— pero
   con texto de verdad. El cartel sigue existiendo para descargar y compartir. */
.art-tile{
  display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--ink);
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease,border-color .16s ease;
}
.art-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:rgba(43,196,178,.45)}
.art-tile:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.art-tile__top{
  display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:linear-gradient(100deg,#173741,#0f2830);
}
/* El antetítulo vive en la banda, en blanco: es lo que clasifica el artículo. */
.art-tile__top .art-tile__kicker{
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* La chapa vive en la cabecera: así el antetítulo es siempre de una línea y los
   titulares de la rejilla arrancan todos a la misma altura. */
.art-tile__flag{
  margin-left:auto;background:var(--accent-2);color:#06231f;
  border-radius:999px;padding:3px 8px;font-size:8.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}

.art-tile__body{display:flex;flex-direction:column;gap:7px;padding:13px 14px 15px;flex:1}

.art-tile__t{
  font-family:var(--font-head);font-weight:800;font-size:15px;line-height:1.28;
  letter-spacing:-.3px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.art-tile__f{margin-top:auto;padding-top:4px;font-size:11.5px;color:var(--muted)}
@media (min-width:720px){ .art-tile__t{font-size:16px} }

/* El panel «Artículos» sí conserva la miniatura: ahí es el botón de descarga del cartel.
   El aspecto lo manda el BOTÓN (styles.css:667 la fijaba a 4/5), no la imagen. Se recorta
   desde arriba, que es donde vive lo que identifica la pieza: marca, antetítulo y titular. */
.art-row__thumb{aspect-ratio:4/3}
.art-row__thumb img{object-position:top center}
@media (max-width:640px){
  /* En columna, media tarjeta de miniatura dejaba un hueco muerto al lado: pasa a ser
     una portada a ancho completo. */
  .art-row__thumb{width:100%;max-width:none;aspect-ratio:16/9}
}
.art-row__flag{align-self:flex-start;margin:0 0 2px}

/* ══════════════════════════════════════════════════════════════════════════
   23 · MARCA DE CURSO · logo oficial o sigla, nunca una imagen inventada
   Las carátulas de EGS son LOGOS sobre fondo liso. Recortarlas a sangre
   («cover») las destroza, así que van dentro de una PLACA blanca con el logo
   entero («contain»). Cuando no hay carátula no se pinta ilustración: panel
   Slate con retícula hexagonal y la sigla del curso.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Panal que tesela: celda de √3·s × 3·s (s=14) con las dos filas desplazadas media celda. */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.25' height='42' viewBox='0 0 24.25 42'%3E%3Cg fill='none' stroke='%232bc4b2' stroke-opacity='.17' stroke-width='1'%3E%3Cpath d='M12.12 -3.5 L24.25 3.5 L24.25 17.5 L12.12 24.5 L0 17.5 L0 3.5 Z'/%3E%3Cpath d='M0 17.5 L12.12 24.5 L12.12 38.5 L0 45.5 L-12.12 38.5 L-12.12 24.5 Z'/%3E%3Cpath d='M24.25 17.5 L36.37 24.5 L36.37 38.5 L24.25 45.5 L12.12 38.5 L12.12 24.5 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.course__img.is-sigla,.reco-card__img.is-sigla,.mm-thumb.is-sigla,.est-card__img.is-sigla{
  background:var(--hex) center/34px repeat, linear-gradient(140deg,#1b3c45,#0f2830);
  display:flex;align-items:center;justify-content:center;
}
.course__img.is-sigla::after,.reco-card__img.is-sigla::after,.mm-thumb.is-sigla::after{background:none}
.course__img.is-sigla span,.reco-card__img.is-sigla span,.est-card__img.is-sigla span{
  position:static;font-family:var(--font-head);font-weight:800;
  font-size:clamp(22px,6vw,30px);letter-spacing:.1em;color:rgba(255,255,255,.9);
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
/* Placa del logo oficial: fondo blanco y el logo entero, con aire. */
.course__img.is-logo,.reco-card__img.is-logo,.mm-thumb.is-logo,.est-card__img.is-logo{
  background:var(--hex) center/34px repeat, linear-gradient(140deg,#1b3c45,#0f2830);
  display:flex;align-items:center;justify-content:center;position:relative;
}
/* Placa CUADRADA: las carátulas son cuadradas, así que una placa rectangular dejaba
   franjas a los lados donde se notaba el borde entre placa y JPEG. */
.course__img.is-logo::before,.reco-card__img.is-logo::before,.est-card__img.is-logo::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:74%;aspect-ratio:1;
  background:var(--cover) center/contain no-repeat;
  border-radius:12px;box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
}
.course__img.is-logo::after{background:none}
.course__img.is-logo span{position:absolute;left:14px;bottom:11px;z-index:2}
/* Las carátulas de WooCommerce son JPEG (sin transparencia) con el fondo gris #F4F4F4
   de la plantilla de producto — medido en producto1/2/3. Al ponerlas sobre tarjeta blanca
   flotaba un rectángulo gris. La placa adopta ESE mismo gris: el rectángulo desaparece y
   el logo queda en un marco que se lee como deliberado. Con logos en PNG/SVG transparente
   bastaría con volver a #fff. */
.cat-card__img--logo{
  object-fit:contain;background:#f4f4f4;padding:14px;
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .cat-card__img--logo{border-bottom-color:rgba(0,0,0,.25)}
/* Misma lógica en la placa del logo dentro del héroe y de las tarjetas de curso. */
.resume-card--cover::before,
.course__img.is-logo::before,.reco-card__img.is-logo::before,.est-card__img.is-logo::before{
  background-color:#f4f4f4;
}

/* Héroe de Inicio: el logo va en placa arriba a la derecha, no a sangre.
   Sin carátula, el héroe queda como panel Slate limpio (que ya funcionaba). */
.resume-card.is-sigla::before{display:none}
.resume-card--cover::before{
  content:"";position:absolute;top:18px;right:18px;left:auto;bottom:auto;
  width:82px;height:82px;border-radius:16px;
  background:#fff var(--cover) center/72% no-repeat;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.75);
  -webkit-mask-image:none;mask-image:none;opacity:1;
}
.resume-card--cover::after{
  background:var(--hex) center/34px repeat;
  opacity:.55;
}
.resume-card--cover:hover::before{background-position:center}
.resume-info{padding-top:0}
.resume-card.is-logo .resume-info{padding-right:100px}
.resume-card h3{text-wrap:balance}
@media (min-width:720px){
  /* Escritorio: la placa del logo pasa al LADO IZQUIERDO, centrada en vertical, y el texto se
     desplaza a su derecha. El botón sigue a la derecha, en su propia columna: placa y botón ya no
     pueden coincidir nunca (Carlos 04-sep: en el héroe AMLS el botón se montaba sobre el logo). */
  .resume-card--cover::before{width:104px;height:104px;top:50%;left:28px;right:auto;transform:translateY(-50%)}
  .resume-card.is-logo .resume-info{padding-right:0;padding-left:134px}
  .resume-card.is-logo{min-height:160px}
  .resume-card--cover:hover::before{transform:translateY(-50%)}
}

/* ══════════════════════════════════════════════════════════════════════════
   24 · MOVIMIENTO
   Doctrina de DESIGN.md: 150-250 ms, ease-out, el estado manda. Todo en CSS
   nativo — antes dependía de `motion` vía jsDelivr y sin CDN no animaba nada.
   El bloque de prefers-reduced-motion de styles.css:299 lo desactiva entero.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Transición direccional entre pestañas ────────────────────────────────
   Entrar avanza (entra por la derecha), «volver atrás» retrocede (por la
   izquierda). Antes todo era el mismo fade y perdías el sentido del recorrido. */
@keyframes egs-avanza{from{opacity:0;transform:translate3d(16px,0,0)}to{opacity:1;transform:none}}
@keyframes egs-retrocede{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
.panel{animation:egs-avanza .26s cubic-bezier(.22,1,.36,1) both}
.panel.is-back{animation-name:egs-retrocede}

/* ── Reveal escalonado, sin JS ────────────────────────────────────────────
   El contenedor lleva .reveal; al reescribirse su innerHTML los hijos son
   nuevos y la animación se dispara sola. Tope en 10 para que una lista larga
   no acabe con medio feed esperando su turno. */
@keyframes egs-sube{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.reveal > *{animation:egs-sube .42s cubic-bezier(.22,.61,.36,1) both}
.reveal > *:nth-child(1){animation-delay:0ms}
.reveal > *:nth-child(2){animation-delay:45ms}
.reveal > *:nth-child(3){animation-delay:90ms}
.reveal > *:nth-child(4){animation-delay:135ms}
.reveal > *:nth-child(5){animation-delay:180ms}
.reveal > *:nth-child(6){animation-delay:225ms}
.reveal > *:nth-child(7){animation-delay:270ms}
.reveal > *:nth-child(8){animation-delay:315ms}
.reveal > *:nth-child(9){animation-delay:360ms}
.reveal > *:nth-child(n+10){animation-delay:400ms}

/* ── Botón Súbita ─────────────────────────────────────────────────────────
   Tenía un glow pulsante INFINITO: ruido permanente en pantalla y batería en
   una app que se abre entre servicio y servicio. Ahora entra una vez y luego
   solo reacciona al dedo. */
.ia-ring{animation:egs-pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes egs-pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.bar-ia:active .ia-ring{transform:scale(.92);transition:transform .1s ease}

/* ── Pulsación: el dedo recibe respuesta antes de que cambie la pantalla ──── */
.acceso:active,.course--link:active,.art-tile:active,.cc-row:active,.inf-destacada:active,
.cat-card__cta:active,.accesos-mas:active,.btn:active,.seg button:active,.tab:active,
.caso-card:active,.est-card:active,.mm-card:active,.pod-ep:active,.fc-mazo:active,
.test-row:active,.mir-cat:active,.diploma:active,.art-row__thumb:active{
  transform:scale(.975);
}
.btn:active{transform:scale(.97)}
.bottom-bar .tab:active .bar-icon{transform:scale(.88)}
.bottom-bar .tab .bar-icon{transition:transform .12s ease}

/* ── El check se dibuja ───────────────────────────────────────────────────
   Solo en confirmaciones (tema visto, respuesta correcta), no en los checks
   decorativos. `stroke-dasharray` es heredable, así que atraviesa el <use>
   hasta el path del sprite. La longitud del trazo del check es ~22. */
@keyframes egs-traza{from{stroke-dashoffset:23}to{stroke-dashoffset:0}}
.caso-fb .i,.lms-ex-res .i,.lms-fb .i,.quiz-exp .i,.quiz-fallo .i,
#qz-exp .i,#lms-visto[disabled] .i,.est-result .i,.fc-card__hint .i{
  stroke-dasharray:23;animation:egs-traza .5s cubic-bezier(.65,0,.35,1) both;
}

/* ── Skeletons de carga ───────────────────────────────────────────────────
   Reservan el hueco del contenido real y lo barren con un brillo. El texto
   «Cargando…» se mantiene para lectores de pantalla, fuera de la vista. */
.sk-estado{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sk{display:block;border-radius:8px;background:
  linear-gradient(100deg,transparent 18%,rgba(255,255,255,.9) 50%,transparent 82%) rgba(16,41,49,.11);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:egs-brillo 1.4s ease-in-out infinite;
}
[data-theme="dark"] .sk{background-color:rgba(234,244,242,.07);
  background-image:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.13) 50%,transparent 80%)}
@keyframes egs-brillo{from{background-position:180% 0}to{background-position:-80% 0}}
.sk--img{height:120px;border-radius:var(--radius) var(--radius) 0 0;margin:0}   /* = .cat-card__img */
.sk--th{width:76px;height:76px;border-radius:12px;flex:0 0 auto}
.sk--t{height:15px;width:82%}
.sk--m{height:12px;width:48%}
.sk--d{height:12px;width:100%}
.sk-wrap{display:flex;flex-direction:column;gap:14px}
 /* Mismos cortes que .catalogo-grid, para que el hueco reservado sea el de verdad. */
.sk-wrap--card{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:521px){.sk-wrap--card{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.sk-wrap--card{grid-template-columns:repeat(3,1fr)}}
.sk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;gap:9px;padding-bottom:16px}
.sk-card .sk--t,.sk-card .sk--m{margin-left:16px}
.sk-card .sk--t{margin-top:5px}
.sk-row{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.sk-lines{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;justify-content:center}
.sk-text{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px}

/* El bloque de styles.css:299 anula duración e iteraciones, pero NO animation-delay.
   Con `both` + delay escalonado, quien pide menos movimiento vería la lista en blanco
   hasta 400 ms. Aquí se cierra el hueco. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-delay:0ms !important}
  .reveal > *,.panel,.ia-ring{animation:none !important;opacity:1 !important;transform:none !important}
  .sk{animation:none !important}
  .acceso:active,.course--link:active,.art-tile:active,.btn:active,.bottom-bar .tab:active .bar-icon{transform:none}
}

/* ── 25 · CATÁLOGO DEL INICIO · tarjeta compacta ───────────────────────────
   En el Inicio la tarjeta de venta completa medía ~490 px: portada grande,
   tres líneas de descripción, «Más detalles» y precio. Cuatro de esas y el
   Inicio era un catálogo. Aquí solo va lo que decide si abres el curso.
   La versión completa sigue intacta en «Cursos › Catálogo», que es donde
   se vende de verdad. */
.cat-card--mini{
  display:grid;grid-template-columns:60px minmax(0,1fr) 20px;
  align-items:center;gap:13px;padding:11px 13px;
  text-decoration:none;color:inherit;
}
a.cat-card--mini:hover{border-color:rgba(43,196,178,.5);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
a.cat-card--mini:active{transform:scale(.985)}
a.cat-card--mini:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.cat-card__chevron{width:18px;height:18px;color:var(--muted);justify-self:end}
.cat-card--mini .cat-card__img{
  width:60px;height:60px;border-radius:12px;padding:6px;
  border:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cat-card--mini .cat-card__img--ph{font-size:14px;letter-spacing:.04em;padding:4px}
.cat-card--mini .cat-card__body{display:flex;flex-direction:column;gap:3px;padding:0;min-width:0}
.cat-card--mini h3{
  font-size:14.5px;font-weight:800;line-height:1.3;letter-spacing:-.25px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cat-card__meta{margin:0;font-size:12.5px;color:var(--muted);line-height:1.35}
#campus-catalogo{grid-template-columns:1fr;gap:10px}

/* ══════════════════════════════════════════════════════════════════════════
   26 · FICHA DE CURSO UNIFICADA  ·  una sola tarjeta en toda la app
   Primero la hice fila compacta y quedó poco llamativa para tocar (Jesús,
   04-sep). La homogeneidad va HACIA ARRIBA: tarjeta vertical con la marca
   del curso en grande —que es lo que se reconoce y lo que invita a entrar—
   y debajo solo título y meta. La descripción y el precio destacado siguen
   viviendo en «Cursos EGS», que es donde se vende.
   Misma anatomía en Inicio, «Mis cursos» y el catálogo. Sin tocar markup.
   ══════════════════════════════════════════════════════════════════════════ */
/* La banda de marca es CUADRADA y la carátula la llena por completo. Las carátulas
   de WooCommerce son cuadradas con fondo propio: si la caja fuese rectangular, con
   `contain` quedarían franjas del fondo de la caja a los lados y se vería el borde
   del JPEG en cuanto su gris no coincidiera al píxel (le pasaba a EMERFIT). Así no
   depende de ningún tono. */

/* ── La banda de marca ─────────────────────────────────────────────────────
   Con logo oficial: fondo #F4F4F4 (el mismo del JPEG) a todo el ancho, el
   logo entero y NADA de Slate detrás — ese marco oscuro alrededor del logo
   era lo que ensuciaba el catálogo. Sin logo: panel Slate con retícula. */
.course__img,.cat-card--mini .cat-card__img{
  width:100%;height:auto;aspect-ratio:1;border-radius:0;border:0;padding:0;flex:none;
}
.course__img.is-logo,.cat-card__img--logo{
  background:#f4f4f4;display:block;
}
.course__img.is-logo::before{
  content:"";position:absolute;inset:0;transform:none;
  height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;
  background:var(--cover) center/cover no-repeat;
}
.cat-card__img--logo{object-fit:cover;padding:0}
.course__img.is-logo span{display:none}
.course__img::after{display:none}
.course__img.is-sigla{
  background:var(--hex) center/34px repeat,linear-gradient(140deg,#1b3c45,#0f2830);
  display:grid;place-items:center;
}
.course__img.is-sigla span{
  position:static;font-size:clamp(17px,4.6vw,22px);letter-spacing:.09em;
  color:rgba(255,255,255,.92);text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.cat-card__img--ph{height:auto;aspect-ratio:1;font-size:30px}

/* ── El cuerpo ─────────────────────────────────────────────────────────── */
.course,.cat-card--mini{
  display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.course__body,.cat-card--mini .cat-card__body{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:12px 14px 14px;flex:1;min-width:0;
}
/* El título se corta a dos líneas por ALTURA, no con -webkit-line-clamp: al ser hijo
   directo de un flex, el navegador blockifica su display:-webkit-box (queda en
   flow-root) y el clamp deja de aplicarse. 2 × line-height = 2.6em. */
.course__body > h3,.cat-card--mini h3{
  width:100%;font-size:14.5px;font-weight:800;line-height:1.3;
  letter-spacing:-.25px;margin:0;max-height:2.6em;overflow:hidden;
}
.course__meta,.cat-card__meta{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted);width:100%}
.course__meta:empty{display:none}
.course .badge{margin:0;padding:2px 9px;font-size:10.5px}
.course .progress{max-width:none;height:6px;margin:6px 0 0;width:100%}
.course__body,.cat-card--mini .cat-card__body{justify-content:flex-start}
.cat-card__chevron{display:none}          /* en vertical, la tarjeta entera ya invita */

/* Estados e interacción */
.course[data-state="enrolled"]{border-top:3px solid var(--accent-2)}
.course[data-state="pending"]{border-top:3px solid var(--gold)}
.course--link,a.cat-card--mini{cursor:pointer;transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s ease,border-color .16s ease}
.course--link:hover,a.cat-card--mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(43,196,178,.5)}
.course--link:active,a.cat-card--mini:active{transform:scale(.985)}
a.cat-card--mini:focus-visible,.course--link:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ── Rejilla: dos columnas ya en móvil. La marca en grande es el gancho. ── */
.grid,#campus-catalogo{grid-template-columns:repeat(2,1fr);gap:11px;display:grid}
@media(min-width:720px){ .grid,#campus-catalogo{grid-template-columns:repeat(3,1fr);gap:14px} }
@media(min-width:1100px){ .grid{grid-template-columns:repeat(4,1fr)} }
.reco-card__img{width:100%;height:auto;aspect-ratio:1;border-radius:0}

/* ── Rejillas: cualquier cosa que NO sea una ficha ocupa el ancho completo ──
   Al pasar .grid a dos columnas, el estado vacío («Aún no tienes cursos»), los
   mensajes y los skeletons quedaban estrujados en media columna. */
.grid > *:not(.course),
#campus-catalogo > *:not(.cat-card),
#catalogo-grid > *:not(.course),
#cursos-grid > *:not(.course){ grid-column:1 / -1; }
.empty{padding:34px 22px}
.empty p{max-width:44ch}

/* ══════════════════════════════════════════════════════════════════════════
   27 · DEGRADADOS · profundidad sin comprometer la lectura
   Regla que sigo en todo el bloque: degradado SOLO en superficies de acento,
   barras y chips —donde el texto es corto o no hay— y en las tarjetas, con un
   delta de luminancia mínimo (2-4 %). Nunca detrás de un párrafo: el cuerpo
   de los artículos, los paneles del LMS y el catálogo siguen sobre color
   plano, que es lo que garantiza el contraste constante línea a línea.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Barras: el degradado las despega del contenido ── */
.topbar{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82))}
[data-theme="dark"] .topbar{background:linear-gradient(180deg,rgba(23,55,65,.94),rgba(15,39,46,.86))}
.bottom-bar{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.96))}
[data-theme="dark"] .bottom-bar{background:linear-gradient(180deg,rgba(15,39,46,.86),rgba(11,32,39,.97))}

/* ── Tarjetas: 3 % de caída de arriba abajo. Suficiente para que dejen de
      leerse como rectángulos planos, imperceptible para el texto. ── */
.acceso,.art-tile,.cat-card,.course,.post,.diploma,.stat,.lms-rail,.mat,
.cnt-card,.caso-card,.est-card,.mm-card,.pod-ep,.fc-mazo,.test-row,.mir-cat,
.tablon-item,.foro-post,.cuad-card,.empty{
  background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(16,41,49,.022));
}
[data-theme="dark"] .acceso,[data-theme="dark"] .art-tile,[data-theme="dark"] .cat-card,
[data-theme="dark"] .course,[data-theme="dark"] .post,[data-theme="dark"] .diploma,
[data-theme="dark"] .stat,[data-theme="dark"] .lms-rail,[data-theme="dark"] .mat,
[data-theme="dark"] .cnt-card,[data-theme="dark"] .caso-card,[data-theme="dark"] .est-card,
[data-theme="dark"] .mm-card,[data-theme="dark"] .pod-ep,[data-theme="dark"] .fc-mazo,
[data-theme="dark"] .test-row,[data-theme="dark"] .mir-cat,[data-theme="dark"] .tablon-item,
[data-theme="dark"] .foro-post,[data-theme="dark"] .cuad-card,[data-theme="dark"] .empty{
  background-image:linear-gradient(180deg,rgba(234,244,242,.045),rgba(0,0,0,.06));
}
/* El cuerpo de la tarjeta de artículo lleva el texto: se deja plano. */
.art-tile__body{background:var(--surface)}
[data-theme="dark"] .art-tile__body{background:var(--surface)}

/* ── Chips y chapas: degradado dentro de su propia familia ── */
.acceso__nuevo,.art-tile__flag{background-image:linear-gradient(140deg,#3ad9c6,#1fa897)}
.post__sem{background-image:linear-gradient(140deg,#1b3c45,#0d252c)}
[data-theme="dark"] .post__sem{background-image:linear-gradient(140deg,#3ad9c6,#1fa897)}
.badge--activa,.evi-badge,.cat-card__price{
  background-image:linear-gradient(140deg,rgba(43,196,178,.20),rgba(43,196,178,.07));
}
.badge--espera{background-image:linear-gradient(140deg,rgba(224,164,59,.22),rgba(224,164,59,.08))}
.acceso__ic{background-image:linear-gradient(140deg,rgba(43,196,178,.22),rgba(46,110,105,.10))}

/* ── Controles ── */
.seg{background-image:linear-gradient(180deg,rgba(16,41,49,.05),rgba(16,41,49,.015))}
[data-theme="dark"] .seg{background-image:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.05))}
.seg button.is-on{background-image:linear-gradient(180deg,#fff,#f4f7f6)}
[data-theme="dark"] .seg button.is-on{background-image:linear-gradient(180deg,#1e434d,#173741)}
/* Ojo: los degradados con blanco necesitan SIEMPRE su pareja oscura. Sin ella,
   rgba(255,255,255,.9) sobre una superficie oscura devuelve un botón blanco. */
.accesos-mas{background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(16,41,49,.03))}
[data-theme="dark"] .accesos-mas{background-image:linear-gradient(180deg,rgba(234,244,242,.05),rgba(0,0,0,.07))}
.field input,#catalogo-q,.mm-tools input,#fb-texto,.cuad-input{
  background-image:linear-gradient(180deg,rgba(16,41,49,.035),rgba(16,41,49,0));
}
[data-theme="dark"] .field input,[data-theme="dark"] #catalogo-q,[data-theme="dark"] .mm-tools input,
[data-theme="dark"] #fb-texto,[data-theme="dark"] .cuad-input{
  background-image:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.02));
}

/* ── Remates de marca ── */
.stat::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.diploma{border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--accent-2),var(--accent)) 1}
.empty{border-color:rgba(43,196,178,.28)}
/* Halo aqua en la esquina de lo destacado — decorativo, detrás de nada legible. */
.post--destacado{position:relative;overflow:hidden}
.post--destacado::after{
  content:"";position:absolute;top:-40%;right:-20%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(43,196,178,.13),transparent 70%);
}