:root{
  --hku-font-ui: "Lato", sans-serif;
}

/* =========================================================
   GLOBAL — Node typography (applies to ALL modes)
   ========================================================= */
.hku-node__label{
  font-size: 12px;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}

/* =========================
   TYPOGRAPHY (fonts loaded elsewhere)
   ========================= */
:root{
  --hku-font-ui: "Lato", Arial, sans-serif;
  --hku-font-ui-heavy: "Lato", Arial, sans-serif;
  --hku-font-node-title: "Lato", Arial, sans-serif;
}


/* =========================
   LAYOUT GENERAL
   ========================= */
.hku-explorer{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 40px;
  font-family: var(--hku-font-ui);
}

/* =========================
   NEW 3-COLUMN LAYOUT (menu | grid | map)
   ========================= */
.hku-explorer{
  max-width: 1600px; /* wider to fit 3 columns */
}

.hku-layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}

/* Left column */
.hku-col-left{
  min-width: 240px;
}
.hku-col-left .hku-modes{
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 35px;
}
.hku-col-left .hku-filter-row{
  flex-direction: column;
  gap: 6px;
}
.hku-col-left .hku-filter-label{
  min-width: 0;
}

/* Center column */
.hku-col-center{
  min-width: 0;
}
.hku-col-center .hku-grid-wrap{
  max-width: none;
  margin: 0;
}

/* Right column (map) */
.hku-col-right{
  min-width: 260px;
   display: flex;
  flex-direction: column;
  gap: 24px;
}
.hku-layout .hku-topbar{
  display: block;
  padding: 0;
  gap: 0;
}
.hku-layout .hku-topbar-right{
  flex: none;
  width: 100%;
  max-width: none;
  justify-content: flex-start;
}
.hku-layout .hku-country-map{
  width: 100%;
  max-width: none;
}

/* Legends in left column */
.hku-col-left .hku-footer{
  margin-top: 18px;
}
.hku-col-left .hku-footer-tags{
  display: block;
}
.hku-col-left .hku-footer-tags .hku-footer-tag,
.hku-col-left .hku-footer-tags .hku-legend-item{
  display: inline-block;
}

/*TIme*/

/* ===============================
   FIX TIME LEGEND (layout grande)
   =============================== */

/* ===============================
   TIME legend – layout final
   =============================== */

.hku-col-left .hku-footer-tags .hku-time-legend{
  display: flex;
  flex-direction: column;
  gap: 18px;                 /* ⬅ espacio vertical moderado */
  margin-top: 18px;
}

/* cada fila */
.hku-col-left .hku-footer-tags .hku-time-legend .hku-legend-item{
  display: grid;
  background: transparent;
    border: 0px;
 /* grid-template-columns: 90px 1fr;  /* icono | texto */
  /*align-items: center;
  column-gap: 18px;*/
}

/* iconos (+ ○ |) */
.hku-col-left .hku-footer-tags .hku-time-legend .hku-legend-icon{
  font-size: 72px;           /* ⬅ ligeramente más contenido */
  line-height: 1;
}

/* texto principal */
.hku-col-left .hku-footer-tags .hku-time-legend .hku-legend-text{
  font-size: 15px;           /* ⬅ tamaño equilibrado */
  line-height: 1.15;
  font-weight: 400;
  text-align: left;          /* ⬅ alineación correcta */
  white-space: normal;
}

/* Responsive: stack columns */
@media (max-width: 1100px){
  .hku-layout{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hku-col-right{
    order: 3;
  }
}


/* Stage: NO permitir que el wrap crezca raro */
.hku-grid-wrap{
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}

/* =========================
   CONTROLES / TOGGLES
   ========================= */
.hku-modes{
  display: flex;
  gap: 36px;
  align-items: center;
  margin-bottom: 18px;
}

/* HOW TO READ button/link */
.hku-howto-read{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0px;
  /*border: 2px solid #2b6cb0;*/
  /*border-radius: 8px;*/
  text-decoration: none;
  color: #111;
  font-family: var(--hku-font-ui-heavy);
  font-weight: 800; /* Lato heavy */
  letter-spacing: 0.3px;
  line-height: 1;
}
.hku-howto-read:hover{ background: rgba(43,108,176,0.08); }
.hku-howto-read:focus{ outline: 3px solid rgba(43,108,176,0.35); outline-offset: 2px; }

.hku-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.hku-toggle-label{
  font-family: var(--hku-font-ui);
  font-weight: 600; /* Lato medium-ish */
  letter-spacing: 0.4px;
}

.hku-toggle-box{
  width: 42px;
  height: 22px;
  border: 2px solid #111;
  position: relative;
  display: inline-block;
}

.hku-toggle-box::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #111;
  transition: transform 160ms ease;
}

.hku-toggle.is-on .hku-toggle-box::before{
  transform: translateX(100%);
}

/* =========================
   FILTROS
   ========================= */
.hku-filter-rows{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  max-width: 1600px;
}

.hku-filter-row{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.hku-filter-label{
  display: block;
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  font-family: var(--hku-font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  cursor: pointer;
  background: transparent;
}

/* Panel tipo acordeón: empuja el layout hacia abajo */
.hku-filter-panel{
  position: static;
  left: auto;
  top: auto;

  background: #d9d9d9;
  padding: 5px;
  border-radius: 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 5px;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  max-height: 0;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: none;
  transition: max-height 220ms ease, opacity 160ms ease, visibility 0s linear 220ms;

  font-weight: 600;
  font-size: 14px;
}

.hku-filter-row.is-open .hku-filter-panel{
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: max-height 220ms ease, opacity 160ms ease, visibility 0s;
}

.hku-chip{
  border: 0;
  background: #fff;
  color: #111;

  font-family: var(--hku-font-ui);
  font-size: 16px;
  line-height: 1.15;

  padding: 8px 12px;
  border-radius: 0;

  cursor: pointer;
  user-select: none;

  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
}
.hku-chip:hover{ background: #000000;color:#ffffff; }

.hku-chip.is-active{
  background: #111;
  color: #fff;
}

.hku-filter-row.is-open .hku-filter-label{
  background: #d9d9d9;
}

.hku-filter-row.has-active .hku-filter-label{
  background: #d9d9d9;
}

/* =========================
   GRID (7x7)
   ========================= */
.hku-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: 0;

  width: 100%;
  /* aspect-ratio puede fallar, por eso JS fuerza height */
  aspect-ratio: 1 / 1;

  position: relative;
  z-index: 5;

  /*background-image:
    linear-gradient(to right, #e9e9e9 1px, transparent 1px),
    linear-gradient(to bottom, #e9e9e9 1px, transparent 1px);
  background-size: calc(100% / 7) calc(100% / 7);
  background-position: 0 0;*/
}

/* =========================
   NODOS
   ========================= */
.hku-node{
  position: relative;
  z-index: 6;

  /* Smaller circles inside each grid cell */
  width: 78%;
  height: 78%;
  margin: auto;

  border-radius: 999px;

  /* Default (on page load): NO border */
  border: 0;
  background: transparent;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  transition: opacity 0.2s ease;
}
.hku-node.is-dimmed{
  opacity: 0.15 !important;
  transition:opacity .25s ease;
}


/* TIME ON: show borders (solid for projects, dashed for authors) */
.hku-explorer.is-time .hku-node{
  background: #fff;
  border: 1px solid #222;
  width: 68%;
  height: 68%;
}
.hku-explorer.is-time .hku-node.is-author{
  border-style: dashed;
  border-color: rgba(0,0,0,0.35);
}
.hku-explorer.is-time .hku-node.is-project{
  border-style: solid;
  border-color: rgba(0,0,0,0.55);
}

/* hover disabled on nodes (no scale) */
.hku-node:hover{ transform: none; }
.hku-node-inner{ width: 100%; }
.hku-node-title{ font-size: 12px; line-height: 1.05; font-family: var(--hku-font-node-title); font-weight: 700; }
.hku-node-sub{ font-size: 12px; opacity: 0.65; margin-top: 4px; font-family: var(--hku-font-ui); font-weight: 400; }

/* =========================
   SVG TIME LAYER
   ========================= */
#hku-time-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1 !important;
  overflow: visible;
}
/* Solo en TIME lo subimos para que eventos/diagonal sean protagonistas */
.hku-explorer.is-time #hku-time-layer{
  z-index: 50 !important;
}

/* =========================
   FOOTER / LEGEND
   ========================= */
.hku-footer{
  margin-top: 14px;
}

.hku-footer-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hku-legend{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  padding: 28px 0 10px;
  width: 100%;
}

.hku-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  font-family: var(--hku-font-ui);
  font-weight: 400;
}

.hku-legend-divider{
  width: 1px;
  height: 18px;
  background: #cfcfcf;
  display: inline-block;
}

.hku-legend-plus{
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}
.hku-legend-plus::before,
.hku-legend-plus::after{
  content: "";
  position: absolute;
  background: #111;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hku-legend-plus::before{ width: 14px; height: 3px; }
.hku-legend-plus::after{ width: 3px; height: 14px; }

.hku-legend-circle{
  width: 16px;
  height: 16px;
  border: 3px solid #111;
  border-radius: 999px;
  display: inline-block;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .hku-explorer{ padding: 18px 16px; }
  .hku-grid-wrap{ padding: 70px 40px; }
  .hku-filter-label{ min-width: 160px; }
}

@media (max-width: 640px){
  .hku-grid-wrap{ padding: 60px 18px; }
  .hku-modes{ gap: 16px; flex-wrap: wrap; }
  .hku-node-title{ font-size: 14px; }
}


/* =========================
   PROJECT IMAGES (default view)
   Prevent broken-image icon while loading: the <img> is hidden until loaded.
   ========================= */
.hku-node.is-project .hku-project-media{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hku-node.is-project .hku-project-img{
  max-width: 58px;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease;
  user-select: none;
  pointer-events: none;
}

/* becomes visible only after JS marks it loaded */
.hku-node.is-project.is-img-loaded .hku-project-img{
  opacity: 1;
  visibility: visible;
}

/* optional: keep the fallback title in the same typographic style */
.hku-node.is-project .hku-project-fallback{
  font-family: var(--hku-font-node-title);
}


/* =========================
   PROJECT TOOLTIP (AUTHOR)
   ========================= */
.hku-node.is-project{ position: relative; }

.hku-project-tooltip{
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 10;
}

.hku-project-tooltip.is-visible{ display: inline-flex; }

.hku-project-tooltip-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #111;
  flex: 0 0 auto;
}


.hku-project-tooltip-box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 4px 6px;              /* 👈 menos ancho */
  border-radius: 10px;
  background: #fff;

  font-family: var(--hku-font-ui);
  font-weight: 500;
  font-size: 9px;
  line-height: 1.15;
  color: #111;

  max-width: 90px;               /* 👈 CLAVE: fuerza forma más cuadrada */
  white-space: normal;           /* permite 2 líneas */
  background: #fff;
  opacity: 1;
}



/* Ensure tooltip stays above all other nodes/text */
.hku-node.is-tooltip-front{ z-index: 9999 !important; }
.hku-node.is-tooltip-front .hku-project-tooltip{ z-index: 10000 !important; }

/* ======================================================
   BASE FONT SIZE
   ====================================================== */
.hku-explorer {
  font-size: 12px;
}

/* ======================================================
   TIME MODE ONLY
   ====================================================== */
.hku-explorer.is-time {
  font-size: 12px;
}

/* ---- Eventos TIME: texto máximo 10px ---- */
.hku-explorer.is-time .hku-time-event,
.hku-explorer.is-time .hku-time-event-year,
.hku-explorer.is-time .hku-time-event-title {
  font-size: 10px;
  line-height: 1.25;
}

/* ======================================================
   TIME EVENTS — CROSSES
   ====================================================== */

/* Tamaño reducido al 50% + color #cdcdcd */
.hku-explorer.is-time .hku-time-cross {
  width: 62.5px;   /* mitad de 125px */
  height: 62.5px;
}

.hku-explorer.is-time .hku-time-cross::before,
.hku-explorer.is-time .hku-time-cross::after {
  background-color: #cdcdcd;
}

/* ======================================================
   TIME MODE — NODE CIRCLES
   ====================================================== */

/* Autores: círculo punteado */
.hku-explorer.is-time .hku-node.is-author {
  border: 0px dashed #bdbdbd;
  border-radius: 50%;
}

/* Proyectos: círculo línea continua */
.hku-explorer.is-time .hku-node.is-project {
  border: 1px solid #bdbdbd;
  border-radius: 50%;
}
/* =========================================================
   TIME — Typography fit inside circles (override)
   - Reduce node title from 18px to 12px in TIME
   - Prevent text from escaping circles
   ========================================================= */

.hku-explorer.is-time .hku-node{
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.hku-explorer.is-time .hku-node-title{
  font-size: 12px;
  line-height: 1.15;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  word-break: break-word;
  hyphens: auto;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* up to 3 lines inside circle */
}

.hku-explorer.is-time .hku-node-sub{
  font-size: 10px;
  line-height: 1.15;
  margin-top: 4px;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* =========================================================
   TIME — layering: events above nodes (avoid overlap)
   ========================================================= */
.hku-time-events,
#hku-time-events,
.hku-time-events-svg{
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.hku-time-event text{
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}


/* If TIME circles are HTML nodes, shrink slightly to create breathing space */
.hku-explorer.is-time .hku-node{
  transform: none;
  transform-origin: center;
}
/* Da aire arriba SOLO en modo TIME para que "18th C." quede fuera del grid sin tocar controles */
.hku-explorer .hku-grid-wrap{
  margin-top: 40px;   /* ajusta 22–34 según tu gusto */
}


#hku-movements-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* si el SVG calza exacto, puedes probar 'fill' */
  pointer-events: none;
  z-index: 4;
  display: none;
}

/* ==============================
   MOVEMENTS — VISIBILIDAD SVG (INICIO)
   ============================== */

/* En movements, la retícula “lava” las líneas del SVG. La apagamos. */
.hku-explorer.is-movements .hku-grid{
  background-image: none !important;
}

/* Asegura que el SVG overlay quede arriba del grid pero debajo de nodos */
#hku-movements-img{
  z-index: 5; /* mismo nivel que grid; como el grid pierde background, el SVG gana lectura */
}

/* (Opcional) si aún lo sientes tenue, puedes subir contraste un poquito */
.hku-explorer.is-movements #hku-movements-img{
  filter: contrast(1.15);
}

/* ==============================
   MOVEMENTS — VISIBILIDAD SVG (FIN)
   ============================== */

/* ==============================
   MOVEMENTS — APARICIÓN SUAVE (INICIO)
   ============================== */
.hku-explorer.is-movements #hku-movements-img{
  opacity: 0;
  transform: translateY(6px);
  animation: hkuMovementsIn .65s ease-out forwards;
}

@keyframes hkuMovementsIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==============================
   MOVEMENTS — APARICIÓN SUAVE (FIN)
   ============================== */

/* =====================================================
   MOVEMENTS — AUTORES CON BORDE CONTINUO (INICIO)
   ===================================================== */
.hku-explorer.is-movements .hku-node.is-author{
  /*border-style: solid !important;
  border-width: 1px;*/      /* puedes subir a 1.2px si lo quieres más presente */
}
/* =====================================================
   MOVEMENTS — AUTORES CON BORDE CONTINUO (FIN)
   ===================================================== */

/* =====================================================
   MOVEMENTS — CAPAS SVG DETRÁS DE NODOS (INICIO)
   ===================================================== */
#hku-movements-img{
  z-index: 3 !important;     /* debajo del grid/nodos */
  pointer-events: none;
}

/* Asegurar que el grid y nodos estén arriba */
.hku-grid{
  position: relative;
  z-index: 5;
}
.hku-node{
  position: relative;
  z-index: 6;
}
/* =====================================================
   MOVEMENTS — CAPAS SVG DETRÁS DE NODOS (FIN)
   ===================================================== */

/* ==============================
   CONSTRUCTION OF NATURE
   ============================== */

/* Overlay SVG gris */
#hku-construction-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:3;
}

#hku-construction-img{ opacity: 1 !important; }


/* En construction ocultamos grid de puntos (si te estorba al SVG) */
.hku-explorer.is-construction .hku-grid{
  background-image: none !important;
}

/* Mantener nodos arriba del overlay */
.hku-explorer.is-construction .hku-grid{ position: relative; z-index: 5; }
.hku-explorer.is-construction .hku-node{ position: relative; z-index: 6; }

/* Solo autores visibles (proyectos se ocultan desde JS, pero esto refuerza estilo) */
.hku-explorer.is-construction .hku-node.is-author{
  background: #fff;
  /*border: 1px solid rgba(0,0,0,0.55); /* línea continua */
  border-style: solid;                 /* NO dashed */
  width: 68%;
  height: 68%;
  box-sizing: border-box;
  overflow: hidden;
}

/*Footer*/

/* Evita que el footer invada el área del "20th C." en MOVEMENTS */
.hku-explorer.is-movements #hku-footer{
  padding-top: 30px;
}


/* Footer tags negros (como tu captura) */
.hku-explorer.is-construction #hku-footer-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}

.hku-explorer.is-construction .hku-footer-tag{
  background: #000;
  color: #fff;
  border-radius: 14px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/*Footer TIME*/

.hku-legend-cross{
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  opacity: 0.35;
}

.hku-legend-cross::before,
.hku-legend-cross::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#111;
  transform: translate(-50%, -50%);
}

.hku-legend-cross::before{ width: 18px; height: 2px; }
.hku-legend-cross::after{ width: 2px; height: 18px; }


/* ===== MOVEMENTS footer legend ===== */
.hku-mov-legend{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.hku-mov-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  line-height: 1.2;
}

.hku-mov-item{
  font-family: var(--hku-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #111;
}

/* Estilos de lineas */
/* Base */
.hku-mov-item{
  font-family: var(--hku-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #111;
  border-bottom: none;
}

/* DOTTED (más suave) */
.hku-mov-item.is-dotted{
  border-bottom: 3px dotted rgba(0,0,0,0.28);
}

/* DASHED (más suave) */
.hku-mov-item.is-dashed{
  border-bottom: 3px dashed rgba(0,0,0,0.28);
}

/* SOLID tonos (Regionalism vs Climate Resilience) */
.hku-mov-item.is-solid-1{
  border-bottom: 2px solid rgba(0,0,0,0.55);
}
.hku-mov-item.is-solid-2{
  border-bottom: 2px solid rgba(0,0,0,0.95);
}

/* UNDERLINE legacy -> solid-2 */
.hku-mov-item.is-underline{
  border-bottom: 2px solid rgba(0,0,0,0.95);
}

/* DOUBLE line (dos tonos) */

.hku-mov-item.is-double-1,
.hku-mov-item.is-double-2{
  position: relative;
  padding-bottom: 8px; /* espacio para ambas líneas */
}

/* línea superior */
.hku-mov-item.is-double-1{
  border-bottom: 1px solid rgba(0,0,0,0.45); /* gris medio */
}
.hku-mov-item.is-double-2{
  border-bottom: 1px solid rgba(0,0,0,0.95); /* negro fuerte */
}

/* línea inferior */
.hku-mov-item.is-double-1::after,
.hku-mov-item.is-double-2::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;           /* separación exacta entre líneas */
  height: 1px;
}

.hku-mov-item.is-double-1::after{
  background: rgba(0,0,0,0.25); /* gris más claro */
}

.hku-mov-item.is-double-2::after{
  background: rgba(0,0,0,0.75); /* negro suavizado */
}


/* GREEN tonos (3 niveles) */
.hku-mov-item.is-green-1{ border-bottom: 4px solid rgba(57,255,58,0.35); }
.hku-mov-item.is-green-2{ border-bottom: 4px solid rgba(57,255,58,0.65); }
.hku-mov-item.is-green-3{ border-bottom: 4px solid rgba(57,255,58,1); }

/* GREEN legacy -> green-2 */
.hku-mov-item.is-green{ border-bottom: 4px solid rgba(57,255,58,0.65); }


/* ===== CONSTRUCTION footer tags ===== */
.hku-construction-footer{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  align-items: flex-end;
}

.hku-construction-footer .hku-ctag .hku-legend-underline {
  height: 8px;
}

.hku-ctag{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-family: var(--hku-font-ui);
  color: #111;
}

.hku-ctag-label{
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  text-align: left;
}

.hku-ctag-bar{
  display: block;
  width: 140px;
  height: 20px;
  border-radius: 2px;
  background: rgba(0,0,0,0.15);
}

/* tonos (ajústalos si quieres más contraste) */
/* CONSTRUCTION footer tones */
.hku-ctag.t1 .hku-ctag-bar { background: rgba(0,0,0,0.06); }
.hku-ctag.t2 .hku-ctag-bar { background: rgba(0,0,0,0.12); }
.hku-ctag.t3 .hku-ctag-bar { background: rgba(0,0,0,0.18); }
.hku-ctag.t4 .hku-ctag-bar { background: rgba(0,0,0,0.26); }
.hku-ctag.t5 .hku-ctag-bar { background: rgba(0,0,0,0.36); }
.hku-ctag.t6 .hku-ctag-bar { background: rgba(0,0,0,0.50); }
.hku-ctag.t7 .hku-ctag-bar { background: rgba(0,0,0,0.68); }


/* ===== Popover / modal hover ===== */
#hku-footer-popover{
  position: absolute;
  z-index: 9999;
  max-width: 740px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.35);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

#hku-footer-popover .hku-pop-title{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

#hku-footer-popover .hku-pop-body{
  font-size: 14px;
  line-height: 1.5;
  max-width: 700px;
}

/* =========================
   Hover SVG por proyecto (ACF project_svg)
   ========================= */

.hku-node.is-project .hku-project-hover-svg{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  object-fit: contain;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 10;
}

/* Solo si el proyecto tiene SVG configurado */
.hku-node.is-project.has-hover-svg:hover .hku-project-hover-svg{
  opacity: 1;
  visibility: visible;
}

/* Opcional: ocultar el icono cuando aparece el SVG */
.hku-node.is-project.has-hover-svg:hover .hku-project-media{
  opacity: 0;
  visibility: hidden;
}


/* Mostrar SVG en hover */
.hku-node.is-project.has-hover-svg .hku-project-hover-svg{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
}

.hku-node.is-project.has-hover-svg:hover .hku-project-hover-svg{
  opacity: 1;
  visibility: visible;
}

/* Ocultar icono original en hover (fuerte) */
.hku-node.is-project.has-hover-svg:hover .hku-project-media{
  display: none !important;
}


#hku-grid-wrap{ position: relative; }

.hku-hover-stage{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}

.hku-hover-stage-img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* cambia a cover si quieres que llene más */
  opacity: 0.35;        /* ajusta intensidad */
}

.hku-explorer.is-project-hover-bg .hku-hover-stage{
  opacity: 1;
}

#hku-grid{
  position: relative;
  z-index: 2;
}

.hku-hover-stage{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}

.hku-hover-stage-img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* usa cover si quieres que “llene” más */
  opacity: 1;
}

.hku-explorer.is-project-hover-bg .hku-hover-stage{
  opacity: 1;
}

#hku-grid{
  position: relative;
  z-index: 3;
}


/* Texto oculto por defecto */
.hku-node.is-project .hku-project-text{
  display: none;
  text-align: center;
  line-height: 1.15;
}

/* Modo hover activo */
/*.hku-explorer.is-project-hovering .hku-node.is-project{
  border: 2px solid rgba(0,0,0,0.25);
  border-radius: 999px;
}*/

/* Ocultar iconos */
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-media{
  display: none !important;
}

/* Mostrar texto */
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-text{
  display: block;
}

/* Estilos de texto */
.hku-node.is-project .hku-project-title{
  font-weight: 700;
  font-size: 12px;
}

.hku-node.is-project .hku-project-year,
.hku-node.is-project .hku-project-author{
  font-size: 10px;
  opacity: 0.85;
}

/* Proyecto activo */
.hku-explorer.is-project-hovering .hku-node.is-project.is-hovered{
  background: transparent;
  border-color: transparent;
}

.hku-explorer.is-project-hovering .hku-node.is-project.is-hovered .hku-project-text{
  color: #fff;
}


/* ================================
   TRANSICIONES SUAVES – PROJECT HOVER
   ================================ */

.hku-node.is-project{
  transition:
    border-color .25s ease,
    background-color .25s ease;
    /*transform .25s ease;*/
}

/* ICONO (media) */
.hku-project-media{
  transition:
    opacity .2s ease;
    /*transform .2s ease;*/
}

/* TEXTO */
.hku-project-text{
  opacity: 0;
  /*transform: scale(0.95);*/
  transition:
    opacity .2s ease;
    /*transform .2s ease;*/
}

/*Ocultar diseñador proyectos*/
.hku-project-text .hku-project-author {
  display: none;
}

/* Cuando entra el modo hover global */
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-media{
  opacity: 0;
  /*transform: scale(0.92);*/
}

.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-text{
  opacity: 1;
  /*transform: scale(1);*/
}

.hku-explorer.is-project-hovering
.hku-node.is-project.is-hovered{
  /*transform: scale(1.05);*/
}

.hku-node.is-project{
  /*border-width: 2px;
  border-style: solid;*/
  border-color: transparent;
}

.hku-explorer.is-project-hovering .hku-node.is-project{
  border-color: rgba(0,0,0,0.25);
}


/* Suavidad general */
.hku-node.is-project .hku-project-media,
.hku-node.is-project .hku-project-text {
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Estado normal: se ve el icono, texto oculto */
.hku-node.is-project .hku-project-text {
  opacity: 0;
  /*transform: scale(0.98);*/
  pointer-events: none;
}

/* Cuando estás en hover-mode (global) */
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-media {
  opacity: 0;
  /*transform: scale(0.98);*/
}

/* Y el texto aparece */
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-text {
  opacity: 1;
  /*transform: scale(1);*/
  pointer-events: none;
}
/* Entrada rápida, salida un poco más lenta */
.hku-node.is-project .hku-project-media,
.hku-node.is-project .hku-project-text{
  transition-property: opacity, transform;
  transition-timing-function: ease;
}

/* ENTRADA */
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-text{
  transition-duration: 180ms;
}
.hku-explorer.is-project-hovering .hku-node.is-project .hku-project-media{
  transition-duration: 180ms;
}

/* SALIDA (cuando se quita is-project-hovering) */
.hku-node.is-project .hku-project-text{
  transition-duration: 280ms;
}
.hku-node.is-project .hku-project-media{
  transition-duration: 280ms;
}


/* ==============================
   COUNTRY MAP (top-right)
   ============================== */
.hku-country-stage{
  position: absolute;
  right: 40px;
  top: 120px;          /* ajusta según tus controles */
  width: 420px;        /* ajusta a gusto */
  max-width: 42vw;
  pointer-events: none;

  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 0;
}

.hku-explorer.is-country-map-visible .hku-country-stage{
  opacity: 1;
  transform: translateY(0);
}

.hku-country-stage-img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .hku-country-stage{
    right: 18px;
    top: 96px;
    width: 300px;
    max-width: 60vw;
  }
}

#hku-grid-wrap, #hku-grid { position: relative; z-index: 5; }
.hku-country-stage { z-index: 1; pointer-events:none; }


/* topbar en 2 columnas */
.hku-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.hku-topbar-left{ flex: 1 1 auto; }
.hku-topbar-right{ flex: 0 0 360px; display:flex; justify-content:flex-end; }

/* el mapa NO debe ser absolute ni fixed */
.hku-country-map{
  position: relative !important;
  width: 360px;
  max-width: 360px;
  aspect-ratio: 16/9;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}

.hku-explorer.is-country-map-visible .hku-country-map{ opacity:1; }

#hku-country-map-img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}


/* =============== TOPBAR LAYOUT (menu más grande / mapa más pequeño) =============== */

.hku-topbar{
  /* baja el alto general del header */
  padding: 12px 18px;      /* antes seguro era más grande */
  gap: 14px;
  align-items: flex-start;
}

/* Columna izquierda (menu/controles) = más grande */
.hku-topbar-left{
  flex: 1 1 72%;
  min-width: 0;
}

/* Columna derecha (mapa) = más pequeña */
.hku-topbar-right{
  flex: 0 0 28%;
  max-width: 28%;
  display: flex;
  justify-content: flex-end;
}

/* El contenedor del mapa: reduce tamaño */
.hku-country-map{
  width: 100%;
  max-width: 360px;        /* ajusta: 300-420 según te guste */
  aspect-ratio: 16 / 7;    /* mantiene proporción visual */
  height: auto;
  padding: 0;
}

/* La imagen del mapa */
#hku-country-map-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =============== HACER EL TOPBAR MÁS BAJO (para que el grid suba) =============== */

/* reduce espacio vertical interno de controles */
.hku-modes{
  margin-bottom: 6px;
}

/* reduce espacio entre filas de filtros */
.hku-filter-rows{
  gap: 6px;
}

/* reduce el espacio debajo del topbar si tu wrapper lo tiene */
.hku-topbar + .hku-grid-wrap,
.hku-topbar + #hku-grid-wrap{
  margin-top: 6px; /* o 0 si lo quieres pegadito */
}


.hku-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.hku-modal.is-open { display: block; }

.hku-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }

.hku-modal__panel{
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: min(430px, 90vw);
  background: #fff;
  /*border: 2px solid #111;
  border-radius: 24px;*/
  padding: 22px 22px 18px;
}

.hku-modal__close{
  position: absolute; top: 10px; right: 14px;
  border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
}

.hku-modal__imgwrap{
  /*width: 55%;
  max-width: 220px;*/
  margin: 6px auto 16px;
  /*border: 2px solid #111;
  border-radius: 10px;*/
  overflow: hidden;
}
.hku-modal__imgwrap.is-hidden { display: none; }

#hku-author-modal-img{ display:block; width:100%; height:auto; }

.hku-modal__title{ margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.hku-modal__subtitle{ margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.hku-modal__text{ font-size: 16px; line-height: 1.35;overflow-y: scroll;height: 150px; }

.hku-modal__actions{ margin-top: 14px; display:flex; justify-content:center; }
.hku-modal__btn{
  display:inline-block;
  padding: 8px 18px;
  background:#111; color:#fff;
  border-radius: 10px;
  text-decoration:none;
  min-width: 120px;
  text-align:center;
}
.hku-modal__actions.is-hidden { display: none; }

/*Controles activos a verde*/
.hku-toggle.is-on .hku-toggle-box::before {
  background: #00ff66;
}

/* ===============================
   AUTHOR HOVER MODAL
   =============================== */
#hku-author-hover {
  position: fixed;
  z-index: 99999;
  width: 280px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 10px;
  overflow: hidden;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;

  pointer-events: none; /* ✅ cuando está oculto NO bloquea clicks */
}

#hku-author-hover.is-visible {
  pointer-events: auto; /* ✅ solo visible es clickeable */
}

#hku-author-hover.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#hku-author-hover .hku-ah-imgwrap {
  width: 100%;
  /*height: 150px;*/
  background: #f3f3f3;
  overflow: hidden;
}

#hku-author-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .15s ease;
}

#hku-author-hover .hku-ah-body {
  padding: 12px 14px 14px;
}

#hku-author-hover .hku-ah-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

#hku-author-hover .hku-ah-summary {
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  color: rgba(0,0,0,0.75);
  overflow-y: scroll;
  max-height: 150px;
}

/* Button inside author hover */
#hku-author-hover .hku-ah-actions{
  padding: 0 14px 14px;
}
#hku-author-hover .hku-ah-btn{
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #000000;
  margin-top: 20px;
}
#hku-author-hover .hku-ah-btn:hover{
  border-color: rgba(0,0,0,0.35);
}

/* TIME legend: stack items vertically */
.hku-explorer.is-time #hku-footer-tags .hku-legend{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* opcional: que cada item use toda la línea */
.hku-explorer.is-time #hku-footer-tags .hku-legend .hku-legend-item{
  width: 100%;
}

/* opcional: ocultar el divisor si estorba en vertical */
.hku-explorer.is-time #hku-footer-tags .hku-legend .hku-legend-divider{
  display: none;
}

/* ===============================
   MOVEMENTS legend – vertical
   =============================== */
.hku-explorer.is-movements #hku-footer-tags .hku-mov-legend{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Cada grupo (top / bottom) en columna */
.hku-explorer.is-movements #hku-footer-tags .hku-mov-row{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Cada item ocupa línea completa */
.hku-explorer.is-movements #hku-footer-tags .hku-mov-item{
  width: 100%;
}

/*Ocultar autores en Movements*/

.is-movements .hku-project-tooltip {
  display: none !important;
}


/* ===============================
   CONSTRUCTION OF NATURE – compact
   =============================== */
.hku-explorer.is-construction #hku-footer-tags .hku-construction-footer{
  justify-content: flex-start; /* elimina el centrado */
  align-items: flex-start;
  gap: 12px;                  /* reduce el aire */
}

/* Opcional: botones ocupan mejor el ancho */
.hku-explorer.is-construction #hku-footer-tags .hku-ctag{
  margin: 0;
}

/*Ocultar autores en Construction*/

.is-construction .hku-project-tooltip {
  display: none !important;
}


/* =========================================
   FIX: Textos dentro de círculos (ALL MODES)
   - Más área útil del círculo
   - Mejor distribución vertical
   - Tipografía adaptable
   ========================================= */

/* 1) Un poquito más grandes los círculos (default) */
.hku-node{
  width: 84%;      /* antes 78% */
  height: 84%;
}

/* En TIME no los dejes tan pequeños */
.hku-explorer.is-time .hku-node{
  width: 74%;      /* antes 68% */
  height: 74%;
}

/* 2) Aire interno + evitar cortes raros */
.hku-node{
  box-sizing: border-box;
  padding: 10px;         /* aire interior */
  overflow: hidden;      /* mantenemos el círculo limpio */
}

/* 3) En vez de centrar perfecto (mata 3 líneas), usamos “centro óptico” */
.hku-node{
  align-items: flex-start; /* antes center */
}

/* El contenido baja un poco para quedar visualmente centrado */
.hku-node-inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10%;        /* centro óptico (ajusta 8–12% si quieres) */
}

/* 4) Tipografía adaptable */
.hku-node-title{
  font-size: clamp(10px, 0.75vw, 12px);
  line-height: 1.15;
  text-align: center;

  /*display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* máx 3 líneas título */
  /*overflow: hidden;

  word-break: break-word;
  hyphens: auto;*/
}

.hku-node-sub{
  font-size: clamp(9px, 0.7vw, 11px);
  line-height: 1.15;
  margin-top: 4px;
  text-align: center;
  opacity: 0.65;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;   /* por defecto 1 línea */
  overflow: hidden;

  word-break: break-word;
  hyphens: auto;
}

/* Si hay 2 subs (año + autor), deja que el último tenga 2 líneas */
.hku-node-sub:last-child{
  -webkit-line-clamp: 2;
}

/* TIME: como ya es más denso, apretamos un pelo */
.hku-explorer.is-time .hku-node{
  padding: 8px;
}
.hku-explorer.is-time .hku-node-inner{
  margin-top: 8%;
}


/* =========================================
   TIME: evitar que la curvatura del círculo recorte letras
   ========================================= */

/* Mantén el círculo limpio pero dale “safe area” al texto */
.hku-explorer.is-time .hku-node{
  overflow: hidden;
  padding: 8px;
  display: flex;
  align-items: center;       /* volvemos a centrar en TIME */
  justify-content: center;
}

/* SAFE AREA: el texto no debe ocupar todo el diámetro */
.hku-explorer.is-time .hku-node-inner{
  width: 86%;                /* 👈 clave: reduce el ancho útil */
  margin: 0 auto;
  margin-top: 0 !important;  /* por si quedó algún margin-top óptico */
}

/* Tipografía un poco más compacta en TIME */
.hku-explorer.is-time .hku-node-title{
  font-size: 11px;
  line-height: 1.12;
  -webkit-line-clamp: 2;     /* 2 líneas máximo en TIME */
}

.hku-explorer.is-time .hku-node-sub{
  font-size: 9.5px;
  line-height: 1.12;
  margin-top: 3px;
  -webkit-line-clamp: 1;     /* cada sub 1 línea */
}

/* Si quieres permitir que el autor use 2 líneas (sin tocar el borde) */
.hku-explorer.is-time .hku-node-sub:last-child{
  -webkit-line-clamp: 2;
}

/* =========================================
   Ajuste: textos NO pegados arriba
   - Mantiene safe-area (no mordidas)
   - Re-centra verticalmente el contenido
   ========================================= */

/* Mantén el círculo con aire, pero vuelve a centrar contenido */
.hku-node{
  align-items: center !important;  /* en vez de flex-start */
}

/* El inner ya no debe empujarse hacia abajo */
.hku-node-inner{
  margin-top: 0 !important;
}

/* SAFE AREA horizontal se mantiene (evita mordidas por curvatura) */
.hku-node-inner{
  width: 88%;
  margin-left: auto;
  margin-right: auto;
}

/* En TIME, un poquito más “apretado” pero centrado */
.hku-explorer.is-time .hku-node-inner{
  width: 86%;
}


/* =========================================
   FIX: Project tooltip visible en DEFAULT
   ========================================= */

/* En modo default, NO recortes el tooltip fuera del círculo */
.hku-explorer:not(.is-time) .hku-node.is-project{
  overflow: visible !important;
}

/* Asegura que el tooltip pueda estar por encima */
.hku-explorer:not(.is-time) .hku-node.is-project .hku-project-tooltip{
  z-index: 10000;
  pointer-events: none;
}

/* =========================================
   CONSTRUCTION: evitar "..." y guiones raros
   ========================================= */

.hku-explorer.is-construction .hku-node-title,
.hku-explorer.is-construction .hku-node-sub{
  /* No cortes con guiones */
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere; /* rompe si es necesario, sin guiones */
}

/* Quita el clamp (no más "…") */
.hku-explorer.is-construction .hku-node-title{
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Si quieres limitar pero sin "...", usamos max-height sin ellipsis */
.hku-explorer.is-construction .hku-node-title{
  line-height: 1.15;
  max-height: calc(1.15em * 3); /* 3 líneas máximo */
}

/* Lo mismo para sub si te interesa */
.hku-explorer.is-construction .hku-node-sub{
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* =========================================
   CONSTRUCTION: usar tamaño de DEFAULT
   (evita que se encojan y se corten textos)
   ========================================= */

.hku-explorer.is-construction .hku-node.is-author{
  width: 84% !important;   /* o 78% si quieres igualito al original */
  height: 84% !important;
}

/* Mantén el mismo aire interno que default */
.hku-explorer.is-construction .hku-node.is-author{
  padding: 10px !important;
  box-sizing: border-box;
}

.hku-explorer.is-construction .hku-node-title,
.hku-explorer.is-construction .hku-node-sub{
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/* =========================================
   CONSTRUCTION: Projects solo icono (sin texto)
   ========================================= */

/* Oculta el bloque de texto del project */
.hku-explorer.is-construction .hku-node.is-project .hku-project-text{
  display: none !important;
}

/* Oculta fallback title (por si se activa en algún modo) */
.hku-explorer.is-construction .hku-node.is-project .hku-project-fallback{
  display: none !important;
}

/* (Opcional) Asegura que el icono quede centrado bonito */
.hku-explorer.is-construction .hku-node.is-project .hku-node-inner{
  align-items: center;
  justify-content: center;
}

/* FORCE: country map visible top-right */
#hku-country-map-img{
  position: absolute !important;
  right: 60px !important;
  width: 280px !important;
  height: auto !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}
/* Evitar que el mapa se recorte */
.hku-explorer,
#hku-grid-wrap,
#hku-grid {
  overflow: visible !important;
}

/* ============================
   Fixed tag info panel
   ============================ */
#hku-tag-info-panel{
  position: fixed;
  right: 115px;
  bottom: 300px;
  width: 300px;
  max-width: calc(100vw - 60px);
  background: #000;
  color: #fff;
  padding: 20px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
  border-radius: 20px;
}
#hku-tag-info-panel.is-visible{
  opacity: 1;
  transform: translateY(0);
}
#hku-tag-info-panel .hku-tag-panel-title{
  font-size: 24px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 18px 0;
  color: #fff;
}
#hku-tag-info-panel .hku-tag-panel-body{
  font-size: 16px;
  line-height: 1.55;
  color: #fff;
}
#hku-tag-info-panel .hku-tag-panel-body *{
  color: #fff !important;
}

/* Make items feel interactive when they have info */
.hku-footer-tags .has-info{
  cursor: pointer;
}


/* Panel negro: fuerza texto legible */
.hku-tag-info-panel,
.hku-tag-info-panel * {
  color: #fff;
}

.hku-tag-info-body {
  color: #fff;
  opacity: 1;
}
.hku-tag-info-body p {
  color: #fff;
  opacity: 1;
  font-size: 11px;
}
.hku-footer-image-wrap{
  margin-top: auto; /* 👈 ESTO la empuja abajo */
  padding-top: 24px;
}
.hku-footer-image{
  display: block;
  width: 50%;
  max-width: 360px;
  margin: 0 auto;
  opacity: 0.85;
}

/* La columna derecha debe ser el "marco" */
.hku-topbar-right{
  position: relative;
  padding-bottom: 120px; /* espacio reservado para footer.png */
}

/* Footer anclado abajo del contenedor derecho */
.hku-footer-image-wrap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 16px;
  top: 766px;
}

.hku-footer-image{
  display: block;
  width: 40%;
  max-width: 260px;
  margin: 0 auto;
  opacity: 0.9;
}


/*Arreglo posicion de etiquetas de autores*/

/* Tooltip base */
.hku-project-tooltip{
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 10000;
  --tip-x: 0px;
  --tip-y: 0px;
}

.hku-project-tooltip.is-visible{ display: inline-flex; }

/* RIGHT (default) */
.hku-project-tooltip[data-pos="right"]{
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(var(--tip-x), calc(-50% + var(--tip-y)));
}

/* LEFT */
.hku-project-tooltip[data-pos="left"]{
  right: calc(100% + 10px);
  left: auto;
  top: 50%;
  transform: translate(calc(var(--tip-x) * 1), calc(-50% + var(--tip-y)));
}

/* TOP */
.hku-project-tooltip[data-pos="top"]{
  left: 50%;
  top: -10px;
  transform: translate(calc(-50% + var(--tip-x)), calc(-100% + var(--tip-y)));
}

/* BOTTOM */
.hku-project-tooltip[data-pos="bottom"]{
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(calc(-50% + var(--tip-x)), var(--tip-y));
}

/* Asegura contexto */
.hku-project-tooltip{
  position: absolute;
}

/* DOT base */
.hku-project-tooltip-dot{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Cuando tooltip está a la DERECHA del nodo (pos=right): dot en el lado IZQUIERDO */
.hku-project-tooltip[data-pos="right"] .hku-project-tooltip-dot{
  left: -6px;   /* ajusta */
  right: auto;
}

/* Cuando tooltip está a la IZQUIERDA del nodo (pos=left): dot en el lado DERECHO */
.hku-project-tooltip[data-pos="left"] .hku-project-tooltip-dot{
  right: -6px;  /* ajusta */
  left: auto;
}

/* Cuando tooltip está ARRIBA (pos=top): dot abajo centrado */
.hku-project-tooltip[data-pos="top"] .hku-project-tooltip-dot{
  left: 50%;
  right: auto;
  top: auto;
  bottom: -6px;
  transform: translateX(-50%);
}

/* Cuando tooltip está ABAJO (pos=bottom): dot arriba centrado */
.hku-project-tooltip[data-pos="bottom"] .hku-project-tooltip-dot{
  left: 50%;
  right: auto;
  top: -6px;
  bottom: auto;
  transform: translateX(-50%);
}

.hku-legend-underline{
  display: block;
  width: 190px;
  height: 3px;           /* ajusta 4–8px */
  
  object-fit: contain;
  pointer-events: none;
}

.hku-mov-item-wrap{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ===== Project hover legends (DEFAULT) ===== */
.hku-project-hover-legends{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.hku-phl-item{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.hku-phl-label{
  font-size: 14px; /* ajusta si quieres */
  line-height: 1.1;
}

/* “pill” items */
.hku-phl-pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.hku-legend-underline{
  display:block;
  width:100%;
  max-width:260px;
  
}

.hku-node:hover,
.hku-node.is-hovered,
.hku-node.is-project:hover,
.hku-explorer.is-project-hovering .hku-node.is-project.is-hovered{
  transform: none !important;
}

/* ================================
   TIME MODE – ocultar autores en proyectos
   ================================ */

.hku-explorer.is-time .hku-node.is-project .hku-node-title{
  margin-bottom: 0;
}


.hku-node-year,
.hku-node-author{
  font-size: 11px;
  line-height: 1.12;
  margin-top: 3px;
}

.hku-explorer.is-time .hku-node.is-project .hku-node-author{
  display: none;
}