/* ==================================================================
   KAPAY · Features
   ------------------------------------------------------------------
   Hoja propia de features.html. Depende de css/home.css: de ahi salen
   los tokens, la escala tipografica, los botones y el pie en navy. Aqui
   solo vive lo que es de esta pagina — la rejilla de tutoriales y el
   lightbox — con prefijo .kf-.

   Sustituye a css/tutorials.css, que vestia la version anterior de esta
   misma rejilla y ya no se carga.

   El mecanismo NO cambia: js/tutorials.js sigue pintando las tarjetas y
   creando el iframe al pulsar (y destruyendolo al cerrar, para que
   YouTube no se descargue de entrada ni se quede sonando por detras).
   Lo unico que cambio en el JS fue el marcado de la tarjeta: fuera los
   iconos de Material y fuera la segunda linea de texto, que ahora solo
   se ve en el lightbox.
   ================================================================== */

/* ── Cabecera de pagina ────────────────────────────────────────────
   Mas contenida que el hero de la home: aqui el visitante ya sabe
   donde esta y viene a ver los videos, no a que le convenzan. */
.kf-hero{ padding:152px 0 0; }
.kf-hero .kh-lead{ margin-top:24px; }

/* El flujo operativo de 01_KAPAY_MASTER.md §8. Va en la cabecera y no
   en una seccion aparte: enmarca los once videos como una cadena, que
   es lo que pide 06_WEBSITE_MARKETING §7 (conectar funciones con
   flujos reales), sin gastar una pantalla entera en decirlo. */
.kf-flow{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
  margin:40px 0 0; padding-top:32px; border-top:1px solid var(--kh-rule);
  font-size:14px; font-weight:600; letter-spacing:-0.01em;
}
.kf-flow em{
  width:100%; margin:0 0 4px; font-style:normal;
  font-size:12px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--kh-ink-34);
}
.kf-flow b{ font-weight:600; color:var(--kh-ink); }
.kf-flow i{ font-style:normal; color:var(--kh-ink-34); }

/* ── Rejilla de tutoriales ─────────────────────────────────────────*/
.kf-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(296px,1fr));
  gap:52px 32px; margin:0;
}

.tut-card{ display:flex; flex-direction:column; }

/* Miniatura. 16:9 es el lienzo en el que YouTube mete todos los videos,
   asi que la caja no recorta nada. */
.tut-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:12px; border:1px solid var(--kh-rule);
  background:var(--kh-paper);
}
/* --crop lo calcula js/tutorials.js midiendo cada miniatura: es la
   ampliacion justa para dejar fuera las franjas negras que mete YouTube
   cuando la grabacion no es exactamente 16:9. Vale 1 mientras no se mide.

   El zoom del hover lo MULTIPLICA, no lo pisa. Escribir aqui un
   `scale(1.025)` a secas anula el recorte y las franjas vuelven. */
.tut-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center; transform:scale(var(--crop,1));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tut-card.is-ready:hover .tut-thumb img,
.tut-card.is-ready:focus-within .tut-thumb img{
  transform:scale(calc(var(--crop,1) * 1.03));
}

/* El numero del modulo, sobre la imagen. Pastilla blanca y no texto a
   pelo: las miniaturas son fotogramas de la app y el contraste cambia
   de una a otra. */
.tut-num{
  position:absolute; left:12px; top:12px; z-index:2;
  display:inline-flex; align-items:center; height:24px; padding:0 9px;
  border-radius:7px; background:rgba(255,255,255,.94);
  font-size:11.5px; font-weight:600; letter-spacing:0.08em;
  color:var(--kh-ink); font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(22,33,62,.12);
}

/* Boton de reproducir. Visible siempre — dice que la tarjeta es un
   video — y se refuerza al pasar por encima. */
.tut-play{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border:none; background:rgba(22,33,62,.06); cursor:pointer; padding:0;
  transition:background .2s;
}
.tut-play::before{
  content:''; position:absolute; width:56px; height:56px; border-radius:56px;
  background:rgba(255,255,255,.94); box-shadow:0 2px 12px rgba(22,33,62,.18);
  transition:transform .2s, background .2s;
}
.tut-play svg{ position:relative; fill:var(--kh-ink); transition:fill .2s; }
.tut-card.is-ready:hover .tut-play{ background:rgba(22,33,62,.14); }
.tut-card.is-ready:hover .tut-play::before{ transform:scale(1.07); background:#fff; }
.tut-play:focus-visible{ outline:2px solid var(--kh-accent); outline-offset:3px; }

/* ── Cuerpo de la tarjeta ──────────────────────────────────────────
   Titulo y una sola linea. La segunda (m.desc) se guarda para el
   lightbox: once tarjetas con dos parrafos cada una se hacian largas
   y repetitivas, el mismo problema que tenia la home. */
.tut-body{ padding:18px 2px 0; }
.tut-body h3{
  font-family:var(--kh-sans); font-size:19px; font-weight:600;
  letter-spacing:-0.015em; line-height:1.3; color:var(--kh-ink); margin:0;
}
.tut-lead{ font-size:15.5px; line-height:1.55; color:var(--kh-ink-60); margin:7px 0 0; }

/* Modulo sin video grabado. Hoy no hay ninguno, pero js/tutorials.js
   admite `videoId` vacio y hay que vestirlo. */
.tut-thumb-soon{
  display:flex; align-items:center; justify-content:center;
  border-style:dashed; border-color:rgba(22,33,62,.16);
}
.tut-soon-note{
  font-size:12px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--kh-ink-34);
}
.tut-card.is-soon .tut-body h3,
.tut-card.is-soon .tut-lead{ color:var(--kh-ink-45); }

/* ── Lightbox ──────────────────────────────────────────────────────*/
body.tut-lock{ overflow:hidden; }

.tut-lb{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:32px;
  background:rgba(11,17,33,.82); backdrop-filter:blur(3px);
}
.tut-lb[hidden]{ display:none; }
.tut-lb-dialog{
  width:100%; max-width:1060px; background:#fff; border-radius:16px;
  overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.4);
  display:flex; flex-direction:column; max-height:100%;
}
.tut-lb-top{
  display:flex; align-items:center; gap:14px;
  padding:16px 16px 16px 22px; border-bottom:1px solid var(--kh-rule);
}
.tut-lb-num{
  font-size:11.5px; font-weight:600; letter-spacing:0.1em;
  color:var(--kh-ink-34); font-variant-numeric:tabular-nums;
}
.tut-lb-top h3{
  flex:1; min-width:0; margin:0;
  font-family:var(--kh-sans); font-size:18px; font-weight:600;
  letter-spacing:-0.015em; color:var(--kh-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tut-lb-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:9px;
  border:1px solid var(--kh-rule); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:border-color .16s, background .16s;
}
.tut-lb-btn svg{ fill:var(--kh-ink-60); transition:fill .16s; }
.tut-lb-btn:hover{ border-color:rgba(22,33,62,.28); background:var(--kh-paper); }
.tut-lb-btn:hover svg{ fill:var(--kh-ink); }
.tut-lb-btn:focus-visible{ outline:2px solid var(--kh-accent); outline-offset:2px; }
.tut-lb-btn[hidden]{ display:none; }

.tut-lb-frame{ position:relative; aspect-ratio:16/9; background:#000; flex-shrink:0; }
.tut-lb-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:none; display:block;
}

.tut-lb-foot{ padding:20px 22px 24px; overflow-y:auto; }
.tut-lb-lead{
  font-size:17px; font-weight:600; letter-spacing:-0.015em;
  color:var(--kh-ink); margin:0;
}
.tut-lb-desc{
  font-size:15.5px; line-height:1.6; color:var(--kh-ink-60);
  margin:8px 0 0; max-width:70ch;
}

/* ── Responsive ────────────────────────────────────────────────────*/
@media (max-width:860px){
  .kf-hero{ padding:126px 0 0; }
  .kf-grid{ gap:40px 24px; }
  .tut-lb{ padding:0; }
  .tut-lb-dialog{ max-width:none; height:100%; border-radius:0; }
  /* El pie del lightbox crece y el video se queda arriba, fijo. */
  .tut-lb-foot{ flex:1; }
}
@media (max-width:640px){
  .kf-grid{ grid-template-columns:1fr; }
  .kf-flow{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  .tut-thumb img, .tut-play, .tut-play::before, .tut-lb-btn{ transition:none; }
  /* se quita el zoom del hover, pero NO el recorte de las franjas negras */
  .tut-card.is-ready:hover .tut-thumb img{ transform:scale(var(--crop,1)); }
}