/* ═══════════════════════════════════════════════════════════════════════════
   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.
       EXCEPCIÓN CON SIGNIFICADO (Rodrigo, 25-sep-2026): "colores no múltiples,
       solo uno de repente: verde para facturado/ingresos, rojo para costos".
       Existen DOS tintas fuera de la familia y nada más: --ok-ink (verde:
       disponible, descuento a favor, ingreso) y --cost-ink (rojo: costo,
       agotado, sobre presupuesto). Nunca como decoración.

   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;
   ═══════════════════════════════════════════════════════════════════════════ */

/* [Visor 3D MBC, 25-oct-2026] @import de Google Fonts retirado: la familia la sirve ./fuentes.css (autoalojada). */

: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;

  /* ── Las dos tintas con significado (ver regla 1). Sobre #00001d. ── */
  --ok-ink:    #4ade80;   /* disponible · a favor · ingreso */
  --ok-fill:   #22c55e;
  --cost-ink:  #ff8a8a;   /* costo · agotado · sobre presupuesto */
  --cost-fill: #ef4444;
  /* ── Tinta SOBRE FOTO (19-oct-2026). Una cabecera con foto real va oscura
        en los dos temas: la foto manda y el velo navy la acompaña. Estos
        tokens NO cambian con el tema, a propósito (check_contraste_cff27.py
        los mide contra el peor píxel bajo el velo). ── */
  --foto-ink:   #ffffff;
  --foto-ink-2: #e6e6e6;
  --foto-ok:    #4ade80;

  /* ── 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;

  --ok-ink:    #0b6b35;
  --ok-fill:   #16a34a;
  --cost-ink:  #b42318;
  --cost-fill: #dc2626;

  --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}


/* ═══════════════════════════════════════════════════════════════════════════
   VIDA · reunión con Rob y pedido de Rodrigo, 25-sep-2026
   "que le des más vida... una imagen de repente como difuminada... comprimir
   la información en los banners... la gente sabe lo que está viendo, menos
   subtítulos y subtextos". Estas piezas las usan las tres páginas públicas del
   Forum, por eso viven acá y no en el <style> de una.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tintas con significado (regla 1) ── */
.sem-ok{color:var(--ok-ink)}
.sem-cost{color:var(--cost-ink)}
.badge--libre{color:var(--ok-ink);background:color-mix(in srgb,var(--ok-fill) 14%,transparent);
  border-color:color-mix(in srgb,var(--ok-fill) 45%,transparent)}
.badge--agotado{color:var(--cost-ink);background:color-mix(in srgb,var(--cost-fill) 12%,transparent);
  border-color:color-mix(in srgb,var(--cost-fill) 45%,transparent)}

/* ── Fondo difuminado ───────────────────────────────────────────────────────
   Un render del recinto detrás de una cabecera, desenfocado y bajo un velo del
   color del fondo: da profundidad sin competir con el texto. El velo es del
   tema (navy en luna, blanco azulado en sol), así la tinta de la cabecera sigue
   siendo la de siempre y el contraste no depende de la foto. */
.cff-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cff-bg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(5px) saturate(1.15);transform:scale(1.06);opacity:.72}
.cff-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,29,.62) 0%,rgba(0,0,29,.80) 60%,#00001d 100%)}
:root[data-theme="light"] .cff-bg img{opacity:.55}
:root[data-theme="light"] .cff-bg::after{
  background:linear-gradient(180deg,rgba(242,245,251,.80) 0%,rgba(242,245,251,.90) 60%,#f2f5fb 100%)}

/* ── Cabecera con FOTO REAL (19-oct-2026) ─────────────────────────────────
   Rodrigo, sobre el hero de /stands: el render borroso "delata que es IA".
   La variante --foto muestra una foto real del CFF26 nítida y clara, con un
   velo navy que es SOLO el necesario para leer: 62% donde menos, 76% detrás
   del titular. Medido sobre el peor caso (píxel blanco puro bajo el velo de
   62%) en check_contraste_cff27.py: blanco 6,2:1, #e6e6e6 4,9:1 y el verde
   de las cifras (#4ade80, 30 px o más) 3,5:1. Igual en los dos temas: la
   foto no se lava a blanco en sol. */
.cff-bg--foto img{filter:none;transform:none;opacity:1;object-position:center 42%}
.cff-bg--foto::after,
:root[data-theme="light"] .cff-bg--foto::after{
  background:linear-gradient(90deg,rgba(0,0,29,.76) 0%,rgba(0,0,29,.66) 45%,rgba(0,0,29,.62) 100%)}
:root[data-theme="light"] .cff-bg--foto img{opacity:1}
/* Todo lo que va sobre la foto lee la tinta de foto, no la del tema. */
.cff-sobre-foto{--ink:var(--foto-ink);--ink-soft:var(--foto-ink);--ink-dim:var(--foto-ink-2);color:var(--foto-ink)}

/* ── Galería compacta ───────────────────────────────────────────────────────
   Renders del CFF26 y fotos del evento. La primera pieza manda (2x2), el resto
   la acompaña. Al pasar el mouse la imagen se acerca: bloque vivo, regla 4. */
.cff-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,13vw,190px);
  gap:10px}
.cff-gal figure{position:relative;overflow:hidden;border-radius:var(--r-card);margin:0;
  border:1px solid var(--hair);background:#00001d}
.cff-gal figure:first-child{grid-column:span 2;grid-row:span 2}
.cff-gal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.cff-gal figure:hover img{transform:scale(1.05)}
.cff-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,29,.88))}
@media(max-width:760px){.cff-gal{grid-template-columns:1fr 1fr;grid-auto-rows:130px}}
@media(prefers-reduced-motion:reduce){.cff-gal img{transition:none}}

/* ── Los tres días ──────────────────────────────────────────────────────── */
.dias3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.dias3{grid-template-columns:1fr}}
.dia3{position:relative;border:1px solid var(--hair);border-radius:var(--r-card);
  padding:20px 20px 18px;background:var(--surface-card);overflow:hidden}
:root[data-theme="light"] .dia3{background:var(--card);border-color:var(--line)}
.dia3::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--dc,#006af2)}
.dia3__n{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,3.6vw,48px);
  line-height:1;letter-spacing:var(--track-title);color:var(--ink)}
.dia3__d{font-size:14px;font-weight:700;color:var(--accent-ink);margin-top:10px}
.dia3__t{font-family:var(--font-display);font-weight:800;font-size:19px;
  letter-spacing:var(--track-title-2);color:var(--ink);margin-top:4px}
.dia3 .chip{margin-top:12px}
.dia3 ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.dia3 li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.dia3 li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--dc,#006af2)}
.dias3__nota{margin-top:12px;font-size:14px;color:var(--ink-dim)}

/* ── Las dos narrativas del 2027 ────────────────────────────────────────── */
.narr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.narr{grid-template-columns:1fr}}
.narr__c{position:relative;overflow:hidden;border-radius:var(--r-panel);min-height:300px;
  padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(255,255,255,.16);background:#00001d;color:#fff}
.narr__c > picture{position:absolute;inset:0}
.narr__c img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.6;transition:transform .8s var(--ease),opacity .4s}
.narr__c:hover img{transform:scale(1.04);opacity:.72}
.narr__c::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,29,.15) 0%,rgba(0,0,29,.9) 72%)}
.narr__c > *:not(picture){position:relative;z-index:1}
.narr__k{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,7vw,96px);
  line-height:.9;letter-spacing:-.03em;color:#8fdcff}
.narr__t{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,2.3vw,30px);
  letter-spacing:var(--track-title-2);margin-top:8px;color:#fff}
.narr__b{font-size:15px;line-height:1.55;margin-top:8px;color:#fff;max-width:48ch}
.narr__p{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.narr__p .chip{border-color:rgba(255,255,255,.38);color:#fff;background:rgba(255,255,255,.08)}
@media(prefers-reduced-motion:reduce){.narr__c img{transition:none}}

/* ── Novedades 2027: fila de beneficios nuevos ─────────────────────────── */
.novs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.novs{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.novs{grid-template-columns:1fr}}
.nov{border:1px solid var(--hair);border-radius:var(--r-card);padding:15px 16px;
  background:var(--surface-card)}
:root[data-theme="light"] .nov{background:var(--card);border-color:var(--line)}
.nov b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:var(--track-title-2)}
.nov span{display:block;font-size:14px;line-height:1.45;color:var(--ink-soft);margin-top:4px}
.nov__k{font-size:12px;font-weight:700;color:var(--accent-ink);margin-bottom:6px;display:block}

/* ── Escenarios con render ─────────────────────────────────────────────── */
.escs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.esc{position:relative;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--hair);
  background:var(--surface-card);display:flex;flex-direction:column;text-align:left;
  font:inherit;color:inherit;cursor:pointer;padding:0;width:100%}
:root[data-theme="light"] .esc{background:var(--card);border-color:var(--line)}
.esc__img{aspect-ratio:16/9;overflow:hidden;background:#00001d}
.esc__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.esc:hover .esc__img img{transform:scale(1.05)}
.esc__b{padding:14px 16px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.esc__n{font-family:var(--font-display);font-weight:900;font-size:18px;
  letter-spacing:var(--track-title-2);color:var(--ink);line-height:1.2}
.esc__p{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.esc__p small{display:block;font-size:12px;font-weight:600;color:var(--ink-dim);margin-top:2px}
@media(prefers-reduced-motion:reduce){.esc__img img{transition:none}}

/* ── "Ver detalle": el pliegue de las tarjetas ─────────────────────────────
   <details> nativo: accesible con teclado y lector de pantalla sin JS. Es la
   respuesta de la reunión a las tarjetas largas: "ven al tiro el macro y
   después bajáis al detalle". */
.pliegue > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;
  border:1px solid var(--hair);font-size:14px;font-weight:700;color:var(--ink);
  transition:background var(--dur-1),border-color var(--dur-1)}
.pliegue > summary::-webkit-details-marker{display:none}
.pliegue > summary::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-1) var(--ease)}
.pliegue[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.pliegue > summary:hover{background:rgba(0,106,242,.12);border-color:rgba(143,220,255,.5)}
:root[data-theme="light"] .pliegue > summary{border-color:var(--line-2)}
.pliegue__c{padding-top:14px;display:grid;gap:12px}
.pliegue .ver-menos{display:none}
.pliegue[open] .ver-mas{display:none}
.pliegue[open] .ver-menos{display:inline}



/* ═══════════════════════════════════════════════════════════════════════════
   REUNIÓN DE CIERRE WEB CFF27 · 15-oct-2026
   Piezas que comparten la portada y la zona de stands, en sus dos vistas (la
   del sitio y la embebida / el subdominio stands2027). Viven acá y no en el
   <style> de cada página para que las dos se vean como una sola.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Selector de idioma (ES / EN) ─────────────────────────────────────────
   Deliberadamente NO usa .ftc-theme: ftc-theme.js engancha todo lo que lleve
   esa clase y el botón terminaba cambiando también el tema. */
.lang{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
  height:40px;padding:3px;box-sizing:border-box;border-radius:999px;
  border:1px solid var(--nav-btn-border);background:var(--nav-btn-bg)}
.lang__knob{position:absolute;top:3px;left:3px;width:38px;height:32px;border-radius:999px;
  background:var(--blue-electric);transition:transform .26s cubic-bezier(.3,.8,.3,1)}
.lang[data-lang="en"] .lang__knob{transform:translateX(38px)}
.lang__o{position:relative;z-index:1;width:38px;height:32px;padding:0;cursor:pointer;
  border:0;background:none;font-family:var(--font-body);font-size:12px;font-weight:800;
  letter-spacing:.02em;color:var(--ink-dim);transition:color .2s}
.lang__o:hover{color:var(--ink)}
.lang__o[aria-pressed="true"]{color:#fff}
.lang__o:focus-visible{outline:2px solid var(--blue-electric);outline-offset:2px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.lang__knob{transition:none}}

/* ── Control discreto de la vista embebida: idioma + claro/oscuro ─────────
   Sin nav no hay interruptores, y la reunión pidió que el visitante pueda
   cambiar a inglés y a claro. Va arriba a la derecha, como píldora de vidrio.
   Fuera del modo embebido no se dibuja: ahí los interruptores están en el nav. */
.cff-ctl{display:none}
body[data-embed="1"] .cff-ctl{position:fixed;top:calc(var(--vis-t,0px) + 12px);right:12px;z-index:95;display:flex;
  align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 74%,transparent);border:1px solid var(--hair);
  backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);
  box-shadow:0 10px 28px -16px rgba(0,0,0,.55)}
.cff-ctl .lang{border:0;background:none}
.cff-ctl__tema{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;border:0;background:none;color:var(--ink);transition:background .2s}
.cff-ctl__tema:hover{background:var(--nav-btn-bg)}
.cff-ctl__tema:focus-visible{outline:2px solid var(--blue-electric);outline-offset:1px}
.cff-ctl__tema svg{width:19px;height:19px}
.cff-ctl__tema .i-sun{display:none}
:root[data-theme="light"] .cff-ctl__tema .i-sun{display:block}
:root[data-theme="light"] .cff-ctl__tema .i-moon{display:none}
@media(max-width:560px){body[data-embed="1"] .cff-ctl{top:calc(var(--vis-t,0px) + 8px);right:8px}}

/* ── Contacto: el correo escrito, no un botón "Correo" ── */
.c-mail{font-weight:700;color:var(--accent-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;word-break:break-all}
.c-mail:hover{text-decoration-thickness:2px}
.contacto__mail{margin-top:10px;font-size:15px}

/* ── Barra de contacto flotante ───────────────────────────────────────────
   "Se come mucho espacio" y "se ve como si se cayera": era una franja de borde
   a borde pegada al pie. Ahora es una píldora flotante centrada, con aire
   alrededor, que se esconde cuando "Hablemos" está en pantalla. */
.cbar{position:fixed;left:50%;bottom:calc(var(--vis-b,0px) + max(14px,env(safe-area-inset-bottom)));z-index:60;
  transform:translateX(-50%);display:flex;align-items:center;gap:16px;
  width:max-content;max-width:calc(100% - 24px);padding:7px 7px 7px 20px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 84%,transparent);border:1px solid var(--hair);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.7);
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
:root[data-theme="light"] .cbar{background:color-mix(in srgb,#fff 90%,transparent);
  border-color:var(--line);box-shadow:0 18px 44px -22px rgba(0,0,29,.35)}
.cbar[data-oculta="1"]{opacity:0;pointer-events:none;transform:translate(-50%,24px)}
.cbar__q{display:flex;flex-direction:column;min-width:0;margin:0;line-height:1.25}
.cbar__n{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cbar__r{font-size:14px;color:var(--ink-soft);white-space:nowrap}
.cbar__mail{font-size:14px;white-space:nowrap;padding-left:16px;border-left:1px solid var(--hair)}
.cbar__b{display:flex;gap:6px;flex:none}
.cbar .btn{padding:9px 16px;font-size:14px;border-radius:999px;white-space:nowrap}
.cbar .btn svg{width:16px;height:16px;flex:none}
.cbar .btn--solid svg{display:none}
body.con-cbar{padding-bottom:84px}
body.con-cbar .ftc-foot{padding-bottom:84px}
/* Angosto: nombre y correo a la izquierda, uno sobre otro; los dos botones a
   la derecha. El cargo sale (no cabe sin apretar todo) y WhatsApp queda como
   ícono redondo. Nada se monta ni se corta. */
@media(max-width:900px){
  .cbar__r{display:none}
  .cbar{gap:12px}
}
@media(max-width:620px){
  .cbar{left:10px;right:10px;width:auto;max-width:none;transform:none;
    padding:8px 8px 8px 16px;border-radius:20px;gap:10px}
  .cbar[data-oculta="1"]{transform:translateY(24px)}
  .cbar__q{flex:1}
  .cbar__mail{display:none}
  .cbar__n{font-size:14.5px}
  .cbar .c-wa{width:42px;height:42px;padding:0;justify-content:center}
  .cbar .c-wa span{display:none}
  .cbar .btn--solid{padding:10px 14px}
  .cbar .btn--solid svg{display:block}
}
.cbar__m{display:none;font-size:14px;margin-top:2px}
.cbar .c-mail{word-break:normal;white-space:nowrap}
.cbar .c-corto{display:none}
@media(max-width:620px){.cbar .c-largo{display:none}.cbar .c-corto{display:inline}
  .cbar__q{overflow:hidden}.cbar__m{overflow:hidden;text-overflow:ellipsis}}
@media(max-width:620px){.cbar__m{display:block}}
@media(prefers-reduced-motion:reduce){.cbar{transition:none}}

/* ── Carrusel horizontal (eventos Luma de la Pop Up City) ─────────────────
   "Los eventos en formato carrusel para evitar scroll": una pista con
   scroll-snap y dos flechas. Se desliza con el dedo, la rueda o las flechas. */
.carr-h{position:relative}
.carr-h__pista{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(232px,23%,290px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:6px 2px 14px;overscroll-behavior-x:contain}
.carr-h__pista::-webkit-scrollbar{display:none}
.carr-h__pista>*{scroll-snap-align:start}
.carr-h__cab{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.carr-h__cab .luma__h{margin:0;flex:1}
.carr-h__f{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--hair);background:var(--surface-card);color:var(--ink);transition:border-color .2s,transform .2s}
:root[data-theme="light"] .carr-h__f{background:#fff;border-color:var(--line)}
.carr-h__f:hover:not(:disabled){border-color:var(--blue-electric);transform:scale(1.06)}
.carr-h__f:disabled{opacity:.35;cursor:default}
.carr-h__f[hidden]{display:none}
.carr-h__f svg{width:18px;height:18px}
@media(max-width:620px){.carr-h__pista{grid-auto-columns:78%}}
@media(prefers-reduced-motion:reduce){.carr-h__pista{scroll-behavior:auto}}


/* ═══════════════════════════════════════════════════════════════════════════
   MAPA DEL RECINTO · la maqueta (assets/cff27/recinto.js) · 16-oct-2026
   Rodrigo, al ver la primera versión: el plano no se mueve con el mouse, la
   ficha no tapa el mapa, las zonas son volúmenes en 3D con jerarquía y el
   exterior también responde. CSS 3D puro: la escena (1000 x 1104, el sistema
   de coordenadas de la lámina) va inclinada con ángulos FIJOS y escalada
   (--k) para caber en el marco; cada espacio es una cara superior a
   translateZ(alto) más una pared por lado, parada con rotateX(90deg).
   ═══════════════════════════════════════════════════════════════════════════ */
.recinto{--r-bg:#050528;--r-suelo:#040420;--r-losa:#0d0d45;--r-calle:#10104a;--r-nota:rgba(230,236,255,.74);
  --r-sombra:#00001d;--r-aro:#fff;--rx:50deg;--rz:-12deg;--ox:-48%;--k:.8}
:root[data-theme="light"] .recinto{--r-bg:#e9eff9;--r-suelo:#dfe7f5;--r-losa:#ffffff;--r-calle:#cdd8ea;--r-nota:#3a4470;
  --r-sombra:#0a1a4a;--r-aro:#00001d}
/* Paleta del plano 3D (recinto3d.js la lee de acá y la vuelve a leer al
   cambiar de tema). Todo de la familia del Forum; el verde solo en
   vegetación y en "Comida y descanso". */
.recinto{--r-vereda:#16165a;--r-linea:#8fdcff;--r-pared:#1d2366;--r-techo:#c9d3ec;--r-pasto:#0f3b2c;
  --r-arbol:#1e6b4a;--r-arbol2:#2b8a5c;--r-cerro:#1b3d4c;--r-vidrio:#0b1a3a;--r-ladrillo:#6b3428;--r-carpa:#dfe7f5;
  --r-ruta:#00def6;--r-truss:#aeb9d0;--r-silla:#1f5fe0;--r-mesa:#e6ecf7;--r-asfalto:#08082e;--r-feria:#26306e}
:root[data-theme="light"] .recinto{--r-vereda:#eef2f9;--r-linea:#3a4470;--r-pared:#b8c4dc;--r-techo:#eef2f9;--r-pasto:#9fd3ae;
  --r-arbol:#5fae7c;--r-arbol2:#7cc493;--r-cerro:#b9cfc6;--r-vidrio:#2a3a5e;--r-ladrillo:#b06a52;--r-carpa:#ffffff;
  --r-ruta:#006af2;--r-truss:#8f9bb5;--r-silla:#006af2;--r-mesa:#ffffff;--r-asfalto:#c3cde0;--r-feria:#f4f7fc}
.recinto{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:22px;align-items:start}
@media(max-width:1100px){.recinto{grid-template-columns:minmax(0,1fr) 282px}}
@media(max-width:900px){.recinto{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ── El marco y la escena ── */
.recinto__marco{position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--hair);
  border-radius:var(--r-panel);background:var(--r-bg)}
:root[data-theme="light"] .recinto__marco{border-color:var(--line)}
@media(max-width:900px){.recinto__marco{aspect-ratio:5/4}}
.recinto__vista{position:absolute;inset:0;perspective:calc(var(--k) * 2300px);perspective-origin:50% 34%}
.recinto__escena{position:absolute;left:50%;top:50%;width:1000px;height:1104px;transform-style:preserve-3d;
  transform:translate(var(--ox),-51%) rotateX(var(--rx)) rotateZ(var(--rz)) scale3d(var(--k),var(--k),var(--k))}
.recinto__capa{position:absolute;inset:0;transform-style:preserve-3d}
.recinto__capa--suelo{transform:translateZ(-12px)}
.recinto__capa--stands{transform:translateZ(3px)}
.recinto__suelo{position:absolute;inset:-700px -600px;
  background:radial-gradient(55% 50% at 50% 52%,color-mix(in srgb,var(--r-suelo) 72%,#0a2f7a) 0%,var(--r-suelo) 72%)}
:root[data-theme="light"] .recinto__suelo{
  background:radial-gradient(55% 50% at 50% 52%,color-mix(in srgb,var(--r-suelo) 55%,#ffffff) 0%,var(--r-suelo) 72%)}
.recinto__calle{position:absolute;background:var(--r-calle);transform:translateZ(.3px);
  background-image:repeating-linear-gradient(180deg,transparent 0 14px,color-mix(in srgb,var(--r-nota) 45%,transparent) 14px 26px);
  background-size:2px 100%;background-repeat:no-repeat;background-position:50% 0}
.recinto__rot{position:absolute;transform:translate(-50%,-50%) translateZ(.3px);font:800 13px var(--font-display);
  letter-spacing:var(--track-lab);color:var(--r-nota);white-space:nowrap}
.recinto__norte{position:absolute;width:60px;height:60px;transform:translateZ(.3px)}
.recinto__norte i{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--r-nota)}
.recinto__norte i::after{content:"";position:absolute;left:50%;top:6px;width:0;height:0;margin-left:-8px;
  border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:26px solid var(--r-nota)}
.recinto__norte b{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font:900 14px var(--font-display);color:var(--r-nota)}

/* ── Volúmenes ──
   Cada cara (.vol__f) se pinta mezclando el color del grupo (--zc) con la
   sombra según hacia dónde mira (--sh, 100% en la cara superior) y después
   con el fondo según su visibilidad (--vis: baja cuando otro está fijado). */
.vol{position:absolute;transform-style:preserve-3d;outline:none;--lift:0px;--sz:1;--vis:100%;
  transform:translateZ(var(--lift)) scaleZ(var(--sz))}
.vol[role="button"]{cursor:pointer}
.vol__f{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:visible;box-sizing:border-box;
  background:color-mix(in srgb,color-mix(in srgb,var(--zc) var(--sh,100%),var(--r-sombra)) var(--vis),var(--r-bg))}
.vol__top{transform:translateZ(var(--h));box-shadow:inset 0 0 0 1.5px rgba(0,0,29,.4);
  transition:box-shadow .2s var(--ease),filter .2s var(--ease)}
.vol__w{transition:none}
.vol__txt{position:absolute;transform:translate(-50%,-50%) translateZ(calc(var(--h) + .4px));
  font:800 15px/1.1 var(--font-display);letter-spacing:0;color:var(--zt);white-space:nowrap;pointer-events:none}
.vol__pin{position:absolute;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--zc);
  box-sizing:border-box;display:grid;place-items:center;transform:translateZ(calc(var(--h) + .4px));pointer-events:none}
.vol__pin svg{width:17px;height:17px;fill:none;stroke:#00001d;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vol__decor{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--zt);stroke-opacity:.32;stroke-width:1.6;
  pointer-events:none;overflow:visible}
.vol__decor rect,.vol__decor circle{fill:var(--zt);fill-opacity:.14}
.vol__decor .tarima{fill:var(--zt);fill-opacity:.55;stroke:none}
.vol__decor .borde{fill:none;stroke-opacity:.5;stroke-dasharray:5 4}
.vol__decor .flecha{stroke:var(--r-nota);stroke-opacity:1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Encendido: el bloque sube hacia el visitante y su tapa se aclara con un
   aro nítido. La losa y el piso de la feria no se levantan: son el suelo. */
.vol[role="button"]:hover,.vol[role="button"]:focus-visible,.vol.is-on{--lift:14px}
.vol--feria,.vol--losa{--lift:0px !important}
.vol[role="button"]:hover .vol__top,.vol:focus-visible .vol__top,.vol.is-on .vol__top{
  filter:brightness(1.1);box-shadow:inset 0 0 0 2.5px var(--r-aro)}
.vol--stand:hover .vol__top,.vol--stand:focus-visible .vol__top,.vol--stand.is-on .vol__top{box-shadow:inset 0 0 0 2px var(--r-aro)}
.vol[role="button"]:focus-visible .vol__top{box-shadow:inset 0 0 0 3px var(--blue-electric),inset 0 0 0 5px #fff}
/* Con algo fijado, el resto baja para que se lea cuál es. */
.recinto--fijo .vol[role="button"]:not(.is-on){--vis:62%}
.recinto--fijo .vol[role="button"]:not(.is-on) .vol__bill{opacity:.5}

/* Formas por tipo de espacio: la jerarquía se lee por altura (en el JSON) y
   por tratamiento de la tapa. */
.vol--feria .vol__top{box-shadow:inset 0 0 0 2px rgba(0,0,29,.3)}
:root[data-theme="light"] .vol--feria{--zc:#e6edf8}
.vol--networking .vol__top{box-shadow:inset 0 0 0 3px #00001d}
.vol--servicios .vol__top{box-shadow:inset 0 0 0 1.5px #c9d3ec}
.vol--ext .vol__top{box-shadow:inset 0 0 0 2px var(--zc);border:2px dashed color-mix(in srgb,var(--zt) 55%,transparent)}
.vol--ext .vol__pin{border-color:var(--r-nota)}
.vol--ext .vol__txt{color:var(--r-nota);letter-spacing:var(--track-lab);font-size:12px}
:root[data-theme="light"] .vol--ext .vol__txt{color:#3a4470}
.vol--losa{pointer-events:none}
.vol--losa .vol__top{box-shadow:inset 0 0 0 2.5px color-mix(in srgb,#8fdcff 34%,transparent)}
:root[data-theme="light"] .vol--losa .vol__top{box-shadow:inset 0 0 0 2.5px rgba(10,47,122,.28)}

/* Stands: fichas de la rampa de azules con su render parado encima. */
.vol--stand .vol__top{box-shadow:inset 0 0 0 1.4px #00001d}
.vol--stand .vol__txt{font-size:11px;color:#00001d}
.vol--stand[data-libre="0"]{--zc:#ffffff}
.vol__libre{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--ok-fill);border:1.4px solid #00001d;
  box-sizing:border-box;transform:translateZ(calc(var(--h) + .5px));pointer-events:none}
.vol__bill{position:absolute;left:50%;top:50%;width:var(--bw);transform-origin:50% 100%;
  transform:translate(-50%,-100%) translateZ(var(--h)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx)));
  transition:opacity .25s var(--ease),filter .25s var(--ease)}
.vol__bill img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 5px 5px rgba(0,0,29,.4))}
.vol__sombra{position:absolute;left:10%;right:10%;bottom:-5%;height:22%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,29,.5),rgba(0,0,29,0))}
.vol--stand:hover .vol__bill img,.vol--stand:focus-visible .vol__bill img,.vol--stand.is-on .vol__bill img{
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 12px 10px rgba(0,0,29,.5))}
.vol--stand.is-dim{--vis:32%}
.vol--stand.is-dim .vol__bill{opacity:.28;filter:saturate(.4)}

/* Entrada: los volúmenes se extruyen desde el suelo, uno tras otro, al entrar
   en pantalla. Terminado el escalonado (.recinto--listo) responden al tiro. */
@media(prefers-reduced-motion:no-preference){
  .vol{transition:transform .3s var(--ease)}
  .recinto:not(.recinto--entra) .vol{--sz:.02}
  .recinto--entra:not(.recinto--listo) .vol{transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 12ms)}
}
@media(prefers-reduced-motion:reduce){
  .vol,.vol__top,.vol__bill{transition:none}
}

/* ── El panel lateral: ficha arriba, índice comprimido abajo ── */
.recinto__lado{position:sticky;top:calc(var(--nav-h,64px) + 14px);display:grid;gap:12px;align-content:start}
@media(max-width:900px){.recinto__lado{position:static}.rf{min-height:0}}
.rf{position:relative;min-height:238px;padding:16px 18px 16px;border:1px solid var(--hair);border-radius:var(--r-card);
  background:var(--surface-card)}
:root[data-theme="light"] .rf{background:var(--card);border-color:var(--line)}
.rf__k{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-dim);
  text-transform:uppercase;letter-spacing:var(--track-lab)}
.rf__k i{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,29,.28)}
/* Ficha de stand en dos líneas (23-oct-2026). */
.rf__fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rf__fila .badge{flex:none}
.rf__fila--t{align-items:baseline;margin-top:6px}
.rf__fila--t .rf__t{margin:0;min-width:0}
.rf__fila--t .rf__p{margin:0;flex:none;text-align:right;white-space:nowrap}
.rf__m2{margin-left:7px;padding-left:7px;border-left:1px solid var(--hair);color:var(--accent-ink);
  text-transform:none;letter-spacing:0;font-size:13px}
.rf__t{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.15;letter-spacing:var(--track-title-2);
  color:var(--ink);margin:7px 30px 0 0}
.rf__d{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:8px 0 0}
.rf__m{font-size:13px;font-weight:700;color:var(--accent-ink);margin:8px 0 0}
.rf__p{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--ink);margin:10px 0 0;
  font-variant-numeric:tabular-nums}
.rf__p small{font-size:12px;font-weight:600;color:var(--ink-dim);margin-left:4px}
.rf__b{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rf__b .btn{padding:8px 14px;font-size:13px;border-radius:999px}
/* Del stand fijado al mismo stand en el metaverso (23-oct-2026). */
.rf__3d{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--accent-ink);text-decoration:none}
.rf__3d:hover{text-decoration:underline}
.rf__3d:focus-visible{outline:2px solid var(--blue-electric);outline-offset:2px;border-radius:4px}
.rf__x{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--hair);
  background:none;color:var(--ink);cursor:pointer;font-size:12px;line-height:1}
.rf__x:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
/* La foto de la ficha (19-oct-2026): a sangre arriba, alto fijo 16:9 para que
   el panel no salte entre una zona con foto y otra sin. Sin foto real, el
   icono de la zona sobre su color, nunca una foto ajena. */
.rf__foto{position:relative;margin:-16px -18px 14px;aspect-ratio:16/9;overflow:hidden;
  border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  background:color-mix(in srgb,var(--zc,var(--blue-electric)) 16%,var(--surface-2))}
.rf__foto img{width:100%;height:100%;object-fit:cover;display:block;animation:rfFoto .28s var(--ease)}
.rf__ico{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink)}
.rf__ico svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round;opacity:.75}
@keyframes rfFoto{from{opacity:.25}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.rf__foto img{animation:none}}
.rf__foto ~ .rf__x{top:10px;right:10px;background:var(--surface);border-color:var(--line-dark-2)}
.rf__stats{display:flex;gap:20px;margin-top:14px}
.rf__stats div{display:grid}
.rf__stats b{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:var(--track-title-2)}
.rf__stats span{font-size:12px;color:var(--ink-dim);margin-top:4px}

.rley{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface-card);padding:4px 10px}
:root[data-theme="light"] .rley{background:var(--card);border-color:var(--line)}
.rley__g{border-top:1px solid var(--hair)}
.rley__g:first-child{border-top:0}
.rley__g>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 4px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.rley__g>summary::-webkit-details-marker{display:none}
.rley__g>summary:hover{color:var(--accent-ink)}
.rley__g>summary:focus-visible{outline:2px solid var(--blue-electric);outline-offset:-2px;border-radius:6px}
.rley__dot{width:10px;height:10px;border-radius:50%;background:var(--zc);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,29,.28)}
.rley__ico{width:26px;height:26px;border-radius:8px;background:var(--zc);color:var(--zi);flex:none;
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,29,.18)}
.rley__ico svg{width:15px;height:15px}
.rley__n{flex:1}
.rley__c{font-style:normal;font-size:12px;font-weight:600;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.rley__chev{width:7px;height:7px;flex:none;margin:0 4px 3px 2px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.rley__g[open]>summary .rley__chev{transform:rotate(-135deg);margin:4px 4px 0 2px}
.rley__l{display:grid;padding:0 0 6px}
.rley__it{all:unset;display:block;padding:5px 8px 5px 22px;border-radius:6px;font-size:13px;line-height:1.25;
  color:var(--ink-soft);cursor:pointer}
.rley__it:hover,.rley__it:focus-visible,.rley__it.is-on{color:var(--ink);background:color-mix(in srgb,var(--blue-electric) 14%,transparent)}
.rley__it[aria-pressed="true"]{font-weight:700;color:var(--ink)}
.rley__it:focus-visible{box-shadow:0 0 0 2px var(--blue-electric)}
.rley__stands{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;padding:8px 4px 7px;border-top:1px solid var(--hair);
  font-size:12px;line-height:1.3}
.rley__k{font-weight:700;color:var(--ink);margin-right:2px}
.rley__cat{all:unset;display:inline-flex;align-items:center;gap:5px;padding:2px 5px;border-radius:5px;cursor:pointer;
  font-size:12px;color:var(--ink-soft);white-space:nowrap}
.rley__cat i{width:9px;height:9px;border-radius:2px;background:var(--sc);flex:none}
.rley__cat b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rley__cat[data-cat]:hover,.rley__cat[aria-pressed="true"]{color:var(--ink);background:color-mix(in srgb,var(--blue-electric) 14%,transparent)}
.rley__cat:focus-visible{box-shadow:0 0 0 2px var(--blue-electric)}
.recinto--filtro .rley__cat[data-cat][aria-pressed="false"]{opacity:.5}
.rley__cat--libre{cursor:default}
.rley__cat--libre i{border-radius:50%;background:var(--ok-fill)}
@media(prefers-reduced-motion:reduce){.rley__chev{transition:none}}

/* ── Angosto: la maqueta al ancho, menos sesgo y sin rótulos chicos; los
   pines crecen y el índice queda como acordeón bajo la ficha. ── */
@media(max-width:640px){
  .recinto{--rx:54deg;--rz:-5deg;--ox:-50%}
  .vol__txt{display:none}
  .vol__pin{transform:translateZ(calc(var(--h) + .4px)) scale(1.7)}
  .vol__libre{display:none}
}

/* ═══ Overlays en la franja visible (19-oct-2026) ════════════════════════════
   Una sola regla para TODO modal de las páginas del Forum: el muro de leads,
   la ficha de categoría y su visor 3D, el modal de zona y los avisos. Se
   marcan con [data-franja] y se pintan en la parte del iframe que el
   visitante ve (--vis-t / --vis-h, de montarFranjaVisible() en forum.js),
   sea cual sea el alto del marco que puso Webflow y el scroll de la página
   de arriba. Fuera de un iframe, o con el marco entero a la vista, las
   variables no existen y el overlay cubre la ventana como siempre. El panel
   nunca pasa del alto de la franja: lo que sobra se recorre con su propio
   scroll, no queda cortado. */
[data-franja]{top:var(--vis-t,0px) !important;bottom:auto !important;height:var(--vis-h,100%) !important}
[data-franja] > *{max-height:calc(var(--vis-h,100dvh) - 24px) !important;overscroll-behavior:contain}
.cff-aviso{bottom:calc(var(--vis-b,0px) + 24px)}

/* ═══ PLANO 3D (WebGL) · assets/cff27/recinto3d.js · 19-oct-2026 ═════════════
   El lienzo ocupa el marco de la maqueta; la maqueta CSS queda como respaldo
   sin WebGL. Los controles van sobre el lienzo. touch-action: pan-y deja que
   un dedo scrollee la página; "Mover el plano" lo cambia a none. */
.recinto--3d .recinto__vista{display:none}
.rc3{position:absolute;inset:0}
.rc3[hidden]{display:none}
.rc3__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:none}
.rc3--activo .rc3__lienzo{touch-action:none}
.rc3--arrastra .rc3__lienzo{cursor:grabbing}
.rc3__carga{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:14px;font-weight:600;color:var(--r-nota)}
/* Mientras bajan el galpón y los stands (23-oct-2026): píldora arriba, el plano ya se puede mirar. */
.rc3__progreso{position:absolute;top:12px;right:12px;margin:0;padding:7px 12px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink);background:color-mix(in srgb,var(--surface) 80%,transparent);pointer-events:none}
:root[data-theme="light"] .rc3__progreso{background:rgba(255,255,255,.9)}
.rc3__progreso[hidden]{display:none}
@media (max-width:560px){.rc3__progreso{top:auto;bottom:54px;right:8px}}
.rc3__ui{position:absolute;inset:0;pointer-events:none}
.rc3__ui > *{pointer-events:auto}
.rc3__modos,.rc3__zoom{position:absolute;display:flex;gap:2px;padding:3px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hair)}
:root[data-theme="light"] .rc3__modos,:root[data-theme="light"] .rc3__zoom{background:rgba(255,255,255,.9);border-color:var(--line)}
.rc3__modos{top:12px;left:12px}
.rc3__zoom{right:12px;bottom:12px;flex-direction:column;border-radius:14px}
.rc3__ui button{all:unset;box-sizing:border-box;pointer-events:auto;cursor:pointer;font:700 14px/1 var(--font-body);color:var(--ink);
  border-radius:999px;transition:background .15s,color .15s}
.rc3__modos button{padding:9px 14px}
.rc3__modos button[aria-pressed="true"]{background:var(--blue-electric);color:#fff}
.rc3__modos button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--blue-electric) 16%,transparent)}
.rc3__zoom button{width:36px;height:36px;display:grid;place-items:center;border-radius:11px}
.rc3__zoom button:hover{background:color-mix(in srgb,var(--blue-electric) 16%,transparent)}
.rc3__ui svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rc3__ui button:focus-visible{box-shadow:0 0 0 2px var(--blue-electric)}
.rc3__ui .rc3__mover{position:absolute;left:12px;bottom:12px;display:none;align-items:center;gap:8px;padding:10px 14px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--hair);font-size:14px}
.rc3__ui .rc3__mover[aria-pressed="true"]{background:var(--blue-electric);color:#fff;border-color:var(--blue-electric)}
/* 23-oct-2026: la firma "Powered by MBC" reemplaza el aviso de controles y se
   ve SIEMPRE (pedido de Rodrigo). Píldora oscura en los dos temas: el logo
   oficial es la versión negativa. En táctil y celular sube a la esquina de
   arriba a la derecha, para no chocar con "Mover el plano" ni con el zoom. */
.rc3__firma{position:absolute;left:12px;bottom:12px;margin:0;padding:7px 14px 7px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;background:rgba(0,0,29,.78);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:none !important}
.rc3__firma span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e6e6e6}
.rc3__firma img{display:block;height:24px;width:auto}
:root[data-theme="light"] .rc3__ui .rc3__mover:not([aria-pressed="true"]){background:rgba(255,255,255,.9)}
@media (hover:none),(pointer:coarse){.rc3__ui .rc3__mover{display:inline-flex}
  .rc3__firma{left:auto;right:8px;bottom:auto;top:8px;padding:5px 10px;gap:7px}.rc3__firma img{height:18px}}
.rc3--tactil .rc3__ui .rc3__mover{display:inline-flex}
.rc3--tactil .rc3__firma{left:auto;right:8px;bottom:auto;top:8px;padding:5px 10px;gap:7px}
.rc3--tactil .rc3__firma img{height:18px}
/* En el celular el plano gana alto (cuadrado) y el zoom va en fila. */
@media (max-width:900px){.recinto--3d .recinto__marco{aspect-ratio:1/1}}
@media (max-width:560px){.rc3__modos{top:8px;left:8px}.rc3__modos button{padding:8px 11px;font-size:14px}
  .rc3__firma{left:auto;right:8px;bottom:auto;top:8px;padding:5px 10px;gap:7px}.rc3__firma img{height:18px}
  .rc3__zoom{flex-direction:row;right:8px;bottom:8px}.rc3__ui .rc3__mover{left:8px;bottom:8px}}

/* ═══ Visor 3D de stand (assets/cff27/stand3d.js) ════════════════════════════
   23-oct-2026. Un modelo por categoría, bajo demanda. Lo usan la ficha de
   /cff27/stands y el panel de categorías de /cff27, por eso vive acá y no en
   cada página. Solo tokens: se pinta solo en los dos temas. */
.s3d{width:100%;min-width:0}
.s3d__vis{position:relative;width:100%;aspect-ratio:var(--s3d-ar,4/3);border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hair);
  background:radial-gradient(120% 90% at 50% 38%,var(--surface-2) 0%,var(--surface) 78%)}
:root[data-theme="light"] .s3d__vis{background:radial-gradient(120% 90% at 50% 38%,#ffffff 0%,var(--surface-2) 80%)}
.s3d__vis model-viewer{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:transparent;--poster-color:transparent;--min-hotspot-opacity:0;--progress-bar-height:0}
.s3d__cargando{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:20px;text-align:center;font-size:14px;font-weight:600;color:var(--ink);pointer-events:none}
.s3d__cargando[hidden]{display:none}
.s3d__logo{height:34px;width:auto;opacity:.9}
:root[data-theme="light"] .s3d__logo{display:none}
.s3d__barra{width:min(220px,60%);height:3px;border-radius:2px;background:var(--hair);overflow:hidden}
.s3d__barra i{display:block;height:100%;background:var(--blue-electric);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-1)}
.s3d__cargando--error .s3d__barra,.s3d__cargando--error .s3d__logo{display:none}
.s3d__ui{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;
  pointer-events:none;z-index:2}
.s3d__btn{pointer-events:auto;cursor:pointer;font:inherit;font-size:14px;font-weight:700;line-height:1;
  padding:9px 13px;border-radius:999px;border:1px solid var(--hair);color:var(--ink);
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(6px);
  transition:background var(--dur-1),border-color var(--dur-1)}
.s3d__btn:hover:not(:disabled){border-color:var(--blue-electric)}
.s3d__btn[aria-pressed="true"]{background:var(--blue-electric);border-color:var(--blue-electric);color:#fff}
.s3d__btn:disabled{opacity:.45;cursor:default}
.s3d__btn:focus-visible{outline:2px solid var(--blue-electric);outline-offset:2px}
/* Chips de ID sobre cada gráfica: ocultos hasta pedirlos y cuando quedan de espaldas. */
.s3d__hs{display:block;cursor:pointer;font:inherit;font-size:12px;font-weight:800;line-height:1;
  padding:5px 8px;border-radius:999px;border:1.5px solid #fff;color:#fff;background:var(--blue-electric);
  box-shadow:0 4px 14px rgba(0,0,29,.45);opacity:0;pointer-events:none;
  transform:translateY(4px);transition:opacity var(--dur-1),transform var(--dur-1)}
.s3d--ids .s3d__hs[data-visible]{opacity:1;pointer-events:auto;transform:none}
.s3d__hs[aria-pressed="true"]{background:#fff;color:#00001d;border-color:var(--blue-electric)}
.s3d__nota{margin:8px 0 0;font-size:14px;color:var(--ink-soft);text-align:center}
.s3d__prueba{margin-top:14px;padding:14px;border:1px solid var(--hair);border-radius:var(--r-tile)}
.s3d__prueba[hidden]{display:none}
.s3d__lbl{font-size:11px;font-weight:700;letter-spacing:var(--track-lab);text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.s3d__fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.s3d__campo{flex:1 1 220px;min-width:0}
.s3d__campo select{width:100%;font:inherit;font-size:14px;padding:10px 12px;border-radius:var(--r-tile);
  border:1px solid var(--hair);color:var(--ink);background:var(--surface)}
.s3d__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s3d__subir{position:relative;cursor:pointer;overflow:hidden}
.s3d__subir input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.s3d__subir:focus-within{outline:2px solid var(--blue-electric);outline-offset:2px}
.s3d__msj{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.s3d__msj:empty{display:none}
.s3d__privado{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.s3d__tabla{margin-top:12px}
.s3d__tabla[hidden]{display:none}
.s3d__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.s3d__tabla table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.s3d__tabla th,.s3d__tabla td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
.s3d__tabla td:last-child{white-space:normal;min-width:140px}
.s3d__tabla thead th{font-size:11px;font-weight:700;letter-spacing:var(--track-lab);text-transform:uppercase;color:var(--ink-soft)}
.s3d__tabla tbody tr{cursor:pointer;transition:background var(--dur-1)}
.s3d__tabla tbody tr:hover,.s3d__tabla tbody tr.is-sel{background:color-mix(in srgb,var(--blue-electric) 14%,transparent)}
@media (max-width:560px){.s3d__btn{font-size:14px;padding:8px 11px}.s3d__fila .btn{flex:1 1 auto;justify-content:center}}

/* ═══ Superficie oscura fija ═════════════════════════════════════════════════
   23-oct-2026, metaverso. Hay superficies que van oscuras en los DOS temas
   porque lo que tienen detrás no lo controla el tema: una foto real (para eso
   ya está .cff-sobre-foto) o una escena 3D iluminada, que cambia de brillo a
   cada paso del visitante. Sobre eso, un vidrio claro en modo sol quedaría con
   texto negro encima de un techo blanco: ilegible en la mitad del recorrido.

   Los tokens de tinta se reasignan en el :root según el tema, así que un hijo
   no puede "volver" al ánimo luna con un atributo. Esta clase re-declara los
   valores de luna de este mismo archivo para su subárbol, y todo componente
   del contrato que viva adentro (.btn, .lang, .lab, .badge) se pinta oscuro
   sin una regla nueva. Son exactamente los valores del :root de arriba; si
   cambian allá, cambian acá.
   --velo es el fondo del vidrio: el navy del Forum al 78%. Peor caso medido
   (píxel blanco puro detrás, sin contar el desenfoque): #ffffff da 11,4:1,
   #e6e6e6 9,1:1, --accent-ink 7,5:1, --ok-ink 6,5:1 y --cost-ink 5,0:1. */
.cff-fijo-oscuro{
  --navy:#00001d; --navy-deep:#00001d; --navy-2:#06064a;
  --on-dark-1:#ffffff; --on-dark-2:#ffffff; --on-dark-3:#e6e6e6; --on-dark-4:#e6e6e6;
  --ink:#ffffff; --ink-soft:#ffffff; --ink-dim:#e6e6e6;
  --ink-1:#ffffff; --ink-2:#e6e6e6; --ink-3:#e6e6e6;
  --accent-ink:#8fdcff; --green-ink:#61ceff; --cyan-ink:#00def6;
  --ok-ink:#4ade80; --ok-fill:#22c55e; --cost-ink:#ff8a8a; --cost-fill:#ef4444;
  --hair:rgba(255,255,255,.20); --line:rgba(255,255,255,.20); --line-2:rgba(255,255,255,.30);
  --line-dark:rgba(255,255,255,.20); --line-dark-2:rgba(255,255,255,.30);
  --surface:#00001d; --surface-2:#050528; --surface-card:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.04); --bg-soft:rgba(255,255,255,.06);
  --nav-btn-bg:rgba(255,255,255,.09); --nav-btn-border:rgba(255,255,255,.26);
  --velo:rgba(0,0,29,.78);
  color:var(--ink);
}