/* Gráficos dentro de las polaroids (área de foto 584 × 600, fondo #fff9e9).
   Colores y tipos del Figma: tinta #412e20, café #84592b, barras #7e5b35, verde #a9b28b. */

.g-svg { position: absolute; inset: 0; display: block; overflow: visible; }
.g-svg text { font-family: 'Lato', system-ui, sans-serif; }
.g-tick { font-size: 11px; fill: #84592b; letter-spacing: 0.04em; }
.g-titulo-eje { font-size: 10px; fill: #84592b; letter-spacing: 0.22em; }
.g-leyenda { font-size: 12px; fill: #84592b; letter-spacing: 0.08em; }
.g-fila-nombre { font: 600 26px 'Cormorant SC', Georgia, serif !important; fill: #412e20; }
.g-grilla { stroke: rgba(65, 46, 32, 0.12); stroke-width: 1; }
.g-base { stroke: rgba(65, 46, 32, 0.45); stroke-width: 1; }
.g-base-suave { stroke: rgba(65, 46, 32, 0.2); stroke-width: 1; }
.g-zona { fill: transparent; cursor: crosshair; }

.g-barra { fill: #7e5b35; transition: fill 0.15s ease, opacity 0.15s ease; }
.g-barra.g-apagada { opacity: 0.45; }
.g-barra.g-activa { fill: #412e20; }

.g-area { fill: rgba(126, 91, 53, 0.1); }
.g-linea { fill: none; stroke: #7e5b35; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { fill: #7e5b35; }
.g-guia { stroke: rgba(65, 46, 32, 0.45); stroke-width: 1; opacity: 0; }
.g-marca { fill: #412e20; stroke: #fff9e9; stroke-width: 2.5; opacity: 0; }
.g-con-guia .g-guia, .g-con-guia .g-marca { opacity: 1; }

.g-burbuja { opacity: 0.88; transition: opacity 0.15s ease, stroke-width 0.15s ease; stroke: #fff9e9; stroke-width: 0; }
.g-burbuja.g-activa { opacity: 1; stroke-width: 2.5; }

/* dato flotante de las líneas */
.g-dato {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}
.g-dato.visible { opacity: 1; }
.g-dato-eti { font: 400 11px 'Lato', sans-serif; letter-spacing: 0.22em; color: #84592b; }
.g-dato-valor { font: 600 30px/1.05 'Cormorant SC', Georgia, serif; letter-spacing: 0.02em; color: #412e20; }
.g-dato-nota { font: 300 13px 'Lato', sans-serif; color: #84592b; }

/* ficha (tooltip) y textos de panel, como en el Figma */
.g-eti { display: block; font: 400 11px 'Lato', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #84592b; }
.g-div { display: block; height: 1px; margin: 9px 0 8px; background: rgba(65, 46, 32, 0.25); }
.g-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font: 300 13px 'Lato', sans-serif; color: #84592b; }
.g-fila + .g-fila { margin-top: 2px; }
.g-fila b { font: 600 22px 'Cormorant SC', Georgia, serif; letter-spacing: 0.02em; color: #412e20; }
.g-ficha {
  position: absolute;
  min-width: 176px;
  padding: 14px 16px 12px;
  background: #fff9e9;
  border: 1px solid rgba(65, 46, 32, 0.55);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.g-ficha.visible { opacity: 1; }

/* panel inferior (mujeres y hombres, futuro y pasado) */
.g-panel {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  height: 128px;
  padding: 18px 22px;
  border: 1px solid rgba(65, 46, 32, 0.35);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.g-panel.con-dato { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; border-color: rgba(65, 46, 32, 0.55); }
.g-panel-titulo, .g-panel-nombre { display: block; font: 600 28px 'Cormorant SC', Georgia, serif; letter-spacing: 0.02em; color: #412e20; }
.g-panel-nombre { font-size: 36px; margin-top: 2px; }
.g-panel-sub { display: block; margin-top: 4px; font: 300 15px 'Lato', sans-serif; color: #84592b; }
.g-panel-filas { flex: 1; max-width: 300px; }

/* sectores */
.g-sector { cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; }
.g-sector.g-apagada { opacity: 0.55; }
.g-sector-eti { font-size: 11px; fill: #fff9e9; letter-spacing: 0.22em; pointer-events: none; }
.g-sector-valor { font: 600 26px 'Cormorant SC', Georgia, serif !important; fill: #fff9e9; pointer-events: none; }

/* futuro y pasado: la cámara del Figma (500 × 469,5) a escala */
.g-camara {
  position: absolute;
  left: 22px;
  top: 30px;
  width: 500px;
  height: 469.5px;
  transform: scale(0.8);
  transform-origin: 0 0;
}
.g-seg { position: absolute; left: 0; width: 500px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 6.098px; cursor: pointer; }
.g-seg img { display: block; flex: none; pointer-events: none; }
.g-seg-pasado { top: 0; height: 176.82px; }
.g-seg-pasado img { width: 487.805px; height: 457.317px; object-fit: cover; }
.g-seg-futuro { top: 176.82px; height: 292.69px; justify-content: flex-end; }
.g-seg-futuro img { width: 100%; aspect-ratio: 1600 / 1502; object-fit: cover; }
.g-seg b {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font: 700 58px 'Cormorant SC', Georgia, serif;
  letter-spacing: 0.02em;
  transition: font-size 0.15s ease, color 0.15s ease, top 0.15s ease;
  pointer-events: none;
}
.g-seg-pasado b { top: 35px; color: #a9b28b; }
.g-seg-futuro b { top: 206px; color: #fff9e9; }
.g-seg.g-activa b { font-size: 66px; color: #fff9e9; }
.g-seg-pasado.g-activa b { top: 30px; }
.g-seg-futuro.g-activa b { top: 201px; }
.g-cam-guias { position: absolute; left: 432px; top: 30px; width: 140px; height: 376px; pointer-events: none; }
.g-cam-guia { position: absolute; left: 0; font: 400 11px 'Lato', sans-serif; letter-spacing: 0.22em; color: #84592b; padding-left: 40px; transition: color 0.15s ease; }
.g-cam-guia::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 1px; background: rgba(65, 46, 32, 0.3); transition: width 0.15s ease, background 0.15s ease; }
.g-cam-guia.pasado { top: 64px; }
.g-cam-guia.futuro { top: 228px; }
.g-cam-guia.g-activa { color: #412e20; }
.g-cam-guia.g-activa::before { background: rgba(65, 46, 32, 0.7); width: 34px; }

/* Sabile: recorrido en cuatro pasos */
.g-sabile { position: absolute; left: 0; top: 0; width: 584px; height: 536px; cursor: pointer; }
.g-sabile-paso { position: absolute; inset: 14px 14px 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.g-sabile-paso.visible { opacity: 1; pointer-events: auto; }
.g-sabile-marco { position: relative; max-width: 100%; max-height: 100%; }
.g-sabile-marco img { display: block; max-width: 556px; max-height: 510px; width: auto; height: auto; }
.g-pin { position: absolute; transform: translate(-5px, -5px); display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.g-pin-punto { width: 10px; height: 10px; border-radius: 50%; background: #412e20; box-shadow: 0 0 0 2px #fff9e9; flex: none; }
.g-pin-eti {
  padding: 4px 7px;
  background: #fff9e9;
  border: 1px solid rgba(65, 46, 32, 0.45);
  border-radius: 2px;
  font: 400 11px 'Lato', sans-serif;
  letter-spacing: 0.08em;
  color: #412e20;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.g-pin:hover .g-pin-eti, .g-pin.g-activa .g-pin-eti { background: #412e20; color: #fff9e9; }
.g-sabile-barra { position: absolute; left: 24px; right: 24px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-sabile-puntos { display: flex; gap: 7px; }
.g-sabile-puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(65, 46, 32, 0.2); }
.g-sabile-puntos i.actual { background: #412e20; }
.g-boton {
  padding: 8px 12px;
  background: #fff9e9;
  border: 1px solid rgba(65, 46, 32, 0.4);
  border-radius: 3px;
  font: 400 11px 'Lato', sans-serif;
  letter-spacing: 0.16em;
  color: #84592b;
  cursor: pointer;
}
.g-boton:hover { background: #412e20; color: #fff9e9; }

/* coroplético */
.g-mapa { position: absolute; left: 18px; top: 26px; }
.g-mapa-interior { position: absolute; left: 0; top: 0; width: 909px; height: 551px; transform-origin: 0 0; }
.g-municipio { position: absolute; pointer-events: none; }
.g-municipio-svg { position: absolute; }
.g-municipio svg { display: block; overflow: visible; }
.g-municipio svg path { pointer-events: visiblePainted; cursor: pointer; transition: filter 0.12s ease; }
.g-municipio.g-activa svg path { stroke: #412e20; stroke-width: 2.4; filter: brightness(1.08); }
.g-mapa-ficha {
  position: absolute;
  left: 28px;
  bottom: 96px;
  width: 270px;
  padding: 14px 16px 12px;
  background: #fff9e9;
  border: 1px solid rgba(65, 46, 32, 0.55);
  border-radius: 4px;
}
.g-leyenda-mapa { position: absolute; left: 28px; right: 28px; bottom: 22px; }
.g-clases { display: flex; margin-top: 8px; }
.g-clases i { width: 46px; height: 13px; border: 0.5px solid rgba(65, 46, 32, 0.3); transition: transform 0.15s ease; }
.g-clases i.actual { transform: translateY(-4px); box-shadow: 0 0 0 1.5px #412e20; }
.g-extremos { display: flex; justify-content: space-between; width: 322px; margin-top: 6px; font: 300 11px 'Lato', sans-serif; color: #84592b; }