/* contasuma - estilos propios de tutoriales
   Generado en FASE 1 desde el CSS embebido. No editar a mano sin
   revisar las 17 paginas: este archivo es compartido. */

h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15}
.mono{font-family:'IBM Plex Mono',monospace}
/* ── Nav ─────────────────────────── */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,251,248,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* ── Hero ────────────────────────── */
.hero{padding:72px 0 48px;position:relative;overflow:hidden}
.hero-inner{position:relative}
.hero-inner>*{max-width:760px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono';font-size:.8rem;font-weight:500;
  color:var(--emerald-dark);background:var(--emerald-soft);border:1px solid #BBEBD5;
  padding:6px 14px;border-radius:999px;margin-bottom:20px;
}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.hero p{font-size:1.15rem;color:var(--ink-soft);max-width:600px;margin-bottom:32px}
/* búsqueda */
.search-wrap{max-width:640px}
.search-field{position:relative;display:block}
.search{
  width:100%;padding:16px 20px 16px 52px;font-size:1.05rem;font-family:'Inter';
  border:1.5px solid var(--line);border-radius:var(--radius);background:var(--card);
  transition:border-color .15s, box-shadow .15s;
}
.search:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px rgba(14,154,100,.12)}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--ink-soft)}
.search-hint{margin-top:10px;font-size:.85rem;color:var(--ink-soft)}
.search-hint button{
  background:none;border:none;cursor:pointer;font:inherit;
  color:var(--emerald-dark);font-weight:600;text-decoration:underline dotted;padding:0 2px;
}
/* ── Filtros ─────────────────────── */
.filters{padding-top:8px;padding-bottom:32px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filter-label{font-family:'IBM Plex Mono';font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.chip{
  padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);font-weight:500;font-size:.9rem;cursor:pointer;
  transition:all .15s;font-family:'Inter';color:var(--ink);
}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.active .chip-count{color:var(--amber)}
.chip-count{font-family:'IBM Plex Mono';font-size:.78rem;color:var(--ink-soft);margin-left:6px}
.chip:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
/* ── Grid de videos ───────────────── */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.result-count{font-family:'IBM Plex Mono';font-size:.85rem;color:var(--ink-soft)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:64px}
.video-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.video-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(14,27,44,.10)}
.video-card:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.thumb{
  aspect-ratio:16/9;position:relative;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--t1),var(--t2));
}
.thumb .play{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;transition:transform .18s;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.video-card:hover .play{transform:scale(1.1)}
.play svg{margin-left:3px}
.thumb .dur{
  position:absolute;right:10px;bottom:10px;
  font-family:'IBM Plex Mono';font-size:.75rem;font-weight:500;
  background:rgba(14,27,44,.85);color:#fff;padding:3px 8px;border-radius:6px;
}
.thumb .tag{
  position:absolute;left:10px;top:10px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.92);color:var(--ink);padding:4px 10px;border-radius:6px;
}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:1.05rem;font-weight:600;font-family:'Inter'}
.card-body p{font-size:.88rem;color:var(--ink-soft);flex:1}
.card-meta{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-soft);font-family:'IBM Plex Mono'}
.level-dot{width:8px;height:8px;border-radius:50%}
.level-basico .level-dot{background:var(--emerald)}
.level-intermedio .level-dot{background:var(--amber)}
.level-avanzado .level-dot{background:var(--red)}
.empty{
  grid-column:1/-1;text-align:center;padding:64px 24px;
  border:1.5px dashed var(--line);border-radius:var(--radius);
}
.empty h3{margin-bottom:8px}
.empty p{color:var(--ink-soft);margin-bottom:20px}
/* ── Ruta de aprendizaje ──────────── */
.path{background:var(--ink);color:#fff;padding:72px 0}
.path .section-head h2{color:#fff}
.path-sub{color:#9FB0C6;max-width:560px;margin-top:6px}
.path-list{margin-top:40px;display:flex;flex-direction:column}
.path-item{
  display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center;
  padding:22px 8px;border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .15s;cursor:pointer;border-radius:8px;
}
.path-item:hover{background:rgba(255,255,255,.05)}
.path-num{font-family:'IBM Plex Mono';font-size:1.6rem;color:var(--amber);font-weight:500}
.path-item h3{font-size:1.15rem;font-weight:600;margin-bottom:2px}
.path-item p{font-size:.9rem;color:#9FB0C6}
.path-dur{font-family:'IBM Plex Mono';font-size:.85rem;color:#9FB0C6;white-space:nowrap}
.path-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 8px;font-family:'IBM Plex Mono';
  border-top:2px solid var(--amber);margin-top:-1px;
}
.path-total strong{color:var(--amber);font-size:1.1rem}
/* ── CTA ─────────────────────────── */
.cta{padding:88px 0;text-align:center}
.cta h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.cta p{color:var(--ink-soft);font-size:1.1rem;max-width:520px;margin:0 auto 32px}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
  .path-item{grid-template-columns:52px 1fr;row-gap:4px}
  .path-dur{grid-column:2}
  .nav-cta .btn-ghost{display:none}
}

/* El original de esta pagina evita que el resaltado del hero se parta.
   Las paginas de rubro NO lo llevan: alli romperia la rejilla del hero. */
.hero h1 em{white-space:nowrap}