/* catalogo.css — capa visual del Catálogo Mouseîon (2026-09-18, kant por encargo de argos/Steven).
   Solo presentación: el DOM lo pinta catalogo.mjs desde catalogo.json; aquí no hay datos ni lógica
   de estado. Se sirve desde el mismo origen (CSP style-src 'self'). Las fuentes están
   autohospedadas en fonts/ porque la CSP no admite fonts.googleapis.com. */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#0A0E1C; --ink-2:#0F1529; --surface:#141C36; --surface-2:#1A2444;
  --on-ink:#EEF2FA; --on-ink-mute:#B4BFD8; --on-ink-dim:#8E9CBE;
  --hairline:#28345A; --hairline-2:#344277;
  --marigold:#FFB020; --marigold-ink:#3A2600;
  --ok:#7BE3B0; --ok-bg:rgba(95,211,155,.12);
  --stale:#FFC65C; --stale-bg:rgba(255,176,32,.13);
  --alert:#FF9A82; --alert-bg:rgba(255,138,107,.13);
  --unknown:#B4BFD8; --unknown-bg:rgba(180,191,216,.10);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:16px; --wrap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-ink);font:16px/1.55 var(--texto);
  font-feature-settings:"cv11","ss01";
  background-image:
    radial-gradient(1200px 520px at 50% -140px, rgba(255,176,32,.14), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0, var(--ink) 480px);
  background-repeat:no-repeat}
a{color:inherit}
:focus-visible{outline:2px solid var(--marigold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--on-ink-mute)}

/* Navegación del ecosistema y, debajo, índice de esta página. Ambas filas se
   pueden desplazar con el dedo sin esconder ninguno de los cinco sitios. */
:root{--ecosystem-height:90px}
html:root{scroll-padding-top:calc(var(--ecosystem-height) + 12px)}
.site-navigation{position:sticky;top:0;z-index:40;background:rgba(7,10,20,.96);border-bottom:1px solid var(--hairline);
  box-shadow:0 8px 24px -18px #000;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ecosystem-nav,.section-nav{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--hairline-2) transparent}
.ecosystem-nav ol,.section-nav ol{display:flex;align-items:center;gap:3px;inline-size:max-content;min-inline-size:100%;
  list-style:none;margin:0;padding:0 clamp(16px,4vw,32px)}
.ecosystem-nav ol{min-block-size:48px;justify-content:center}
.section-nav{border-top:1px solid var(--hairline)}
.section-nav ol{min-block-size:40px;justify-content:center}
.ecosystem-nav a,.section-nav a{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;border-radius:7px;
  font-family:var(--texto);font-weight:600;transition:background .2s,color .2s}
.ecosystem-nav a{min-block-size:44px;padding:0 14px;font-size:13px;color:var(--on-ink-mute)}
.ecosystem-nav a:hover,.ecosystem-nav a:focus-visible{color:var(--on-ink);background:var(--surface)}
.ecosystem-nav a[aria-current="page"]{color:var(--marigold);background:rgba(255,176,32,.10)}
.section-nav a{min-block-size:40px;padding:0 12px;font-size:12px;color:var(--on-ink-dim)}
.section-nav a:hover,.section-nav a:focus-visible{color:var(--on-ink);background:var(--surface)}
html.vista-flota .section-nav .public-only{display:none}

/* La navegación ocupa espacio en el flujo; la escena conserva el alto visible. */
body .cabecera{min-block-size:calc(100svh - var(--ecosystem-height))}
html .hud-capitulo{top:calc(var(--ecosystem-height) + 16px)}
html .hud-fase{top:calc(var(--ecosystem-height) + 38px)}
html .hud-liviano{top:calc(var(--ecosystem-height) + 16px)}
html .hud-replan{top:calc(var(--ecosystem-height) + 64px)}
html .hud-progreso{top:var(--ecosystem-height)}
html.vista-flota .cabecera{min-block-size:0}
@media (min-width:761px){html .barra{top:calc(var(--ecosystem-height) + 12px)}}
@media (max-width:760px){
  .ecosystem-nav ol,.section-nav ol{justify-content:flex-start}
  .ecosystem-nav a{padding-inline:11px}
  html .hud-capitulo{top:calc(var(--ecosystem-height) + 12px)}
  html .hud-derecha{top:calc(var(--ecosystem-height) + 8px);bottom:auto}
  html .hud-liviano{top:calc(var(--ecosystem-height) + 48px)}
  html .tocar-ciudad{top:calc(var(--ecosystem-height) + 64px)}
}

/* --- cabecera ------------------------------------------------------------------------- */
.cabecera{padding:clamp(40px,7vw,88px) 0 clamp(20px,3vw,32px)}
.kicker{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--marigold)}
.h-l{margin:0 0 14px;font-family:var(--display);font-weight:600;font-size:clamp(38px,6vw,68px);
  line-height:1.02;letter-spacing:-.015em;font-variation-settings:"opsz" 96}
.lede{margin:0;max-width:62ch;font-size:clamp(16px,1.7vw,19px);line-height:1.55;color:var(--on-ink-mute)}

/* --- resumen (chips por estado) --------------------------------------------------------- */
.resumen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 8px}
.resumen .total{font-family:var(--display);font-size:22px;font-weight:500;margin-right:6px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--surface);font-size:13.5px;font-weight:500;color:var(--on-ink-mute)}
.chip b{font-weight:600;color:var(--on-ink)}
.chip i,.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.chip.live{color:var(--ok)} .chip.stale{color:var(--stale)} .chip.broken{color:var(--alert)} .chip.unknown{color:var(--unknown)}
.chip.live b,.chip.stale b,.chip.broken b,.chip.unknown b{color:inherit}

/* --- grupos por estado ----------------------------------------------------------------- */
.grupo{padding:28px 0 8px}
.grupo:last-of-type{padding-bottom:64px}
.grupo-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.grupo-head h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,28px);line-height:1.15;font-variation-settings:"opsz" 40}
.grupo-head .n{font-size:14px;font-weight:600;color:var(--on-ink-dim)}
.grupo-head p{margin:0;font-size:14px;color:var(--on-ink-dim)}
.cat-grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}

/* --- tarjeta --------------------------------------------------------------------------- */
.cat-card{--marca:var(--hairline-2);position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -18px rgba(0,0,0,.8)}
.cat-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--marca);z-index:1}
.cat-media{position:relative;aspect-ratio:1200/630;background:#070A14;border-bottom:1px solid var(--hairline)}
.cat-img{width:100%;height:100%;object-fit:cover;display:block}
.cat-media-vacia{height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--marca) 55%, #070A14), #070A14 80%)}
.cat-media-vacia span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,242,250,.7);
  padding:6px 10px;border:1px dashed rgba(238,242,250,.35);border-radius:8px}
.pill{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 8px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid currentColor;background:rgba(10,14,28,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill svg{width:13px;height:13px;flex:none}
.cat-cuerpo{padding:16px 18px 18px;display:grid;gap:8px;align-content:start}
.cat-nombre{margin:0;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.15;font-variation-settings:"opsz" 36}
.cat-url{display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:100%;font-size:14px;color:var(--on-ink-mute);
  text-decoration:none;border-bottom:1px solid transparent;overflow-wrap:anywhere}
.cat-url svg{width:12px;height:12px;flex:none;opacity:.7}
.cat-url:hover{color:var(--marigold);border-bottom-color:var(--marigold)}
.cat-url-off{color:var(--on-ink-dim);font-style:italic;font-size:14px}
.cat-meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;
  border:1px solid var(--hairline-2);background:var(--surface-2);color:var(--on-ink-mute)}
.tag.swatch i{width:10px;height:10px;border-radius:3px;border:1px solid rgba(255,255,255,.25)}

/* estados: cada uno se ve distinto, no solo cambia un color */
.estado-live .pill{color:var(--ok)}
.estado-stale .pill{color:var(--stale)}
.estado-stale .cat-img{filter:saturate(.45) brightness(.92)}
.estado-stale .cat-card-nota{color:var(--stale)}
.estado-broken .pill{color:var(--alert)}
.estado-broken{border-color:rgba(255,138,107,.45)}
.estado-broken .cat-img{filter:grayscale(.7) brightness(.8)}
.estado-unknown{border-style:dashed;background:transparent}
.estado-unknown .pill{color:var(--unknown)}
.estado-unknown .cat-media{opacity:.75}
.estado-unknown .cat-nombre{color:var(--on-ink-mute)}
.cat-card-nota{margin:0;font-size:13px;color:var(--on-ink-dim)}

@media (prefers-reduced-motion:no-preference){
  .cat-card{transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
  .cat-card:hover{transform:translateY(-3px);border-color:var(--hairline-2);box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
}
@media (max-width:560px){
  .cabecera{padding-top:36px}
  .cat-cuerpo{padding:14px 15px 16px}
  .cat-nombre{font-size:20px}
  .resumen .total{width:100%;margin:0 0 2px}
}
/* --- pie -------------------------------------------------------------------------------- */
.pie{padding:0 clamp(16px,4vw,32px) 48px;font-size:13px;color:var(--on-ink-dim)}
.pie .brand-signature{display:inline-flex;align-items:center;max-width:100%;margin:0 0 18px;border-radius:6px}
.pie .brand-signature img{display:block;max-width:100%;height:auto}
.pie p{margin:0;border-top:1px solid var(--hairline);padding-top:18px}
.cargando{padding:40px 0}

/* --- vista pública (por defecto) ---------------------------------------------------------- */
.cat-cuenta{margin:8px 0 18px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-dim)}
.cat-grid-publica{padding-bottom:64px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cat-card-enlace{text-decoration:none;color:inherit;cursor:pointer}
.cat-card-enlace:hover .cat-url,.cat-card-enlace:focus-visible .cat-url{color:var(--marigold);border-bottom-color:var(--marigold)}
.cat-desc{margin:0;font-size:15px;line-height:1.5;color:var(--on-ink-mute)}
.cat-media-vacia span{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:0;text-transform:none;border:0;padding:0;color:rgba(238,242,250,.85)}
.pie a{color:var(--on-ink-mute);text-decoration:underline;text-underline-offset:3px}
.pie a:hover{color:var(--marigold)}

/* CTA de agenda y secciones editoriales (selección comercial 2026-09-19). */
.cta-agenda{margin:1rem 0 0}
.cta-agenda-link{display:inline-block;padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid currentColor;text-decoration:none;font-weight:600}
.cta-agenda-link:hover,.cta-agenda-link:focus-visible{text-decoration:underline}
.cat-seccion{margin:2.5rem 0 0}
.cat-seccion-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.cat-seccion-head h2{margin:0;font-size:1.4rem}
.cat-seccion-head .n{opacity:.7;font-variant-numeric:tabular-nums}
.cat-seccion-head p{flex:1 1 100%;margin:.2rem 0 0;opacity:.75;font-size:.95rem}

/* === HZ-CAT-02 critical chips (pre-mouseion) =================================
   Chip geometry must match fx/mouseion.css final paint so SSR chips don't
   reflow when mouseion.css arrives, and so liviano no longer flips modo.
   Literals (not mouseion tokens) — catalogo.css paints first. */
.necesidad-lineas{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;
  /* 7 filas × 44 + 6 gaps × 8 — mobile ~360px wrap medido (lab CLS 0.5) */
  min-block-size:calc(7 * 44px + 6 * 8px);
  box-sizing:border-box;
}
.chip-linea{
  --c:#FF6B57;
  box-sizing:border-box;
  display:inline-flex;align-items:center;gap:8px;
  block-size:44px;min-block-size:44px;max-block-size:44px;
  padding:0 12px 0 8px;border-radius:999px;
  border:1px solid #28345A;background:transparent;color:#F2F5FF;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  cursor:pointer;line-height:1;
}
.chip-linea .vineta{
  flex:none;display:inline-grid;place-items:center;
  inline-size:22px;block-size:22px;border-radius:50%;
  background:var(--c,#FF6B57);color:#0a0e1c;
  font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;
}