/* B4 · Microciudades: introducción editorial + escena ODS en flujo. */
html[data-sa-version="4"] .microciudades { background:var(--sa-paper,#fff); }

html[data-sa-version="4"] .b4-micro-intro {
  padding:clamp(72px,10vw,168px) var(--sa-space) clamp(64px,8vw,128px);
  background:var(--sa-paper,#fff); color:var(--sa-ink,#17243a);
}

html[data-sa-version="4"] .b4-micro-intro__reticula {
  width:min(100%,1440px); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  align-items:start; gap:clamp(36px,8vw,140px);
}

html[data-sa-version="4"] .b4-micro-intro .microciudades__titulo {
  margin:0; color:var(--sa-ink,#17243a); text-align:left;
  font-family:var(--font-titular); letter-spacing:-.045em; line-height:.86;
}
html[data-sa-version="4"] .b4-micro-intro .microciudades__titulo span {
  display:block; font-size:clamp(52px,6.8vw,112px);
}
html[data-sa-version="4"] .b4-micro-intro .microciudades__titulo-micro { margin:0; }

html[data-sa-version="4"] .b4-micro-intro__copy {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px);
  padding-top:clamp(8px,1.2vw,20px); border-top:1px solid var(--sa-line,rgba(23,36,58,.17));
}
html[data-sa-version="4"] .b4-micro-intro .microciudades__parrafo {
  width:auto; max-width:none; margin:0; color:var(--sa-ink,#17243a);
  font-family:var(--fuente-cuerpo-lectura,Georgia,serif); font-size:clamp(17px,1.35vw,21px);
  font-weight:400; line-height:1.55; text-align:left;
}

/* La altura procede de la retícula ODS. La Tierra acompaña el recorrido
   sticky, pero no contiene ni interfiere con el texto. */
html[data-sa-version="4"] .b4-micro-escena {
  display:grid; grid-template-columns:minmax(0,1fr); min-height:0;
  position:relative; background:#07101d;
}
html[data-sa-version="4"] .b4-micro-escena__tierra {
  grid-column:1; grid-row:1; position:sticky; top:var(--header-alto);
  align-self:start; height:calc(100svh - var(--header-alto)); overflow:hidden; z-index:0;
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__fondo { inset:0; }
html[data-sa-version="4"] .b4-micro-escena .microciudades__fondo::after {
  background:linear-gradient(90deg,rgba(5,12,23,.84),rgba(5,12,23,.62) 52%,rgba(5,12,23,.18));
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__franja { display:none; }

html[data-sa-version="4"] .b4-micro-escena .microciudades__ods {
  grid-column:1; grid-row:1; position:relative; inset:auto; z-index:1;
  width:min(100%,980px); min-height:0; padding:clamp(72px,9vw,148px) var(--sa-space);
  pointer-events:auto; background:linear-gradient(90deg,rgba(5,12,23,.38),transparent 82%);
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-rotulo {
  position:relative; inset:auto; margin:0 0 clamp(52px,7vw,104px);
  color:#fff; font-size:clamp(24px,2.7vw,42px); line-height:1.04;
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-lista {
  position:relative; inset:auto; width:100%; height:auto; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(64px,8vw,132px) clamp(26px,6vw,108px);
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-item {
  position:relative; inset:auto; width:100%; min-width:0; min-height:154px;
  padding:0; text-align:left; transform-origin:center; pointer-events:auto;
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-item:nth-child(even) {
  margin-top:clamp(38px,5vw,82px); text-align:right;
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-num {
  font-size:clamp(58px,5.7vw,92px); line-height:.85;
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-picto {
  width:clamp(42px,3.5vw,58px); height:clamp(42px,3.5vw,58px); margin:14px 0;
}
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-item:nth-child(even) .microciudades__ods-picto { margin-left:auto; }
html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-nombre {
  font-size:clamp(12px,1vw,15px); line-height:1.34; letter-spacing:.035em;
}

@media (prefers-reduced-motion:no-preference) and (min-width:761px) {
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .b4-micro-escena .microciudades__ods-item.sa-v3-ods-active,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .b4-micro-escena .microciudades__ods-item.sa-v3-ods-active {
    transition:transform 260ms cubic-bezier(.16,1,.3,1), opacity 260ms cubic-bezier(.16,1,.3,1) !important;
  }
}

/* A esta anchura el título largo ya no comparte una columna demasiado
   estrecha con los dos textos. Ambos siguen en dos bloques editoriales. */
@media (min-width:761px) and (max-width:1100px) {
  html[data-sa-version="4"] .b4-micro-intro__reticula {
    grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr); gap:clamp(32px,4vw,48px);
  }
  html[data-sa-version="4"] .b4-micro-intro .microciudades__titulo span { font-size:clamp(46px,6vw,66px); }
  html[data-sa-version="4"] .b4-micro-intro__copy { gap:24px; }
}

@media (max-width:760px) {
  html[data-sa-version="4"] .b4-micro-intro { padding-block:72px; }
  html[data-sa-version="4"] .b4-micro-intro__reticula,
  html[data-sa-version="4"] .b4-micro-intro__copy { grid-template-columns:1fr; gap:30px; }
  html[data-sa-version="4"] .b4-micro-intro .microciudades__titulo span { font-size:clamp(48px,13vw,78px); }
  html[data-sa-version="4"] .b4-micro-escena { display:block; }
  html[data-sa-version="4"] .b4-micro-escena__tierra { position:absolute; inset:0; height:auto; }
  html[data-sa-version="4"] .b4-micro-escena .microciudades__ods { width:100%; padding:64px var(--sa-space) 76px; }
  html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-lista { gap:52px 24px; }
  html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-item { min-height:136px; }
  html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-item:nth-child(even) { margin-top:30px; }
  html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-num { font-size:clamp(44px,12vw,62px); }
  html[data-sa-version="4"] .b4-micro-escena .microciudades__ods-nombre { font-size:11px; }
}