/* ===========================
   BASE / RESETEOS SUAVES
   =========================== */

:root {
  --scrollymap-header-height: 80px;
  --scrollymap-map-height: 560px;
  /* Default entry position for mobile panels (tweak to align with the yellow line).
     Use a viewport-relative value so it's consistent across devices. */
  /* Default entry position for mobile panels.
    Raised from 86vh to 140vh because panels were appearing too high;
    increase to start further below the viewport so they animate up from the yellow line. */
  --scrollymap-entry: 200vh;
  --brand-bg: #253a34;
  --brand-fg: #f0d8b6;
  --panel-bg: rgba(255,255,255,0.65);
  --shadow-soft: 0 2px 16px rgba(0,0,0,0.10);
  --shadow-panel: 0 2px 16px rgba(0,0,0,0.08);
}


/* ===========================
   HEADER FIJO (standalone y embebido)
   =========================== */

.scrollymap-header {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  z-index: 20;
  background: var(--brand-bg);
  color: var(--brand-fg);
  padding: 0.8em 0 1em 0;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.scrollymap-header h2 {
  margin: 0 !important;
  font-size: 2.3em;
  color: var(--brand-fg);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ===========================
   MAPA (base)
   =========================== */

#map {
  position: fixed; /* base: story full viewport */
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  display: block !important;
  pointer-events: none; /* paneles por encima */
}


/* ===========================
   PANELES (base)
   =========================== */

.scrollymap-panels {
  position: fixed;
  top: 0; right: 0;
  width: 38vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  pointer-events: auto;
  margin-top: 0;
  padding-top: var(--scrollymap-header-height); /* no tapar con header */
  /* leave extra bottom padding so the last panel can fully scroll into view
     without changing individual panel heights when not pinned */
  padding-bottom: 280px;
  gap: 0; /* móvil define su propio gap */
}

.scrollymap-panel {
  position: relative;
  margin: 0 auto 2em auto;
  max-width: 420px;
  width: 100%;
  background: var(--panel-bg);
  border-radius: 1em;
  box-shadow: var(--shadow-panel);
  z-index: 11;
  pointer-events: auto;
  padding: 2em;
  opacity: 1;
  transform: scale(1);
  transition: opacity 280ms ease, transform 280ms ease;
}
.scrollymap-panel.appear { opacity: 1; transform: scale(1); }
.scrollymap-panel.hide   { opacity: 0; transform: scale(0.98); }

/* Flecha indicadora entre paneles (excepto el último) */
.scrollymap-panel:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -9px;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 18px solid rgba(37,58,52,0.95);
  opacity: 0.95;
  z-index: 12;
  animation: scrollymap-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes scrollymap-arrow-bounce {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
  100% { transform: translateX(-50%) translateY(0); }
}
.scrollymap-panel:not(:last-child).appear::after {
  border-top-color: rgba(37,58,52,1);
  opacity: 1;
}

/* Contenido de los paneles */
.scrollymap-img {
  width: 90%;
  margin: 0 auto 4px auto;
}
.scrollymap-figure { width: 100%; text-align: center; margin: 0; }
.scrollymap-figcaption {
  font-size: 0.82em;
  color: #666;
  margin: 2px auto 10px auto;
  line-height: 1.2;
}
.scrollymap-panel p {
  font-size: 1.05em;
  color: #253a34;
  text-align: left;
  max-width: 90%;
  margin: 0 auto 0.9rem auto;
  line-height: 1.5;
}

/* Listas dentro de paneles */
#scrollymap .scrollymap-panel ol,
#scrollymap .scrollymap-panel ul {
  margin: 1rem 0;
  padding-left: 1.25rem;
  list-style-position: outside;
  color: #253a34;
}
#scrollymap .scrollymap-panel li { margin-bottom: 0.45rem; line-height: 1.45; }
#scrollymap .scrollymap-panel ol { list-style-type: decimal; }
#scrollymap .scrollymap-panel ul { list-style-type: disc; }

/* ===========================
   ETIQUETAS / TOOLTIPS MAPA
   =========================== */

.mun-label {
  background: rgba(120,120,120,0.7) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  font-weight: 500;
  color: #fff;
  border: none !important;
  padding: 0.15em 0.5em;
  font-size: 1.15em;
  font-family: inherit;
  border-radius: 10px;
  min-width: 80px;
  text-align: center;
}

/* Primeros paneles: forzar contraste claro sobre el mapa */
#scrollymap.labels-white .mun-label {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  background: rgba(37,58,52,0.9) !important;
}

/* Ocultar etiquetas de municipios en estado final (las de estados sí quedan) */
#scrollymap.final-state .mun-label,
#scrollymap.final-state .mun-label * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
  
  /* Paneles embebidos (lado derecho) */

/* ===========================
   LAYOUT EMBEBIDO (dentro de #scrollymap)
   =========================== */

#scrollymap {
  position: relative;
  overflow: visible;
  /* Ensure the scrollymap section reserves enough space when panels are fixed.
     Use the CSS variable if present, but never less than the viewport height. */
  min-height: max(var(--scrollymap-map-height, 560px), 100vh);
}

/* Mapa embebido actúa como background del section */
#scrollymap #map {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Header dentro de la sección embebida */
#scrollymap .scrollymap-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 20;
}

/* Paneles embebidos (lado derecho) */
#scrollymap .scrollymap-panels {
  position: absolute;
  top: 0; right: 0;
  width: 38%;
  height: 100%;
  padding-top: var(--scrollymap-header-height);
  overflow-y: auto;
  z-index: 10;
  pointer-events: auto;
}

/* ===========================
   ESTADO PINNED (desktop only)
   =========================== */
@media (min-width: 721px) {
  /* When panels are fixed (desktop/standalone), ensure the scrollymap section
     itself occupies the full viewport so the next section does not slide up
     beneath the fixed panels. This prevents visual overlap in the normal
     non-pinned or pinned states where children are fixed/absolute. */
  #scrollymap { height: 100vh; }

  #scrollymap.pinned {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9998;
  }
  #scrollymap.pinned #map {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }
  #scrollymap.pinned .scrollymap-header {
    z-index: 100000 !important;
    pointer-events: auto;
    /* Keep header fixed to viewport when scrollymap is pinned so it is not clipped */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
  #scrollymap.pinned .scrollymap-panels {
    position: absolute;
    top: 0; right: 0;
    width: 38%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding-top: var(--scrollymap-header-height);
    /* ensure last panel can be scrolled into view when pinned */
    scroll-padding-bottom: 50px;
    scroll-padding-top: calc(var(--scrollymap-header-height) + 8px);
  }
  #scrollymap.pinned .scrollymap-panel {
    scroll-margin-top: calc(var(--scrollymap-header-height) + 8px);
    box-sizing: border-box;
    overflow: visible;
  }
}

/* Flags adicionales */
#scrollymap.force-pin { position: relative; } /* permite forzar pin en embebido */
.scrollymap-spacer { min-height: 60vh; height: auto; } /* spacer can be sized by JS; provide sensible min-height fallback */

/* ===========================
   SMALL SCREENS (<= 720px)
   =========================== */

@media (max-width: 720px) {
  /* Header */
  .scrollymap-header h2 {
    font-size: 1.4em !important;
    line-height: 1.1;
    margin: 0 1em;
  }
  .scrollymap-header p {
    font-size: 0.8em;
    padding: 0 1em;
  }

  /* Paneles móviles (base) */
  .scrollymap-panels {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 4vw);
    max-width: 760px;
    position: fixed;
    top: 25vh;
    /* allow panels to expand with content; container scrolls up to full viewport height */
    height: 100vh;
    max-height: 100vh;
    padding-top: 60px;
    padding-bottom: 70px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smoother scrolling on iOS */
    touch-action: pan-y; /* allow vertical pan inside panels */
    gap: 20rem; /* respiración vertical entre bloques */
    overscroll-behavior: auto; /* allow scroll chaining when at edges */
    overflow-anchor: none;
  }
  .scrollymap-panel {
    margin-bottom: 6rem;
    padding: 1.3rem;
    width: 90vw;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    /* Allow transforms for entrance animations (removed previous `!important`). */
    overflow: visible;
    /* ensure padding is included in width/height calculations so panels grow to fit content */
    box-sizing: border-box;
  }

  /* Efecto inicial: mostrar mapa primero */
  .scrollymap-panels.preload-hidden { pointer-events: none; }
  .scrollymap-panels.preload-hidden .scrollymap-panel {
  /* Start panels well below the viewport so they consistently
    animate upwards into view (always coming from below). Using
    a viewport-relative translate makes their origin independent
    of parent transforms during mobilePanelTranslate. We pick a
    distance much larger than the viewport so panels originate
    from as far down as possible on mobile (helps the visual
    effect on tall/short screens). */
   opacity: 0;
  /* start at configurable entry point (default ~= where the yellow line sits) */
  transform: translateY(var(--scrollymap-entry, 300vh)) scale(0.98);
   transition: opacity 360ms ease, transform 480ms cubic-bezier(.2,.9,.2,1);
   will-change: transform, opacity;
   backface-visibility: hidden;
   /* Promote to its own layer for smoother animation */
  transform: translateZ(0) translateY(var(--scrollymap-entry, 300vh)) scale(0.98);
  }
  .scrollymap-panels.revealed { pointer-events: auto; }
  .scrollymap-panels.revealed .scrollymap-panel {
    opacity: 1; transform: translateY(0) scale(1);
  }

  /* Mapa: sutil bajada de foco + overlay */
  #map {
    filter: saturate(0.88) brightness(0.92) contrast(0.98);
  }
  #map::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(12,12,12,0.14);
    pointer-events: none;
    z-index: 1;
  }

  /* Embebido en móvil: forzar panel central, ancho 90vw */
  #scrollymap .scrollymap-panels {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 0;
    width: 90vw;
    /* let the embedded panels expand naturally; container limited to viewport height */
    height: 100vh;
    padding-top: 60px;
    padding-bottom: 70px;
    overflow-y: auto;
    z-index: 30;
    pointer-events: auto;
  }

  .newheight {
    /* Prefer min-height so content can expand if needed */
    min-height: 30vh !important;
    height: auto !important;
  }

  /* Prevent the map from being interactive on mobile: disable touch gestures
     (pan/zoom) and pointer events so the map stays fixed while the user
     interacts with panels. This is intentionally mobile-only. */
  #map, #map * {
    touch-action: none !important;
    -ms-touch-action: none !important;
    pointer-events: none !important;
  }

  /* Ensure header sits above panels initially on mobile */
  #scrollymap .scrollymap-header {
    z-index: 80 !important;
    pointer-events: auto;
  }
  #scrollymap .scrollymap-panel {
    width: 90vw;
    max-width: 760px;
    margin-left: auto; margin-right: auto;
    position: relative;
    overflow: visible;
    /* Allow transforms; do not force none with !important. */
    transform: none;
  }

  /* Mobile pin/sticky CSS removed: keep base mobile layout but do not
     apply additional pinned/mobile-sticky positioning or visibility
     rules. */
  /* Restore minimal mobile pin layout so panels are centered and full-height
     when the section becomes pinned/mobile-sticky. We avoid any visibility
     toggles here (panels remain visible when unpinned). */
  #scrollymap.pinned .scrollymap-panels,
  #scrollymap.mobile-sticky .scrollymap-panels {
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: 90vw !important;
    height: 100vh !important;
    max-height: calc(100vh - var(--scrollymap-header-height, 60px)) !important;
    padding-top: var(--scrollymap-header-height, 60px);
    padding-bottom: 0px;
    overflow-y: auto;
    z-index: 60;
    box-sizing: border-box;
  }
  #scrollymap.pinned {
    height: 100vh !important;
    overflow: visible !important;
  }
  #scrollymap.pinned .scrollymap-panel,
  #scrollymap.mobile-sticky .scrollymap-panel {
    scroll-margin-top: calc(var(--scrollymap-header-height, 60px) + 8px);
    overflow: visible;
    width: 90vw; max-width: 760px;
    margin-left: auto; margin-right: auto;
  }

  /* Ocultar labels de nivel estado (DivIcons) en móvil */
  .state-label-div, .state-label-div * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Mobile visibility controlled by base classes; no auto-hide/auto-show
     tied to pinned/mobile-sticky on small screens. */
  /* Removed mobile-sticky CSS: no fixed headers/panels controlled by CSS on mobile. */

  /* Optional dev helper: add class 'dev-visible' to the sentinel to visualize it during debugging */
  #scrollymap-sentinel.dev-visible { display:block; width:100%; height:12px; background:magenta; opacity:0.85; pointer-events:none; }
}
/* ===========================
   FIN STYLE
   =========================== */

/* Ensure the last panel can fully be revealed when the scrollymap is NOT pinned.
   We avoid changing individual panel heights; instead add extra bottom spacing
   so the final block can scroll into view without being clipped. */
#scrollymap:not(.pinned) .scrollymap-panels {
  padding-bottom: 50px; /* reserve room for final panel */
}
#scrollymap:not(.pinned) .scrollymap-panel:last-child {
  margin-bottom: 320px; /* ensure the last block has extra breathing room */
  scroll-margin-bottom: 320px;
}

@media (max-width:720px) {
  /* On mobile give a bit more bottom room so the final panel doesn't trigger
     an immediate unpin when the user reaches the end — helps avoid jumpback. */
  #scrollymap:not(.pinned) .scrollymap-panel:last-child {
    margin-bottom: 420px;
    scroll-margin-bottom: 420px;
  }
}



/* Leaving animation: when panels are about to unpin, apply a subtle
   upward motion so it looks like the panels exit the map area before
   the section fully unfixed. The JS will toggle the 'leaving' class. */
#scrollymap.pinned .scrollymap-panels.leaving,
#scrollymap.mobile-sticky .scrollymap-panels.leaving {
  transform: translateY(-6vh) !important;
  opacity: 0.92 !important;
  transition: transform 360ms ease, opacity 260ms ease;
  will-change: transform, opacity;
}