@import url("notebook76.css");
/* Academia 76 — portada y ficha de curso.

   El @import de arriba trae la imagen de la notebook del hero (esta en su
   propio archivo para que este siga siendo legible). Tiene que ir primero:
   CSS solo acepta @import al principio del archivo.

   Formato de referencia: una academia de cursos por video. El hero de la
   portada ahora copia el formato del hero de CLUB76 (clases .hero .kicker
   .display .claim .lead .cta .lap del sitio, pedido de Ariel 22/8); las
   clases .achero/.acfrase/.actitulo/.acbajada del hero anterior quedan
   abajo por si hay que volver. Los colores salen de la paleta del sitio
   (rojo LASER76 sobre claro) y los titulos usan Days One, la misma
   tipografia del logo. */

/* El buscador quedo abajo del hero nuevo (formato CLUB76). El padding de
   ARRIBA del hero no se toca: es el que empareja titulo y portatil con
   CLUB76. Abajo si se achica, y la seccion que sigue tambien recorta su
   propio techo, para que el buscador quede cerca de las pildoras (pedido
   de Ariel 22/8). */
.acadhero .acbuscar{margin-top:44px}
.acadhero{padding-bottom:14px}
.acadhero + .acsec{padding-top:26px}

.achero{background:#f6f7f9;padding:72px 0 56px;text-align:center}
.acfrase{color:var(--red,#e11b22);font-weight:600;font-size:20px;margin-bottom:10px}
.actitulo{font-family:"Days One",sans-serif;font-weight:400;color:#111;
  font-size:clamp(44px,8vw,84px);line-height:1.05;margin:0 0 16px}
.actitulo span{color:var(--red,#e11b22)}
.acbajada{max-width:560px;margin:0 auto 30px;font-size:19px;color:#333;line-height:1.45}

/* El buscador es relative porque el desplegable de resultados (.acbres)
   cuelga de el, pegado abajo y con el mismo ancho. */
.acbuscar{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #e2e4e8;border-radius:999px;padding:15px 24px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);position:relative}
.acbuscar .lupa{font-size:22px;color:#777;line-height:1}
.acbuscar input{border:0;outline:0;flex:1;font:inherit;font-size:17px;color:#111;background:transparent}
.acbuscar input::placeholder{color:#9aa0a8}

/* Los resultados del buscador: cada fila es el titulo del video y abajo, en
   gris, el curso donde vive y la duracion. Alineados a la izquierda aunque
   el hero este centrado. */
.acbres{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:6;
  background:#fff;border:1px solid #e2e4e8;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.12);text-align:left;max-height:380px;overflow-y:auto}
.acbres:empty{display:none}
.acbres a{display:block;padding:13px 20px;color:inherit;text-decoration:none;
  border-top:1px solid #f0f1f4}
.acbres a:first-child{border-top:0}
.acbres a:hover{background:#f6f7f9}
.acbres a b{display:block;font-size:15px;line-height:1.35;font-weight:600}
.acbres a span{display:block;margin-top:3px;color:#777;font-size:13px}
.acbres .acbnada{padding:15px 20px;color:#777;font-size:14px}

.acsec{padding:52px 0 64px}
.achead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.achead h2{font-size:34px;margin:0 0 4px}
.achead p{margin:0;color:#555}
.acver{border:0;background:#eef0f3;border-radius:999px;padding:12px 24px;
  font:inherit;font-weight:600;cursor:pointer}
.acver:hover{background:#e4e7eb}

.acpills{display:flex;gap:6px;flex-wrap:wrap;background:#eef0f3;border-radius:999px;
  padding:6px;width:max-content;max-width:100%;margin-bottom:28px}
.acpill{border:0;background:transparent;border-radius:999px;padding:11px 20px;
  font:inherit;font-weight:600;color:#222;cursor:pointer;white-space:nowrap}
.acpill.on{background:#111;color:#fff}
.acpill:not(.on):hover{background:#e2e5e9}

/* Las tarjetas van en carrusel (pedido de Ariel 22/8, formato de la
   referencia): una sola fila que se desliza de a paginas, con los puntitos a
   la izquierda y las flechas redondas a la derecha. El scroll nativo con
   snap hace el trabajo: las flechas solo lo empujan, en el celular se
   desliza con el dedo y en la computadora se arrastra con el mouse (pan,
   clase "pan" mientras se arrastra). La barra de scroll se esconde porque
   las flechas y los puntitos ya cuentan donde estas parado. */
.acgrid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;cursor:grab}
.acgrid::-webkit-scrollbar{display:none}
/* Arrastrando: mano cerrada, iman apagado (si no, el scroll vuelve solo al
   punto de encaje y el arrastre se traba) y nada de seleccionar texto. */
.acgrid.pan{cursor:grabbing;scroll-snap-type:none;user-select:none}
.acgrid img{-webkit-user-drag:none;user-drag:none}
.accard{flex:0 0 272px;scroll-snap-align:start;display:block;background:#fff;
  border:1px solid #e7e9ec;border-radius:14px;
  overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
.accard:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px)}

.accnav{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.acdots{display:flex;gap:8px}
.acdots span{width:9px;height:9px;border-radius:50%;background:#cfd3d8}
.acdots span.on{background:#111}
.acflechas{display:flex;gap:10px}
.acfl{width:46px;height:46px;border-radius:50%;border:0;background:#eef0f3;color:#111;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0 0 3px;transition:background .15s,color .15s}
.acfl:hover{background:#111;color:#fff}

.acthumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#17181c 0%,#2a2c33 55%,#3a1114 100%)}
/* La miniatura real del video tapa todo el bloque; hqdefault viene 4:3 asi que
   object-fit recorta las franjas negras de arriba y abajo. El play dibujado
   queda flotando encima. */
.acthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acthumb .acplay{position:relative;z-index:1}
.acplay{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.65);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:18px;padding-left:4px}
.actm{position:absolute;left:12px;bottom:10px;color:rgba(255,255,255,.85);
  font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em}

.acbody{padding:16px 18px 18px}
.actags{display:flex;align-items:center;gap:10px;color:#666;font-size:14px;margin-bottom:8px}
.actags i{width:1px;height:14px;background:#d7dade}
.acbody h3{margin:0 0 8px;font-size:19px;line-height:1.3}
.acbody p{margin:0 0 14px;color:#555;font-size:15px;line-height:1.4}
.acmeta{display:flex;gap:8px}
.acmeta span{border:1px solid #dfe2e6;border-radius:8px;padding:5px 10px;font-size:13px;color:#444}

/* ---- Cursos maquina por maquina ----
   Una celda por tecnologia (las ramas raiz del filtro de Maquinas), en el
   mismo carrusel que los cursos. La foto de la rama va entera (contain),
   como en el filtro; sin foto, el bloque gris con FOTO. Las celdas con
   videos repartidos son links (a.mqcel): mismo levantar de tarjeta que los
   cursos al pasar el mouse, y el contador rojo de videos abajo. */
.acmaqsec{padding-top:0}
.acmaqt{font-size:30px;margin:0 0 22px}
.mqcel{flex:0 0 208px;scroll-snap-align:start;background:#f6f7f9;border-radius:14px;
  padding:20px 16px 18px;text-align:center}
a.mqcel{display:block;color:inherit;text-decoration:none;
  transition:box-shadow .15s,transform .15s}
a.mqcel:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.mqvids{display:block;margin-top:7px;color:var(--red,#e11b22);font-size:13px;font-weight:600}
.mqcf{height:130px;border-radius:10px;margin-bottom:14px;
  background-position:center;background-size:contain;background-repeat:no-repeat}
.mqcf.sin{display:flex;align-items:center;justify-content:center;background:#ececef;
  color:#9aa0a8;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em}
.mqcel b{font-size:16px;line-height:1.3;display:block}

/* ---- Ficha de curso ---- */
.acficha{background:#fff}
.acvolver{display:inline-block;margin-bottom:22px;color:#555;text-decoration:none}
.acvolver:hover{color:var(--red,#e11b22)}
.acdos{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
.actags.fich span{background:#eef0f3;border-radius:6px;padding:5px 10px;font-size:13px;color:#333}
.acmain h1{font-size:36px;line-height:1.15;margin:12px 0 6px}
.acsub{color:#555;font-size:18px;margin:0 0 14px}
.acresumen{display:flex;gap:18px;color:#333;font-weight:600;margin-bottom:22px}
.acvideo{position:relative;aspect-ratio:16/9;border-radius:14px;display:flex;gap:14px;
  align-items:center;justify-content:center;margin-bottom:30px;
  background:linear-gradient(135deg,#17181c 0%,#2a2c33 55%,#3a1114 100%)}
.acvideo .actm{position:static;font-size:14px}
/* Con video real el iframe llena el bloque y hereda las puntas redondeadas. */
.acvideo.conyt{background:#000;overflow:hidden;display:block}
.acvideo.conyt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.acmain h2{font-size:24px;margin:26px 0 10px}
.acapr{margin:0;padding-left:20px;color:#333;line-height:1.7}
.aclecs{border:1px solid #e7e9ec;border-radius:12px;overflow:hidden}
.aclec{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid #eef0f2}
.aclec:first-child{border-top:0}
.aclec .n{width:26px;height:26px;border-radius:50%;background:#eef0f3;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:0 0 auto}
.aclec .k{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#777;white-space:nowrap}
.aclec .t{font-weight:500}
/* Las lecciones que ya tienen video son links: se pintan al pasar el mouse y
   muestran el play chiquito a la derecha. Las demas son filas de texto. */
a.aclec.conlink{color:inherit;text-decoration:none}
a.aclec.conlink:hover{background:#f8f9fb}
a.aclec.conlink:hover .t{color:var(--red,#e11b22)}
.aclec .ir{margin-left:auto;color:var(--red,#e11b22);font-size:13px}

.aclado{background:#f6f7f9;border-radius:14px;padding:22px 22px 24px}
.aclado h3{margin:0 0 14px;font-size:18px}
.acdet{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #e6e8ec}
.acdet b{font-weight:600;color:#444}
.acbio{margin:16px 0 0;color:#555;font-size:14px;line-height:1.5}

@media(max-width:900px){
  .acdos{grid-template-columns:1fr}
  .achead{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .achero{padding:52px 0 40px}
  .acbuscar{padding:12px 18px}
  .acpills{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .accard{flex-basis:80%}
  .mqcel{flex-basis:46%}
  .acfl{width:42px;height:42px}
}

/* Cartel central "Tu video ya empezo / Hace clic para escuchar": el video
   corre de fondo muteado y en loop; al tocar el cartel (o el video) arranca
   de cero con sonido y aparecen los controles. Rojo LASER76 semitransparente
   para que se vea el video atras. */
.acadhero .lapscr video{object-fit:cover;cursor:pointer}
.acmute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:min(300px,62%);padding:18px 16px 16px;border-radius:8px;
  border:1px solid rgba(255,255,255,.55);background:rgba(217,28,38,.82);color:#fff;
  font-family:"IBM Plex Sans",sans-serif;cursor:pointer;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.35);backdrop-filter:blur(2px);
  animation:acmute 2.2s ease-in-out infinite}
.acmute:hover{background:rgba(185,20,28,.9)}
.acmute b{font-size:18px;font-weight:600;line-height:1.2}
.acmute span{font-size:17px;font-weight:600;line-height:1.2}
.acmute svg{display:block}
@keyframes acmute{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
@media(max-width:560px){
  .acmute{gap:5px;padding:12px 10px 11px;width:min(240px,70%)}
  .acmute b,.acmute span{font-size:14px}
  .acmute svg{width:38px;height:38px}
}

/* ---- La notebook del portal CLUB76 ----
   Es LA MISMA notebook del video de Parametros 76 del portal (MacBook de
   tapa negra y base plateada). No se dibuja con CSS: es la imagen real de
   esa notebook, recortada del video, que vive en notebook76.css (importado
   arriba) como fondo de .lapbody. El video (.lapscr) va encima, justo sobre
   la pantalla negra de la imagen.
   Las medidas de la pantalla estan en % de la imagen (920x558): si algun dia
   se cambia la imagen, hay que volver a medirlas.
   Solo pisa la notebook de la academia: la de la Home no cambia. */
.acadhero .lap{max-width:700px;padding:0}
.acadhero .lapbody{position:relative;aspect-ratio:920/558;border:0;
  border-radius:0;padding:0;box-shadow:none}
.acadhero .lapcam,.acadhero .lapbase{display:none}
.acadhero .lapscr{position:absolute;left:12.52%;right:12.43%;top:5.01%;bottom:24.5%;
  aspect-ratio:auto;border-radius:0;background:#000}
.acadhero .lapcap{margin-top:4px}
@media(max-width:1000px){
  .acadhero .lap{max-width:560px;margin:0 auto}
}