/* ============================================================
   AURORA — p0-catalog.css · Shell del catálogo
   SOLO clases del catálogo (prefijo .cat- y .demo-). Este archivo
   NO define ni modifica ninguna clase .nz-* del sistema: los packs
   son los únicos dueños de sus componentes. Si aquí hubiera un
   .nz-btn, el shell pisaría al pack p4-actions y el catálogo
   mentiría sobre su propio sistema.
   Estilo: sólido, sombras multicapa, numeración naranja, hover con
   vida, entrada escalonada. Cero gradientes, cero glass.
   ============================================================ */

/* ---- Barra superior ---- */
.cat-topbar { position: sticky; top: 0; z-index: var(--nz-z-header); display: flex; align-items: center; gap: var(--nz-space-3); padding: var(--nz-space-2) var(--nz-gutter); background: var(--nz-surface); border-bottom: var(--nz-border-w) solid var(--nz-border-soft); box-shadow: var(--nz-shadow-xs); }
.cat-brandmark { display: flex; align-items: center; gap: var(--nz-space-2); font-weight: var(--nz-peso-titulo); letter-spacing: var(--nz-tracking-tight); color: var(--nz-text); text-decoration: none; }
.cat-brandmark i { width: 8px; height: 8px; border-radius: var(--nz-radius-full); background: var(--nz-brand); display: inline-block; }
.cat-brandmark i + i { background: var(--nz-accent); margin-left: -3px; }
.cat-count { margin-left: auto; font-size: var(--nz-text-xs); color: var(--nz-text-mute); font-variant-numeric: tabular-nums; }
.cat-topbar__tools { display: flex; align-items: center; gap: var(--nz-space-1); }
.cat-icobtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--nz-radius-full); background: var(--nz-bg-inset); color: var(--nz-text); cursor: pointer; font-size: var(--nz-text-md); text-decoration: none; transition: background var(--nz-dur-fast) var(--nz-ease-out), transform var(--nz-dur-fast) var(--nz-ease-out); }
.cat-icobtn:hover { background: var(--nz-brand-tint); transform: scale(1.06); }

/* ---- Nav de categorías ---- */
.cat-nav-pages { display: flex; gap: var(--nz-space-2); overflow-x: auto; padding: var(--nz-space-2) var(--nz-gutter); scrollbar-width: none; }
.cat-nav-pages::-webkit-scrollbar { display: none; }
.cat-nav-pages a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--nz-space-3); border-radius: var(--nz-radius-full); color: var(--nz-text-soft); font-size: var(--nz-text-sm); text-decoration: none; transition: background var(--nz-dur-fast) var(--nz-ease-out), color var(--nz-dur-fast) var(--nz-ease-out); }
.cat-nav-pages a:hover { background: var(--nz-bg-inset); color: var(--nz-text); }
.cat-nav-pages__sep { flex: none; width: var(--nz-border-w-strong); align-self: stretch; margin: var(--nz-space-2) var(--nz-space-1); background: var(--nz-border-soft); }
.cat-nav-pages .cat-nav-pages__sitio { color: var(--nz-brand); font-weight: var(--nz-peso-fuerte); }
.cat-nav-pages .cat-nav-pages__sitio:hover { background: var(--nz-brand-soft); color: var(--nz-brand-strong); }
.cat-nav-pages a[aria-current="page"] { background: var(--nz-brand); color: var(--nz-text-invert); font-weight: var(--nz-peso-fuerte); }

/* ---- Cabecera de página ---- */
.cat-main { padding-block: var(--nz-space-6); position: relative; z-index: 1; }
.cat-pagehead { padding-block: var(--nz-space-6) var(--nz-space-8); }
.cat-pagehead__over { font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); letter-spacing: var(--nz-tracking-caps); text-transform: uppercase; color: var(--nz-brand); }
.cat-pagehead h1 { font-size: var(--nz-text-3xl); line-height: var(--nz-leading-tight); letter-spacing: var(--nz-tracking-tight); margin: var(--nz-space-2) 0 var(--nz-space-3); }
.cat-pagehead h1 em { font-style: normal; color: var(--nz-accent-text); }
.cat-pagehead p { color: var(--nz-text-soft); font-size: var(--nz-text-md); max-width: 44rem; }
.cat-pagehead__stats { display: flex; gap: var(--nz-space-2); flex-wrap: wrap; margin-top: var(--nz-space-3); }

/* ---- Buscador y filtros ---- */
.cat-tools { position: sticky; top: 60px; z-index: var(--nz-z-sticky); display: flex; flex-direction: column; gap: var(--nz-space-2); padding: var(--nz-space-3) 0; background: var(--nz-bg); margin-bottom: var(--nz-space-4); }
.cat-search { position: relative; display: flex; align-items: center; }
.cat-search__icon { position: absolute; left: var(--nz-space-3); color: var(--nz-text-faint); pointer-events: none; }
.cat-search__input { width: 100%; min-height: 44px; padding: 0 var(--nz-space-10) 0 var(--nz-space-8); border: var(--nz-border-w) solid var(--nz-border); border-radius: var(--nz-radius-full); background: var(--nz-surface); color: var(--nz-text); font: inherit; font-size: var(--nz-text-base); }
.cat-search__input::placeholder { color: var(--nz-text-faint); }
.cat-search__input:focus { outline: none; border-color: var(--nz-brand); box-shadow: var(--nz-focus-ring); }
.cat-search__count { position: absolute; right: var(--nz-space-3); font-size: var(--nz-text-2xs); color: var(--nz-text-mute); font-variant-numeric: tabular-nums; pointer-events: none; }
.cat-filters { display: flex; gap: var(--nz-space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--nz-space-1); }
.cat-filters::-webkit-scrollbar { display: none; }
.cat-filters__chip { flex: none; min-height: 44px; padding: 0 var(--nz-space-3); display: inline-flex; align-items: center; border: 0; border-radius: var(--nz-radius-full); background: var(--nz-bg-inset); color: var(--nz-text-soft); font: inherit; font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); cursor: pointer; transition: background var(--nz-dur-fast) var(--nz-ease-out), color var(--nz-dur-fast) var(--nz-ease-out); }
.cat-filters__chip:hover { background: var(--nz-brand-tint); color: var(--nz-brand); }
.cat-filters__chip[aria-pressed="true"] { background: var(--nz-brand); color: var(--nz-text-invert); }
.cat-empty { padding: var(--nz-space-10) var(--nz-space-4); text-align: center; color: var(--nz-text-mute); }
.cat-empty[hidden] { display: none; }
.cat-empty b { display: block; font-size: var(--nz-text-lg); color: var(--nz-text); margin-bottom: var(--nz-space-1); }

/* ---- Tarjetas de demo ---- */
.cat-demo { background: var(--nz-surface); border-radius: var(--nz-radius-lg); padding: var(--nz-space-5); box-shadow: var(--nz-shadow-sm); transition: transform var(--nz-dur-base) var(--nz-ease-out), box-shadow var(--nz-dur-base) var(--nz-ease-out), opacity var(--nz-dur-base) var(--nz-ease-out); }
.cat-demo:hover { transform: translateY(-3px); box-shadow: var(--nz-shadow-lg); }
.cat-demo[hidden] { display: none; }
.cat-demo__title { display: flex; align-items: baseline; gap: var(--nz-space-2); margin-bottom: var(--nz-space-3); flex-wrap: wrap; }
.cat-demo__num { font-weight: var(--nz-peso-titulo); font-size: var(--nz-text-lg); color: var(--nz-accent-strong); font-variant-numeric: tabular-nums; min-width: 3rem; letter-spacing: var(--nz-tracking-tight); }
.cat-demo__name { font-weight: var(--nz-peso-fuerte); font-size: var(--nz-text-md); letter-spacing: var(--nz-tracking-tight); }
.cat-demo__tag { margin-left: auto; min-width: 0; font-family: var(--nz-font-mono); font-size: var(--nz-text-2xs); color: var(--nz-text-faint); overflow-wrap: anywhere; }
.cat-stage { background: var(--nz-bg-soft); border-radius: var(--nz-radius-md); padding: var(--nz-space-3); overflow: hidden; }
/* La prosa suelta de una demo (párrafos SIN clase) se enseña pequeña y apagada.
   OJO: nunca con un selector de elemento pelado. `.cat-stage p` es 0,1,1 y gana a
   CUALQUIER objeto del sistema (0,1,0): convertía en 13px apagados todas las demos
   de tipografía (nz-display, nz-h1, nz-esc-titular…). Bug real, arreglado el
   2026-10-09 midiendo el catálogo, no mirándolo. */
.cat-stage :is(p, li, dd, blockquote):not([class]) { font-size: var(--nz-text-xs); color: var(--nz-text-mute); margin-top: var(--nz-space-2); }
.cat-demo__code { margin-top: var(--nz-space-3); }
.cat-demo__code > summary { min-height: 44px; display: inline-flex; align-items: center; gap: var(--nz-space-2); padding: 0 var(--nz-space-3); border-radius: var(--nz-radius-full); background: var(--nz-bg-inset); color: var(--nz-text-mute); font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); cursor: pointer; list-style: none; }
.cat-demo__code > summary::-webkit-details-marker { display: none; }
.cat-demo__code > summary:hover { background: var(--nz-brand-tint); color: var(--nz-brand); }
.cat-demo__code pre { margin-top: var(--nz-space-2); padding: var(--nz-space-3); border-radius: var(--nz-radius-md); background: var(--nz-gray-900); color: var(--nz-gray-100); overflow-x: auto; font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); line-height: var(--nz-leading-snug); }
.cat-demo__copy { float: right; min-height: 44px; padding: 0 var(--nz-space-3); border: 0; border-radius: var(--nz-radius-full); background: var(--nz-bg-inset); color: var(--nz-text-mute); font: inherit; font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); cursor: pointer; }
.cat-demo__copy:hover { background: var(--nz-brand); color: var(--nz-text-invert); }

/* ---- Cajas de ejemplo dentro de las demos ---- */
.demo-box { background: var(--nz-surface-2); border-radius: var(--nz-radius-sm); padding: var(--nz-space-2) var(--nz-space-3); font-size: var(--nz-text-xs); color: var(--nz-text-soft); text-align: center; }
.demo-box--brand { background: var(--nz-brand); color: var(--nz-text-invert); }
.demo-box--accent { background: var(--nz-accent); color: var(--nz-accent-ink); }
.demo-box--mute { background: var(--nz-bg-inset); color: var(--nz-text-mute); }

/* ---- Objetos posicionados (fixed/sticky) en DEMO ----
   Un elemento fixed/sticky real dentro del catálogo se escapa de su celda y
   tapa la navegación (le pasó a la categoría 01 con la barra de cookies y el
   header sticky). Aquí se demuestran "en reposo": se ve el objeto, pero no
   secuestra el scroll ni el clic.
   Los overlays (modal/drawer/sheet/cmd) NO entran aquí: son interactivos y
   están ocultos hasta que se abren. */
.cat-stage :is(.nz-region-cookies, .nz-region-chat, .nz-region-ad,
               .nz-header--sticky, .nz-footer--sticky, .nz-sidebar--sticky,
               .nz-fab, .nz-toolbar--sticky, .nz-toast, .nz-offline-bar) {
  position: static; inset: auto; max-height: none; overflow: visible; z-index: auto;
}
.cat-stage .nz-fab { display: inline-flex; }
.cat-stage :is(.nz-header, .nz-footer, .nz-main) { border-radius: var(--nz-radius-sm); }
.cat-stage :is(.nz-modal, .nz-drawer, .nz-sheet, .nz-cmd, .nz-spotlight) { z-index: var(--nz-z-modal); }
.cat-stage :is(.nz-splitpane, .nz-window, .nz-desk) { max-width: 100%; }

/* ---- Portada: hero ---- */
.cat-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cat-above { position: relative; z-index: 1; }
.cat-hero { padding: var(--nz-space-16) var(--nz-gutter) var(--nz-space-10); max-width: var(--nz-container-max); margin-inline: auto; }
.cat-eyebrow { font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); letter-spacing: var(--nz-tracking-caps); text-transform: uppercase; color: var(--nz-brand); }
.cat-hero h1 { font-size: var(--nz-text-4xl); line-height: var(--nz-leading-tight); letter-spacing: var(--nz-tracking-tight); margin: var(--nz-space-3) 0; }
.cat-hero h1 em { font-style: normal; color: var(--nz-accent-text); }
.cat-hero__sub { font-size: var(--nz-text-lg); color: var(--nz-text-soft); max-width: 40rem; }
.cat-ctas { display: flex; gap: var(--nz-space-3); flex-wrap: wrap; margin-top: var(--nz-space-6); align-items: center; }
.cat-hint { font-size: var(--nz-text-xs); color: var(--nz-text-faint); }
.cat-stats { display: flex; flex-wrap: wrap; gap: var(--nz-space-4) var(--nz-space-10); margin-top: var(--nz-space-10); }
.cat-stat b { display: block; font-size: var(--nz-text-xl); letter-spacing: var(--nz-tracking-tight); font-variant-numeric: tabular-nums; }
.cat-stat span { font-size: var(--nz-text-xs); color: var(--nz-text-mute); }

/* ---- Portada: manifiesto ---- */
.cat-pillrow { display: flex; flex-wrap: wrap; gap: var(--nz-space-2); }
.cat-pill { display: inline-flex; align-items: center; gap: var(--nz-space-2); min-height: 32px; padding: 0 var(--nz-space-3); border-radius: var(--nz-radius-full); background: var(--nz-bg-soft); color: var(--nz-text-soft); font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); }
.cat-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--nz-brand); }
.cat-pill--no i { background: var(--nz-accent); }

/* ---- Portada: grid de categorías ---- */
.cat-grid { display: grid; gap: var(--nz-space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } .cat-cat--wide { grid-column: span 2; } }
.cat-cat { position: relative; display: flex; flex-direction: column; gap: var(--nz-space-1); padding: var(--nz-space-4); border-radius: var(--nz-radius-lg); background: var(--nz-surface); box-shadow: var(--nz-shadow-sm); text-decoration: none; color: var(--nz-text); transition: transform var(--nz-dur-base) var(--nz-ease-out), box-shadow var(--nz-dur-base) var(--nz-ease-out); }
.cat-cat:hover { transform: translateY(-3px); box-shadow: var(--nz-shadow-lg); }
.cat-cat[hidden] { display: none; }
.cat-cat__n { font-size: var(--nz-text-2xs); font-weight: var(--nz-peso-titulo); letter-spacing: var(--nz-tracking-caps); color: var(--nz-accent-strong); font-variant-numeric: tabular-nums; }
.cat-cat__name { font-weight: var(--nz-peso-fuerte); font-size: var(--nz-text-md); letter-spacing: var(--nz-tracking-tight); }
.cat-cat__meta { font-size: var(--nz-text-xs); color: var(--nz-text-mute); }
.cat-cat__arrow { position: absolute; right: var(--nz-space-4); bottom: var(--nz-space-4); color: var(--nz-brand); opacity: 0; transform: translateX(-4px); transition: opacity var(--nz-dur-base) var(--nz-ease-out), transform var(--nz-dur-base) var(--nz-ease-out); }
.cat-cat:hover .cat-cat__arrow { opacity: 1; transform: none; }

/* ---- Portada: señales de vida ---- */
.cat-livegrid { display: grid; gap: var(--nz-space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cat-livegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cat-livegrid { grid-template-columns: repeat(4, 1fr); } }
.cat-live-card { padding: var(--nz-space-4); border-radius: var(--nz-radius-lg); background: var(--nz-surface); box-shadow: var(--nz-shadow-sm); display: flex; flex-direction: column; gap: var(--nz-space-3); min-height: 8rem; }
.cat-live-card h3 { font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); letter-spacing: var(--nz-tracking-caps); text-transform: uppercase; color: var(--nz-text-mute); }
.cat-live-slot { margin-top: auto; display: flex; align-items: center; gap: var(--nz-space-2); min-height: 44px; flex-wrap: wrap; }

/* ---- Pie ---- */
.cat-footer { padding: var(--nz-space-8) var(--nz-gutter); text-align: center; color: var(--nz-text-mute); font-size: var(--nz-text-sm); border-top: var(--nz-border-w) solid var(--nz-border-soft); margin-top: var(--nz-space-12); position: relative; z-index: 1; }
.cat-footer a { color: var(--nz-brand); }

/* ---- Entrada escalonada (expo-out, sin fill-forwards para no pisar el hover) ---- */
.cat-in { animation: catIn .3s var(--nz-ease-out) backwards; animation-delay: var(--d, 0s); }
@keyframes catIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cat-in { animation: none; } }

/* ---- Impresión ---- */
@media print {
  .cat-topbar, .cat-nav-pages, .cat-tools, .cat-demo__code { display: none; }
  .cat-demo { break-inside: avoid; box-shadow: none; border: var(--nz-border-w) solid var(--nz-border); }
}

/* ---- Densidad de escritorio del shell (desde 960px) ----
   El minimo tactil de 44px manda en movil en todo lo clicable (regla 6).
   La densidad fina vuelve solo desde 960px, donde el puntero sustituye al dedo. */
@media (min-width: 960px) {
  .cat-filters__chip { min-height: 36px; }
  .cat-demo__code > summary { min-height: 36px; }
  .cat-demo__copy { min-height: 32px; }
}

/* ============================================================
   BASE DE DATOS DE DISEÑO (base.html) · shell .cat-base-*
   Una vista, no un sistema paralelo: reutiliza los objetos .nz-*
   y solo aporta la rejilla, la tarjeta y la ficha.
   ============================================================ */

.cat-base-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nz-space-5); align-items: start; }
.cat-base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--nz-space-3); }
.cat-base-card { display: flex; flex-direction: column; gap: var(--nz-space-2); align-items: flex-start; text-align: left; min-height: 8.25rem; padding: var(--nz-space-4); border: var(--nz-border-w) solid var(--nz-border-soft); border-radius: var(--nz-radius-lg); background: var(--nz-surface); color: var(--nz-text); font: inherit; cursor: pointer; box-shadow: var(--nz-shadow-xs); transition: transform var(--nz-dur-base) var(--nz-ease-out), box-shadow var(--nz-dur-base) var(--nz-ease-out), border-color var(--nz-dur-base) var(--nz-ease-out); }
.cat-base-card:hover { transform: translateY(-2px); box-shadow: var(--nz-shadow-md); border-color: var(--nz-brand); }
.cat-base-card:focus-visible { outline: none; box-shadow: var(--nz-focus-ring); }
.cat-base-card[hidden] { display: none; }
.cat-base-card__top { display: flex; align-items: center; gap: var(--nz-space-2); width: 100%; }
.cat-base-card__tipo { font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); letter-spacing: var(--nz-tracking-caps); text-transform: uppercase; color: var(--nz-text-mute); }
.cat-base-card__tipo--familia { color: var(--nz-brand); }
.cat-base-card__tipo--token { color: var(--nz-accent-strong); }
.cat-base-card__tipo--receta { color: var(--nz-success); }
.cat-base-card__tipo--combo { color: var(--nz-warning); }
.cat-base-card__tipo--marca { color: var(--nz-info); }
.cat-base-card__tipo--principio { color: var(--nz-text-soft); }
.cat-base-card__tipo--categoria { color: var(--nz-brand); }
.cat-base-card__title { font-size: var(--nz-text-md); font-weight: var(--nz-peso-fuerte); line-height: var(--nz-leading-tight); letter-spacing: var(--nz-tracking-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-base-card__code { font-family: var(--nz-font-mono); font-size: var(--nz-text-2xs); color: var(--nz-text-mute); overflow-wrap: anywhere; }
.cat-base-card__meta { margin-top: auto; font-size: var(--nz-text-xs); color: var(--nz-text-faint); font-variant-numeric: tabular-nums; }
.cat-base-swatch { width: 1.25rem; height: 1.25rem; flex: none; border-radius: var(--nz-radius-full); background: var(--swatch, var(--nz-bg-inset)); border: var(--nz-border-w) solid var(--nz-border); box-shadow: var(--nz-shadow-xs); }

.cat-base-ficha { order: -1; padding: var(--nz-space-5); border: var(--nz-border-w) solid var(--nz-border-soft); border-radius: var(--nz-radius-lg); background: var(--nz-surface); box-shadow: var(--nz-shadow-sm); }
.cat-base-ficha__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-2); }
.cat-base-ficha h2 { margin: var(--nz-space-2) 0 var(--nz-space-1); font-size: var(--nz-text-xl); line-height: var(--nz-leading-tight); letter-spacing: var(--nz-tracking-tight); }
.cat-base-ficha__id { margin: 0 0 var(--nz-space-3); font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-brand); overflow-wrap: anywhere; }
.cat-base-ficha__lead { margin: 0 0 var(--nz-space-4); font-size: var(--nz-text-sm); color: var(--nz-text-soft); }
.cat-base-ficha__intro p { color: var(--nz-text-soft); font-size: var(--nz-text-sm); }
.cat-base-hint { font-size: var(--nz-text-xs); color: var(--nz-text-mute); }
.cat-base-cerrar { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--nz-radius-full); background: var(--nz-bg-inset); color: var(--nz-text); font-size: var(--nz-text-lg); cursor: pointer; }
.cat-base-cerrar:hover { background: var(--nz-brand-tint); color: var(--nz-brand); }
.cat-base-bloque { margin-top: var(--nz-space-4); }
.cat-base-bloque h3 { margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); letter-spacing: var(--nz-tracking-caps); text-transform: uppercase; color: var(--nz-text-mute); }
.cat-base-bloque p { margin: 0; font-size: var(--nz-text-sm); color: var(--nz-text-soft); }
.cat-base-chips { display: flex; flex-wrap: wrap; gap: var(--nz-space-1); }
.cat-base-chip { display: inline-flex; align-items: center; padding: var(--nz-space-1) var(--nz-space-2); border-radius: var(--nz-radius-full); background: var(--nz-bg-inset); color: var(--nz-text-soft); font-family: var(--nz-font-mono); font-size: var(--nz-text-2xs); overflow-wrap: anywhere; }
.cat-base-codigo { position: relative; }
.cat-base-codigo pre { margin: 0; padding: var(--nz-space-3); padding-right: var(--nz-space-10); border-radius: var(--nz-radius-md); background: var(--nz-bg-inset); overflow: auto; max-height: 18rem; }
.cat-base-codigo code { font-family: var(--nz-font-mono); font-size: var(--nz-text-2xs); line-height: var(--nz-leading-normal); color: var(--nz-text); white-space: pre; }
.cat-base-copiar { position: absolute; top: var(--nz-space-2); right: var(--nz-space-2); }
.cat-base-preview { padding: var(--nz-space-4); }
.cat-base-preview__lienzo { display: flex; flex-wrap: wrap; gap: var(--nz-space-3); align-items: center; }
.cat-base-iframe { width: 100%; height: 24rem; border: var(--nz-border-w) solid var(--nz-border-soft); border-radius: var(--nz-radius-md); background: var(--nz-bg); }
.cat-base-tokenpreview { display: flex; align-items: flex-end; min-height: 7rem; padding: var(--nz-space-3); border-radius: var(--nz-radius-md); border: var(--nz-border-w) solid var(--nz-border); background: var(--swatch, var(--nz-bg-inset)); }
.cat-base-tokenpreview span { padding: var(--nz-space-1) var(--nz-space-2); border-radius: var(--nz-radius-sm); background: var(--nz-surface); color: var(--nz-text); font-family: var(--nz-font-mono); font-size: var(--nz-text-2xs); }
.cat-base-tokenpreview--texto { align-items: center; justify-content: center; background: var(--nz-bg-inset); }
.cat-base-marcapreview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nz-space-2); }
.cat-base-marcapreview span { display: flex; flex-direction: column; gap: var(--nz-space-1); min-height: 5.5rem; padding: var(--nz-space-3); border-radius: var(--nz-radius-md); background: var(--swatch); color: var(--nz-text-invert); font-family: var(--nz-font-mono); font-size: var(--nz-text-2xs); }
.cat-base-marcapreview b { font-family: var(--nz-font); font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); }

@media (min-width: 960px) {
  .cat-base-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}

@media (min-width: 1200px) {
  .cat-base-layout { grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--nz-space-5); }
  .cat-base-ficha { order: 0; position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); overflow: auto; }
}

/* ============================================================
   BASE DE DATOS · dirección editorial (v9.2)
   Hero asimétrico, índice de revista y rejilla de archivo.
   Sin gradientes, sin glass, sin sombras de tarjeta: papel y tinta.
   ============================================================ */

.cat-base-main { padding-block: var(--nz-space-4) var(--nz-space-10); }

.cat-base-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nz-space-6); align-items: end; padding-block: var(--nz-space-8) var(--nz-space-10); border-bottom: var(--nz-border-w) solid var(--nz-border-soft); overflow: hidden; }
.cat-base-hero__letra { position: absolute; right: -0.06em; bottom: -0.34em; z-index: 0; font-size: clamp(13rem, 34vw, 26rem); line-height: 1; font-weight: var(--nz-peso-titulo); letter-spacing: -0.07em; color: var(--nz-bg-soft); pointer-events: none; user-select: none; }
.cat-base-hero__texto, .cat-base-hero__ficha { position: relative; z-index: 1; }
.cat-base-hero__titulo { margin: var(--nz-space-3) 0 var(--nz-space-4); max-width: 18ch; font-size: var(--nz-text-4xl); line-height: var(--nz-leading-tight); letter-spacing: var(--nz-tracking-tight); font-weight: var(--nz-peso-titulo); }
.cat-base-hero__titulo em { font-style: normal; color: var(--nz-accent-strong); }
.cat-base-hero__lead { max-width: 38rem; margin: 0 0 var(--nz-space-5); font-size: var(--nz-text-md); color: var(--nz-text-soft); }
.cat-base-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--nz-space-2); }
.cat-base-hero__ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--nz-border-w-strong) solid var(--nz-text); border-left: var(--nz-border-w) solid var(--nz-border-soft); }
.cat-base-cifra { display: flex; flex-direction: column; gap: var(--nz-space-1); padding: var(--nz-space-4); border-right: var(--nz-border-w) solid var(--nz-border-soft); border-bottom: var(--nz-border-w) solid var(--nz-border-soft); }
.cat-base-cifra:nth-child(2n) { border-right: 0; }
.cat-base-cifra b { font-size: var(--nz-text-3xl); line-height: 1; font-weight: var(--nz-peso-titulo); letter-spacing: var(--nz-tracking-tight); font-variant-numeric: tabular-nums; }
.cat-base-cifra span { font-size: var(--nz-text-xs); font-weight: var(--nz-peso-fuerte); letter-spacing: var(--nz-tracking-caps); text-transform: uppercase; color: var(--nz-text-mute); }
.cat-base-hero__nota { grid-column: 1 / -1; margin: 0; padding: var(--nz-space-3) 0 0; font-size: var(--nz-text-2xs); color: var(--nz-text-faint); }

.cat-base-indice { display: flex; overflow-x: auto; margin-block: var(--nz-space-2) 0; border-bottom: var(--nz-border-w) solid var(--nz-border-soft); scrollbar-width: none; }
.cat-base-indice::-webkit-scrollbar { display: none; }
.cat-base-indice__item { flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--nz-space-2); align-items: baseline; min-height: 44px; padding: var(--nz-space-2) var(--nz-space-4); border-right: var(--nz-border-w) solid var(--nz-border-soft); color: var(--nz-text); text-decoration: none; transition: background var(--nz-dur-fast) var(--nz-ease-out); }
.cat-base-indice__item b { grid-row: 1 / 3; font-size: var(--nz-text-lg); font-weight: var(--nz-peso-titulo); color: var(--nz-accent-strong); font-variant-numeric: tabular-nums; letter-spacing: var(--nz-tracking-tight); }
.cat-base-indice__item span { font-size: var(--nz-text-sm); font-weight: var(--nz-peso-fuerte); white-space: nowrap; }
.cat-base-indice__item i { font-size: var(--nz-text-2xs); font-style: normal; color: var(--nz-text-mute); font-variant-numeric: tabular-nums; }
.cat-base-indice__item:hover { background: var(--nz-bg-inset); }

.cat-base-tools { top: 60px; padding-top: var(--nz-space-3); border-bottom: var(--nz-border-w) solid var(--nz-border-soft); }

.cat-base-grid { counter-reset: base; gap: 0; border-top: var(--nz-border-w) solid var(--nz-border-soft); border-left: var(--nz-border-w) solid var(--nz-border-soft); }
.cat-base-card { counter-increment: base; position: relative; min-height: 10rem; padding: var(--nz-space-4); border: 0; border-right: var(--nz-border-w) solid var(--nz-border-soft); border-bottom: var(--nz-border-w) solid var(--nz-border-soft); border-radius: 0; box-shadow: none; }
.cat-base-card::after { content: counter(base, decimal-leading-zero); position: absolute; top: var(--nz-space-3); right: var(--nz-space-3); font-size: var(--nz-text-2xs); font-variant-numeric: tabular-nums; color: var(--nz-text-faint); letter-spacing: var(--nz-tracking-caps); }
.cat-base-card:hover { transform: none; background: var(--nz-bg-soft); box-shadow: inset 3px 0 0 var(--nz-brand); }
.cat-base-card__title { font-size: var(--nz-text-lg); }
.cat-base-card__top { padding-right: var(--nz-space-6); }

.cat-base-ficha { border-left: 3px solid var(--nz-accent); border-radius: 0; box-shadow: none; }

/* ── Calma v10.0: presupuesto de sombra del shell ──────────────────────────
   Las cajas base son plano + filete; la elevación se queda en el topbar
   sticky y en los anillos de foco. Medido 2026-10-22: con solo este
   presupuesto la portada pasa de 67 elementos con sombra a 15. */
.cat-demo, .cat-cat, .cat-live-card, .cat-base-ficha, .cat-base-swatch { box-shadow: none; }
.cat-demo, .cat-cat, .cat-live-card, .cat-base-ficha { border: var(--nz-border-w) solid var(--nz-border-soft); }
.cat-demo:hover, .cat-cat:hover { box-shadow: none; border-color: var(--nz-brand-soft); }

@media (min-width: 960px) {
  .cat-base-hero { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); gap: var(--nz-space-8); padding-block: var(--nz-space-10) var(--nz-space-12); }
  .cat-base-hero__titulo { margin-top: var(--nz-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-base-card, .cat-base-indice__item { transition: none; }
}