/* Índice operativo del Toolkit. */
.kit-page  { background:var(--bg); min-height:0; color:var(--text-1);  position:relative; }
.kit-page * { box-sizing:border-box; }
.kit-page::before {
  display:none;
}
.kit-page > * { position:relative; z-index:1; }

/* Header partial — styles ahora viven en _kit-header.ejs (responsive incluido). */

/* Hero — una introducción directa, sin textura ni efectos decorativos. */
.kit-hero {
  background:#1F0046;
  color:#fff; padding:38px 16px;
}
.kit-hero-inner { max-width:1180px; margin:0 auto; }
.kit-hero h1 { max-width:780px; font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.12; margin:0 0 12px; font-weight:700; letter-spacing:-.025em; overflow-wrap:break-word; }
.kit-hero h1 .accent { color:#D7B9FF; }
.kit-hero p { font-size:1rem; line-height:1.55; color:#C8B8E8; max-width:680px; margin:0; font-weight:400; }

/* Herramientas — filas compactas que priorizan el nombre y el uso. */
.kit-grid-wrap { max-width:1180px; margin:0 auto; padding:28px 16px 60px; }
.kit-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.kit-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
  padding:18px; position:relative;
  transition:border-color .15s, background-color .15s;
  display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto auto;
  align-items:start; column-gap:14px; row-gap:4px; text-align:left;
  min-height:126px;
}
.kit-card.live { cursor:pointer; }
.kit-card.live:hover { border-color:#7B2FBE; background:var(--bg); }
.kit-card.coming-soon { opacity:.68; }
.kit-card-link { position:absolute; inset:0; border-radius:10px; }
.kit-card-link.is-disabled { cursor:not-allowed; }

/* Icono funcional, en la misma escala que un control. */
.kit-card-icon {
  width:44px; height:44px; border-radius:8px;
  background:var(--bg);
  color:var(--accent-text, #7B2FBE);
  display:inline-flex; align-items:center; justify-content:center;
  grid-row:1 / 4;
  border:1px solid var(--border);
}
.kit-card-icon svg { width:24px; height:24px; }
.kit-card.live:hover .kit-card-icon { background:#EDE5F8; }

.kit-card-title { grid-column:2; font-size:1rem; font-weight:700; color:var(--text-1); line-height:1.3; margin:0; }
.kit-card-tagline {
  grid-column:2; font-size:.88rem; color:var(--text-2); line-height:1.5; margin:0; font-weight:400;
}

.kit-card-foot { grid-column:2; margin-top:6px; display:flex; align-items:center; gap:8px; }
.kit-pill { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; padding:4px 7px; border-radius:7px; letter-spacing:.02em; }
.kit-pill.live   { background:var(--teal-dim); color:var(--teal); }
.kit-pill.soon   { background:#F5EFFA; color:var(--accent-text, #7B2FBE); }
.kit-card-arrow { color:var(--accent-text, #7B2FBE); opacity:0; transition:opacity .15s, transform .15s; }
.kit-card.live:hover .kit-card-arrow { opacity:1; transform:translateX(2px); }
.kit-card-arrow svg { width:18px; height:18px; }

/* CTA inferior — sin cambios estructurales */
.kit-cta-mp { max-width:1180px; margin:0 auto 60px; padding:22px 24px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.kit-cta-mp-text { flex:1; min-width:240px; line-height:1.4; }
.kit-cta-mp-text strong { display:block; font-size:1.02rem; color:var(--text-1); font-weight:700; margin-bottom:3px; }
.kit-cta-mp-text span { color:var(--text-3); font-size:.88rem; }
.kit-cta-mp-btn { display:inline-flex; align-items:center; gap:8px; background:#7B2FBE; color:#fff; padding:11px 20px; border-radius:10px; text-decoration:none; font-weight:600; font-size:.92rem; transition:background .15s, transform .15s; }
.kit-cta-mp-btn:hover { background:#6A26A8; }

/* Tablet (cards visibles 2-3 cols). Hero un poco más compacto. */
@media (max-width:760px) {
  .kit-hero { padding:28px 16px; }
  .kit-hero h1 { font-size:2rem; }
  .kit-hero p { font-size:.92rem; max-width:100%; }
  .kit-grid-wrap { padding:20px 12px 36px; }
  .kit-grid { grid-template-columns:1fr; gap:8px; }
  .kit-card { min-height:116px; padding:16px; }
  .kit-card-title { font-size:.88rem; }
  .kit-card-tagline { font-size:.88rem; line-height:1.45; }
  .kit-pill { padding:4px 8px;font-size:.62rem; }
  .kit-cta-mp { margin:0 14px 40px; padding:18px; flex-direction:column; align-items:stretch; text-align:left; gap:12px; }
  .kit-cta-mp-text { min-width:0; }
  .kit-cta-mp-btn { justify-content:center; }
}
@media (max-width:340px) {
  .kit-card { min-height:auto; padding:14px; grid-template-columns:42px minmax(0,1fr); gap:3px 10px; }
  .kit-card-icon { width:40px; height:40px; }
}

.kit-tool-workspace .kit-hero.kit-tool-heading { padding:24px 16px 8px; }
.kit-tool-workspace .kit-hero h1 { font-size:2rem; }
.kit-tool-workspace .kit-hero p { color:var(--text-2); }
.kit-task-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.kit-task-nav a { display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border:1px solid var(--border-mid); border-radius:8px; background:var(--bg-card); color:var(--text-2); font-size:.85rem; font-weight:600; }
.kit-task-group { margin-top:28px; scroll-margin-top:24px; }
.kit-task-title { font-size:1.15rem; font-weight:600; color:var(--text-1); margin:0 0 14px; }
.kit-card { grid-template-columns:44px minmax(0,1fr) 18px; grid-template-rows:auto auto; min-height:116px; padding:20px; }
.kit-card-icon { grid-row:1 / 3; }
.kit-card-title { font-weight:600; }
.kit-card-tagline { color:var(--text-2); }
.kit-card-arrow { grid-column:3; grid-row:1; opacity:1; }
.kit-card.live:hover .kit-card-arrow { transform:none; }
.kit-card-link:focus-visible, .kit-task-nav a:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
.kit-card.coming-soon { opacity:1; }
@media(max-width:640px) {
  .kit-tool-workspace .kit-hero h1 { font-size:1.5rem; }
  .kit-grid-wrap { padding-left:16px; padding-right:16px; }
  .kit-card { padding:16px; }
  .kit-card-title { font-size:1rem; }
}