/* Catálogo de clases de B&N Lectures (/lectures/clases/…): se suma a escena.css, con el mismo lenguaje.
   Lo generan build-lectures-clases.js. */

/* ── Cabecera del mapa y de cada materia ── */
.cat-tapa{padding:clamp(56px,10vh,120px) 0 clamp(48px,8vh,88px);}
.cat-tapa .lead{max-width:60ch;}
.cat-tapa .esc-tit .num,.cl-tapa .esc-tit .num{line-height:1.6;}
.credito{margin:clamp(24px,3vh,34px) 0 0;color:var(--ink-3);}

/* ── Materias: tarjetas grandes; las que vienen, apagadas y con su sello ── */
.materias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);padding-bottom:clamp(48px,8vh,80px);}
.mt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,34vw,460px);padding:22px;
  border:1px solid var(--edge);overflow:hidden;isolation:isolate;transition:border-color .4s ease,transform .6s var(--e-out);}
.mt:first-child{grid-column:span 2;}
a.mt:hover{border-color:rgb(var(--azul-rgb)/.6);transform:translateY(-3px);}
.mt-fondo{position:absolute;inset:0;z-index:-1;}
.mt-fondo img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .5s ease,transform 1.2s var(--e-out);}
a.mt:hover .mt-fondo img{opacity:.75;transform:scale(1.03);}
.mt-fondo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(2 3 6/.1) 0%,rgb(2 3 6/.55) 45%,rgb(2 3 6/.96) 100%);}
.mt-vacio{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 70% 30%,rgb(var(--azul-rgb)/.14),transparent 70%);}
.mt.pronto .mt-fondo img{opacity:.6;filter:grayscale(.15) brightness(.95);}
.mt.pronto h2,.mt.pronto p{color:var(--ink-3);}
.mt-num{position:absolute;left:22px;top:20px;}
.mt-estado{position:absolute;right:20px;top:18px;display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgb(var(--azul-rgb)/.55);color:var(--ink);background:rgb(2 3 6/.6);}
.mt-estado i{width:7px;height:7px;border-radius:50%;background:var(--azul);box-shadow:0 0 10px var(--azul);}
.mt-estado.pronto{border-color:var(--edge-2);color:var(--ink-3);}
.mt h2{margin:0;font-weight:700;font-size:clamp(26px,2.6vw,40px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;}
.mt:first-child h2{font-size:clamp(34px,4vw,64px);}
.mt p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:46ch;}
.mt-eq{display:inline-block;margin-top:16px;padding:7px 11px;border:1px solid var(--edge-2);font-family:var(--mono);font-size:12.5px;color:var(--ink-2);background:rgb(var(--azul-rgb)/.06);}
.mt.pronto .mt-eq{color:var(--ink-4);}
.mt-pie{display:flex;flex-direction:column;align-items:flex-start;}
.mt-ir{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--azul);}
.mt-ir svg{width:15px;height:15px;transition:transform .4s var(--e-out);}
a.mt:hover .mt-ir svg{transform:translateX(4px);}

/* ── Capítulos y tarjetas de clase ── */
.cap-bloque{padding:clamp(40px,7vh,72px) 0;border-top:1px solid var(--edge);}
.cap-bloque.pronto{padding:clamp(28px,5vh,44px) 0;}
.cap-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-bottom:clamp(22px,3vh,32px);}
.cap-cab h2{margin:0;font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;}
.cap-bloque.pronto h2{color:var(--ink-3);}
.cap-cab .mono:last-child{margin-left:auto;}
.cap-cab .mt-estado{position:static;}
.cl-grilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);}
.cl-tarjeta{display:flex;flex-direction:column;gap:12px;}
.cl-cuadro{position:relative;aspect-ratio:4/5;border:1px solid var(--edge);overflow:hidden;background:#000;transition:border-color .35s ease;}
.cl-tarjeta:hover .cl-cuadro{border-color:rgb(var(--azul-rgb)/.6);}
.cl-cuadro img,.cl-cuadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cl-cuadro video{opacity:0;transition:opacity .4s ease;}
.cl-cuadro video.va{opacity:1;}
.cl-ver{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgb(2 3 6/.55);border:1px solid var(--edge-2);color:var(--ink);opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .5s var(--e-out);}
.cl-ver svg{width:18px;height:18px;margin-left:3px;}
.cl-tarjeta:hover .cl-ver{opacity:1;transform:none;}
.cl-meta{display:flex;justify-content:space-between;gap:10px;}
.cl-tarjeta h3{margin:0;font-weight:500;font-size:clamp(16px,1.3vw,19px);line-height:1.2;letter-spacing:-.015em;text-transform:uppercase;}

/* ── Página de una clase: el reproductor ── */
.cl-tapa .haz{border:0;cursor:pointer;}
.cl-tapa .haz svg{width:13px;height:13px;}
.cl-video{position:relative;aspect-ratio:4/5;width:min(100%,560px);justify-self:end;border:1px solid var(--edge-2);background:#000;overflow:hidden;
  box-shadow:0 60px 140px -40px rgb(var(--azul-rgb)/.35);}
.cl-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}

/* Reproductor propio (clases.js): doble video 4:5 / 16:9, barra que se esconde, pantalla completa girada en el teléfono */
.rp{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.rp-marco{position:absolute;inset:0;background:#000;overflow:hidden;}
.rp-marco video{transition:opacity .25s ease;}
.rp-marco .rp-h{opacity:0;}
.rp-en-h .rp-marco .rp-h{opacity:1;}
.rp-en-h .rp-marco video:not(.rp-h){opacity:0;}
.rp-gran{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;
  border:1px solid rgb(var(--azul-rgb)/.7);background:rgb(2 3 6/.55);color:var(--ink);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 50px -6px rgb(var(--azul-rgb)/.6);transition:opacity .3s ease,transform .4s var(--e-out);}
.rp-gran svg{width:26px;height:26px;margin-left:4px;}
.rp-corre .rp-gran{opacity:0;transform:scale(.85);pointer-events:none;}
.rp-carga{position:absolute;left:50%;top:50%;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:2px solid rgb(var(--azul-rgb)/.2);border-top-color:var(--azul);opacity:0;pointer-events:none;transition:opacity .2s;animation:rp-gira .8s linear infinite;}
.rp-esperando.rp-corre .rp-carga{opacity:1;}
@keyframes rp-gira{to{transform:rotate(360deg)}}
.rp-barra{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:4px;padding:28px 10px 8px;
  background:linear-gradient(180deg,transparent,rgb(2 3 6/.88));opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;}
.rp-ui .rp-barra,.rp-arrastre .rp-barra{opacity:1;transform:none;}
.rp-full:not(.rp-ui) .rp-marco{cursor:none;}
.rp-b{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border:0;background:none;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;border-radius:6px;transition:background .2s;}
.rp-b svg{width:20px;height:20px;}
.rp-b:focus-visible,.rp-prog:focus-visible{outline:1px solid var(--azul);outline-offset:2px;}
.rp-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);padding:0 8px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.rp-t b{font-weight:400;color:var(--ink);}
.rp-prog{position:relative;flex:1;height:28px;cursor:pointer;touch-action:none;}
.rp-prog::before,.rp-buf,.rp-hecho{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;transform-origin:left;transition:height .2s,margin .2s;}
.rp-prog::before{background:rgb(244 245 248/.16);}
.rp-buf{background:rgb(244 245 248/.28);transform:scaleX(0);}
.rp-hecho{background:var(--azul);box-shadow:0 0 12px rgb(var(--azul-rgb)/.7);transform:scaleX(0);}
.rp-cab{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgb(var(--azul-rgb)/.35);transform:scale(0);transition:transform .2s;}
.rp-arrastre .rp-cab{transform:scale(1);}
.rp-arrastre .rp-prog::before,.rp-arrastre .rp-buf,.rp-arrastre .rp-hecho{height:5px;margin-top:-2.5px;}
@media(hover:hover){
  .rp-b:hover{background:rgb(244 245 248/.1);}
  .rp-gran:hover{transform:scale(1.06);}
  .rp-prog:hover .rp-cab{transform:scale(1);}
  .rp-prog:hover::before,.rp-prog:hover .rp-buf,.rp-prog:hover .rp-hecho{height:5px;margin-top:-2.5px;}
}
/* Pantalla completa (real o simulada en iPhone): el marco 16:9 lo dimensiona y gira clases.js */
.cl-video.rp-full{border:0;box-shadow:none;background:#000;}
.cl-video.rp-pseudo{position:fixed;inset:0;z-index:3000;width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;}
.rp-full .rp-marco{inset:auto;left:50%;top:50%;}
.rp-full .rp-barra{padding:40px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
.rp-full .rp-b{min-width:46px;height:46px;}
.rp-full .rp-b svg{width:22px;height:22px;}
.rp-girado .rp-barra{padding:36px 18px 12px;}

@media(max-width:1100px){ .cl-grilla{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:900px){
  .materias{grid-template-columns:1fr 1fr;}
  .cl-video{order:-1;justify-self:stretch;width:calc(100% + 2 * var(--pad));max-width:none;margin:0 calc(-1 * var(--pad));border-left:0;border-right:0;}
  .cl-grilla{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){
  .materias{grid-template-columns:1fr;}
  .mt:first-child{grid-column:auto;}
  .mt{min-height:380px;padding-top:76px;}
  .cap-cab .mono:last-child{margin-left:0;}
}

/* ── Material de apoyo: la ficha con sus páginas a la vista y los recursos abiertos ── */
.material-cab{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,6vh,64px);}
.material-cab .lead{margin:0;max-width:58ch;}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;
  padding:clamp(28px,4vw,56px);border:1px solid var(--edge-2);position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 70% 90% at 22% 50%,rgb(var(--azul-rgb)/.16),transparent 70%),rgb(var(--hielo-rgb)/.015);}
.ficha-hojas{position:relative;display:block;aspect-ratio:1.18;max-width:560px;width:100%;justify-self:center;}
.ficha-hojas img{position:absolute;top:4%;width:56%;height:auto;aspect-ratio:453/640;object-fit:cover;background:#fff;
  box-shadow:0 30px 70px -20px rgb(0 0 0/.85),0 0 0 1px rgb(255 255 255/.06);transition:transform .8s var(--e-out);}
.ficha-hojas img:nth-child(1){left:44%;transform:rotate(7deg) translateY(4%);}
.ficha-hojas img:nth-child(2){left:23%;transform:rotate(2deg) translateY(1%);}
.ficha-hojas img:nth-child(3){left:2%;transform:rotate(-4deg);}
.ficha-hojas:hover img:nth-child(1){transform:rotate(10deg) translate(8%,3%);}
.ficha-hojas:hover img:nth-child(2){transform:rotate(3deg) translate(3%,-1%);}
.ficha-hojas:hover img:nth-child(3){transform:rotate(-6deg) translate(-4%,-2%);}
.ficha-texto h3{margin:16px 0 0;font-weight:700;font-size:clamp(28px,3.2vw,48px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase;}
.ficha-lead{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:52ch;}
.ficha-cifras{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--edge-2);}
.ficha-cifras li{display:flex;flex-direction:column;gap:8px;padding:16px 12px 0 0;}
.ficha-cifras li + li{padding-left:14px;border-left:1px solid var(--edge);}
.ficha-cifras b{font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.04em;color:var(--ink);}
.ficha-cifras .mono{font-size:10px;line-height:1.5;color:var(--ink-3);}
.ficha .acciones{margin-top:30px;}
.ficha-meta{margin:18px 0 0;font-size:10px;color:var(--ink-4);}
.rec-tit{margin:clamp(48px,7vh,72px) 0 18px;color:var(--ink-3);}
.recursos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);}
.recursos .rec{grid-column:span var(--s,3);}
.rec{display:flex;flex-direction:column;gap:10px;min-height:220px;padding:20px;border:1px solid var(--edge);background:rgb(var(--hielo-rgb)/.012);
  transition:border-color .35s ease,background .35s ease,transform .5s var(--e-out);}
.rec:hover{border-color:rgb(var(--azul-rgb)/.55);background:rgb(var(--azul-rgb)/.06);transform:translateY(-3px);}
.rec-cab{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--ink-3);}
.rec b{margin-top:6px;font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);}
.rec-nota{font-size:14px;line-height:1.55;color:var(--ink-2);}
.rec-pie{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--ink-4);border-top:1px solid var(--edge);}
.rec-ir{color:var(--azul);font-size:14px;transition:transform .4s var(--e-out);}
.rec:hover .rec-ir{transform:translate(3px,-3px);}
@media(max-width:1000px){
  .ficha{grid-template-columns:1fr;}
  .ficha-hojas{max-width:460px;}
}
@media(max-width:900px){ .material-cab{grid-template-columns:1fr;} .recursos .rec{grid-column:span 6;} .recursos .rec:last-child:nth-child(odd){grid-column:span 12;} }
@media(max-width:560px){ .recursos .rec{grid-column:span 12;} }
@media(max-width:620px){
  .ficha{padding:22px 18px 26px;margin:0 calc(-1 * var(--pad) + 8px);}
  .ficha-cifras{grid-template-columns:1fr 1fr;}
  .ficha-cifras li:nth-child(3){padding-left:0;border-left:0;}
  .ficha-cifras li:nth-child(n+3){margin-top:14px;border-top:1px solid var(--edge);}
}
