/* Academia 76 — portada y ficha de curso.

   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}
}