/* ==========================================================================
   microciudades.css — página huérfana reconstruida desde capturas del
   editor de Wix (ver SPEC §7). Usa los tokens/reset de base.css.

   Estructura: una sola sección alta (.microciudades__seccion) que combina
   los "Bloque 1" y "Bloque 2" del SPEC. Dentro, ".microciudades__pin" es
   position:sticky y mantiene fondo + franja + panel de texto fijos en
   pantalla mientras el usuario baja; los 9 ODS (".microciudades__ods-item")
   viven en flujo absoluto normal (no sticky) repartidos en diagonal por la
   mitad izquierda, así que van entrando por su cuenta según se hace scroll.
   El reveal usa el contrato compartido de main.js: [data-reveal] + .visible.

   FALTA: el SPEC no mide con exactitud la franja negra superior, el ancho
   del panel de texto, el alto de la capa fija (pin) ni las coordenadas
   de dispersión de los 9 ODS (no son alcanzables navegando, sólo hay
   capturas del editor). Los valores de abajo son estimaciones propias,
   razonables y coherentes con la escala del resto del sitio (vw, tokens
   de base.css), no medidas tomadas del DOM real. Los tamaños de número
   (~5vw) y nombre (~1vw) de cada ODS sí vienen dados por el SPEC §7.
   ========================================================================== */

.microciudades__seccion{
  position:relative;
  min-height:300vw; /* recorrido de scroll suficiente para que el pin (100vh)
                        siga "pegado" durante los 9 ODS en proporciones de
                        pantalla habituales antes de soltarse hacia el pie */
  background:#05070a;
  /* SIN overflow:hidden aquí: un ancestro con overflow!=visible pasa a ser
     la referencia de scroll de un position:sticky descendiente, y como
     .microciudades__seccion nunca desborda ni tiene scroll propio, el pin
     dejaba de pegarse (se movía con la página como si fuera estático) y
     la Tierra sólo se veía en el primer tramo: de ahí el negro debajo. */
}

/* ---------- capa fija: fondo + franja + panel de texto ----------
   height:100vh (no vw): la Tierra tiene que cubrir el alto REAL de la
   ventana durante todo el recorrido del bloque ODS, sea cual sea su
   proporción — con un alto en vw (56.25vw, pensado sólo para 16:9)
   quedaba corto en cualquier otra proporción y se veía negro por debajo. */
.microciudades__pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  z-index:0;
}

.microciudades__fondo{
  position:absolute;
  inset:0;
  background:url(../img/tierra-fondo.jpg) center/cover no-repeat;
}
.microciudades__fondo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(4,6,10,.1) 0%, rgba(4,6,10,.45) 55%, rgba(4,6,10,.72) 100%);
}

.microciudades__franja{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:4.4vw;
  background:var(--negro);
  z-index:2;
}

.microciudades__panel{
  position:absolute;
  z-index:2;
  right:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  width:35.5vw;   /* "CIUDADES" mide ~35vw: con 30vw el rótulo se salía por el
                     borde derecho. text-align:right NO evita el desborde en
                     LTR, así que el panel tiene que caber la palabra larga. */
}

.microciudades__titulo{
  margin:0 0 1.8vw;
  font-family:var(--font-titular);
  font-weight:700;
  line-height:0.85;
  letter-spacing:-0.03em;
  color:var(--blanco);
  text-align:right;   /* CIUDADES es más ancho que el panel: alineado a la
                          derecha, el desborde cae hacia el hueco vacío de
                          la izquierda en vez de salirse por el borde. */
}
.microciudades__titulo span{ display:block; font-size:6.4vw; }
.microciudades__titulo-micro{ margin-right:0.35vw; } /* MICRO ligeramente a la izquierda de CIUDADES */

.microciudades__parrafo{
  width:21vw;
  max-width:100%;
  margin-left:auto;   /* más estrecho que el panel: pegado a la derecha,
                          alineado con el borde de CIUDADES */
  font-family:var(--font-base);
  font-weight:600;
  font-size:0.95vw;
  line-height:1.5;
  color:var(--blanco);
  text-align:justify;
}
.microciudades__parrafo + .microciudades__parrafo{ margin-top:1.1vw; }

/* ---------- capa en flujo normal: rótulo ODS + los 9 pictogramas ---------- */
.microciudades__ods{
  position:absolute;
  inset:0;
  z-index:1;
  padding-inline:var(--gutter);
  pointer-events:none;
}

.microciudades__ods-rotulo{
  position:absolute;
  top:10vw; /* ya no depende del alto del pin (100vh): el rótulo abre la
               secuencia de ODS arriba a la izquierda, dentro del primer
               encuadre, tal cual las capturas del editor */
  left:var(--gutter);
  margin:0;
  font-family:var(--font-titular);
  font-weight:700;
  font-size:2.6vw;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--blanco);
}

.microciudades__ods-lista{
  position:absolute;
  left:var(--gutter);
  right:0;
  top:18vw;
  height:190vw;
}

.microciudades__ods-item{
  position:absolute;
  top:var(--top);
  left:var(--left);
  width:11vw;
  min-width:92px;
  text-align:center;
  transform:rotate(var(--rot));
  pointer-events:auto;
}

.microciudades__ods-num{
  display:block;
  font-family:var(--font-titular);
  font-weight:700;
  font-size:5vw;
  line-height:1;
  color:var(--blanco);
}

.microciudades__ods-picto{
  display:block;
  width:3.6vw;
  height:3.6vw;
  min-width:30px;
  min-height:30px;
  margin:0.4vw auto;
}

.microciudades__ods-nombre{
  display:block;
  font-family:var(--font-base);
  font-weight:600;
  font-size:1vw;
  line-height:1.25;
  letter-spacing:0.01em;
  color:var(--blanco);
  text-transform:uppercase;
}

/* ---------- reveal escalonado ---------------------------------------------
   [data-reveal] vive en el CONTENEDOR (.microciudades__ods-lista, que
   siempre tiene área real: left/right/top/height fijos) y no en cada
   <li>: un IntersectionObserver no dispara sobre un elemento que arranca
   con opacity:0 (y para colmo dentro de una pila de contenedores
   position:absolute), exactamente el fallo que ya tuvimos en la home
   (ver home.css, patrón .pais[data-reveal].visible .pais__rotulo /
   .cifras__grid[data-reveal].visible .cifras__card). Además el fundido
   usa "transition" y no "animation": con 9 nodos escalonados muy abajo
   en una página larga, una animación por keyframes puede terminar sin
   pintarse (el navegador no llega a componer nunca un fotograma con el
   elemento a la vista real), dejando el ODS invisible aunque su estilo
   computado ya marque opacity:1; la transición no tiene ese problema. */
@media (prefers-reduced-motion:no-preference){
  html.reveal-ready .microciudades__ods-item{
    opacity:0;
    transform:rotate(var(--rot)) translateY(3vw) scale(.85);
    transition:opacity 900ms var(--ease), transform 900ms var(--ease);
    transition-delay:var(--delay);
  }
  .microciudades__ods-lista[data-reveal].visible .microciudades__ods-item{
    opacity:1;
    transform:rotate(var(--rot)) translateY(0) scale(1);
  }
}

/* ==========================================================================
   RESPONSIVE — @media (max-width:500px): una sola columna, sin pin ni
   dispersión diagonal; los ODS pasan a una rejilla simple en flujo normal.
   ========================================================================== */
@media (max-width:500px){
  .microciudades__seccion{ min-height:0; overflow:visible; }

  .microciudades__pin{ position:relative; height:auto; min-height:100vh; }
  .microciudades__franja{ height:56px; }

  /* El velo de la Tierra es un degradado horizontal, oscuro solo a la derecha,
     donde vive el panel en escritorio. En movil el panel ocupa todo el ancho y
     el texto caia sobre la parte iluminada del globo. Aqui el velo pasa a
     vertical para que toda la columna de texto tenga fondo. */
  .microciudades__fondo::after{
    background:linear-gradient(180deg,
      rgba(4,6,10,.90) 0%,
      rgba(4,6,10,.74) 45%,
      rgba(4,6,10,.52) 100%);
  }

  .microciudades__panel{
    position:relative; /* no "static": si pierde el positioning, deja de
                           tener z-index y .microciudades__fondo (absolute)
                           pinta por encima suyo — el texto queda invisible
                           aunque su color/opacidad computados sean correctos */
    transform:none;
    width:100%;
    padding:96px 0 40px;
  }
  .microciudades__titulo{ text-align:left; }
  .microciudades__titulo span{ font-size:56px; }
  .microciudades__titulo-micro{ margin-right:0; margin-left:-0.35vw; }
  .microciudades__parrafo{ width:100%; margin-left:0; font-size:15px; text-align:left; }

  .microciudades__ods{ position:relative; inset:auto; padding-inline:24px; }
  .microciudades__ods-rotulo{ position:static; font-size:32px; margin:32px 0 24px; }

  .microciudades__ods-lista{
    position:relative; inset:auto; top:auto; left:auto; right:auto; height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px 16px;
    padding-bottom:56px;
  }
  .microciudades__ods-item{ position:static; width:100%; transform:none; }
  .microciudades__ods-num{ font-size:40px; }
  .microciudades__ods-picto{ width:48px; height:48px; }
  .microciudades__ods-nombre{ font-size:12px; }
}
@media (max-width:500px) and (prefers-reduced-motion:no-preference){
  html.reveal-ready .microciudades__ods-item{ transform:translateY(20px); }
  .microciudades__ods-lista[data-reveal].visible .microciudades__ods-item{ transform:translateY(0); }
}