/* Campus EXPANDEPRO — capa propia sobre la gramática visual de Video Experience (ref-base + ref-grandprix).
   Solo adapta contenido: facultad > materia > lección, marca LiBERATEMPRENDIENDO, bento de facultades. */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:#fff;color:#000;padding:8px 12px;border-radius:8px}.skip:focus{left:8px}
.logoPlate{width:auto;min-width:150px;padding:8px 14px}.logoPlate img{height:100%;width:auto;max-width:190px}
.brandTitle .bt1{display:block}.brandTitle .bt2{display:block;opacity:.7}
.hero.ux h1 .l1,.hero.ux h1 .l2{display:block}
.hero.ux h1 .l2{font-size:.82em;letter-spacing:-.01em}
.resumeRow{margin:18px 0 0}
.langSel button[aria-pressed=true]{background:rgba(255,255,255,.2);color:#fff}
html[data-theme=light] .langSel{background:#fff;border-color:var(--border)}
html[data-theme=light] .langSel button{color:var(--fg)}
html[data-theme=light] .langSel button[aria-pressed=true]{background:var(--well)}

/* hero: mosaico de cinco facultades (sustituye al mosaico de portadas de video) */
.cmos{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,minmax(0,1fr));gap:12px;width:100%;aspect-ratio:1.18/1;max-width:640px;margin-left:auto}
.cm{position:relative;overflow:hidden;border-radius:18px;border:1px solid #ffffff2b;background:#0c1626;box-shadow:0 18px 44px #02081c66;isolation:isolate;transition:transform .35s var(--ease,cubic-bezier(.22,1,.36,1)),border-color .2s}
.cm:hover{transform:translateY(-4px);border-color:#8fdcff}
.cm .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cm::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#031226e6 0%,#071d3b30 55%,transparent 100%)}
.cmTag{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.cm1{grid-column:1/5;grid-row:1/4}.cm2{grid-column:5/7;grid-row:1/3}.cm3{grid-column:5/7;grid-row:3/5}.cm4{grid-column:1/4;grid-row:4/7}.cm5{grid-column:4/7;grid-row:5/7}
.ux-feats b{font-weight:800}

/* bento de facultades */
.libraryGrid.fac{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;container-type:normal}
.libraryGrid.fac .videoCard{min-height:300px;text-decoration:none;align-items:flex-end;padding:22px}
.libraryGrid.fac .bf1{grid-column:span 7;min-height:420px}
.libraryGrid.fac .bf2{grid-column:span 5;min-height:420px}
.libraryGrid.fac .bf3,.libraryGrid.fac .bf4,.libraryGrid.fac .bf5{grid-column:span 4;min-height:300px}
.libraryGrid.fac .videoCard .copy{max-width:calc(100% - 46px);padding:0}
.libraryGrid.fac .videoCard h3{font-size:clamp(18px,1.9vw,28px);-webkit-line-clamp:3;margin:10px 0 6px;line-height:1.14}
.libraryGrid.fac .videoCard p{font-size:12.5px;color:#c9dcee;line-height:1.5}
.libraryGrid.fac .topMeta{position:absolute;left:18px;top:16px;display:flex;gap:6px;flex-wrap:wrap}
.videoCard .contentTag,.videoCard .aspectTag{font-size:11px;font-weight:800;background:#02101fb3;border:1px solid #ffffff2e;border-radius:999px;padding:4px 10px;backdrop-filter:blur(6px)}
@media(max-width:900px){.libraryGrid.fac .bf1,.libraryGrid.fac .bf2{grid-column:span 12;min-height:320px}.libraryGrid.fac .bf3,.libraryGrid.fac .bf4{grid-column:span 6}.libraryGrid.fac .bf5{grid-column:span 12}}
@media(max-width:560px){.libraryGrid.fac .videoCard,.libraryGrid.fac .bf3,.libraryGrid.fac .bf4,.libraryGrid.fac .bf5{grid-column:span 12;min-height:260px}.libraryGrid.fac .bf1,.libraryGrid.fac .bf2{min-height:290px}}

/* biblioteca */
.libSec .libraryBar{margin-bottom:6px}
.epCard.soonCard{cursor:default;opacity:.92}.epCard.soonCard:hover{transform:none;border-color:var(--border)}
.epCard.soonCard .thumb{filter:saturate(.7) brightness(.8)}
.epCard{text-decoration:none}
.season .sRight{display:inline;color:var(--soft);font-size:12px;font-weight:700}
.season>summary{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.season>summary .sRight{display:inline!important}

/* oferta */
.sales .note,.note{color:var(--soft);font-size:13px;margin:10px 0 0}
.ctaCol{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.btn[aria-disabled=true]{opacity:.6;cursor:not-allowed}

/* footer */
.footNotes{max-width:560px;color:#a9bad2;font-size:12.5px;line-height:1.6}.footNotes p{margin:0 0 8px}.footNotes .stg{opacity:.75}
.footLogo img{height:44px;width:auto}

/* diálogo y toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0c1626;color:#fff;border:1px solid #ffffff33;border-radius:12px;padding:10px 16px;z-index:300;font-size:14px}
.dialog .dialogBody h2{margin:0 0 6px;font-size:20px}
[hidden]{display:none!important}

/* secciones que Video Experience oculta en su vista de app: aquí son parte del campus */
.sales{display:flex!important;content-visibility:visible!important}
.footer,.libSec,.content{content-visibility:visible!important}
.logoMarkIso{display:grid;place-items:center;height:48px;padding:0 4px;flex:none}.logoMarkIso img{height:100%;width:auto}
.footLogo{display:flex;gap:18px;align-items:center}.footLogo img{height:64px;width:auto}
.epRail .epItem{--ch:340px}
@media(max-width:900px){.sales{flex-direction:column;align-items:flex-start}}

.topbar .logoMarkIso{width:36px;height:48px}.topbar .logoMarkIso img{width:36px!important;height:48px!important;max-width:none;object-fit:contain}
.brandTitle .bt1,.brandTitle .bt2{font-size:11px;letter-spacing:.2em}

/* rieles propios: fila horizontal con scroll-snap; "ver todo" = cuadrícula */
.episode .epRail:not(.grid){display:flex!important;grid-template-columns:none!important;overflow-x:auto;gap:14px;scroll-snap-type:x proximity;padding:4px 20px 20px}
.episode .epRail .epItem{content-visibility:visible!important;contain:none;flex:none;width:min(320px,78vw);aspect-ratio:16/9;grid-column:auto!important;grid-row:auto!important;position:relative}
.episode .epRail .epItem>.epCard{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important}
.episode .epRail.grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:14px;overflow:visible;padding:4px 20px 20px}
.episode .epRail.grid .epItem{width:auto}

/* en un campus el título de cada tema debe verse siempre (no solo al pasar el cursor) */
.episode .epCard .topMeta,.episode .epCard .copy,.episode .epCard .cardPlay{opacity:1!important;transform:none!important}
.episode .epCard::before{background:linear-gradient(0deg,#031226f5 0%,#071d3b99 48%,#03214430 100%)!important}
.episode .epCard .copy{position:relative}
.episode .epCard h3{font-size:clamp(14px,1.2vw,17px);-webkit-line-clamp:3}
.footLogo img{aspect-ratio:auto!important;height:64px;width:auto;object-fit:contain}
.footLogo{margin-bottom:10px}

.videoCard{content-visibility:visible!important;contain:none!important}
@media(max-width:470px){
  .hero.ux h1 .l1{font-size:min(4.6vw,18px)}
  .hero.ux h1 .l2{font-size:6.2vw!important;letter-spacing:-.02em}
  .hero.ux .heroLeft h1{max-width:100%}
  .cmTag{font-size:9px;letter-spacing:.06em;left:8px;bottom:7px;max-width:calc(100% - 14px)}
  .cmos{gap:8px}
}

/* hero como Video Experience: bloque centrado + fila ancha de portadas debajo */
.hero.ux .heroInner{display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:34px;max-width:1680px;padding-top:clamp(40px,6vh,70px);padding-bottom:clamp(110px,14vh,140px)}
.hero.ux .heroLeft{align-items:center;text-align:center;gap:16px}
.hero.ux .heroLeft h1,.hero.ux .heroLeft p.ux-sub{max-width:min(46em,92vw);margin-inline:auto;text-align:center}
.hero.ux .heroLeft .buttonRow{justify-content:center}
.hero.ux .ux-right{grid-column:auto;width:100%;max-width:none}
.cmos{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;grid-template-rows:none;gap:14px;aspect-ratio:auto;max-width:none;margin:0;height:clamp(200px,24vw,330px)}
.cm1,.cm2,.cm3,.cm4,.cm5{grid-column:auto;grid-row:auto}
.cm .cmTag{font-size:12px}
@media(max-width:900px){.cmos{display:flex;overflow-x:auto;scroll-snap-type:x proximity;height:200px;padding-bottom:6px}.cm{flex:none;width:min(280px,72vw);scroll-snap-align:start}.cm1{width:min(340px,80vw)}}

/* etiquetas y contadores en mayúsculas; flechas de riel dentro del margen del panel */
.contentTag,.aspectTag,.sRight,.sRight small,.epLabel,.epNum,.epRight,.epRight small,.libraryHint,.cmTag,.kicker,.sKick{text-transform:uppercase}
.episode .epPrev{left:6px!important}.episode .epNext{right:6px!important}

/* etiqueta sobre la foto de En vivo: sin caja, solo texto con sombra suave */
.liveBadge,.liveBadge.live{background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 0!important;text-shadow:0 1px 8px rgba(3,18,38,.85),0 0 2px rgba(3,18,38,.7)}
.liveBadge.live{color:#E8D7B5}

/* título de acompañamiento: dos líneas equilibradas; nota de certificación en dos líneas (frase 1 / frase 2) */
.sales>div:first-child{container-type:inline-size;min-width:0;flex:1 1 0}
.sales #ctaTitle{white-space:nowrap;font-size:min(56px,4.6cqw)!important;letter-spacing:-.02em!important;line-height:1.1;margin-bottom:14px}
.footNotes p[data-i18n=cert_note]{white-space:pre-line}

/* flechas del riel: en la barra, a la derecha de "Ver todo" (sin superponerse a ningún botón) */
.episode .epBar .epNav{position:static!important;opacity:1!important;pointer-events:auto!important;width:40px!important;height:40px!important;min-height:40px!important;flex:none;background:var(--card)!important;border:1px solid var(--border)!important;color:var(--fg)!important;backdrop-filter:none!important}
html[data-theme=light] .episode .epBar .epNav{background:#E8D7B5!important;color:#13244A!important;border-color:#4B7BA6!important}
.episode:has(.epRail.grid) .epNav{display:none!important}
@media(hover:none){.episode .epBar .epNav{display:none!important}}

/* botones de llamada a la acción en mayúsculas */
.btn,a.btn,button.btn{text-transform:uppercase;letter-spacing:.04em}
@media(max-width:360px){.btn,a.btn,button.btn{letter-spacing:0!important;font-size:11.5px!important;padding-inline:12px!important;max-width:100%}}
@media(max-width:360px){.ctaCol .btn,.sales .btn{white-space:normal!important;text-align:center;line-height:1.25}}
@media(max-width:360px){.btn,a.btn,button.btn{white-space:normal!important;text-align:center;line-height:1.25}}
@media(max-width:360px){.btn.accent,.ctaCol .btn.accent,.btn.primary,.btn.secondary{white-space:normal!important;overflow-wrap:anywhere}}

/* XP por lección/materia + premio EXPANDE OS (solo elegibilidad) */
.rewardBox{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px}
.rewardBox h3{margin:0 0 4px;font-size:18px}
.rewardProg{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rewardProg li{display:grid;gap:4px}.rewardProg progress{width:100%;height:8px;accent-color:#2E56A6}
.rewardState{font-weight:700;margin:0}.rewardState.on{color:var(--fg)}
.doneRow{display:flex;align-items:center;gap:12px;margin:14px 0;flex-wrap:wrap}.doneRow small{color:var(--soft);font-weight:700}
.subjProg{font-weight:700;margin:8px 0}

/* quiz: la pregunta va DENTRO de la tarjeta (no cortando el borde); aciertos/errores en la paleta azul-beige */
.qItem{overflow:hidden;min-width:0}
.qItem legend{float:left;width:100%;box-sizing:border-box;padding:0 0 10px;margin:0;overflow-wrap:anywhere;line-height:1.35}
.qItem legend+*{clear:both}
.qItem .opt{min-width:0}.qItem .opt span{overflow-wrap:anywhere}
.qItem.ok{border-color:#2E56A6!important;border-width:2px}
.qItem.bad{border-color:#13244A!important;border-style:dashed;border-width:2px}
html[data-theme=dark] .qItem.ok{border-color:#C4EAF2!important}html[data-theme=dark] .qItem.bad{border-color:#E8D7B5!important}