/* Páginas de módulo — se carga después de site.css.
   Reutiliza el vocabulario visual de la landing: bandas, .wrap, .head, .btn. */

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.crumb{background:var(--n-50);border-bottom:1px solid var(--border-default)}
.crumb-in{display:flex;align-items:center;gap:8px;padding:11px 0;font:var(--fw-regular) 12px/1 var(--font-ui);color:var(--n-500)}
.crumb-in a{color:var(--n-600);text-decoration:none}
.crumb-in a:hover{color:var(--tsi-slate)}
.crumb-in i{font-size:11px;color:var(--n-400)}
.crumb-in b{font-weight:var(--fw-semibold);color:var(--tsi-slate)}

/* ── Hero de módulo ─────────────────────────────────────────────────────── */
.mod-hero{background:var(--tsi-slate-darker);color:#fff;padding:44px 0 40px}
.mod-hero-in{display:grid;grid-template-columns:minmax(0,1fr) 439px;gap:48px;align-items:center}
.mod-tag{display:inline-flex;align-items:center;gap:8px;font:var(--fw-semibold) 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--tsi-orange);margin:0 0 12px}
.mod-tag img{width:18px;height:18px}
.mod-hero h1{font:var(--fw-semibold) 44px/1.08 var(--font-display);letter-spacing:-.03em;color:#fff;margin:0 0 14px;text-wrap:balance}
.mod-hero .lede{font:var(--fw-regular) 16px/1.6 var(--font-ui);color:var(--tsi-slate-200);margin:0 0 22px;max-width:56ch}
.mod-hero .hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.mod-splash{border:1px solid #5c8899;background:#fff;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.mod-splash img{display:block;width:100%;height:auto}

/* ── Fichas de funcionalidad ────────────────────────────────────────────── */
.func{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.func-g{background:#fff;border:1px solid var(--border-default);padding:18px 20px 20px}
.func-g h3{display:flex;align-items:center;gap:9px;font:var(--fw-semibold) 13px/1.2 var(--font-ui);letter-spacing:.02em;text-transform:uppercase;color:var(--tsi-slate);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border-default)}
.func-g h3 i{font-size:15px;color:var(--tsi-orange)}
.func-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.func-g li{font:var(--fw-regular) 13px/1.5 var(--font-ui);color:var(--n-700);padding-left:14px;position:relative}
.func-g li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--tsi-slate-400)}
.func-g li b{font-weight:var(--fw-semibold);color:var(--tsi-slate)}

/* ── CTA intermedio ────────────────────────────────────────────────────── */
.mod-cta{background:var(--tsi-orange);padding:40px 0}
.mod-cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.mod-cta-in>div{flex:1 1 420px;min-width:0}
.mod-cta h2{font:var(--fw-semibold) 38px/1.1 var(--font-display);letter-spacing:-.03em;color:var(--n-900);margin:0 0 10px}
.mod-cta p{font:var(--fw-regular) 15px/1.6 var(--font-ui);color:#5a3400;margin:0;max-width:60ch}
.mod-cta .btn{flex:0 0 auto}

/* ── How to: cuadrícula de videos ───────────────────────────────────────── */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.vid{display:block;text-align:left;background:#fff;border:1px solid var(--border-strong);padding:0;cursor:pointer;font:inherit;transition:border-color .12s,box-shadow .12s}
.vid:hover{border-color:var(--tsi-slate-400);box-shadow:0 4px 14px rgba(38,61,70,.1)}
.vid-thumb{position:relative;aspect-ratio:16/9;background:var(--tsi-slate-darker);display:flex;align-items:center;justify-content:center;overflow:hidden}
.vid-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(38,61,70,.55),transparent 60%)}
.vid-thumb i{position:relative;z-index:1;font-size:34px;color:#fff;opacity:.92}
.vid:hover .vid-thumb i{color:var(--tsi-orange);opacity:1}
.vid-dur{position:absolute;z-index:1;right:8px;bottom:8px;font:var(--fw-semibold) 11px/1 var(--font-mono);color:#fff;background:rgba(38,61,70,.85);padding:4px 6px}
.vid-body{display:block;padding:14px 16px 16px}
.vid-body b{display:block;font:var(--fw-semibold) 14px/1.35 var(--font-ui);color:var(--tsi-slate);margin-bottom:5px}
.vid-body span{display:block;font:var(--fw-regular) 12px/1.55 var(--font-ui);color:var(--n-600)}
.vid-steps{margin:8px 0 0;padding-left:18px;font:var(--fw-regular) 12px/1.55 var(--font-ui);color:var(--n-500)}

/* ── Cuadrícula de capturas ─────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;grid-auto-rows:1fr}
.shot-cell{display:flex;flex-direction:column;padding:0;background:#fff;border:1px solid var(--border-strong);cursor:pointer;text-align:left;font:inherit;transition:border-color .12s,box-shadow .12s}
.shot-cell:hover{border-color:var(--tsi-slate-400);box-shadow:0 4px 14px rgba(38,61,70,.1)}
.shot-cell .im{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--n-100);border-bottom:1px solid var(--border-default)}
.shot-cell .im img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.shot-cell .empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(135deg,var(--n-100),var(--n-100) 8px,var(--n-50) 8px,var(--n-50) 16px);color:var(--n-500)}
.shot-cell .empty i{font-size:20px}
.shot-cell .empty span{font:var(--fw-regular) 11px/1.4 var(--font-ui);font-style:italic}
.shot-cell .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:rgba(38,61,70,.92);color:#fff;font:var(--fw-semibold) 13px/1.3 var(--font-ui)}
.shot-cell:hover .cap{background:var(--tsi-slate)}
.shot-cell p{flex:1 1 auto;margin:0;padding:10px 12px;font:var(--fw-regular) 12px/1.5 var(--font-ui);color:var(--n-600)}

/* ── Reportería ─────────────────────────────────────────────────────────── */
.reps{border:1px solid var(--border-default);border-collapse:collapse;width:100%;background:#fff}
.reps caption{caption-side:top;text-align:left;font:var(--fw-regular) 12px/1.5 var(--font-ui);color:var(--n-600);padding:0 0 10px}
.reps th{background:var(--n-100);border-bottom:1px solid var(--border-strong);font:var(--fw-semibold) 11px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--n-600);text-align:left;padding:8px 12px}
.reps td{border-bottom:1px solid var(--border-default);padding:7px 12px;font:var(--fw-regular) 13px/1.45 var(--font-ui);color:var(--n-700);vertical-align:top}
.reps tbody tr:hover td{background:var(--tsi-slate-100)}
.reps td.code{font:var(--fw-regular) 12px/1.45 var(--font-mono);color:var(--n-500);white-space:nowrap}
.reps td b{font-weight:var(--fw-semibold);color:var(--tsi-slate)}
.reps-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;background:var(--tsi-slate-100);border:1px solid var(--border-default);font:var(--fw-regular) 13px/1.55 var(--font-ui);color:var(--n-700)}
.reps-note i{color:var(--tsi-orange);font-size:15px;margin-top:1px}

/* ── Flybox (lightbox) ──────────────────────────────────────────────────── */
.fly{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:32px;background:rgba(19,32,37,.82)}
.fly.open{display:flex}
.fly-box{background:#fff;border:1px solid var(--tsi-slate-400);max-width:1100px;width:100%;max-height:100%;display:flex;flex-direction:column}
.fly-head{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border-default);background:var(--n-100)}
.fly-head b{font:var(--fw-semibold) 14px/1.3 var(--font-ui);color:var(--tsi-slate)}
.fly-head button{margin-left:auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border-strong);color:var(--n-600);cursor:pointer}
.fly-head button:hover{background:var(--tsi-slate-100);color:var(--tsi-slate)}
.fly-body{padding:14px;overflow:auto;background:var(--n-50)}
.fly-body img{display:block;max-width:100%;margin:0 auto;border:1px solid var(--border-strong);background:#fff}
.fly-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;background:var(--tsi-slate-darker);color:var(--tsi-slate-200);text-align:center;padding:24px}
.fly-pending i{font-size:32px;color:var(--tsi-slate-400)}
.fly-pending b{font:var(--fw-semibold) 15px/1.3 var(--font-ui);color:#fff}
.fly-pending span{font:var(--fw-regular) 13px/1.6 var(--font-ui);max-width:46ch}

/* ── Navegación entre módulos ───────────────────────────────────────────── */
.mod-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border-default);border:1px solid var(--border-default)}
.mod-nav a{display:flex;align-items:center;gap:9px;background:#fff;padding:11px 13px;text-decoration:none;font:var(--fw-semibold) 12px/1.3 var(--font-ui);color:var(--tsi-slate)}
.mod-nav a img{width:16px;height:16px}
.mod-nav a .g{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--tsi-slate-400);font-size:14px}
.mod-nav a:hover{background:var(--tsi-slate-100)}
.mod-nav a[aria-current]{background:var(--tsi-slate-100);box-shadow:inset 3px 0 0 var(--tsi-orange)}

@media (max-width:980px){
  .mod-hero-in{grid-template-columns:1fr;gap:28px}
  .mod-hero h1{font-size:34px}
  .vids,.shots{grid-template-columns:repeat(2,1fr)}
  .mod-nav{grid-template-columns:repeat(2,1fr)}
  .mod-cta h2{font-size:30px}
}
@media (max-width:620px){
  .vids,.shots{grid-template-columns:1fr}
  .func{grid-template-columns:1fr}
  .mod-nav{grid-template-columns:1fr}
}