/* Santa Ana V3 · capa de escenas. Cargar después de v3-system.css. */

/* La geometría de lectura existe también sin JS. Los ODS determinan la
   altura real, en lugar de una pista absoluta de 300vw con texto diminuto. */
html[data-sa-version="4"] .microciudades__seccion {
  display:grid; grid-template-columns:minmax(0,1fr); min-height:0;
  background:#070f1b;
}
html[data-sa-version="4"] .microciudades__pin {
  grid-column:1; grid-row:1; align-self:start;
  top:var(--header-alto); height:calc(100svh - var(--header-alto));
}
html[data-sa-version="4"] .microciudades__franja { display:none; }
html[data-sa-version="4"] .microciudades__panel {
  right:var(--sa-space); width:41%; max-width:590px;
}
html[data-sa-version="4"] .microciudades__titulo { margin-bottom:28px; }
html[data-sa-version="4"] .microciudades__titulo span { font-size:clamp(44px,5.7vw,90px); line-height:.92; }
html[data-sa-version="4"] .microciudades__parrafo {
  width:100%; max-width:42ch; font-family:var(--fuente-cuerpo-lectura,Georgia,serif);
  font-size:clamp(17px,1.6vw,22px); line-height:1.5; font-weight:400; text-align:left;
}
html[data-sa-version="4"] .microciudades__parrafo + .microciudades__parrafo { margin-top:20px; }
html[data-sa-version="4"] .microciudades__fondo::after {
  background:linear-gradient(90deg,rgba(4,8,15,.26),rgba(4,8,15,.7) 53%,rgba(4,8,15,.91));
}
html[data-sa-version="4"] .microciudades__ods {
  grid-column:1; grid-row:1; position:relative; inset:auto;
  width:50%; padding:64px var(--sa-space) 120px;
}
html[data-sa-version="4"] .microciudades__ods-rotulo {
  position:relative; inset:auto; font-size:clamp(21px,2.4vw,36px);
  line-height:1.12; margin:0 0 64px;
}
html[data-sa-version="4"] .microciudades__ods-lista {
  position:relative; inset:auto; height:auto; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(80px,10vw,160px);
}
html[data-sa-version="4"] .microciudades__ods-item {
  position:relative; inset:auto; width:clamp(150px,17vw,230px);
  min-width:0; justify-self:start; transform-origin:center;
}
html[data-sa-version="4"] .microciudades__ods-item:nth-child(even) { justify-self:end; }
html[data-sa-version="4"] .microciudades__ods-num { font-size:clamp(56px,5.5vw,84px); }
html[data-sa-version="4"] .microciudades__ods-picto { width:56px; height:56px; margin:16px auto; }
html[data-sa-version="4"] .microciudades__ods-nombre { font-size:15px; line-height:1.4; }

@media (min-width:761px) and (max-height:700px) {
  html[data-sa-version="4"] .microciudades__titulo span { font-size:42px; }
  html[data-sa-version="4"] .microciudades__titulo { margin-bottom:20px; }
  html[data-sa-version="4"] .microciudades__parrafo { font-size:16px; line-height:1.4; }
}

/* Los estilos heredados descubren los países y cifras con keyframes propios.
   V3 sustituye sólo esas animaciones para que cada escena tenga un conductor. */
html[data-sa-version="4"].sa-v3-scenes .pais__rotulo,
html[data-sa-version="4"].sa-v3-scenes .pais__frente,
html[data-sa-version="4"].sa-v3-scenes .cifras__card,
html[data-sa-version="4"].sa-v3-scenes .microciudades__ods-item{
  animation:none !important;
}

html[data-sa-version="4"].sa-v3-scenes .microciudades__ods-item{
  clip-path:none !important;
  opacity:1 !important;
  transform:rotate(var(--rot,0deg)) !important;
  transition:none !important;
}

/* Las cifras son contenido, no una escena de este controlador. V4 las deja
   completas para que la capa de gráficos de la home pueda actuar alrededor. */
html[data-sa-version="4"].sa-v3-scenes .cifras__card{
  clip-path:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

@media (min-width:761px){
  /* La escena conserva la Tierra como contexto, pero un velo localizado da
     contraste a los nueve ODS sin velar el panel editorial de la derecha. */
  html[data-sa-version="4"].sa-v3-scenes .microciudades__ods{
    background:linear-gradient(90deg,
      rgba(4,6,10,.58) 0,
      rgba(4,6,10,.4) 38vw,
      rgba(4,6,10,0) 57vw);
  }

  html[data-sa-version="4"].sa-v3-scenes .microciudades__ods-rotulo,
  html[data-sa-version="4"].sa-v3-scenes .microciudades__ods-lista{
    z-index:1;
  }
}

@media (prefers-reduced-motion:no-preference){
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .pais.sa-v3-country-ready .pais__rotulo,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .pais.sa-v3-country-ready .pais__rotulo{
    clip-path:none !important;
    opacity:0;
    transform:translate3d(0,var(--sa-v3-country-y,44px),0);
    transition:opacity 520ms var(--sa-enter,cubic-bezier(.16,1,.3,1)), transform 720ms var(--sa-enter,cubic-bezier(.16,1,.3,1));
  }

  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .pais.sa-v3-country-active .pais__rotulo,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .pais.sa-v3-country-active .pais__rotulo{
    opacity:1;
  }

  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .pais__frente,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .pais__frente{
    clip-path:none !important;
    transform:translate3d(var(--sa-v3-pointer-x,0px),var(--sa-v3-pointer-y,0px),0) scale(1.018) !important;
    transition:transform 220ms var(--sa-settle,cubic-bezier(.22,.61,.36,1));
  }

  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .pais__frente:hover,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .pais__frente:hover{
    will-change:transform;
  }

  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .cifras__card.sa-v3-figure-ready,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .cifras__card.sa-v3-figure-ready{
    clip-path:none !important;
    opacity:0;
    transform:translate3d(0,24px,0);
    transition:opacity 480ms var(--sa-enter,cubic-bezier(.16,1,.3,1)), transform 620ms var(--sa-enter,cubic-bezier(.16,1,.3,1));
  }

  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .cifras__card.sa-v3-figure-active,
  html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .cifras__card.sa-v3-figure-active{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  @media (min-width:761px){
    html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="standard"] .microciudades__ods-item.sa-v3-ods-active,
    html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="high"] .microciudades__ods-item.sa-v3-ods-active{
      opacity:var(--sa-v3-ods-opacity,1) !important;
      transform:translate3d(0,var(--sa-v3-ods-y,0px),0) rotate(var(--rot,0deg)) scale(var(--sa-v3-ods-scale,1)) !important;
      transition:transform 180ms linear, opacity 180ms linear;
      will-change:transform,opacity;
    }
  }
}

/* La preferencia y el modo protegido conservan la composición y todos los
   valores finales, pero eliminan movimiento, filtros y vídeo decorativo. */
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="protected"] .pais__rotulo,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="reduced"] .pais__rotulo,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="protected"] .pais__frente,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="reduced"] .pais__frente,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="protected"] .cifras__card,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="reduced"] .cifras__card,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="protected"] .microciudades__ods-item,
html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="reduced"] .microciudades__ods-item{
  clip-path:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}

html[data-sa-version="4"][data-sa-motion="protected"] .pais__fondo,
html[data-sa-version="4"][data-sa-motion="reduced"] .pais__fondo { will-change:auto; }

html[data-sa-version="4"].sa-v3-scenes[data-sa-motion="protected"] .microciudades__fondo::after{
  background:linear-gradient(90deg,rgba(4,6,10,.62),rgba(4,6,10,.82)) !important;
}

@media (max-width:760px){
  html[data-sa-version="4"] .microciudades__seccion { display:block; }
  html[data-sa-version="4"] .microciudades__pin {
    position:relative; top:auto; height:auto; min-height:0;
  }
  html[data-sa-version="4"] .microciudades__panel {
    position:relative; inset:auto; transform:none;
    width:100%; max-width:none; padding:64px var(--sa-space) 48px;
  }
  html[data-sa-version="4"] .microciudades__titulo { text-align:left; }
  html[data-sa-version="4"] .microciudades__titulo span { font-size:clamp(42px,11vw,74px); }
  html[data-sa-version="4"] .microciudades__parrafo { margin-left:0; max-width:none; font-size:18px; }
  html[data-sa-version="4"] .microciudades__fondo::after {
    background:linear-gradient(180deg,rgba(4,8,15,.84),rgba(4,8,15,.73));
  }
  html[data-sa-version="4"] .microciudades__ods { width:100%; padding:32px var(--sa-space) 72px; }
  html[data-sa-version="4"] .microciudades__ods-rotulo { font-size:24px; margin-bottom:40px; }
  html[data-sa-version="4"] .microciudades__ods-lista { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 20px; padding:0; }
  html[data-sa-version="4"] .microciudades__ods-item { width:100%; justify-self:stretch; }
  html[data-sa-version="4"] .microciudades__ods-num { font-size:48px; }
  html[data-sa-version="4"] .microciudades__ods-nombre { font-size:12px; }
  /* En móvil los nueve ODS siguen en su rejilla de flujo: no hay ilusión de
     profundidad que pueda sacar un elemento del encuadre o de la lectura. */
  html[data-sa-version="4"].sa-v3-scenes .microciudades__ods-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  html[data-sa-version="4"] .pais__fondo { will-change:auto; }
  html[data-sa-version="4"].sa-v3-scenes .pais__rotulo,
  html[data-sa-version="4"].sa-v3-scenes .pais__frente,
  html[data-sa-version="4"].sa-v3-scenes .cifras__card,
  html[data-sa-version="4"].sa-v3-scenes .microciudades__ods-item{
    clip-path:none !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }
}