/* ====== BASE GLOBAL ====== */
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: Arial, sans-serif;
  font-size: 1.2vw;
  overflow-x: hidden;
}

#fondo{
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: block;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ====== LOGOS COMUNES ====== */
#Logo_SEECH{
  position: absolute;
  width: 24vw;
  left: 1.5vw;
  top: 2vw;
}

#logo_MEyAD{
  position: absolute;
  width: 22vw;
  left: 76vw;
  top: 1.8vw;
}

#bienvenidos{
  position: absolute;
  width: 38vw;
  left: 31.8vw;
  top: 2.2vw;
}

#flecha_adelante{
  position: absolute;
  width: 4vw;
  left: 92vw;
  top: 20vw;
}

#flecha_atras{
  position: absolute;
  width: 4vw;
  left: 60vw;
  top: 20vw;
}

/* ====== PÁGINA 1 ====== */
#ehecatl{ width:10vw; left:5.5vw; top:9.32vw; position:absolute; }
#de_donde_provienen{ width:13vw; left:20.5vw; top:11.65vw; position:absolute; }
#cuando_los_ratones{ width:13vw; left:38.6vw; top:13.8vw; position:absolute; }
#el_caracol{ width:10vw; left:5.5vw; top:30.8vw; position:absolute; }
#el_chocolate{ width:13vw; left:22vw; top:26.3vw; position:absolute; }
#el_coco{ width:13vw; left:38.6vw; top:28.6vw; position:absolute; }
#el_barro{ width:13vw; left:22vw; top:41.5vw; position:absolute; }
#el_agua{ width:13vw; left:38.6vw; top:41.5vw; position:absolute; }
#candido{ width:13vw; left:5.5vw; top:46.2vw; position:absolute; }

/* ====== PÁGINA 2 ====== */
#el_cocodrilo{ width:10vw; left:5.5vw; top:11.7vw; position:absolute; }
#el_desayuno{ width:9.5vw; left:22.5vw; top:9vw; position:absolute; }
#el_enmascarado{ width:11vw; left:38.6vw; top:10.5vw; position:absolute; }
#el_leon{ width:9vw; left:5.5vw; top:26.7vw; position:absolute; }
#el_papel{ width:13vw; left:20vw; top:26.3vw; position:absolute; }
#el_pizarron{ width:13vw; left:38.6vw; top:26.6vw; position:absolute; }
#el_reloj{ width:10vw; left:5.5vw; top:42.8vw; position:absolute; }
#fuerzas{ width:11vw; left:22vw; top:41.3vw; position:absolute; }
#la_lluvia{ width:13vw; left:38.6vw; top:43.1vw; position:absolute; }

/* ====== LA ARAÑA LECTORA – PÁGINA 3 ====== */

#la_maestra{ position: absolute; width: 10vw; left: 5.7vw; top: 14.3vw;}
#la_noche{ position: absolute; width: 9.5vw; left: 24.2vw; top: 12.8vw;}
#los_secretos{ position: absolute; width: 9.5vw; left: 42.4vw; top: 10vw;}
#manu{ position: absolute; width: 8vw; left: 5.5vw; top: 26.9vw;}
#la_gallina{ position: absolute; width: 13vw; left: 20.8vw; top: 26.3vw;}
#no_te_lo_creo{ position: absolute; width: 11vw; left: 40.7vw; top: 26.5vw;}
#teseo{ position: absolute; width: 10vw; left: 5.5vw; top: 43.4vw;}
#alibaba{ position: absolute; width: 9vw; left: 22.8vw; top: 41.6vw;}
#la_flor{ position: absolute; width: 13vw; left: 38.9vw; top: 41.3vw;}

/* ====== LA ARAÑA LECTORA – PÁGINA 4 ====== */

#gritar{ position: absolute; width: 10vw; left: 5.7vw; top: 14.9vw;}
#la_cigarra{ position: absolute; width: 9.5vw; left: 24.2vw; top: 10.65vw;}
#la_descomunal{ position: absolute; width: 9.5vw; left: 42.4vw; top: 10.65vw;}
#las_orejas{ position: absolute; width: 11vw; left: 5.5vw; top: 28.3vw;}
#los_moros{ position: absolute; width: 13vw; left: 21.1vw; top: 26.3vw;}
#se_puede_escuchar{ position: absolute; width: 13vw; left: 38.9vw; top: 29.2vw;}
#simbad{ position: absolute; width: 9vw; left: 5.5vw; top: 41.4vw;}
#un_regalo{ position: absolute; width: 9.8vw; left: 22vw; top: 41.45vw;}
#aguilas{ position: absolute; width: 13vw; left: 38.7vw; top: 44.45vw;}

/* ====== LA ARAÑA LECTORA – PÁGINA 5 ====== */

#arboles{ position: absolute; width: 10vw; left: 5.7vw; top: 12.5vw;}
#buenos_dias{ position: absolute; width: 14vw; left: 22.2vw; top: 14.15vw;}
#geometria{ position: absolute; width: 9.5vw; left: 42.4vw; top: 10.6vw;}
#topito{ position: absolute; width: 11vw; left: 5.5vw; top: 31.6vw;}
#cubo{ position: absolute; width: 11vw; left: 22.2vw; top: 26.6vw;}
#pintores{ position: absolute; width: 13vw; left: 38.9vw; top: 28.1vw;}
#salvador{ position: absolute; width: 13vw; left: 5.5vw; top: 43.2vw;}
#towi{ position: absolute; width: 10.7vw; left: 24.9vw; top: 41.35vw;}
#viaje{ position: absolute; width: 10vw; left: 41.8vw; top: 41.6vw;}

/* Flecha específica Pág. 5 */
#flecha_atras{
  position: absolute;
  width: 4vw;
  left: 55vw;
  top: 28vw;
}


/* Flechas específicas Pág. 4 */
#flecha_ade_


/* Flechas específicas Pág. 3 */
#flecha_adelante{
  position: absolute;
  width: 4vw;
  left: 85vw;
  top: 20vw;
}

#flecha_adelante_02{
  position: absolute;
  width: 4vw;
  left: 85vw;
  top: 20vw;
}

#flecha_atras{
  position: absolute;
  width: 4vw;
  left: 60vw;
  top: 20vw;
}

#flecha_atras_03{
  position: absolute;
  width: 4vw;
  left: 57vw;
  top: 20vw;
}

#flecha_atras_u{
  position: absolute;
  width: 4vw;
  left: 57vw;
  top: 20vw;
}

/* ====== FONDO ====== */
#fondo > img:last-child{
  width: 100vw;
  height: auto;
  display: block;
}

/* ====== ZOOM ====== */
#fondo img{
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

#fondo img:hover{
  transform: scale(1.8);
  z-index: 10;
  position: relative;
}

/* ====== EXCLUSIÓN DE ZOOM ====== */
#Logo_SEECH img,
#logo_MEyAD img,
#bienvenidos img,
#fondo > img:last-child{
  transform: none !important;
  transition: none !important;
  cursor: default !important;
  z-index: auto !important;
  position: static !important;
}