/* ═══════════════════════════════════════════════════════════════════════════
   CFF27 · Identidad del Chile Fintech Forum
   ───────────────────────────────────────────────────────────────────────────
   El Forum NO se ve como el gremio, y eso es correcto: son dos marcas. Esta capa
   trae la identidad del evento a sus tres páginas sin tocar las otras siete
   pestañas del sitio.

   NO es una hoja paralela: no redefine ni un componente del contrato. Reasigna
   los TOKENS de ftc-web.css, así que la card, el KPI, la tabla, el badge y el
   footer siguen siendo los mismos y se pintan solos con la marca del evento.

   ═══ LAS TRES REGLAS DURAS DE ESTE MÓDULO ═════════════════════════════════

   1 · UNA SOLA FAMILIA DE COLOR: navy casi negro, azul, celeste y blanco.
       Rodrigo, 2-sep-2026: "los únicos colores del sitio web deben ser esos, no
       puede haber nada de otro color, todos estos cámbialos por los azules
       oscuros y celeste". Salió TODO lo demás: el lima ácido, el ámbar, el
       violeta, el verde, el rosa y los grises neutros. Lo que antes se
       distinguía por matiz ahora se distingue por BRILLO, que sobre un fondo
       casi negro funciona mejor igual.

   2 · CERO MONOESPACIADA, ni una palabra. Se resuelve en una línea: --font-mono
       deja de ser monoespaciada. Los 24 usos de las tres páginas y los doce
       componentes del contrato que eran mono leen el TOKEN, no un literal, así
       que cambian todos juntos y no queda ninguno atrás.

   3 · NADA DE GRISES MEDIOS EN TEXTO. Sobre oscuro el texto es blanco y el
       único paso suave es #e6e6e6. Sobre claro es #00001d con #06064a. No hay un
       solo token de tinta entre medio: era justo lo que costaba leer.

   ═══ DE DÓNDE SALEN LOS VALORES ═══════════════════════════════════════════
   Del :root del propio Webflow del Forum y de sus reglas de tarjeta, leídos el
   2-sep-2026. Ni un color inventado.
        --dark-blue        #00001d      --celeste2025    #00def6
        --midnight-blue    #06064a      --azul25         #006af2
        --midnight-blue-2  #0f2552      --deep-sky-blue  #00b2ff
        --gainsboro        #e6e6e6      --light-sky-blue #61ceff

   Y el lenguaje de sus paneles, que es lo que se pidió replicar:
        background-image: linear-gradient(300deg, #ffffff1a, #fff3);
        border-radius: 12px;
        outline: 1px solid #fff3;
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ── Una sola tipografía. Las tres familias apuntan al mismo lugar, así
        ningún componente puede volver a la monoespaciada. ── */
  --font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* El tracking abierto existía para micro-labels monoespaciados. En una
     humanista, abrir las letras es lo que hace que un texto parezca de máquina. */
  --track-lab: .02em;

  /* ── Superficies ── */
  --navy:      #00001d;
  --navy-deep: #00001d;
  --navy-2:    #06064a;

  /* ── La familia, para RELLENOS ── */
  --blue-electric: #006af2;
  --blue-dark:     #0a2f7a;
  --blue-light:    #61ceff;
  --cyan:          #00def6;
  --cyan-soft:     #8fdcff;
  /* --green y --green-deep existen en el contrato y varios componentes los
     usan como "positivo". Acá NO son verdes: son el celeste de la familia. Se
     reasignan en vez de borrarse para que ningún componente quede sin color. */
  --green:      #00def6;
  --green-deep: #00b2ff;

  /* ── Tinta sobre oscuro: blanco, y un solo paso suave ── */
  --on-dark-1: #ffffff;
  --on-dark-2: #ffffff;
  --on-dark-3: #e6e6e6;
  --on-dark-4: #e6e6e6;

  /* ── Acentos COMO TEXTO. Los tres son de la familia. ── */
  --accent-ink: #8fdcff;   /* 14.6:1 sobre #00001d */
  --green-ink:  #61ceff;   /* 11.6:1 · el "positivo" del contrato, en celeste */
  --cyan-ink:   #00def6;   /* 12.6:1 */
  --warn-ink:   #ffffff;   /* el aviso no cambia de color: cambia de peso */
  --alert-ink:  #ffffff;

  /* ── Gradientes. El motivo del Forum es su isotipo: azul a blanco. ── */
  --grad-iso:       linear-gradient(115deg, #8fdcff 0%, #006af2 100%);
  --grad-line:      linear-gradient(90deg, #00001d 0%, #dfe7f5 26%, #2160c4 62%, #0a2f7a 100%);
  --grad-brand:     linear-gradient(90deg, #00001d 0%, #06064a 34%, #006af2 72%, #8fdcff 100%);
  --grad-brand-135: linear-gradient(135deg, #00001d 0%, #06064a 34%, #006af2 72%, #8fdcff 100%);
  --grad-official:  linear-gradient(90deg, #00001d 0%, #006af2 100%);
  --grad-wedge:     linear-gradient(150deg, #006af2 0%, rgba(0,106,242,0) 62%);

  /* ── Datos: la misma rampa, de claro a profundo ── */
  --c1: #61ceff;  --c2: #00def6;  --c3: #00b2ff;  --c4: #0080ee;
  --c5: #8fdcff;  --c6: #3a4470;  --c7: #0052c4;  --c8: #06064a;

  /* ── Superficies semánticas ── */
  --surface:      #00001d;
  --surface-2:    #050528;
  --surface-card: rgba(255,255,255,.06);
  --ink:      var(--on-dark-1);
  --ink-soft: var(--on-dark-2);
  --ink-dim:  var(--on-dark-3);
  --hair:        rgba(255,255,255,.20);
  --line-dark:   rgba(255,255,255,.20);
  --line-dark-2: rgba(255,255,255,.30);

  --nav-bg:      rgba(0,0,29,.84);
  --nav-tabs-bg: rgba(255,255,255,.07);
  --nav-border:  rgba(255,255,255,.18);
  --nav-btn-bg:     rgba(255,255,255,.09);
  --nav-btn-border: rgba(255,255,255,.26);

  /* Radio del Forum: 12px en tarjetas, 20px en paneles grandes. */
  --r-tile:  10px;
  --r-card:  12px;
  --r-panel: 20px;
}

/* ═══ Ánimo claro ═══════════════════════════════════════════════════════════
   Mismo criterio, al revés: el texto es negro y el paso suave es el indigo del
   Forum. El celeste no sirve como texto sobre blanco, así que los acentos se
   oscurecen manteniendo el matiz. Los rellenos siguen usando azul y celeste. */
:root[data-theme="light"] {
  --navy:      #ffffff;
  --navy-deep: #f2f5fb;
  --navy-2:    #ffffff;

  --on-dark-1: #00001d;
  --on-dark-2: #00001d;
  --on-dark-3: #06064a;
  --on-dark-4: #06064a;

  --accent-ink: #0a2f7a;   /* 11.4:1 sobre blanco */
  --green-ink:  #00527a;   /* 7.3:1 · el celeste, oscurecido para leerse */
  --cyan-ink:   #00527a;
  --warn-ink:   #00001d;
  --alert-ink:  #00001d;

  --ink-1: #00001d;
  --ink-2: #06064a;
  --ink-3: #06064a;

  --line-dark:   rgba(0,0,29,.16);
  --line-dark-2: rgba(0,0,29,.26);
  --line:        rgba(0,0,29,.14);
  --line-2:      rgba(0,0,29,.22);
  --hair:        rgba(0,0,29,.16);
  --surface:      #ffffff;
  --surface-2:    #f2f5fb;
  --surface-card: rgba(0,0,29,.035);
  --card:   #ffffff;
  --card-2: #f8fafe;

  --nav-bg:      rgba(255,255,255,.88);
  --nav-tabs-bg: rgba(0,0,29,.05);
  --nav-border:  rgba(0,0,29,.14);
  --nav-btn-bg:     rgba(0,0,29,.05);
  --nav-btn-border: rgba(0,0,29,.26);

  --c6: #4a5480;
  --grad-line: linear-gradient(90deg, #0a2f7a 0%, #2160c4 48%, #8fdcff 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL PANEL DEL FORUM
   Su gesto de tarjeta: un lift diagonal de blanco muy tenue sobre el fondo casi
   negro, radio 12 y una hairline clara que la separa del fondo. Se aplica a los
   contenedores del contrato para que TODAS las superficies de las tres páginas
   se vean como una sola pieza, que es lo que se pidió.
   ═══════════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .kpi,
:root:not([data-theme="light"]) .dcard,
:root:not([data-theme="light"]) .glass,
:root:not([data-theme="light"]) .ftc-acc,
:root:not([data-theme="light"]) .ftc-note,
:root:not([data-theme="light"]) .ftc-gate__card,
:root:not([data-theme="light"]) .ftc-tbl-wrap {
  background-color: transparent;
  background-image: linear-gradient(300deg, rgba(255,255,255,.055), rgba(255,255,255,.13));
  border-color: rgba(255,255,255,.20);
}
/* En claro el panel es blanco macizo con la hairline oscura: el degradado de
   blanco sobre blanco no se ve y solo ensucia. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .dcard,
:root[data-theme="light"] .ftc-acc,
:root[data-theme="light"] .ftc-note,
:root[data-theme="light"] .ftc-gate__card {
  background-image: none;
  background-color: #fff;
  border-color: rgba(0,0,29,.14);
}

/* ═══ El motivo: el isotipo, azul a blanco ═════════════════════════════════
   La firma visual del Forum es su triángulo de play con el degradado azul a
   blanco. `.cff27-sweep` lo trae como banda decorativa: se usa al pie del hero
   y de las cabeceras, y es lo que reemplaza a los acentos de color sueltos. */
.cff27-sweep {
  /* z-index 2, no auto: el velo del hero está en la capa 1 y con z-index
     automático la banda quedaba debajo y no se veía. Va en la MISMA capa que el
     contenido y antes en el DOM, así queda detrás del texto pero sobre el velo. */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px;
  background: linear-gradient(100deg, #00001d 0%, #06064a 18%,
              #dfe7f5 34%, #8fdcff 44%, #2160c4 66%, #0a2f7a 100%);
  pointer-events: none;
}
/* Versión grande, la del pie del hero. Es el gesto de la referencia: la
   izquierda casi negra, una diagonal blanca que sube y el campo azul llenando la
   derecha. Se difumina hacia arriba para engancharse con la foto en vez de
   cortarla, y por eso el degradado va a 96 grados y no a 90: la diagonal tiene
   que subir, si va plana deja de ser el isotipo y queda una franja. */
.cff27-sweep--alto {
  height: clamp(72px, 9vw, 132px); opacity: 1;
  background: linear-gradient(96deg,
    #00001d 0%, #00001d 13%, #b9cbe6 25%, #e8eef8 30%,
    #7fb4f2 37%, #2160c4 55%, #17459c 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
}

/* ═══ Ajustes que el token solo no alcanza ═════════════════════════════════ */

/* Open Sans es más ancha que Roboto: los titulares grandes cierran un poco más. */
.t-display, .t-h1, .sec__title { letter-spacing: -.025em; }

/* Los ex-labels monoespaciados eran versalitas de 11px; con una humanista
   quedan débiles. Suben a 12px y peso 700, como los labels del sitio del Forum. */
.lab, .kpi__lab, .dcard__k, .ftc-acc__k, .ftc-foot__k, .ftc-gate__badge,
.ftc-tbl th, .eyebrow { font-size: 12px; font-weight: 700; }
.chip, .badge { font-weight: 600; letter-spacing: .01em; }
/* Sin la retícula de la mono, las cifras de una tabla se desalinean.
   `tabular-nums` devuelve la columna sin devolver la monoespaciada. */
.ftc-tbl, .kpi__val, .kpi__sub, .dcard__src, .cat__precio { font-variant-numeric: tabular-nums; }

/* ── Botones ────────────────────────────────────────────────────────────────
   El primario del Forum es el degradado azul con texto blanco (su .boton25).
   Se elige un tramo del azul donde el blanco pasa AA en los DOS extremos:
   4.8:1 en #006af2 y 9.3:1 en #0a2f7a. El celeste puro como fondo con texto
   blanco daría 1.3:1, así que no se usa de fondo de texto. */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: 0; }
.btn--solid { background: linear-gradient(90deg, #006af2 0%, #0a2f7a 100%); color: #fff; }
.btn--solid:hover { background: linear-gradient(90deg, #1a7cff 0%, #0d3a94 100%); color: #fff; }
.btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.btn--ghost:hover { border-color: #8fdcff; background: rgba(0,106,242,.18) }
:root[data-theme="light"] .btn--ghost { border-color: rgba(0,0,29,.30); color: #00001d }
:root[data-theme="light"] .btn--ghost:hover { border-color: #0a2f7a; background: rgba(0,106,242,.08) }
.ftc-nav__tab, .ftc-chapter, .chip, .badge { border-radius: 999px }
.ftc-nav__cta { background: linear-gradient(90deg, #006af2 0%, #0a2f7a 100%);
  color: #fff; border-color: transparent; font-weight: 700 }
:root[data-theme="light"] .ftc-nav__cta { background: linear-gradient(90deg, #006af2 0%, #0a2f7a 100%);
  color: #fff; border-color: transparent }
.ftc-nav__cta::before { background: linear-gradient(90deg, #1a7cff, #0d3a94) }

/* Estado activo del nav y de los capítulos: azul del Forum, texto blanco. */
.ftc-nav__tab[aria-current="page"],
.ftc-nav__more[data-current="true"] > .ftc-nav__tab,
.ftc-nav__item[aria-current="page"],
.ftc-chapter[aria-current="true"] { background: #006af2; color: #fff }
.ftc-nav__tab[aria-current="page"] i,
.ftc-nav__more[data-current="true"] > .ftc-nav__tab i,
.ftc-nav__item[aria-current="page"] i,
.ftc-chapter[aria-current="true"] i { color: #fff; opacity: .8 }

/* El numerito de sección y la barra del KPI, en la rampa. Antes cada KPI tenía
   su color; ahora los cuatro son la misma familia, de claro a profundo. */
.sec__num { color: var(--accent-ink); font-weight: 700 }
.kpi::before    { background: #8fdcff }
.kpi.cy::before { background: #00def6 }
.kpi.gr::before { background: #00b2ff }
.kpi.nv::before { background: #006af2 }

/* ── Badges de estado, en una sola familia ──────────────────────────────────
   Un semáforo de cuatro colores reintroduce por la ventana justo lo que se
   sacó. Acá el estado se distingue por PESO DE RELLENO, no por matiz: de la
   píldora de contorno a la píldora maciza. Lo pierde en lectura instantánea y
   lo gana en que la página tiene un solo color, que es lo que se pidió. */
.badge--ok    { color: #61ceff; background: rgba(0,106,242,.14); border-color: rgba(97,206,255,.38) }
.badge--info  { color: #8fdcff; background: rgba(0,106,242,.24); border-color: rgba(143,220,255,.42) }
.badge--warn  { color: #ffffff; background: transparent;         border-color: #00def6 }
.badge--alert { color: #ffffff; background: #006af2;             border-color: #006af2 }
:root[data-theme="light"] .badge--ok    { color: #00527a; background: #e7f5fb; border-color: rgba(0,82,122,.24) }
:root[data-theme="light"] .badge--info  { color: #0a2f7a; background: #e3ecfd; border-color: rgba(10,47,122,.24) }
:root[data-theme="light"] .badge--warn  { color: #00001d; background: #fff;     border-color: #00527a }
:root[data-theme="light"] .badge--alert { color: #ffffff; background: #0a2f7a; border-color: #0a2f7a }

/* Notas, acordeones y halos: todos al azul y celeste del Forum. */
.ftc-note        { border-left-color: #006af2 }
.ftc-note--ok    { border-left-color: #61ceff }
.ftc-note--warn  { border-left-color: #00def6 }
.ftc-note--alert { border-left-color: #8fdcff; border-left-width: 5px }
.ftc-acc[open] { border-color: rgba(143,220,255,.42) }
.ftc-acc > summary:hover { background: rgba(0,106,242,.12) }
.glow:hover { border-color: rgba(143,220,255,.55);
  box-shadow: 0 0 0 1px rgba(0,106,242,.30), 0 16px 44px -16px rgba(0,106,242,.45) }
.sheen::after { background: var(--grad-line) }

:focus-visible { outline-color: #8fdcff }
::selection { background: #006af2; color: #fff }


/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES DEL FORUM
   Viven aca, y no en el <style> de una pagina, porque los usan las TRES del
   CFF27 (inicio, la semana, zona de stands). Estaban en `cff27/index.html`;
   al crear `/cff27/semana` el 10-sep-2026 la alternativa era copiarlos, que es
   exactamente como el sitio perdio la linea grafica en agosto.
   No van al contrato `ftc-web.css` porque son del Forum, no del gremio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cifras del CFF26 ─────────────────────────────────────────────
   Rodrigo sobre las tarjetas que habia antes: "este diseno es demasiado IA, por
   favor usa nuestro diseno CFF". Tenia razon y el problema era identificable: la
   tarjeta con barrita de color a la izquierda, borde, fondo propio y tres
   tamanos de texto adentro es el patron de dashboard genérico. El sitio oficial
   no hace eso: pone la CIFRA, enorme, y debajo la etiqueta. Nada mas.
   Asi que aca no hay caja: hay numero, una linea fina y una etiqueta. ── */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.4vw,40px);margin-top:clamp(24px,3vw,38px)}
@media(max-width:820px){.cifras{grid-template-columns:repeat(2,1fr);gap:26px 20px}}
.cifra{min-width:0}
.cifra b{display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(38px,5.6vw,76px);line-height:.92;color:var(--ink);
  letter-spacing:var(--track-title);font-variant-numeric:tabular-nums}
/* La linea es el unico adorno, y hereda el color de la categoria. Reemplaza a
   la barrita vertical de la tarjeta: mismo dato cromatico, sin la caja. */
.cifra i{display:block;height:2px;width:100%;margin:14px 0 12px;
  background:var(--blue-electric);opacity:.9;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.cifra.in i{transform:scaleX(1)}
.cifra.cy i{background:var(--cyan)}.cifra.gr i{background:var(--green)}
.cifra.am i{background:var(--accent-ink)}
.cifra span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  letter-spacing:var(--track-lab);text-transform:uppercase;line-height:1.35}
.cifra em{display:block;font-style:normal;font-size:13px;color:var(--ink-dim);
  margin-top:6px;line-height:1.45}
@media(prefers-reduced-motion:reduce){.cifra i{transform:none}}


/* ── Tira de fotos ────────────────────────────────────────────────────────── */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fotos figure{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hair);
  position:relative;aspect-ratio:4/3}
.fotos img{width:100%;height:100%;object-fit:cover}
.fotos figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-lab);color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,29,.9))}
@media(max-width:760px){.fotos{grid-template-columns:1fr}.fotos figure{aspect-ratio:16/9}}


.dias{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.agenda{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;
  padding-right:4px}
/* Tarjeta de evento. 10-sep: "algunos iconos o imagenes en los textos de la
   derecha". El pictograma dice de un vistazo de que tipo es cada momento
   (recinto, satelite, after, publico) sin leer la etiqueta. */
.ev{display:grid;grid-template-columns:auto 1fr;gap:13px;
  border:1px solid var(--hair);border-radius:var(--r-tile);padding:13px 15px;
  background:var(--surface-card);transition:var(--dur-1)}
:root[data-theme="light"] .ev{background:var(--card);border-color:var(--line)}
.ev[data-on="1"]{border-color:var(--blue-electric);background:rgba(0,106,242,.08)}
.ev__ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  flex:none;background:color-mix(in srgb,var(--ec) 17%,transparent);
  border:1px solid color-mix(in srgb,var(--ec) 42%,transparent);color:var(--ec)}
.ev__ico svg{width:17px;height:17px}
.ev__t{font-weight:700;font-size:14.5px;letter-spacing:var(--track-title-2);color:var(--ink)}
.ev__m{font-size:11.5px;color:var(--ink-dim);margin-top:5px}
.ev__d{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-top:8px}


/* ── Botones del hero ────────────────────────────────────────
   "el boton esta muy chico, yo quizas lo haria en grande". Mismo `.btn` del
   contrato, con talla. */
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(20px,2.6vh,28px)}
.btn--xl{font-size:15px;padding:16px 28px;border-radius:10px}

/* ── `.sobre-oscuro`: bloques que se leen sobre oscuro en LOS DOS temas ──────
   El panel del hero se apoya sobre el video, que es oscuro siempre, asi que su
   tinta va blanca tambien en tema sol. Antes esto se acotaba con `.hero__cta`,
   y estaba mal por dos motivos:

     1 · `:root[data-theme="light"] .btn--ghost` tiene especificidad (0,3,0) y
         le ganaba a `.hero__cta .btn--ghost` (0,2,0). En tema sol el boton
         quedaba con tinta #00001d sobre un panel rgba(0,0,29,.56): el MISMO
         color, 1:1. Botones invisibles, detectado en produccion el 10-sep.
     2 · `.hero__cta` tambien se usa sobre fondos claros (el CTA del pie de
         /cff27/semana), donde el ghost SI debe ir oscuro.

   La clase declara la intencion en el HTML en vez de deducirla del contenedor,
   y lleva la especificidad necesaria para ganarle a la regla de tema. ── */
.sobre-oscuro,.sobre-oscuro .t-lead{color:#fff}
.sobre-oscuro .btn--ghost,
:root[data-theme="light"] .sobre-oscuro .btn--ghost{
  border-color:rgba(255,255,255,.38);color:#fff;background:rgba(255,255,255,.08)}
.sobre-oscuro .btn--ghost:hover,
:root[data-theme="light"] .sobre-oscuro .btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.17)}
.sobre-oscuro .chip,
:root[data-theme="light"] .sobre-oscuro .chip{
  border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.09)}
@media(max-width:560px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
}
/* Los tres botones tienen que caber en UNA fila dentro del panel. Con el
   padding de 28px el tercero caia solo a una segunda linea y parecia un error
   de maquetacion, no una jerarquia. */
@media(min-width:861px){.hero__cta .btn--xl{font-size:14.5px;padding:15px 22px}}


/* La leyenda de categorias de venue. La usan el mapa de la portada y el filtro
   de la pagina de la semana: si vive en el <style> de una, en la otra los
   chips salen sin su punto de color. */
.mapa__leyenda{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mapa__leyenda .chip{cursor:pointer}
.mapa__leyenda .chip[aria-pressed="false"]{opacity:.42}
.mapa__leyenda i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}