:root{--maxw:1100px;--bg:#0B0F19;--panel:#0F1629;--panel-2:#111827;--border:#1F2937;--text:#E5E7EB;--muted:#9CA3AF;--primary:#00ADB5;--accent:#7C3AED; --logo-size:40px;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:40;background:rgba(11,15,25,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.brand{font-weight:800;letter-spacing:.2px;color:#fff}
nav ul{display:flex;gap:14px;margin:0;padding:0;list-style:none}nav a{color:#E5E7EB}.cta{background:var(--primary);color:#0b0f19;padding:8px 14px;border-radius:10px;border:1px solid #08929a;font-weight:600}
.cta:hover{opacity:.95;text-decoration:none}.hero{background:linear-gradient(135deg,#0B0F19 0%,#0F1629 50%,#0B0F19 100%);border-bottom:1px solid var(--border)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:56px 0}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
h1{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:0 0 10px;color:#fff}h2{font-size:clamp(22px,3vw,28px);margin-top:36px;border-left:4px solid var(--accent);padding-left:10px}
h3{font-size:20px;margin-top:22px;color:#fff}.small{color:var(--muted);font-size:14px}.badges{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.badge{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tag{font-size:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:4px 8px;color:var(--muted);display:inline-block;margin-right:6px;margin-top:4px}
figure{margin:0}figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#0b0f19}.msg{padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--muted)}
.notice{background:#1B1F2B;border-left:4px solid var(--primary);padding:12px 14px;margin:18px 0}footer{margin-top:48px;border-top:1px solid var(--border);background:#0B0F19}
.footer-inner{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:22px 0}.kicker{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.table{width:100%;border-collapse:collapse}.table th,.table td{border:1px solid var(--border);padding:8px;text-align:left}hr{border:0;border-top:1px solid var(--border);margin:24px 0}
@media (max-width:900px){
  .hero .wrap,
  .grid3,
  .grid2{
    grid-template-columns: 100%;
  }
}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.2px}
.brand img{height:28px;width:auto;display:block}
.brand-title{font-size:18px;line-height:1;color:#fff}
@media (max-width:900px){ .brand-title{display:none} } /* opcional: oculta texto en móviles */


/* ==== Preset pages (bundles) — add at the end ==== */
.lead{color:#cfd5e1;font-size:1.05rem;margin:12px 0 18px}

.breadcrumb{margin:18px 0 8px;color:var(--muted);font-size:.9rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:#fff;text-decoration:none}

.preset-hero{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;margin:16px 0}
.preset-hero img{border-radius:12px}
.preset-hero figcaption{color:var(--muted);font-size:.9rem;margin-top:8px}

/* Botón genérico para “Download” (coexiste con tu .cta) */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid transparent;transition:.18s ease}
.btn-primary{background:linear-gradient(90deg,var(--primary),#14B8A6);color:#001014}
.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.05);text-decoration:none}

/* Header usado en las páginas nuevas (tu CSS ya estilaba <header>, esto añade soporte a .site-header por si no coincide) */
.site-header{position:sticky;top:0;z-index:40;background:rgba(11,15,25,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}

/* Footer compacto para esas páginas */
.site-footer .container{padding:20px 0;color:var(--muted);font-size:.9rem}

/* Meta info (categoría/tags/licencia) */
.meta{margin-top:18px;color:var(--muted);font-size:.95rem}

/* Responsive pequeño extra */
@media (max-width: 600px){
  .preset-hero{padding:10px}
  .btn{width:100%;text-align:center}
}
nav a.active{ color:#fff; text-decoration:none; border-bottom:2px solid var(--primary); padding-bottom:2px }

.lightbox-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:70}
.lightbox-backdrop.open{display:flex}
.lightbox-inner{max-width:min(92vw,1200px);max-height:88vh}
.lightbox-inner img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#0b0f19}


/* === Mobile nav === */
.menu-toggle{display:none;background:transparent;border:1px solid var(--border);
  color:var(--text);padding:8px;border-radius:10px;line-height:0}
.menu-toggle:focus{outline:2px solid var(--primary);outline-offset:2px}

@media (max-width:900px){
  .navbar{gap:10px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  /* contenedor nav como panel desplegable bajo el header */
  #site-nav{
    position:fixed;left:0;right:0;top:56px; /* ajusta si tu header es más alto */
    background:var(--panel);border-bottom:1px solid var(--border);
    display:none;z-index:39;
  }
  #site-nav[data-open="true"]{display:block}
  #site-nav ul{display:flex;flex-direction:column;gap:0;margin:0;padding:8px}
  #site-nav li{border-top:1px solid var(--border)}
  #site-nav li:first-child{border-top:0}
  #site-nav a{display:block;padding:12px 14px;color:var(--text)}
  body.nav-open{overflow:hidden} /* evita scroll de fondo con menú abierto */
}
/* --- FIX: que el header siempre quede clicable --- */
header, #site-header, .navbar{
  position: sticky; top: 0; z-index: 9999;
}
.navbar a, .navbar *{ pointer-events: auto !important; }

/* ==== PresetLoom: Category grid (fallback + grid) ==== */
/* Fallback FLEX por si algo no soporta Grid */
.grid-cards{ display:flex; flex-wrap:wrap; margin:-8px; }
.grid-cards .card{ width:calc(25% - 16px); margin:8px; }
@media (max-width:1024px){ .grid-cards .card{ width:calc(33.333% - 16px); } }
@media (max-width:640px){ .grid-cards .card{ width:calc(50% - 16px); } }
@media (max-width:420px){ .grid-cards .card{ width:calc(100% - 16px); } }

/* Mejora: usa CSS Grid cuando esté disponible */
@supports (display:grid){
  .grid-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    grid-gap:16px; /* compat linters antiguos */
    gap:16px;
    align-items:stretch;
    margin:0; /* anula fallback */
  }
  .grid-cards .card{ width:auto; margin:0; }
}

/* Tarjetas DE LISTADO (acotadas al grid para no pisar tu .card global) */
.grid-cards .card{
  display:block; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; overflow:hidden; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color:#0b0f19; /* texto oscuro dentro de tarjeta blanca */
}
.grid-cards .card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); border-color:#d0d7de; }
.grid-cards .card figure{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.grid-cards .card img{ width:100%; height:100%; object-fit:cover; display:block; }
.grid-cards .card h3{ font-size:16px; margin:10px 12px 4px; color:#0b0f19; }
.grid-cards .card p.small{ margin:0 12px 8px; color:#64748b; }
.grid-cards .tag{ display:inline-block; margin:0 6px 10px 12px; padding:2px 8px; border-radius:999px; font-size:12px; background:#f1f5f9; color:#0b0f19; }