@font-face {
    font-family: 'General Sans';
    src: url('../assets/fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../assets/fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Semibold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('../assets/fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Design tokens (paleta base + tokens semánticos) --------------- */
:root {
    /* Paleta base */
    --color-rosa: #D2605F;
    --color-azul: #1A4575;
    --color-verde: #728D3B;
    --color-rojo: #C02822;
    --color-amarillo: #F4B33F;
    --color-crema: #FAF4E4;

    /* Tokens semánticos */
    /*--bg: #191922;*/  
    --bg: #111115;            /* fondo del canvas y contenedores */
    --bg-rgb: 17, 17, 21;       /* mismo color para rgba() (gradientes, blur) */
    --content: var(--color-crema); /* texto / contenido */
    --accent: var(--color-amarillo); /* keywords, links, estado actual */
    --muted: #878377;              /* títulos en reposo */
}

/* NORMALIZE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* NORMALIZE */

body {
    background: var(--bg);
    background-position: center;
    color: var(--content);
    font: 500 normal 22px/1.3 'General Sans', system-ui, sans-serif;
    overflow: hidden; /* the map pans via transform, the page itself never scrolls */
}

/* Full-viewport stage (navigation is by clicks only) */
.mwg_effect097 {
    position: fixed;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.mwg_effect097 .container {
    position: absolute;
    inset: 0;
}

/* The 2D map plane: absolutely-positioned cells, moved as a whole by transform */
.mwg_effect097 .grid {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0; /* so scale() zooms from the plane origin */
    will-change: transform;
}
.mwg_effect097 .cell {
    position: absolute;
    width: 420px;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent; /* sin oclusión: los conectores esquivan el texto por ruteo (salen al final de la línea del keyword) */
}
.mwg_effect097 .cell .title { transition: color 0.3s ease; transform-origin: left top; }
.mwg_effect097 .cell .title {
    color: var(--muted);
    margin: 0 0 14px;
    font-size: max(18px, 1.5vw);
    background-color: var(--bg);
    -webkit-box-shadow: -20px 0px 40px 20px var(--bg); 
}
.mwg_effect097 .cell p {
    font-size: max(16px, 0.8vw);
}
.mwg_effect097 .line {
    width: max-content;
}
.mwg_effect097 .word {
    will-change: transform;
}

/* Keywords: highlighted terms; links between concepts (anchor points) */
.mwg_effect097 .keyword,
.mwg_effect097 .keyword .word,
.mwg_effect097 .keyword .char {
    color: var(--accent);
}
/* Scrambled 0/1 characters. Change this colour to taste. */
.mwg_effect097 .char.bit {
    color: #7D8590;
    /* Caja estrecha + glifo centrado => los cuadrados/dígitos del scramble quedan
       PEGADOS (una tras otra), en vez de sueltos dentro de la caja de la letra
       original. Sube/baja el width para más/menos separación. */
    width: .65em;
    text-align: center;
    /* font-family: 'Arial', system-ui, sans-serif; */
}
/* Cuadrado del scramble dibujado por CSS (clase 'sq' que pone el JS), NO por un
   glifo -> renderiza igual en cualquier dispositivo. Toma el color del char
   (currentColor). Cambia el tamaño con width/height. */
.mwg_effect097 .char.bit.sq { position: relative; }
.mwg_effect097 .char.bit.sq::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 0.55em; height: 0.55em;
    transform: translate(-50%, -100%);
    background: currentColor;
    /* border-radius: 2px; */
}
.mwg_effect097 .keyword[data-target] {
    cursor: pointer;
    padding-inline: 0px;
    border-radius: 2px;
    transition: all 0.2s cubic-bezier(0, 0, 0, 1);
}

/* .kw-hover lo aplica el JS a TODOS los fragmentos de un keyword (aunque se
   parta en varias líneas), no solo al trozo bajo el cursor. */
.mwg_effect097 .keyword[data-target].kw-hover {
    padding-inline: 4px;
    background-color: #ffffff1c;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0, 0, 0, 1);
}
/* Keyword underline (link affordance) */
.mwg_effect097 .keyword[data-target] .word {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
    text-underline-offset: 3px;
}

/* ---- Overview relationship lines (graph, orthogonal) --------------- */
/* Lives inside .grid (behind the cells), so the opaque cell backgrounds hide
   the segments that pass under text -> the lines route around the boxes. */
.mwg_effect097 .grid > .links {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
}
.mwg_effect097 .links path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 6;                   /* thicker so lines don't vanish when zoomed out */
    stroke-dasharray: 1 9;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke; /* constant on-screen thickness under scale() */
}
/* Background dot grid (normal view): pans + zooms with the map, occluded by the
   opaque cell backgrounds so it only shows in the empty corridors. */
.mwg_effect097 .links circle.bgdot {
    fill: var(--content);   /* fallback; el color real (paleta random) lo pone el JS inline */
    opacity: 1;
}
/* Cuadrícula visible (modo BG_GRID_LINES): líneas crema al 4% uniendo los puntos */
.mwg_effect097 .links line.bgline {
    stroke: var(--content);
    opacity: 0.02;
    stroke-width: 1;
    vector-effect: non-scaling-stroke; /* grosor constante bajo el zoom */
}
/* Navigation connector (world-space, dotted, thin, constant on-screen width) */
.mwg_effect097 .links path.conn {
    fill: none;
    stroke: rgba(241, 241, 241, 0.55);
    stroke-width: 1.4;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    transition: opacity 0.3s ease;   /* atenuado/realce suave en hover */
}
/* Hovered connector: continuous trim-path (the dots flow along the line). One
   dash period is 2+6=8, so shifting the offset by -8 loops seamlessly. */
.mwg_effect097 .links path.conn.trim,
.mwg_effect097.trim-all .links path.conn {   /* trim-path global: todas fluyen a la vez, sincronizadas */
    animation: connFlow 1.2s linear infinite;
}
@keyframes connFlow {
    to { stroke-dashoffset: -8; }
}

/* Numeric route buttons shown on each path while choosing a multi-destination.
   Reuse the circular .nbtn look; only the number typography is added here. */
#labels {
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
}
#labels .route-num {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}
#labels .route-num.sel {   /* destino resaltado al navegar con flechas ↑/↓ */
    border-color: var(--accent);
    color: var(--accent);
}

/* ---- Normal-view connectors (back / forward) ---------------------- */
#normal-conn {
    position: fixed;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}
#normal-conn svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
#normal-conn svg path {
    fill: none;
    /* stroke: rgba(241, 241, 241, 0.5); */
    stroke-width: 1;
    stroke-dasharray: 2 5;
    stroke-linecap: round;
    opacity: 0.5;
}
/* Circular button shared by the back/forward arrows (#normal-conn) and the
   numeric route buttons of a multi-destination fan (#labels). */
.nbtn {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px; /* center on anchor */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(var(--bg-rgb), 0.65);
    color: #f1f1f196;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}
.nbtn:hover {
    border-color:  rgba(255, 255, 255, 0.25);
    color: #dddddd96;
}
#normal-conn .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* ---- Minimap (orientation) ---------------------------------------- */
.minimap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 30;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.6);
    backdrop-filter: blur(6px);
}
.minimap .mm-grid {
    display: grid;
    gap: 9px;
    position: relative;   /* ancla del rectángulo de encuadre .mm-view */
}
/* Rectángulo de orientación: marca el encuadre actual sobre el mapa al arrastrar */
.minimap .mm-view {
    position: absolute;
    border: 1px solid var(--accent);
    border-radius: 3px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.minimap .mm-view[hidden] { display: block; opacity: 0; }
.minimap .mm-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #3a3a3a;          /* empty slot: dark grey */
}
.minimap .mm-dot.on {
    background: var(--content);   /* filled concept */
    cursor: pointer;              /* clicable: viaja a esa ficha */
}
.minimap .mm-dot.cur {
    background: var(--accent);    /* current position */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}


/* ---- Autoplay controls (bottom-left) ------------------------------ */
.autoplay-ctrls {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
}
.autoplay-ctrls .ap-btn {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.autoplay-ctrls .ap-main {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}
.autoplay-ctrls .ap-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%) rotate(-90deg); /* centrado exacto + inicio a las 12 */
    pointer-events: none;
}
.autoplay-ctrls .ap-track { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 2; }
.autoplay-ctrls .ap-prog {
    fill: none;
    stroke: var(--content);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear;
}
.autoplay-ctrls .ap-ico {
    font-family: 'Material Symbols Outlined';
    font-size: 26px;
    line-height: 1;
    color: var(--content);
    z-index: 1;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.autoplay-ctrls .ap-stop {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-rojo) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-rojo) 45%, transparent);
    backdrop-filter: blur(6px);
}
.autoplay-ctrls .ap-sq { width: 15px; height: 15px; border-radius: 3px; background: var(--color-rojo); }

/* Mute de música */
.autoplay-ctrls .ap-mute {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}
.autoplay-ctrls .ap-mico {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    color: var(--content);
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
.autoplay-ctrls .ap-mute.is-muted { border-color: rgba(255, 255, 255, 0.04); }
.autoplay-ctrls .ap-mute.is-muted .ap-mico { color: var(--muted); }

.autoplay-ctrls .ap-btn[hidden] { display: none; } /* respeta el atributo hidden sobre display:flex */

/* Fade-in de cada letra al revelarse en el autoplay */
.mwg_effect097 .char.ap-in { animation: apFadeIn 0.4s ease both; }
@keyframes apFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Cuerpo (MediaPipe) ------------------------------------------- */
.body-btn {
    position: fixed;
    left: 24px;
    bottom: 96px;                 /* encima de los controles de autoplay */
    z-index: 40;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(var(--bg-rgb), 0.85);
    backdrop-filter: blur(6px);
    color: var(--content);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.body-btn .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 300; }
.body-btn.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.body-btn.loading { opacity: 0.5; }
.body-btn.err { border-color: color-mix(in srgb, var(--color-rojo) 60%, transparent); color: var(--color-rojo); }
.body-preview {
    position: fixed;
    left: 24px;
    bottom: 150px;
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    z-index: 40;
    opacity: 0.8;
    transform: scaleX(-1);        /* espejo */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}


/* Las fichas de la intro (category "Intro") viven en el grid como una más
   (siempre visibles, sin dejar huecos); el autoplay las recorre al darle a Play.
   Sólo se excluyen del minimapa (ver script.js). */

/* ---- Visor de media por concepto (imagen / vídeo / Instagram) ----------- */
.media-overlay {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--bg-rgb), 0.78);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.media-overlay[hidden] { display: none; }
.media-card {
    position: relative;
    width: min(92vw, 380px);
    aspect-ratio: 9 / 16;           /* retrato tipo reel para vídeo/imagen */
    max-height: 92vh;
    background: #000;
    border-radius: 0;               /* esquinas RECTAS */
    overflow: visible;              /* deja ver el botón de cerrar por fuera */
    box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.media-card.ig {                    /* Instagram trae su propio "chrome": deja alto libre */
    aspect-ratio: auto;
    height: min(92vh, 720px);
    background: #fff;
}
.media-card .media-body { width: 100%; height: 100%; overflow: hidden; }
.media-card video, .media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Cerrar: cuadrado ROJO pegado por FUERA, esquina superior derecha. */
.media-close {
    position: absolute; top: 0; left: 100%; z-index: 3;
    width: 40px; height: 40px; border-radius: 0;
    background: var(--color-rojo); border: 0; color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: filter .15s ease;
}
.media-close:hover { filter: brightness(1.12); }
.media-close .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-size: 22px; }
.media-link { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--accent); text-decoration: none; }

/* Conectores ocultos durante el arrastre (CONNECTORS_HIDE_ON_DRAG): visibility
   evita el repintado de trazo (non-scaling-stroke) sin borrar/re-dibujar nada. */
.mwg_effect097.conns-off .links path.conn { visibility: hidden; }

/* ---- Botón About (arriba a la derecha) --------------------------------- */
#about-btn {
    position: fixed; top: 20px; right: 24px; z-index: 70;
    background: transparent; border: 1px solid color-mix(in srgb, var(--content) 30%, transparent);
    color: var(--content); border-radius: 999px; padding: 8px 16px;
    font: 500 13px/1 'General Sans', sans-serif; letter-spacing: .04em; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
#about-btn:hover { background: color-mix(in srgb, var(--content) 12%, transparent); border-color: var(--content); }

/* ---- Filtro por categoría (arriba a la izquierda, chips, selección única) --- */
#cat-filter {
    position: fixed; top: 20px; left: 24px; z-index: 70;
    display: flex; flex-wrap: wrap; gap: 8px; max-width: min(60vw, 1040px);
}
#cat-filter .chip {
    background: transparent; border: 1px solid color-mix(in srgb, var(--content) 30%, transparent);
    color: var(--content); border-radius: 999px; padding: 8px 16px;
    font: 500 13px/1 'General Sans', sans-serif; letter-spacing: .04em; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#cat-filter .chip:hover { background: color-mix(in srgb, var(--content) 12%, transparent); border-color: var(--content); }
#cat-filter .chip.is-active {
    background: var(--accent); border-color: var(--accent); color: var(--bg);
}

/* Fichas ocultas por el filtro de categoría (modo antiguo; ya no se usa) */
.mwg_effect097 .cell.filtered-out { display: none; }

/* Relleno de scramble permanente (unifica el alto de las fichas cortas) */
.mwg_effect097 .cell .ph { margin: 4px 0 0; }

/* Filtro activo: fichas de OTRA categoría atenuadas. Mantienen su scramble
   original (color de la paleta); solo se baja la opacidad. */
.mwg_effect097 .cell.dimmed { opacity: 0.2; transition: opacity .3s ease; }

/* ---- About: página aparte con el texto de la intro --------------------- */
#about {
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg);
    display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto; padding: 12vh 24px 12vh;
    opacity: 0; transition: opacity .5s ease;   /* fundido suave (lo gestiona el JS) */
}
#about.show { opacity: 1; }
#about[hidden] { display: none; }
#about .about-inner { max-width: 960px; }
#about .about-inner p { font-size: max(16px, 1.05vw); line-height: 1.6; margin: 0 0 1.1em; color: var(--content); }
#about .about-close {
    position: fixed; top: 20px; right: 24px; width: 40px; height: 40px;
    background: transparent; border: 1px solid color-mix(in srgb, var(--content) 30%, transparent);
    color: var(--content); border-radius: 999px; cursor: pointer; font-size: 16px;
}
#about .about-close:hover { background: color-mix(in srgb, var(--content) 12%, transparent); }

/* ---- Landing (pre-intro): scrim 0.4 sobre el grid + CTA ---------------- */
#landing {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(0, 0, 0, 0.85);            /* scrim: el grid se ve detrás */
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity .7s ease;
}
#landing.hide { opacity: 0; pointer-events: none; }
#landing[hidden] { display: none; }
#landing .landing-inner { text-align: center; padding: 24px; max-width: 960px; }
#landing h1 { font: 700 clamp(40px, 8vw, 92px)/1 'General Sans', sans-serif; color: var(--content); margin: 0 0 .5em; letter-spacing: -.01em; }
#landing .landing-sub { font-size: clamp(15px, 1.6vw, 20px); color: var(--muted); margin: 0 0 2em; }
#landing .landing-intro { text-align: center; margin: 0 0 1.5em; }
#landing .landing-intro p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; color: var(--content); margin: 0 0 1em; }
#landing .landing-intro strong { color: var(--accent); font-weight: 600; }
#landing #start-btn {
    background: var(--accent); color: #241d05; border: 0; border-radius: 999px;
    padding: 14px 40px; font: 600 16px/1 'General Sans', sans-serif; cursor: pointer;
    transition: filter .2s ease;
}
#landing #start-btn:hover { filter: brightness(1.06); }

/* ---- Hint "Arrastra para revelar los datos" --------------------------- */
#drag-hint {
    position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 40;
    color: var(--muted); font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
    opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
#drag-hint.show { opacity: 1; }
#drag-hint[hidden] { display: none; }

/* ---- Media INLINE dentro de la celda (imagen/vídeo) --------------------
   Ocupa el 100% del ancho de la columna conservando su ratio original. Un
   canvas superpuesto (mosaico de la paleta) hace el scramble/revelado. */
.mwg_effect097 .cell .cell-media {
    margin: 16px 0 0; padding: 0; width: 100%; position: relative; display: block; line-height: 0;
}
.mwg_effect097 .cell .cell-media img,
.mwg_effect097 .cell .cell-media video {
    width: 100%; height: auto; display: block;
}
.mwg_effect097 .cell .cell-media canvas.scr {
    position: absolute; inset: 0; width: 100%; height: 100%;
    image-rendering: pixelated; pointer-events: none;
    transition: opacity .18s linear;
}
/* Sin modo inline: el figure no se muestra (se usa el botón + overlay). */
:root:not(.inline-media) .mwg_effect097 .cell .cell-media { display: none; }

/* ---- Loader de arranque: tapa el "apilado" inicial hasta que hay layout ---- */
#loader {
    position: fixed; inset: 0; z-index: 100; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity .6s ease;
}
#loader span {
    font: 700 clamp(28px, 6vw, 64px)/1 'General Sans', sans-serif; color: var(--content);
    letter-spacing: -.01em; opacity: .9; animation: loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
#loader.hide { opacity: 0; pointer-events: none; }

/* ---- Minimapa: hover orientativo (área amplia + punto agrandado) ---------- */
.minimap .mm-dot.hot {
    transform: scale(3);
    background: var(--accent);
}

/* ---- MediaPipe: overlay de bounding boxes verdes sobre todo el canvas ----- */
.body-overlay {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
}

/* Placeholder: la letra base ('x') es invisible; solo se ve el cuadrado del
   scramble (que pinta color inline). Así, al revelarse, queda a VACÍO. */
.mwg_effect097 .cell .ph .char { color: transparent; }

/* Botón About oculto (a petición) */
#about-btn { display: none; }

/* ---- Filtro colapsado en un icono; se despliega en horizontal al pulsar ---- */
#cat-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1px solid color-mix(in srgb, var(--content) 30%, transparent);
    color: var(--content); transition: background .2s ease, border-color .2s ease;
}
#cat-toggle:hover { background: color-mix(in srgb, var(--content) 12%, transparent); border-color: var(--content); }
#cat-toggle .material-symbols-outlined { font-size: 22px; }
/* chips ocultos hasta desplegar */
#cat-filter .chip { display: none; }
#cat-filter.open .chip { display: inline-flex; }
/* si hay un filtro activo (no "All") y está colapsado, el icono va en accent */
#cat-filter:has(.chip.is-active:not([data-cat=""])) #cat-toggle {
    background: var(--accent); border-color: var(--accent); color: var(--bg);
}